From 4c73c9354cc3f30d39d5c91778dd1f16c77840f4 Mon Sep 17 00:00:00 2001 From: nagatomi Date: Fri, 27 Sep 2024 16:17:59 +0900 Subject: [PATCH] Fixed an issue where options of the same type could not be switched when multiple options were added. --- dist/bundle.js | 64 +++++++++++-------- .../genelator/base/ConverterModal.js | 42 ++++++++---- .../genelator/base/ConverterModal.jsx | 44 +++++++++---- 3 files changed, 99 insertions(+), 51 deletions(-) diff --git a/dist/bundle.js b/dist/bundle.js index c69db47..0eb0685 100644 --- a/dist/bundle.js +++ b/dist/bundle.js @@ -20416,18 +20416,30 @@ field: { converter: n, openConverter: a }, setField: r, } = t, - l = (0, e.useCallback)( + l = (0, e.useRef)(null); + (0, e.useEffect)(() => { + const e = n.split(''); + l.current.querySelectorAll('tr').forEach((t) => { + const n = t.querySelector('td'); + if (n) { + const a = n.textContent.trim(), + r = e.includes(a); + t.style.backgroundColor = r ? '#e6f3ff' : ''; + } + }); + }, [n]); + const i = (0, e.useCallback)( (e) => { - let t = n; - const a = new RegExp(e, 'i'); - -1 === t.search(a) - ? (t += e) - : ((t = t.replace(t.toUpperCase(), e)), (t = t.replace(t.toLowerCase(), e))), - r((e) => ({ ...e, converter: t })); + r((t) => { + const n = t.converter, + a = n.toLowerCase().indexOf(e.toLowerCase()); + let r = n; + return -1 === a ? (r += e) : (r = r.slice(0, a) + e + r.slice(a + e.length)), { ...t, converter: r }; + }); }, - [n, r] + [r] ), - i = (0, e.useCallback)(() => { + o = (0, e.useCallback)(() => { r((e) => ({ ...e, openConverter: !1 })); }, [r]); return e.createElement( @@ -20435,10 +20447,10 @@ null, e.createElement( si, - { open: a, title: 'コンバーター参照', onClose: i }, + { open: a, title: 'コンバーター参照', onClose: o }, e.createElement( 'table', - { className: 'acms-admin-table acms-admin-table-heading acms-admin-table-hover' }, + { className: 'acms-admin-table acms-admin-table-heading acms-admin-table-hover', ref: l }, e.createElement( 'tbody', null, @@ -20457,7 +20469,7 @@ e.createElement( 'td', null, - e.createElement('button', { className: 'acms-admin-btn', onClick: () => l('r') }, '追加') + e.createElement('button', { className: 'acms-admin-btn', onClick: () => i('r') }, '追加') ) ), e.createElement( @@ -20468,7 +20480,7 @@ e.createElement( 'td', null, - e.createElement('button', { className: 'acms-admin-btn', onClick: () => l('R') }, '追加') + e.createElement('button', { className: 'acms-admin-btn', onClick: () => i('R') }, '追加') ) ), e.createElement( @@ -20479,7 +20491,7 @@ e.createElement( 'td', null, - e.createElement('button', { className: 'acms-admin-btn', onClick: () => l('n') }, '追加') + e.createElement('button', { className: 'acms-admin-btn', onClick: () => i('n') }, '追加') ) ), e.createElement( @@ -20490,7 +20502,7 @@ e.createElement( 'td', null, - e.createElement('button', { className: 'acms-admin-btn', onClick: () => l('N') }, '追加') + e.createElement('button', { className: 'acms-admin-btn', onClick: () => i('N') }, '追加') ) ), e.createElement( @@ -20501,7 +20513,7 @@ e.createElement( 'td', null, - e.createElement('button', { className: 'acms-admin-btn', onClick: () => l('a') }, '追加') + e.createElement('button', { className: 'acms-admin-btn', onClick: () => i('a') }, '追加') ) ), e.createElement( @@ -20512,7 +20524,7 @@ e.createElement( 'td', null, - e.createElement('button', { className: 'acms-admin-btn', onClick: () => l('A') }, '追加') + e.createElement('button', { className: 'acms-admin-btn', onClick: () => i('A') }, '追加') ) ), e.createElement( @@ -20523,7 +20535,7 @@ e.createElement( 'td', null, - e.createElement('button', { className: 'acms-admin-btn', onClick: () => l('s') }, '追加') + e.createElement('button', { className: 'acms-admin-btn', onClick: () => i('s') }, '追加') ) ), e.createElement( @@ -20534,7 +20546,7 @@ e.createElement( 'td', null, - e.createElement('button', { className: 'acms-admin-btn', onClick: () => l('S') }, '追加') + e.createElement('button', { className: 'acms-admin-btn', onClick: () => i('S') }, '追加') ) ), e.createElement( @@ -20545,7 +20557,7 @@ e.createElement( 'td', null, - e.createElement('button', { className: 'acms-admin-btn', onClick: () => l('k') }, '追加') + e.createElement('button', { className: 'acms-admin-btn', onClick: () => i('k') }, '追加') ) ), e.createElement( @@ -20556,7 +20568,7 @@ e.createElement( 'td', null, - e.createElement('button', { className: 'acms-admin-btn', onClick: () => l('K') }, '追加') + e.createElement('button', { className: 'acms-admin-btn', onClick: () => i('K') }, '追加') ) ), e.createElement( @@ -20567,7 +20579,7 @@ e.createElement( 'td', null, - e.createElement('button', { className: 'acms-admin-btn', onClick: () => l('h') }, '追加') + e.createElement('button', { className: 'acms-admin-btn', onClick: () => i('h') }, '追加') ) ), e.createElement( @@ -20578,7 +20590,7 @@ e.createElement( 'td', null, - e.createElement('button', { className: 'acms-admin-btn', onClick: () => l('H') }, '追加') + e.createElement('button', { className: 'acms-admin-btn', onClick: () => i('H') }, '追加') ) ), e.createElement( @@ -20589,7 +20601,7 @@ e.createElement( 'td', null, - e.createElement('button', { className: 'acms-admin-btn', onClick: () => l('c') }, '追加') + e.createElement('button', { className: 'acms-admin-btn', onClick: () => i('c') }, '追加') ) ), e.createElement( @@ -20600,7 +20612,7 @@ e.createElement( 'td', null, - e.createElement('button', { className: 'acms-admin-btn', onClick: () => l('C') }, '追加') + e.createElement('button', { className: 'acms-admin-btn', onClick: () => i('C') }, '追加') ) ), e.createElement( @@ -20611,7 +20623,7 @@ e.createElement( 'td', null, - e.createElement('button', { className: 'acms-admin-btn', onClick: () => l('V') }, '追加') + e.createElement('button', { className: 'acms-admin-btn', onClick: () => i('V') }, '追加') ) ) ) diff --git a/lib/components/genelator/base/ConverterModal.js b/lib/components/genelator/base/ConverterModal.js index 30baa34..1ea307c 100644 --- a/lib/components/genelator/base/ConverterModal.js +++ b/lib/components/genelator/base/ConverterModal.js @@ -33,22 +33,37 @@ function ConverterModal(props) { field: { converter, openConverter }, setField, } = props; + const optionsRef = (0, _react.useRef)(null); + (0, _react.useEffect)(() => { + const converterList = converter.split(''); + const rows = optionsRef.current.querySelectorAll('tr'); + rows.forEach((row) => { + const tdElement = row.querySelector('td'); + if (tdElement) { + const tdText = tdElement.textContent.trim(); + const isMatch = converterList.includes(tdText); + row.style.backgroundColor = isMatch ? '#e6f3ff' : ''; + } + }); + }, [converter]); const onConverter = (0, _react.useCallback)( (addConverter) => { - let newConverter = converter; - const reg = new RegExp(addConverter, 'i'); - if (newConverter.search(reg) === -1) { - newConverter += addConverter; - } else { - newConverter = newConverter.replace(newConverter.toUpperCase(), addConverter); - newConverter = newConverter.replace(newConverter.toLowerCase(), addConverter); - } - setField((prevState) => ({ - ...prevState, - converter: newConverter, - })); + setField((prevState) => { + const currentConverter = prevState.converter; + const index = currentConverter.toLowerCase().indexOf(addConverter.toLowerCase()); + let newConverter = currentConverter; + if (index === -1) { + newConverter += addConverter; + } else { + newConverter = newConverter.slice(0, index) + addConverter + newConverter.slice(index + addConverter.length); + } + return { + ...prevState, + converter: newConverter, + }; + }); }, - [converter, setField] + [setField] ); const onOpenConverter = (0, _react.useCallback)(() => { setField((prevState) => ({ @@ -70,6 +85,7 @@ function ConverterModal(props) { 'table', { className: 'acms-admin-table acms-admin-table-heading acms-admin-table-hover', + ref: optionsRef, }, /*#__PURE__*/ _react.default.createElement( 'tbody', diff --git a/src/components/genelator/base/ConverterModal.jsx b/src/components/genelator/base/ConverterModal.jsx index db4f368..36a892f 100644 --- a/src/components/genelator/base/ConverterModal.jsx +++ b/src/components/genelator/base/ConverterModal.jsx @@ -1,4 +1,4 @@ -import React, { useCallback } from 'react'; +import React, { useRef, useCallback, useEffect } from 'react'; import { ModalDialog } from '../../ModalDialog'; export function ConverterModal(props) { @@ -7,19 +7,39 @@ export function ConverterModal(props) { setField, } = props; + const optionsRef = useRef(null); + + useEffect(() => { + const converterList = converter.split(''); + const rows = optionsRef.current.querySelectorAll('tr'); + + rows.forEach((row) => { + const tdElement = row.querySelector('td'); + if (tdElement) { + const tdText = tdElement.textContent.trim(); + const isMatch = converterList.includes(tdText); + row.style.backgroundColor = isMatch ? '#e6f3ff' : ''; + } + }); + }, [converter]); + const onConverter = useCallback( (addConverter) => { - let newConverter = converter; - const reg = new RegExp(addConverter, 'i'); - if (newConverter.search(reg) === -1) { - newConverter += addConverter; - } else { - newConverter = newConverter.replace(newConverter.toUpperCase(), addConverter); - newConverter = newConverter.replace(newConverter.toLowerCase(), addConverter); - } - setField((prevState) => ({ ...prevState, converter: newConverter })); + setField((prevState) => { + const currentConverter = prevState.converter; + const index = currentConverter.toLowerCase().indexOf(addConverter.toLowerCase()); + let newConverter = currentConverter; + + if (index === -1) { + newConverter += addConverter; + } else { + newConverter = newConverter.slice(0, index) + addConverter + newConverter.slice(index + addConverter.length); + } + + return { ...prevState, converter: newConverter }; + }); }, - [converter, setField] + [setField] ); const onOpenConverter = useCallback(() => { @@ -29,7 +49,7 @@ export function ConverterModal(props) { return (
- +
オプション