xt/color-q
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

给ColorPicker组件增加传入传出选定值的能力。

Browse Source
This commit is contained in:
徐涛 2024-12-31 14:06:08 +08:00
parent 47cbb30019
commit 67f220facb
1 changed files with 14 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
src/components/ColorPicker.tsx
View File

@ -5,9 +5,18 @@ import { HSegmentedControl } from './HSegmentedControl';
import { HslAssemble } from './HslAsssemble';
import { RGBAssemble } from './RGBAssemble';
export function ColorPicker() {
const [pickMode, setMode] = useState<'rgb' | 'hsl' | 'oklch'>('rgb');
const [selectedColor, setSelectedColor] = useState<string>('000000');
type ColorPickerProps = {
color?: string | null;
onSelect?: (color: string) => void;
};
export function ColorPicker({ color, onSelect }: ColorPickerProps) {
const [pickMode, setMode] = useState<'rgb' | 'hsl'>('rgb');
const [selectedColor, setSelectedColor] = useState<string>(color ?? '000000');
const handleColorSelect = (color: string) => {
setSelectedColor(color);
onSelect?.(color);
};
return (
<div className={styles.color_picker}>
@ -22,10 +31,10 @@ export function ColorPicker() {
onChange={(value) => setMode(value as 'rgb' | 'hsl' | 'oklch')}
/>
{isEqual(pickMode, 'rgb') && (
<RGBAssemble color={selectedColor} onChange={(c) => setSelectedColor(c)} />
<RGBAssemble color={selectedColor} onChange={handleColorSelect} />
)}
{isEqual(pickMode, 'hsl') && (
<HslAssemble color={selectedColor} onChange={(c) => setSelectedColor(c)} />
<HslAssemble color={selectedColor} onChange={handleColorSelect} />
)}
</div>
);