Skip to content

Commit e3b1b3d

Browse files
tanerengiiintanerengiiin
authored
Merge pull request #8374 from primefaces/v11-colorpicker
New Component: ColorPicker
2 parents 867dac7 + 066ca20 commit e3b1b3d

File tree

85 files changed

+4130
-25
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

85 files changed

+4130
-25
lines changed

‎apps/showcase/assets/menu/menu.json‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -63,6 +63,10 @@
6363
"name": "Checkbox",
6464
"to": "/docs/components/checkbox"
6565
},
66+
{
67+
"name": "Color Picker",
68+
"to": "/docs/components/colorpicker"
69+
},
6670
{
6771
"name": "InputText",
6872
"to": "/docs/components/inputtext"

‎apps/showcase/demo/colorpicker/advanced-demo.tsx‎

Lines changed: 82 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
'use client';
2+
import type { ColorSpace } from '@primereact/types/shared/colorpicker';
3+
import { ColorPicker } from 'primereact/colorpicker';
4+
import * as React from 'react';
5+
6+
export default function AdvancedDemo() {
7+
const [format, setFormat] = React.useState<ColorSpace>('hsla');
8+
9+
return (
10+
<div className="card">
11+
<div className="max-w-md space-y-4">
12+
<select value={format} onChange={(e) => setFormat(e.target.value as ColorSpace)}>
13+
<option value="rgba">RGBA</option>
14+
<option value="hsba">HSBA</option>
15+
<option value="hsla">HSLA</option>
16+
<option value="oklcha">OKLCHA</option>
17+
</select>
18+
<ColorPicker format={format}>
19+
<ColorPicker.Area />
20+
<ColorPicker.Slider />
21+
{format === 'rgba' && (
22+
<>
23+
<ColorPicker.Slider channel="red" />
24+
<ColorPicker.Slider channel="green" />
25+
<ColorPicker.Slider channel="blue" />
26+
</>
27+
)}
28+
{format === 'hsba' && (
29+
<>
30+
<ColorPicker.Slider channel="saturation" />
31+
<ColorPicker.Slider channel="brightness" />
32+
</>
33+
)}
34+
35+
{format === 'hsla' && (
36+
<>
37+
<ColorPicker.Slider channel="saturation" />
38+
<ColorPicker.Slider channel="lightness" />
39+
</>
40+
)}
41+
42+
<ColorPicker.Slider channel="alpha" />
43+
<div className="flex gap-2">
44+
<ColorPicker.Swatch />
45+
<ColorPicker.EyeDropper />
46+
<div className="flex-1">
47+
<ColorPicker.Input fluid channel="hex" />
48+
</div>
49+
</div>
50+
<div className="grid grid-cols-5 gap-2 items-center">
51+
<span>RGBA</span>
52+
<ColorPicker.Input fluid channel="red" />
53+
<ColorPicker.Input fluid channel="green" />
54+
<ColorPicker.Input fluid channel="blue" />
55+
<ColorPicker.Input fluid channel="alpha" />
56+
57+
<span>HSBA</span>
58+
<ColorPicker.Input fluid channel="hue" />
59+
<ColorPicker.Input fluid channel="saturation" />
60+
<ColorPicker.Input fluid channel="brightness" />
61+
<ColorPicker.Input fluid channel="alpha" />
62+
63+
<span>HSLA</span>
64+
<ColorPicker.Input fluid channel="hue" />
65+
<ColorPicker.Input fluid channel="saturation" />
66+
<ColorPicker.Input fluid channel="lightness" />
67+
<ColorPicker.Input fluid channel="alpha" />
68+
69+
<span>OKLCHA</span>
70+
<ColorPicker.Input fluid channel="L" />
71+
<ColorPicker.Input fluid channel="C" />
72+
<ColorPicker.Input fluid channel="H" />
73+
<ColorPicker.Input fluid channel="alpha" />
74+
</div>
75+
<div className="flex gap-2">
76+
<ColorPicker.Input fluid channel="css" />
77+
</div>
78+
</ColorPicker>
79+
</div>
80+
</div>
81+
);
82+
}

‎apps/showcase/demo/colorpicker/basic-demo.tsx‎

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
'use client';
2+
import type { ColorSpace } from '@primereact/types/shared/colorpicker';
3+
import { ColorPicker } from 'primereact/colorpicker';
4+
import * as React from 'react';
5+
6+
export default function BasicDemo() {
7+
const [format, setFormat] = React.useState<ColorSpace | 'hex'>('hex');
8+
9+
return (
10+
<div className="card">
11+
<div className="max-w-sm space-y-4">
12+
<ColorPicker format={format === 'hex' ? 'rgba' : format}>
13+
<ColorPicker.Area />
14+
<div className="flex items-center gap-4">
15+
<div className="flex-1 space-y-1">
16+
<ColorPicker.Slider />
17+
<ColorPicker.Slider channel="alpha" />
18+
</div>
19+
<div className="flex items-center gap-2">
20+
<ColorPicker.Swatch />
21+
<ColorPicker.EyeDropper />
22+
</div>
23+
</div>
24+
<div className="flex gap-2">
25+
<select value={format} onChange={(e) => setFormat(e.target.value as ColorSpace)}>
26+
<option value="hex">HEX</option>
27+
<option value="rgba">RGBA</option>
28+
<option value="hsba">HSBA</option>
29+
<option value="hsla">HSLA</option>
30+
<option value="oklcha">OKLCHA</option>
31+
</select>
32+
<div className="flex gap-2 flex-1">
33+
{format === 'hex' && <ColorPicker.Input fluid channel="hex" />}
34+
{format === 'oklcha' && <ColorPicker.Input fluid channel="css" />}
35+
{format === 'rgba' && (
36+
<>
37+
<ColorPicker.Input fluid channel="red" />
38+
<ColorPicker.Input fluid channel="green" />
39+
<ColorPicker.Input fluid channel="blue" />
40+
</>
41+
)}
42+
{format === 'hsba' && (
43+
<>
44+
<ColorPicker.Input fluid channel="hue" />
45+
<ColorPicker.Input fluid channel="saturation" />
46+
<ColorPicker.Input fluid channel="brightness" />
47+
</>
48+
)}
49+
{format === 'hsla' && (
50+
<>
51+
<ColorPicker.Input fluid channel="hue" />
52+
<ColorPicker.Input fluid channel="saturation" />
53+
<ColorPicker.Input fluid channel="lightness" />
54+
</>
55+
)}
56+
<ColorPicker.Input fluid channel="alpha" className="max-w-20" />
57+
</div>
58+
</div>
59+
</ColorPicker>
60+
</div>
61+
</div>
62+
);
63+
}

‎apps/showcase/demo/colorpicker/controlled-demo.tsx‎

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
'use client';
2+
import { parseColor } from '@primereact/headless/colorpicker';
3+
import type { ColorInstance, ColorSpace } from '@primereact/types/shared/colorpicker';
4+
import { useColorPickerChangeEvent } from '@primereact/types/shared/colorpicker';
5+
import { ColorPicker } from 'primereact/colorpicker';
6+
import * as React from 'react';
7+
8+
export default function ControlledDemo() {
9+
const [format, setFormat] = React.useState<ColorSpace | 'hex'>('hex');
10+
const [value, setValue] = React.useState<ColorInstance>(parseColor('#000000').toFormat(format === 'hex' ? 'rgba' : format));
11+
12+
return (
13+
<div className="card">
14+
<div className="max-w-sm space-y-4">
15+
<ColorPicker
16+
format={format === 'hex' ? 'rgba' : format}
17+
onValueChange={(e: useColorPickerChangeEvent) => {
18+
setValue(e.value);
19+
}}
20+
value={value}
21+
>
22+
<ColorPicker.Area />
23+
<div className="flex items-center gap-4">
24+
<div className="flex-1 space-y-1">
25+
<ColorPicker.Slider />
26+
<ColorPicker.Slider channel="alpha" />
27+
</div>
28+
<div className="flex items-center gap-2">
29+
<ColorPicker.Swatch />
30+
<ColorPicker.EyeDropper />
31+
</div>
32+
</div>
33+
<div className="flex gap-2">
34+
<select value={format} onChange={(e) => setFormat(e.target.value as ColorSpace)}>
35+
<option value="hex">HEX</option>
36+
<option value="rgba">RGBA</option>
37+
<option value="hsba">HSBA</option>
38+
<option value="hsla">HSLA</option>
39+
</select>
40+
<div className="flex gap-2 flex-1">
41+
{format === 'hex' && <ColorPicker.Input fluid channel="hex" />}
42+
{format === 'rgba' && (
43+
<>
44+
<ColorPicker.Input fluid channel="red" />
45+
<ColorPicker.Input fluid channel="green" />
46+
<ColorPicker.Input fluid channel="blue" />
47+
</>
48+
)}
49+
{format === 'hsba' && (
50+
<>
51+
<ColorPicker.Input fluid channel="hue" />
52+
<ColorPicker.Input fluid channel="saturation" />
53+
<ColorPicker.Input fluid channel="brightness" />
54+
</>
55+
)}
56+
{format === 'hsla' && (
57+
<>
58+
<ColorPicker.Input fluid channel="hue" />
59+
<ColorPicker.Input fluid channel="saturation" />
60+
<ColorPicker.Input fluid channel="lightness" />
61+
</>
62+
)}
63+
<ColorPicker.Input fluid channel="alpha" />
64+
</div>
65+
</div>
66+
</ColorPicker>
67+
</div>
68+
</div>
69+
);
70+
}

‎apps/showcase/demo/colorpicker/popover-demo.tsx‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
import { ColorPicker } from 'primereact/colorpicker';
2+
import { Popover } from 'primereact/popover';
3+
4+
function PopoverDemo() {
5+
return (
6+
<div className="card">
7+
<ColorPicker defaultColor="#0099ff">
8+
<Popover>
9+
<Popover.Trigger unstyled>
10+
<ColorPicker.Swatch />
11+
</Popover.Trigger>
12+
<Popover.Portal>
13+
<Popover.Content className="min-w-72 w-full">
14+
<div className="w-full space-y-3">
15+
<ColorPicker.Area />
16+
<div className="flex items-center gap-4">
17+
<div className="flex-1 space-y-1">
18+
<ColorPicker.Slider />
19+
<ColorPicker.Slider channel="alpha" />
20+
</div>
21+
<ColorPicker.EyeDropper />
22+
</div>
23+
<ColorPicker.Input fluid channel="hex" />
24+
</div>
25+
</Popover.Content>
26+
</Popover.Portal>
27+
</Popover>
28+
</ColorPicker>
29+
</div>
30+
);
31+
}
32+
33+
export default PopoverDemo;

‎apps/showcase/demo/colorpicker/vertical-slider-demo.tsx‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import { ColorPicker } from 'primereact/colorpicker';
2+
3+
function VerticalSliderDemo() {
4+
return (
5+
<div className="card">
6+
<ColorPicker format="hsba">
7+
<div className="flex gap-4">
8+
<ColorPicker.Area className="max-w-xs flex-1" />
9+
<ColorPicker.Slider orientation="vertical" className="h-auto" />
10+
<ColorPicker.Slider channel="saturation" orientation="vertical" />
11+
<ColorPicker.Slider channel="brightness" orientation="vertical" />
12+
<ColorPicker.Slider channel="alpha" orientation="vertical" />
13+
</div>
14+
</ColorPicker>
15+
</div>
16+
);
17+
}
18+
19+
export default VerticalSliderDemo;

0 commit comments

Comments
 (0)