From 0e9ff561ac569047c698d88842c2d3af4d1c5cbf Mon Sep 17 00:00:00 2001 From: Sakamoto Shiina <68018796+ShiinaSakamoto@users.noreply.github.com> Date: Tue, 6 Aug 2024 13:22:01 +0900 Subject: [PATCH] [Update] Config Window: MessageFormat. Sync the data between message format and UI components. --- src-ui/store.js | 22 +++ .../setting_box/appearance/Appearance.jsx | 11 +- .../message_format/MessageFormat.jsx | 175 ++++++++++++++---- 3 files changed, 165 insertions(+), 43 deletions(-) diff --git a/src-ui/store.js b/src-ui/store.js index ebf216a1..b9e88dc6 100644 --- a/src-ui/store.js +++ b/src-ui/store.js @@ -112,6 +112,28 @@ export const { atomInstance: Atom_SelectedMicDeviceStatus, useHook: useSelectedM export const { atomInstance: Atom_MicDeviceListStatus, useHook: useMicDeviceListStatus } = createAtomWithHook(test_device_list, "MicDeviceListStatus"); +export const { atomInstance: Atom_SendMessageFormat, useHook: useSendMessageFormat } = createAtomWithHook({ + before: "", + after: "", +}, "SendMessageFormat"); +export const { atomInstance: Atom_SendMessageFormatWithT, useHook: useSendMessageFormatWithT } = createAtomWithHook({ + before: "", + between: "", + after: "", + is_message_first: true, +}, "SendMessageFormatWithT"); +export const { atomInstance: Atom_ReceivedMessageFormat, useHook: useReceivedMessageFormat } = createAtomWithHook({ + before: "", + after: "", +}, "ReceivedMessageFormat"); +export const { atomInstance: Atom_ReceivedMessageFormatWithT, useHook: useReceivedMessageFormatWithT } = createAtomWithHook({ + before: "", + between: "", + after: "", + is_message_first: true, +}, "ReceivedMessageFormatWithT"); + + export const { atomInstance: Atom_TranslatorListStatus, useHook: useTranslatorListStatus } = createAtomWithHook(translator_list, "TranslatorListStatus"); export const { atomInstance: Atom_SelectedTranslatorIdStatus, useHook: useSelectedTranslatorIdStatus } = createAtomWithHook("CTranslate2", "SelectedTranslatorIdStatus"); export const { atomInstance: Atom_IsOpenedTranslatorSelector, useHook: useIsOpenedTranslatorSelector } = createAtomWithHook(false, "IsOpenedTranslatorSelector"); diff --git a/src-ui/windows/config_window/setting_section/setting_box/appearance/Appearance.jsx b/src-ui/windows/config_window/setting_section/setting_box/appearance/Appearance.jsx index 3e80ea3b..0e5d4f84 100644 --- a/src-ui/windows/config_window/setting_section/setting_box/appearance/Appearance.jsx +++ b/src-ui/windows/config_window/setting_section/setting_box/appearance/Appearance.jsx @@ -46,9 +46,16 @@ export const Appearance = () => { - - + + + + + + + + + ); }; \ No newline at end of file diff --git a/src-ui/windows/config_window/setting_section/setting_box/components/message_format/MessageFormat.jsx b/src-ui/windows/config_window/setting_section/setting_box/components/message_format/MessageFormat.jsx index 28b3f0eb..0e3b5bc0 100644 --- a/src-ui/windows/config_window/setting_section/setting_box/components/message_format/MessageFormat.jsx +++ b/src-ui/windows/config_window/setting_section/setting_box/components/message_format/MessageFormat.jsx @@ -1,36 +1,69 @@ import styles from "./MessageFormat.module.scss"; import { useTranslation } from "react-i18next"; +import { + useUiLanguageStatus, + useSendMessageFormat, + useSendMessageFormatWithT, + useReceivedMessageFormat, + useReceivedMessageFormatWithT, +} from "@store"; +import { _Entry } from "../_atoms/_Entry"; +import SwapImg from "@images/swap_icon.png"; export const MessageFormat = (props) => { + const { currentSendMessageFormat, updateSendMessageFormat } = useSendMessageFormat(); + const { currentSendMessageFormatWithT, updateSendMessageFormatWithT } = useSendMessageFormatWithT(); + const { currentReceivedMessageFormat, updateReceivedMessageFormat } = useReceivedMessageFormat(); + const { currentReceivedMessageFormatWithT, updateReceivedMessageFormatWithT } = useReceivedMessageFormatWithT(); + + let atoms = []; + switch (props.id) { + case "send": + atoms = [currentSendMessageFormat, updateSendMessageFormat]; + break; + + case "send_with_t": + atoms = [currentSendMessageFormatWithT, updateSendMessageFormatWithT]; + break; + + case "received": + atoms = [currentReceivedMessageFormat, updateReceivedMessageFormat]; + break; + + case "received_with_t": + atoms = [currentReceivedMessageFormatWithT, updateReceivedMessageFormatWithT]; + break; + + default: + break; + } return (
- - - { - props.with_t === true - ? - : null - } + + + {["send_with_t", "received_with_t"].includes(props.id) && }
); }; -import { useUiLanguageStatus } from "@store"; - -const ExampleComponent = (props) => { +const ExampleComponent = ({ id, current_format }) => { const { t } = useTranslation(); const { currentUiLanguageStatus } = useUiLanguageStatus(); const createExampleMessage = () => { - const original_lang_message = t("config_window.send_message_format.example_text"); + const originalLangMessage = t("config_window.send_message_format.example_text"); + let format = current_format; - if (props.with_t === true) { - const translation_locale = currentUiLanguageStatus === "en" ? "ja" : "en"; - const translated_lang_message = t("config_window.send_message_format.example_text", {lng: translation_locale}); - return original_lang_message + translated_lang_message; + if (["send_with_t", "received_with_t"].includes(id)) { + const translationLocale = currentUiLanguageStatus === "en" ? "ja" : "en"; + const translatedLangMessage = t("config_window.send_message_format.example_text", { lng: translationLocale }); + + return format.is_message_first + ? `${format.before}${originalLangMessage}${format.between}${translatedLangMessage}${format.after}` + : `${format.before}${translatedLangMessage}${format.between}${originalLangMessage}${format.after}`; } else { - return original_lang_message; + return `${format.before}${originalLangMessage}${format.after}`; } }; @@ -41,47 +74,107 @@ const ExampleComponent = (props) => { ); }; +const InputComponent = ({ id, atoms }) => { + const [current, updater] = atoms; -import { _Entry } from "../_atoms/_Entry"; -const InputComponent = (props) => { - const { t } = useTranslation(); - - const onChangeInput = (e) => { - console.log(e.target.value); + const handleChange = (key) => (e) => { + updater({ ...current, [key]: e.target.value }); }; return (
- <_Entry width="100%" onChange={onChangeInput} /> -

[message]

- <_Entry width="100%" onChange={onChangeInput} /> - { - props.with_t - ? (<> -

[translation]

- <_Entry width="100%" onChange={onChangeInput} /> - ) - : null - } + <_Entry width="100%" onChange={handleChange("before")} /> + {["send_with_t", "received_with_t"].includes(id) ? ( + <> +

{current.is_message_first ? "[message]" : "[translation]"}

+ <_Entry width="100%" onChange={handleChange("between")} /> +

{current.is_message_first ? "[translation]" : "[message]"}

+ + ) : ( +

[message]

+ )} + <_Entry width="100%" onChange={handleChange("after")} />
); }; +const SwapButton = ({ atoms }) => { + const [current, updater] = atoms; -import SwapImg from "@images/swap_icon.png"; -const SwapButton = () => { const swapMessageAndTranslate = () => { - + updater({ ...current, is_message_first: !current.is_message_first }); }; return (
-

[message]

- -

[translate]

+

{current.is_message_first ? "[message]" : "[translation]"}

+ Swap Icon +

{current.is_message_first ? "[translation]" : "[message]"}

- ); -}; \ No newline at end of file +}; + + + +// const extractMessageFormat = (text) => { +// const split_result = text.split("[message]"); +// let result_data = { +// before: split_result[0], +// after: split_result[1] +// }; +// return result_data; +// }; + + + + +// const extractMessageFormatWithT = (text) => { +// const message_index = text.indexOf("[message]"); +// const translation_index = text.indexOf("[translation]"); + +// let result_data = { +// is_message_first: true, +// before: "", +// between: "", +// after: "" +// }; + +// if (message_index < translation_index) { +// const text_before_message = text.slice(0, message_index); +// result_data.before = text_before_message; + +// const match = text.match(/\[message\](.*?)\[translation\]/); +// if (match) { +// const extracted_text = match[1]; +// result_data.between = extracted_text; +// } else { +// throw new Error("Invalid Message Format"); +// } + +// const text_after_translation = text.slice(translation_index + "[translation]".length); +// result_data.after = text_after_translation; + +// } else if (translation_index < message_index) { +// result_data.is_message_first = false; +// const text_before_translation = text.slice(0, translation_index); +// result_data.before = text_before_translation; + +// const match = text.match(/\[translation\](.*?)\[message\]/); +// if (match) { +// const extracted_text = match[1]; +// result_data.between = extracted_text; +// } else { +// throw new Error("Invalid Message Format"); +// } + +// const text_after_message = text.slice(message_index + "[message]".length); +// result_data.after = text_after_message; + +// } else { +// throw new Error("Invalid Message Format"); +// } + +// return result_data; +// }; \ No newline at end of file