Skip to content

Commit c584b4d

Browse files
jaywcjlovejaywcjlove
committed
feat(Sketch): add presetColors props.
1 parent edc8de6 commit c584b4d

File tree

4 files changed

+121
-107
lines changed

4 files changed

+121
-107
lines changed

‎packages/color-sketch/README.md‎

Lines changed: 4 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -33,17 +33,14 @@ function Demo() {
3333
## Props
3434

3535
```ts
36-
interface ColorResult {
37-
hex: string;
38-
hsl: HslaColor;
39-
hsv: HsvColor;
40-
rgb: RgbaColor;
41-
}
36+
import { ColorResult } from '@uiw/color-convert';
4237
export type PresetColor = { color: string; title: string } | string;
4338
export interface SketchProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange' | 'color'> {
39+
prefixCls?: string;
4440
width?: number;
4541
color?: string | HsvaColor;
46-
presetColors?: PresetColor[];
42+
presetColors?: false | PresetColor[];
43+
editableDisable?: boolean;
4744
onChange?: (newShade: ColorResult) => void;
4845
}
4946
```

‎packages/color-sketch/src/Swatch.tsx‎

Lines changed: 1 addition & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -8,26 +8,8 @@ export interface SwatchProps extends Omit<React.HTMLAttributes<HTMLDivElement>,
88
onClick?: (hsva: HsvaColor) => void;
99
}
1010

