[Refactor/TMP2] Refactor slider logic and appearance settings
- Improve slider logic by adding useMemo for marks calculation and fixing floating point precision issues - Add loop safety check to prevent infinite loops in createMarks function - Remove show_label_values prop from TransparencyContainer - Add proper decimal place handling for slider values
This commit is contained in:
@@ -220,6 +220,7 @@ export const useSliderLogic = ({
|
||||
}
|
||||
|
||||
const [ui_value, setUiValue] = useState(current_value.data);
|
||||
|
||||
const decimalPlaces = marks_step.toString().includes('.')
|
||||
? marks_step.toString().split('.')[1].length
|
||||
: 0;
|
||||
@@ -228,10 +229,13 @@ export const useSliderLogic = ({
|
||||
if (show_label_values && show_label_values.length > 0) {
|
||||
return show_label_values.includes(value) ? value : "";
|
||||
}
|
||||
|
||||
return value.toFixed(decimalPlaces);
|
||||
}, [show_label_values, decimalPlaces]);
|
||||
|
||||
const marks = createMarks(min, max, marks_step, labelFormatter);
|
||||
const marks = useMemo(() => {
|
||||
return createMarks(min, max, marks_step, labelFormatter);
|
||||
}, [min, max, marks_step, labelFormatter]);
|
||||
|
||||
const onchangeFunction = useCallback((value) => {
|
||||
setUiValue(value);
|
||||
@@ -260,9 +264,20 @@ export const useSliderLogic = ({
|
||||
|
||||
const createMarks = (min, max, marks_step = 1, labelFormatter = (value) => value) => {
|
||||
const marks = [];
|
||||
for (let value = min; value <= max; value += marks_step) {
|
||||
value = parseFloat(value.toFixed(1));
|
||||
marks.push({ value, label: `${labelFormatter(value)}` });
|
||||
let current_value = min;
|
||||
|
||||
for (let i = 0; current_value <= max; i++) {
|
||||
const fixedValue = parseFloat(current_value.toFixed(10));
|
||||
|
||||
marks.push({ value: fixedValue, label: `${labelFormatter(fixedValue)}` });
|
||||
|
||||
current_value += marks_step;
|
||||
current_value = parseFloat(current_value.toFixed(10));
|
||||
|
||||
if (i > 1000) {
|
||||
console.error("Loop limit exceeded (1000 iterations). createMarks()");
|
||||
break;
|
||||
}
|
||||
}
|
||||
return marks;
|
||||
};
|
||||
@@ -157,7 +157,6 @@ const TransparencyContainer = () => {
|
||||
min={40}
|
||||
max={100}
|
||||
step={10}
|
||||
show_label_values={[40, 60, 80, 100, 120, 140, 160, 180, 200]}
|
||||
/>
|
||||
);
|
||||
};
|
||||
Reference in New Issue
Block a user