every_holiday/VRCT
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[Fix] UI: Implement debounce for input changes in MessageFormat component.

Browse Source
This commit is contained in:
Sakamoto Shiina
2025-12-25 07:56:40 +09:00
parent 214edb083d
commit 1a62ca04f0
1 changed files with 60 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

91
src-ui/views/app/config_page/setting_section/setting_box/_components/message_format/MessageFormat.jsx
View File

@@ -10,6 +10,7 @@ import {
import { useAppearance } from "@logics_configs"; import { useAppearance } from "@logics_configs";
import { ui_configs } from "@ui_configs"; import { ui_configs } from "@ui_configs";
import { ResetButton } from "@common_components"; import { ResetButton } from "@common_components";
import { useState, useEffect, useRef } from "react";
const ENTRY_WIDTH = "8rem"; const ENTRY_WIDTH = "8rem";
@@ -199,23 +200,51 @@ const InputComponent = ({id, variable, setFunction, format_id }) => {
return replaced; return replaced;
}; };
const [local_var, setLocalVar] = useState(variable);
const debounce_ref = useRef(null);
useEffect(() => {
setLocalVar(variable);
}, [variable]);
useEffect(() => {
return () => {
if (debounce_ref.current) {
clearTimeout(debounce_ref.current);
debounce_ref.current = null;
}
};
}, []);
const scheduleUpdate = (new_var) => {
if (debounce_ref.current) clearTimeout(debounce_ref.current);
debounce_ref.current = setTimeout(() => {
setFunction(new_var);
debounce_ref.current = null;
}, 500);
};
const handleChange = (parent_key, child_key) => (e) => { const handleChange = (parent_key, child_key) => (e) => {
const rawValue = e.target.value; const raw_value = e.target.value;
const parsedValue = replaceValue(rawValue); const parsed_value = replaceValue(raw_value);
if (child_key !== undefined) { if (child_key !== undefined) {
setFunction({ const new_var = {
...variable, ...local_var,
[parent_key]: { [parent_key]: {
...variable[parent_key], ...local_var[parent_key],
[child_key]: parsedValue [child_key]: parsed_value,
} },
}); };
setLocalVar(new_var);
scheduleUpdate(new_var);
} else { } else {
setFunction({ const new_var = {
...variable, ...local_var,
[parent_key]: parsedValue [parent_key]: parsed_value,
}); };
setLocalVar(new_var);
scheduleUpdate(new_var);
} }
}; };
@@ -229,16 +258,16 @@ const InputComponent = ({id, variable, setFunction, format_id }) => {
}; };
const resetFunction = () => { const resetFunction = () => {
if (format_id === "send") { const new_val = format_id === "send" ? ui_configs.send_message_format_parts : ui_configs.received_message_format_parts;
setFunction(ui_configs.send_message_format_parts); setLocalVar(new_val);
} else if (format_id === "received") { setFunction(new_val);
setFunction(ui_configs.received_message_format_parts);
}
}; };
const SwapButton = ({ variable, setFunction }) => { const SwapButton = ({ variable, setFunction }) => {
const swapMessageAndTranslate = () => { const swapMessageAndTranslate = () => {
setFunction({ ...variable, translation_first: !variable.translation_first }); const new_var = { ...variable, translation_first: !variable.translation_first };
setLocalVar(new_var);
setFunction(new_var);
}; };
return ( return (
@@ -255,38 +284,38 @@ const InputComponent = ({id, variable, setFunction, format_id }) => {
<p className={styles.section_title}>{label_title}</p> <p className={styles.section_title}>{label_title}</p>
<div className={styles.message_format_settings_wrapper}> <div className={styles.message_format_settings_wrapper}>
<div className={styles.swap_button_container}> <div className={styles.swap_button_container}>
<SwapButton variable={variable} setFunction={setFunction} /> <SwapButton variable={local_var} setFunction={setFunction} />
</div> </div>
{ !variable.translation_first ? { !local_var.translation_first ?
<div className={styles.input_wrapper}> <div className={styles.input_wrapper}>
<div className={styles.input_contents}> <div className={styles.input_contents}>
<_Entry ui_variable={toUiValue(variable.message.prefix)} width={ENTRY_WIDTH} onChange={handleChange("message", "prefix")} /> <_Entry ui_variable={toUiValue(local_var.message.prefix)} width={ENTRY_WIDTH} onChange={handleChange("message", "prefix")} />
<p className={styles.preset_text}>{LABEL_ORIGINAL}</p> <p className={styles.preset_text}>{LABEL_ORIGINAL}</p>
<_Entry ui_variable={toUiValue(variable.message.suffix)} width={ENTRY_WIDTH} onChange={handleChange("message", "suffix")} /> <_Entry ui_variable={toUiValue(local_var.message.suffix)} width={ENTRY_WIDTH} onChange={handleChange("message", "suffix")} />
</div> </div>
<div className={styles.input_contents}> <div className={styles.input_contents}>
<_Entry ui_variable={toUiValue(variable.separator)} width={ENTRY_WIDTH} onChange={handleChange("separator")} /> <_Entry ui_variable={toUiValue(local_var.separator)} width={ENTRY_WIDTH} onChange={handleChange("separator")} />
</div> </div>
<div className={styles.input_contents}> <div className={styles.input_contents}>
<_Entry ui_variable={toUiValue(variable.translation.prefix)} width={ENTRY_WIDTH} onChange={handleChange("translation", "prefix")} /> <_Entry ui_variable={toUiValue(local_var.translation.prefix)} width={ENTRY_WIDTH} onChange={handleChange("translation", "prefix")} />
<p className={styles.preset_text}>{LABEL_TRANSLATED}</p> <p className={styles.preset_text}>{LABEL_TRANSLATED}</p>
<_Entry ui_variable={toUiValue(variable.translation.suffix)} width={ENTRY_WIDTH} onChange={handleChange("translation", "suffix")} /> <_Entry ui_variable={toUiValue(local_var.translation.suffix)} width={ENTRY_WIDTH} onChange={handleChange("translation", "suffix")} />
</div> </div>
</div> </div>
: :
<div className={styles.input_wrapper}> <div className={styles.input_wrapper}>
<div className={styles.input_contents}> <div className={styles.input_contents}>
<_Entry ui_variable={toUiValue(variable.translation.prefix)} width={ENTRY_WIDTH} onChange={handleChange("translation", "prefix")} /> <_Entry ui_variable={toUiValue(local_var.translation.prefix)} width={ENTRY_WIDTH} onChange={handleChange("translation", "prefix")} />
<p className={styles.preset_text}>{LABEL_TRANSLATED}</p> <p className={styles.preset_text}>{LABEL_TRANSLATED}</p>
<_Entry ui_variable={toUiValue(variable.translation.suffix)} width={ENTRY_WIDTH} onChange={handleChange("translation", "suffix")} /> <_Entry ui_variable={toUiValue(local_var.translation.suffix)} width={ENTRY_WIDTH} onChange={handleChange("translation", "suffix")} />
</div> </div>
<div className={styles.input_contents}> <div className={styles.input_contents}>
<_Entry ui_variable={toUiValue(variable.separator)} width={ENTRY_WIDTH} onChange={handleChange("separator")} /> <_Entry ui_variable={toUiValue(local_var.separator)} width={ENTRY_WIDTH} onChange={handleChange("separator")} />
</div> </div>
<div className={styles.input_contents}> <div className={styles.input_contents}>
<_Entry ui_variable={toUiValue(variable.message.prefix)} width={ENTRY_WIDTH} onChange={handleChange("message", "prefix")} /> <_Entry ui_variable={toUiValue(local_var.message.prefix)} width={ENTRY_WIDTH} onChange={handleChange("message", "prefix")} />
<p className={styles.preset_text}>{LABEL_ORIGINAL}</p> <p className={styles.preset_text}>{LABEL_ORIGINAL}</p>
<_Entry ui_variable={toUiValue(variable.message.suffix)} width={ENTRY_WIDTH} onChange={handleChange("message", "suffix")} /> <_Entry ui_variable={toUiValue(local_var.message.suffix)} width={ENTRY_WIDTH} onChange={handleChange("message", "suffix")} />
</div> </div>
</div> </div>
} }
@@ -295,7 +324,7 @@ const InputComponent = ({id, variable, setFunction, format_id }) => {
<p className={styles.multi_translation_title}>{LABEL_FOR_MULTI_TRANSLATION}</p> <p className={styles.multi_translation_title}>{LABEL_FOR_MULTI_TRANSLATION}</p>
<div className={styles.input_contents}> <div className={styles.input_contents}>
<p className={styles.preset_text}>{LABEL_TRANSLATED}</p> <p className={styles.preset_text}>{LABEL_TRANSLATED}</p>
<_Entry ui_variable={toUiValue(variable.translation.separator)} width={ENTRY_WIDTH} onChange={handleChange("translation", "separator")} /> <_Entry ui_variable={toUiValue(local_var.translation.separator)} width={ENTRY_WIDTH} onChange={handleChange("translation", "separator")} />
<p className={styles.preset_text}>{LABEL_TRANSLATED}</p> <p className={styles.preset_text}>{LABEL_TRANSLATED}</p>
</div> </div>
</div> </div>