Skip to content

Commit 199d733

Browse files
jaywcjlovejaywcjlove
committed
feat(Chrome): add showEditableInput/showEyeDropper/showColorPreview/showHue/showAlpha props.
1 parent 8bb4c1b commit 199d733

File tree

2 files changed

+123
-79
lines changed

2 files changed

+123
-79
lines changed

‎packages/color-chrome/README.md‎

Lines changed: 37 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -23,26 +23,49 @@ npm i @uiw/react-color-chrome
2323

2424
```jsx mdx:preview
2525
import React, { useState } from 'react';
26+
27+
import {
28+
HsvaColor,
29+
hsvaToRgbaString,
30+
color as handleColor,
31+
validHex,
32+
hexToHsva,
33+
hsvaToHex,
34+
hsvaToHexa,
35+
} from '@uiw/color-convert';
36+
2637
import Chrome from '@uiw/react-color-chrome';
2738
import { GithubPlacement } from '@uiw/react-color-github';
2839

2940
function Demo() {
30-
const [hex, setHex] = useState("#d29c9c53");
41+
const [hsva, setHsva] = useState({ h:0, s:25.71, v:82.35, a:0.32});
42+
const hex = hsvaToHex(hsva)
3143
return (
3244
<>
3345
<Chrome
34-
color={hex}
46+
color={hsva}
3547
style={{ float: 'left' }}
3648
placement={GithubPlacement.Right}
3749
onChange={(color) => {
38-
setHex(color.hexa);
50+
setHsva(color.hsva);
51+
}}
52+
/>
53+
<Chrome
54+
color={hsva}
55+
placement={GithubPlacement.TopRight}
56+
onChange={(color) => {
57+
setHsva(color.hsva);
3958
}}
4059
/>
4160
<Chrome
42-
color={hex}
61+
color={hsva}
62+
style={{ marginTop: 10, width: 140 }}
4363
placement={GithubPlacement.TopRight}
64+
showEyeDropper={false}
65+
showColorPreview={false}
66+
showEditableInput={false}
4467
onChange={(color) => {
45-
setHex(color.hexa);
68+
setHsva(color.hsva);
4669
}}
4770
/>
4871
<div style={{ background: hex, marginTop: 30, padding: 10 }}>
@@ -60,12 +83,17 @@ export default Demo;
6083
import React from 'react';
6184
import { GithubProps } from '@uiw/react-color-github';
6285
export declare enum ChromeInputType {
63-
HEXA = "hexa",
64-
RGBA = "rgba",
65-
HSLA = "hsla"
86+
HEXA = "hexa",
87+
RGBA = "rgba",
88+
HSLA = "hsla"
6689
}
6790
export interface ChromeProps extends Omit<GithubProps, 'colors'> {
68-
inputType?: ChromeInputType;
91+
inputType?: ChromeInputType;
92+
showEditableInput?: boolean;
93+
showEyeDropper?: boolean;
94+
showColorPreview?: boolean;
95+
showHue?: boolean;
96+
showAlpha?: boolean;
6997
}
7098
declare const Chrome: React.ForwardRefExoticComponent<ChromeProps & React.RefAttributes<HTMLDivElement>>;
7199
export default Chrome;

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

Lines changed: 86 additions & 70 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,11 @@ export enum ChromeInputType {
2727

2828
export interface ChromeProps extends Omit<GithubProps, 'colors'> {
2929
inputType?: ChromeInputType;
30+
showEditableInput?: boolean;
31+
showEyeDropper?: boolean;
32+
showColorPreview?: boolean;
33+
showHue?: boolean;
34+
showAlpha?: boolean;
3035
}
3136

3237
const Chrome = React.forwardRef<HTMLDivElement, ChromeProps>((props, ref) => {
@@ -35,6 +40,11 @@ const Chrome = React.forwardRef<HTMLDivElement, ChromeProps>((props, ref) => {
3540
className,
3641
style,
3742
color,
43+
showEditableInput = true,
44+
showEyeDropper = true,
45+
showColorPreview = true,
46+
showHue = true,
47+
showAlpha = true,
3848
inputType = ChromeInputType.RGBA,
3949
rectProps = {},
4050
onChange,
@@ -78,6 +88,10 @@ const Chrome = React.forwardRef<HTMLDivElement, ChromeProps>((props, ref) => {
7888
handleChange({ ...result });
7989
};
8090
const styleSize = { height: 14, width: 14 };
91+
const pointerProps = {
92+
style: { ...styleSize },
93+
fillProps: { style: styleSize },
94+
};
8195
return (
8296
<Github
8397
ref={ref}
@@ -97,90 +111,92 @@ const Chrome = React.forwardRef<HTMLDivElement, ChromeProps>((props, ref) => {
97111
}}
98112
/>
99113
<div style={{ padding: 15, display: 'flex', alignItems: 'center', gap: 10 }}>
100-
{isSupportEyeDropper && <EyeDropper onPickColor={handleClickColor} />}
101-
<Alpha
102-
width={28}
103-
height={28}
104-
hsva={hsva}
105-
radius={2}
106-
style={{
107-
borderRadius: '50%',
108-
}}
109-
bgProps={{ style: { background: 'transparent' } }}
110-
innerProps={{
111-
style: alphaStyle,
112-
}}
113-
pointer={() => <Fragment />}
114-
/>
115-
<div style={{ flex: 1 }}>
116-
<Hue
117-
hue={hsva.h}
118-
style={{ width: '100%', height: 12 }}
119-
pointerProps={{
120-
style: { ...styleSize },
121-
fillProps: { style: styleSize },
122-
}}
123-
bgProps={{
124-
style: { borderRadius: 2 },
125-
}}
126-
onChange={(newHue) => {
127-
handleChange({ ...hsva, ...newHue });
128-
}}
129-
/>
114+
{isSupportEyeDropper && showEyeDropper && <EyeDropper onPickColor={handleClickColor} />}
115+
{showColorPreview && (
130116
<Alpha
117+
width={28}
118+
height={28}
131119
hsva={hsva}
132-
style={{ marginTop: 6, height: 12 }}
133-
pointerProps={{
134-
style: { ...styleSize },
135-
fillProps: { style: styleSize },
120+
radius={2}
121+
style={{
122+
borderRadius: '50%',
136123
}}
137-
bgProps={{
138-
style: { borderRadius: 2 },
139-
}}
140-
onChange={(newAlpha) => {
141-
handleChange({ ...hsva, ...newAlpha });
124+
bgProps={{ style: { background: 'transparent' } }}
125+
innerProps={{
126+
style: alphaStyle,
142127
}}
128+
pointer={() => <Fragment />}
143129
/>
144-
</div>
145-
</div>
146-
<div style={{ display: 'flex', alignItems: 'flex-start', padding: '0 15px 15px 15px', userSelect: 'none' }}>
130+
)}
147131
<div style={{ flex: 1 }}>
148-
{type == ChromeInputType.RGBA && (
149-
<EditableInputRGBA
150-
hsva={hsva}
151-
rProps={{ labelStyle, inputStyle }}
152-
gProps={{ labelStyle, inputStyle }}
153-
bProps={{ labelStyle, inputStyle }}
154-
aProps={{ labelStyle, inputStyle }}
155-
onChange={(reColor) => handleChange(reColor.hsva)}
156-
/>
157-
)}
158-
{type === ChromeInputType.HEXA && (
159-
<EditableInput
160-
label="HEX"
161-
labelStyle={labelStyle}
162-
inputStyle={inputStyle}
163-
value={hsva.a > 0 && hsva.a < 1 ? hsvaToHexa(hsva).toLocaleUpperCase() : hsvaToHex(hsva).toLocaleUpperCase()}
164-
onChange={(_, value) => {
165-
if (typeof value === 'string') {
166-
handleChange(hexToHsva(/^#/.test(value) ? value : `#${value}`));
167-
}
132+
{showHue == true && (
133+
<Hue
134+
hue={hsva.h}
135+
style={{ width: '100%', height: 12 }}
136+
pointerProps={pointerProps}
137+
bgProps={{
138+
style: { borderRadius: 2 },
139+
}}
140+
onChange={(newHue) => {
141+
handleChange({ ...hsva, ...newHue });
168142
}}
169143
/>
170144
)}
171-
{type === ChromeInputType.HSLA && (
172-
<EditableInputHSLA
145+
{showAlpha == true && (
146+
<Alpha
173147
hsva={hsva}
174-
hProps={{ labelStyle, inputStyle }}
175-
sProps={{ labelStyle, inputStyle }}
176-
lProps={{ labelStyle, inputStyle }}
177-
aProps={{ labelStyle, inputStyle }}
178-
onChange={(reColor) => handleChange(reColor.hsva)}
148+
style={{ marginTop: 6, height: 12 }}
149+
pointerProps={pointerProps}
150+
bgProps={{
151+
style: { borderRadius: 2 },
152+
}}
153+
onChange={(newAlpha) => {
154+
handleChange({ ...hsva, ...newAlpha });
155+
}}
179156
/>
180157
)}
181158
</div>
182-
<Arrow onClick={handleClick} />
183159
</div>
160+
{showEditableInput && (
161+
<div style={{ display: 'flex', alignItems: 'flex-start', padding: '0 15px 15px 15px', userSelect: 'none' }}>
162+
<div style={{ flex: 1 }}>
163+
{type == ChromeInputType.RGBA && (
164+
<EditableInputRGBA
165+
hsva={hsva}
166+
rProps={{ labelStyle, inputStyle }}
167+
gProps={{ labelStyle, inputStyle }}
168+
bProps={{ labelStyle, inputStyle }}
169+
aProps={{ labelStyle, inputStyle }}
170+
onChange={(reColor) => handleChange(reColor.hsva)}
171+
/>
172+
)}
173+
{type === ChromeInputType.HEXA && (
174+
<EditableInput
175+
label="HEX"
176+
labelStyle={labelStyle}
177+
inputStyle={inputStyle}
178+
value={hsva.a > 0 && hsva.a < 1 ? hsvaToHexa(hsva).toLocaleUpperCase() : hsvaToHex(hsva).toLocaleUpperCase()}
179+
onChange={(_, value) => {
180+
if (typeof value === 'string') {
181+
handleChange(hexToHsva(/^#/.test(value) ? value : `#${value}`));
182+
}
183+
}}
184+
/>
185+
)}
186+
{type === ChromeInputType.HSLA && (
187+
<EditableInputHSLA
188+
hsva={hsva}
189+
hProps={{ labelStyle, inputStyle }}
190+
sProps={{ labelStyle, inputStyle }}
191+
lProps={{ labelStyle, inputStyle }}
192+
aProps={{ labelStyle, inputStyle }}
193+
onChange={(reColor) => handleChange(reColor.hsva)}
194+
/>
195+
)}
196+
</div>
197+
<Arrow onClick={handleClick} />
198+
</div>
199+
)}
184200
</Fragment>
185201
}
186202
rectRender={() => <Fragment />}

0 commit comments

Comments
 (0)