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 { ui_configs } from "@ui_configs";
import { ResetButton } from "@common_components";
import { useState, useEffect, useRef } from "react";
const ENTRY_WIDTH = "8rem";
@@ -199,23 +200,51 @@ const InputComponent = ({id, variable, setFunction, format_id }) => {
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 rawValue = e.target.value;
const parsedValue = replaceValue(rawValue);
const raw_value = e.target.value;
const parsed_value = replaceValue(raw_value);
if (child_key !== undefined) {
setFunction({
...variable,
const new_var = {
...local_var,
[parent_key]: {
...variable[parent_key],
[child_key]: parsedValue
}
});
...local_var[parent_key],
[child_key]: parsed_value,
},
};
setLocalVar(new_var);
scheduleUpdate(new_var);
} else {
setFunction({
...variable,
[parent_key]: parsedValue
});
const new_var = {
...local_var,
[parent_key]: parsed_value,
};
setLocalVar(new_var);
scheduleUpdate(new_var);
}
};
@@ -229,16 +258,16 @@ const InputComponent = ({id, variable, setFunction, format_id }) => {
};
const resetFunction = () => {
if (format_id === "send") {
setFunction(ui_configs.send_message_format_parts);
} else if (format_id === "received") {
setFunction(ui_configs.received_message_format_parts);
}
const new_val = format_id === "send" ? ui_configs.send_message_format_parts : ui_configs.received_message_format_parts;
setLocalVar(new_val);
setFunction(new_val);
};
const SwapButton = ({ variable, setFunction }) => {
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 (
@@ -255,38 +284,38 @@ const InputComponent = ({id, variable, setFunction, format_id }) => {
<p className={styles.section_title}>{label_title}</p>
<div className={styles.message_format_settings_wrapper}>
<div className={styles.swap_button_container}>
<SwapButton variable={variable} setFunction={setFunction} />
<SwapButton variable={local_var} setFunction={setFunction} />
</div>
{ !variable.translation_first ?
{ !local_var.translation_first ?
<div className={styles.input_wrapper}>
<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>
<_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 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 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>
<_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_wrapper}>
<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>
<_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 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 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>
<_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>
}
@@ -295,7 +324,7 @@ const InputComponent = ({id, variable, setFunction, format_id }) => {
<p className={styles.multi_translation_title}>{LABEL_FOR_MULTI_TRANSLATION}</p>
<div className={styles.input_contents}>
<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>
</div>
</div>