From c76b2981c6a426fae5f318a9d390172fbfa0c85e Mon Sep 17 00:00:00 2001 From: Sakamoto Shiina <68018796+ShiinaSakamoto@users.noreply.github.com> Date: Thu, 6 Nov 2025 12:36:03 +0900 Subject: [PATCH] [Refactor] Unify and encapsulate slider UI logic into useSliderLogic hook. Part 1. --- .../config_page_setter/useSettingsLogics.js | 62 +++++++++++++++ src-ui/logics/configs/index.js | 7 +- .../setting_box/appearance/Appearance.jsx | 79 ++++++++----------- 3 files changed, 99 insertions(+), 49 deletions(-) diff --git a/src-ui/logics/configs/config_page_setter/useSettingsLogics.js b/src-ui/logics/configs/config_page_setter/useSettingsLogics.js index 613c17d4..9c1b74fb 100644 --- a/src-ui/logics/configs/config_page_setter/useSettingsLogics.js +++ b/src-ui/logics/configs/config_page_setter/useSettingsLogics.js @@ -200,4 +200,66 @@ export const useConfigFunctions = (Category) => { default: return {}; } +}; + + +import { useState, useEffect, useCallback, useMemo } from "react"; + +export const useSliderLogic = ({ + current_value, + setterFunction, + postUpdateAction, + min, + max, + step = 1, + hidden_label_values +}) => { + const [ui_value, setUiValue] = useState(current_value.data); + + const labelFormatter = useCallback((value) => { + if (hidden_label_values && hidden_label_values.includes(value)) { + return ""; + } + return value; + }, [hidden_label_values]); + + const marks = useMemo(() => { + return createMarks(min, max, step, labelFormatter); + }, [min, max, step, labelFormatter]); + + const onchangeFunction = useCallback((value) => { + setUiValue(value); + }, []); + + const onchangeCommittedFunction = useCallback((value) => { + setterFunction(value); + }, [setterFunction]); + + useEffect(() => { + if (current_value.data !== ui_value) { + setUiValue(current_value.data); + } + if (postUpdateAction) { + postUpdateAction(); + } + }, [current_value.data]); + + return { + ui_value, + onchangeFunction, + onchangeCommittedFunction, + marks, + }; +}; + +const createMarks = (min, max, step = 1, labelFormatter = (value) => value) => { + const marks = []; + let current_value = min; + while (current_value <= max) { + const fixedValue = parseFloat(current_value.toFixed(1)); + const label = labelFormatter(fixedValue); + marks.push({ value: fixedValue, label: `${label}` }); + current_value += step; + } + return marks; }; \ No newline at end of file diff --git a/src-ui/logics/configs/index.js b/src-ui/logics/configs/index.js index 51e74c96..1b20c3c6 100644 --- a/src-ui/logics/configs/index.js +++ b/src-ui/logics/configs/index.js @@ -13,4 +13,9 @@ export { useHotkeys } from "./config_page_setter/hotkeys/useHotkeys.js"; export { useSupporters } from "./config_page_setter/supporters/useSupporters.js"; export { usePlugins } from "./config_page_setter/plugins/usePlugins.js"; -export { useSettingBoxScrollPosition } from "./config_page_setter/_aux/useSettingBoxScrollPosition.js"; \ No newline at end of file +export { useSettingBoxScrollPosition } from "./config_page_setter/_aux/useSettingBoxScrollPosition.js"; + + +export { + useSliderLogic, +} from "./config_page_setter/useSettingsLogics.js"; \ No newline at end of file diff --git a/src-ui/views/app/config_page/setting_section/setting_box/appearance/Appearance.jsx b/src-ui/views/app/config_page/setting_section/setting_box/appearance/Appearance.jsx index cc7e730f..14067ade 100644 --- a/src-ui/views/app/config_page/setting_section/setting_box/appearance/Appearance.jsx +++ b/src-ui/views/app/config_page/setting_section/setting_box/appearance/Appearance.jsx @@ -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 ( { 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 ( { max="200" onchangeCommittedFunction={onchangeCommittedFunction} onchangeFunction={onchangeFunction} - variable={ui_message_log_ui_scaling} + variable={ui_value} marks={marks} step={null} track={false}