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

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;
 };

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";
+export { useSettingBoxScrollPosition } from "./config_page_setter/_aux/useSettingBoxScrollPosition.js";
+
+
+export {
+    useSliderLogic,
+} from "./config_page_setter/useSettingsLogics.js";

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 (
         <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}