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

[Refactor] Unify and encapsulate slider UI logic into useSliderLogic hook. Part 1.

Browse Source
This commit is contained in:
Sakamoto Shiina
2025-11-06 12:36:03 +09:00
parent 4adfc8fbc1
commit c76b2981c6
3 changed files with 99 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

79
src-ui/views/app/config_page/setting_section/setting_box/appearance/Appearance.jsx
View File

@@ -11,6 +11,8 @@ import {
import {
useAppearance,
useSliderLogic,
} from "@logics_configs";
import {
@@ -56,30 +58,20 @@ const UiScalingContainer = () => {
const { currentUiScaling, setUiScaling } = useAppearance();
const { asyncUpdateBreakPoint } = useWindow();
const [ui_ui_scaling, setUiUiScaling] = useState(currentUiScaling.data);
const onchangeFunction = (value) => {
setUiUiScaling(value);
};
const onchangeCommittedFunction = (value) => {
setUiScaling(value);
};
useEffect(() => {
setUiUiScaling(currentUiScaling.data);
asyncUpdateBreakPoint();
}, [currentUiScaling.data]);
// [Duplicated]
const createMarks = (min, max) => {
const marks = [];
for (let value = min; value <= max; value += 10) {
const label = ([50,70,90,110,130,150,170,190].includes(value)) ? "" : value;
marks.push({ value, label: `${label}` });
}
return marks;
};
const marks = createMarks(40, 200);
const {
ui_value,
onchangeFunction,
onchangeCommittedFunction,
marks
} = useSliderLogic({
current_value: currentUiScaling,
setterFunction: setUiScaling,
postUpdateAction: asyncUpdateBreakPoint,
min: 40,
max: 200,
step: 10,
hidden_label_values: [50, 70, 90, 110, 130, 150, 170, 190],
});
return (
<SliderContainer
@@ -88,7 +80,7 @@ const UiScalingContainer = () => {
max="200"
onchangeCommittedFunction={onchangeCommittedFunction}
onchangeFunction={onchangeFunction}
variable={ui_ui_scaling}
variable={ui_value}
marks={marks}
step={null}
track={false}
@@ -100,29 +92,20 @@ const UiScalingContainer = () => {
export const MessageLogUiScalingContainer = () => {
const { t } = useI18n();
const { currentMessageLogUiScaling, setMessageLogUiScaling } = useAppearance();
const [ui_message_log_ui_scaling, setUiMessageLogUiScaling] = useState(currentMessageLogUiScaling.data);
const onchangeFunction = (value) => {
setUiMessageLogUiScaling(value);
};
const onchangeCommittedFunction = (value) => {
setMessageLogUiScaling(value);
};
useEffect(() => {
setUiMessageLogUiScaling(currentMessageLogUiScaling.data);
}, [currentMessageLogUiScaling.data]);
// [Duplicated]
const createMarks = (min, max) => {
const marks = [];
for (let value = min; value <= max; value += 10) {
const label = ([50,70,90,110,130,150,170,190].includes(value)) ? "" : value;
marks.push({ value, label: `${label}` });
}
return marks;
};
const marks = createMarks(40, 200);
const {
ui_value,
onchangeFunction,
onchangeCommittedFunction,
marks
} = useSliderLogic({
current_value: currentMessageLogUiScaling,
setterFunction: setMessageLogUiScaling,
min: 40,
max: 200,
step: 10,
hidden_label_values: [50, 70, 90, 110, 130, 150, 170, 190],
});
return (
<SliderContainer
@@ -131,7 +114,7 @@ export const MessageLogUiScalingContainer = () => {
max="200"
onchangeCommittedFunction={onchangeCommittedFunction}
onchangeFunction={onchangeFunction}
variable={ui_message_log_ui_scaling}
variable={ui_value}
marks={marks}
step={null}
track={false}