11-
const PRESET_COLORS = [
12-
'#D0021B',
13-
'#F5A623',
14-
'#f8e61b',
15-
'#8B572A',
16-
'#7ED321',
17-
'#417505',
18-
'#BD10E0',
19-
'#9013FE',
20-
'#4A90E2',
21-
'#50E3C2',
22-
'#B8E986',
23-
'#000000',
24-
'#4A4A4A',
25-
'#9B9B9B',
26-
'#FFFFFF',
27-
];
28-
2911
export default function Swatch(props: SwatchProps) {
30-
const { colors = PRESET_COLORS, onClick } = props;
12+
const { colors = [], onClick } = props;
3113
const rectStyle: React.CSSProperties = {
3214
background: 'rgb(144, 19, 254)',
3315
height: 16,

‎packages/color-sketch/src/index.tsx‎

Lines changed: 98 additions & 65 deletions
Original file line numberDiff line numberDiff line change
@@ -18,11 +18,30 @@ import {
1818
import Swatch, { PresetColor } from './Swatch';
1919
import { useEffect } from 'react';
2020

21+
const PRESET_COLORS = [
22+
'#D0021B',
23+
'#F5A623',
24+
'#f8e61b',
25+
'#8B572A',
26+
'#7ED321',
27+
'#417505',
28+
'#BD10E0',
29+
'#9013FE',
30+
'#4A90E2',
31+
'#50E3C2',
32+
'#B8E986',
33+
'#000000',
34+
'#4A4A4A',
35+
'#9B9B9B',
36+
'#FFFFFF',
37+
];
38+
2139
export interface SketchProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange' | 'color'> {
2240
prefixCls?: string;
2341
width?: number;
2442
color?: string | HsvaColor;
25-
presetColors?: PresetColor[];
43+
presetColors?: false | PresetColor[];
44+
editableDisable?: boolean;
2645
onChange?: (newShade: ColorResult) => void;
2746
}
2847

@@ -42,7 +61,17 @@ const Bar = (props: PointerProps) => (
4261
);
4362

4463
export default React.forwardRef<HTMLDivElement, SketchProps>((props, ref) => {
45-
const { prefixCls = 'w-color-sketch', className, onChange, width = 218, presetColors, color, style, ...other } = props;
64+
const {
65+
prefixCls = 'w-color-sketch',
66+
className,
67+
onChange,
68+
width = 218,
69+
presetColors = PRESET_COLORS,
70+
color,
71+
editableDisable = true,
72+
style,
73+
...other
74+
} = props;
4675
const [hsva, setHsva] = useState({ h: 209, s: 36, v: 90, a: 1 });
4776
useEffect(() => {
4877
if (typeof color === 'string' && validHex(color)) {
@@ -165,69 +194,73 @@ export default React.forwardRef<HTMLDivElement, SketchProps>((props, ref) => {
165194
/>
166195
</div>
167196
</div>
168-
<div style={{ display: 'flex', margin: '0 10px 3px 10px' }}>
169-
<EditableInput
170-
label="Hex"
171-
value={hsvaToHex(hsva).replace(/^#/, '').toLocaleUpperCase()}
172-
onChange={(evn, val) => handleRGBA(val, 'hex', evn)}
173-
style={{
174-
flexDirection: 'column',
175-
flex: '2 1 0%',
176-
}}
177-
/>
178-
<EditableInput
179-
label="R"
180-
value={rgba.r}
181-
onBlur={handleBlur}
182-
onChange={(evn, val) => handleRGBA(val, 'r', evn)}
183-
style={{
184-
flexDirection: 'column',
185-
flex: '1 1 0%',
186-
marginLeft: 6,
187-
}}
188-
/>
189-
<EditableInput
190-
label="G"
191-
value={rgba.g}
192-
onBlur={handleBlur}
193-
onChange={(evn, val) => handleRGBA(val, 'g', evn)}
194-
style={{
195-
flexDirection: 'column',
196-
flex: '1 1 0%',
197-
marginLeft: 6,
198-
}}
199-
/>
200-
<EditableInput
201-
label="B"
202-
value={rgba.b}
203-
onBlur={handleBlur}
204-
onChange={(evn, val) => handleRGBA(val, 'b', evn)}
205-
style={{
206-
flexDirection: 'column',
207-
flex: '1 1 0%',
208-
marginLeft: 6,
209-
}}
210-
/>
211-
<EditableInput
212-
label="A"
213-
value={parseInt(String(rgba.a * 100), 10)}
214-
onBlur={(evn) => {
215-
if (Number(evn.target.value) > 100) {
216-
evn.target.value = '100';
217-
}
218-
if (Number(evn.target.value) < 1) {
219-
evn.target.value = '0';
220-
}
221-
}}
222-
onChange={(evn, val) => handleRGBA(val, 'a', evn)}
223-
style={{
224-
flexDirection: 'column',
225-
flex: '1 1 0%',
226-
marginLeft: 6,
227-
}}
228-
/>
229-
</div>
230-
<Swatch colors={presetColors} color={hsvaToHex(hsva)} onClick={(hsva) => handleChange(hsva)} />
197+
{editableDisable && (
198+
<div style={{ display: 'flex', margin: '0 10px 3px 10px' }}>
199+
<EditableInput
200+
label="Hex"
201+
value={hsvaToHex(hsva).replace(/^#/, '').toLocaleUpperCase()}
202+
onChange={(evn, val) => handleRGBA(val, 'hex', evn)}
203+
style={{
204+
flexDirection: 'column',
205+
flex: '2 1 0%',
206+
}}
207+
/>
208+
<EditableInput
209+
label="R"
210+
value={rgba.r}
211+
onBlur={handleBlur}
212+
onChange={(evn, val) => handleRGBA(val, 'r', evn)}
213+
style={{
214+
flexDirection: 'column',
215+
flex: '1 1 0%',
216+
marginLeft: 6,
217+
}}
218+
/>
219+
<EditableInput
220+
label="G"
221+
value={rgba.g}
222+
onBlur={handleBlur}
223+
onChange={(evn, val) => handleRGBA(val, 'g', evn)}
224+
style={{
225+
flexDirection: 'column',
226+
flex: '1 1 0%',
227+
marginLeft: 6,
228+
}}
229+
/>
230+
<EditableInput
231+
label="B"
232+
value={rgba.b}
233+
onBlur={handleBlur}
234+
onChange={(evn, val) => handleRGBA(val, 'b', evn)}
235+
style={{
236+
flexDirection: 'column',
237+
flex: '1 1 0%',
238+
marginLeft: 6,
239+
}}
240+
/>
241+
<EditableInput
242+
label="A"
243+
value={parseInt(String(rgba.a * 100), 10)}
244+
onBlur={(evn) => {
245+
if (Number(evn.target.value) > 100) {
246+
evn.target.value = '100';
247+
}
248+
if (Number(evn.target.value) < 1) {
249+
evn.target.value = '0';
250+
}
251+
}}
252+
onChange={(evn, val) => handleRGBA(val, 'a', evn)}
253+
style={{
254+
flexDirection: 'column',
255+
flex: '1 1 0%',
256+
marginLeft: 6,
257+
}}
258+
/>
259+
</div>
260+
)}
261+
{presetColors && presetColors.length > 0 && (
262+
<Swatch colors={presetColors} color={hsvaToHex(hsva)} onClick={(hsva) => handleChange(hsva)} />
263+
)}
231264
</div>
232265
);
233266
});

‎test/sketch.test.tsx‎

Lines changed: 18 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -282,20 +282,22 @@ it('Sketch Input A = -4444 onChange', async () => {
282282
}
283283
});
284284

285-
// it('Saturation onChange', async () => {
286-
// render(
287-
// <Sketch
288-
// color="#ca1d32"
289-
// onChange={(color) => {
290-
// expect(Object.keys(color)).toEqual(expect.arrayContaining(['rgb', 'hsl', 'hsv', 'rgba', 'hsla', 'hsva', 'hex', 'hexa']));
291-
// expect(color.rgba.a).toEqual(0);
292-
// expect(color.hex).toEqual('#ca1d32');
293-
// expect(color.hexa).toEqual('#ca1d3200');
294-
// }}
295-
// />
296-
// );
285+
it('Sketch editableDisable=false onChange', async () => {
286+
const MyComponent = () => {
287+
return <Sketch color="#ca1d32" editableDisable={false} />;
288+
};
289+
const component = TestRenderer.create(<MyComponent />);
290+
let tree = component.toJSON();
291+
if (tree && !Array.isArray(tree) && tree.children) {
292+
expect(tree.children.length).toEqual(2);
293+
}
294+
});
297295

298-
// const elm = screen.getByTitle('custom-element');
299-
// elm.focus();
300-
// fireEvent.mouseDown(elm, { clientX: 1 });
301-
// });
296+
it('Sketch presetColors=false onChange', async () => {
297+
const MyComponent = () => <Sketch color="#ca1d32" presetColors={false} />;
298+
const component = TestRenderer.create(<MyComponent />);
299+
let tree = component.toJSON();
300+
if (tree && !Array.isArray(tree) && tree.children) {
301+
expect(tree.children.length).toEqual(2);
302+
}
303+
});

0 commit comments

Comments
 (0)