alikia2x/cvsa
1
0
Fork 0
Code

fix: prevent state update pitfall causing data/UI desync

Browse Source
This commit is contained in:
alikia2x (寒寒) 2025-10-04 23:42:05 +08:00
parent d23c4d0986
commit e50db12841
1 changed files with 6 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
packages/palette/src/components/Picker/Slider.tsx
View File

@ -1,4 +1,4 @@
import React, { useRef } from "react";
import React, { useEffect, useRef, useState } from "react";
import { useOklchCanvas } from "./useOklchCanvas";
import { Handle } from "./Handle";
import type { I18nProvider, LchChannel } from "./Picker";
@ -14,9 +14,13 @@ interface SliderProps {
}
export const Slider = ({ useP3, channel, color, onChange, i18nProvider }: SliderProps) => {
const [value, setValue] = React.useState(color[channel]!.toFixed(precision[channel]));
const [value, setValue] = useState(color[channel]!.toFixed(precision[channel]));
const containerRef = useRef<HTMLDivElement>(null);
useEffect(() => {
setValue(color[channel]!.toFixed(precision[channel]));
}, [color.l, color.c, color.h]);
const canvasRef = useRef<null | HTMLCanvasElement>(null);
useOklchCanvas({ channel: channel, max: maxValue[channel], canvasRef: canvasRef, color, useP3 });