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

原有输入选色功能组件文件更名。

Browse Source
This commit is contained in:
徐涛 2024-12-31 15:20:55 +08:00
parent cac57726ff
commit 016237ff6b
1 changed files with 7 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
src/components/ColorPicker.tsx
View File

@ -1,5 +1,6 @@
import { isEqual } from 'lodash-es'; import { isEqual } from 'lodash-es';
import { useState } from 'react'; import { useState } from 'react';
import { ColorComponentInput } from './ColorComponentInput';
import styles from './ColorPicker.module.css'; import styles from './ColorPicker.module.css';
import { HSegmentedControl } from './HSegmentedControl'; import { HSegmentedControl } from './HSegmentedControl';
import { HslAssemble } from './HslAsssemble'; import { HslAssemble } from './HslAsssemble';
@ -11,7 +12,7 @@ type ColorPickerProps = {
}; };
export function ColorPicker({ color, onSelect }: ColorPickerProps) { export function ColorPicker({ color, onSelect }: ColorPickerProps) {
const [pickMode, setMode] = useState<'rgb' | 'hsl'>('rgb'); const [pickMode, setMode] = useState<'rgb' | 'hsl' | 'input'>('rgb');
const [selectedColor, setSelectedColor] = useState<string>(color ?? '000000'); const [selectedColor, setSelectedColor] = useState<string>(color ?? '000000');
const handleColorSelect = (color: string) => { const handleColorSelect = (color: string) => {
setSelectedColor(color); setSelectedColor(color);
@ -26,9 +27,10 @@ export function ColorPicker({ color, onSelect }: ColorPickerProps) {
options={[ options={[
{ label: 'RGB', value: 'rgb' }, { label: 'RGB', value: 'rgb' },
{ label: 'HSL', value: 'hsl' }, { label: 'HSL', value: 'hsl' },
{ label: 'Input', value: 'input' },
]} ]}
value={pickMode} value={pickMode}
onChange={(value) => setMode(value as 'rgb' | 'hsl' | 'oklch')} onChange={(value) => setMode(value as 'rgb' | 'hsl' | 'input')}
/> />
{isEqual(pickMode, 'rgb') && ( {isEqual(pickMode, 'rgb') && (
<RGBAssemble color={selectedColor} onChange={handleColorSelect} /> <RGBAssemble color={selectedColor} onChange={handleColorSelect} />
@ -36,6 +38,9 @@ export function ColorPicker({ color, onSelect }: ColorPickerProps) {
{isEqual(pickMode, 'hsl') && ( {isEqual(pickMode, 'hsl') && (
<HslAssemble color={selectedColor} onChange={handleColorSelect} /> <HslAssemble color={selectedColor} onChange={handleColorSelect} />
)} )}
{isEqual(pickMode, 'input') && (
<ColorComponentInput color={selectedColor} onChange={handleColorSelect} />
)}
</div> </div>
); );
} }