70 |
changeGradientControl({ type: 'linear' })}
73 | />
74 |
changeGradientControl({ type: 'radial' })}
77 | />
78 |
79 | {
80 | type === 'linear'
81 | && (
82 |
83 |
92 |
93 |
94 | {degree}
95 | °
96 |
97 |
98 |
99 | )
100 | }
101 |
102 | );
103 | }
104 |
105 | export default GradientControls;
106 |
--------------------------------------------------------------------------------
/src/lib/components/ColorPicker/Gradient/index.jsx:
--------------------------------------------------------------------------------
1 | import React, { useCallback, useEffect, useState } from 'react';
2 |
3 | import { useMount } from 'lib/hooks';
4 | import { rgbToHsv, getRightValue, generateGradientStyle } from 'lib/helpers';
5 |
6 | import Area from '../Area';
7 | import Preview from '../Preview';
8 | import GradientControls from './GradientControls';
9 |
10 | function Gradient({
11 | points, type, degree, onChange, onStartChange, onEndChange,
12 | }) {
13 | const [activePointIndex, setActivePointIndex] = useState(0);
14 | const [gradientPoints, setGradientPoints] = useState(points);
15 | const [activePoint, setActivePoint] = useState(gradientPoints[0]);
16 | const [colorRed, setColorRed] = useState(activePoint.red);
17 | const [colorGreen, setColorGreen] = useState(activePoint.green);
18 | const [colorBlue, setColorBlue] = useState(activePoint.blue);
19 | const [colorAlpha, setColorAlpha] = useState(activePoint.alpha);
20 | const [colorHue, setColorHue] = useState(0);
21 | const [colorSaturation, setColorSaturation] = useState(100);
22 | const [colorValue, setColorValue] = useState(100);
23 | const [gradientType, setGradientType] = useState(type);
24 | const [gradientDegree, setGradientDegree] = useState(degree);
25 |
26 | const actions = {
27 | onChange,
28 | onStartChange,
29 | onEndChange,
30 | };
31 |
32 | useMount(() => {
33 | const { hue, saturation, value } = rgbToHsv({ red: colorRed, green: colorGreen, blue: colorBlue });
34 |
35 | setColorHue(hue);
36 | setColorSaturation(saturation);
37 | setColorValue(value);
38 | });
39 |
40 | const removePoint = useCallback((index = activePointIndex) => {
41 | if (gradientPoints.length <= 2) {
42 | return;
43 | }
44 |
45 | const localGradientPoints = gradientPoints.slice();
46 | localGradientPoints.splice(index, 1);
47 |
48 | setGradientPoints(localGradientPoints);
49 |
50 | if (index > 0) {
51 | setActivePointIndex(index - 1);
52 | }
53 |
54 | onChange && onChange({
55 | points: localGradientPoints,
56 | type: gradientType,
57 | degree: gradientDegree,
58 | style: generateGradientStyle(localGradientPoints, gradientType, gradientDegree),
59 | });
60 | }, [gradientPoints, activePointIndex, gradientType, gradientDegree, onChange]);
61 |
62 | const keyUpHandler = useCallback(event => {
63 | if ((event.keyCode === 46 || event.keyCode === 8)) {
64 | removePoint(activePointIndex);
65 | }
66 | }, [activePointIndex, removePoint]);
67 |
68 | useEffect(() => {
69 | document.addEventListener('keyup', keyUpHandler);
70 |
71 | return () => {
72 | document.removeEventListener('keyup', keyUpHandler);
73 | };
74 | });
75 |
76 | const changeGradientControl = useCallback(({ type, degree }, actionName = 'onChange') => {
77 | type = getRightValue(type, gradientType);
78 | degree = getRightValue(degree, gradientDegree);
79 |
80 | setGradientType(type);
81 | setGradientDegree(degree);
82 |
83 | const action = actions[actionName];
84 |
85 | action && action({
86 | points: gradientPoints,
87 | type,
88 | degree,
89 | style: generateGradientStyle(gradientPoints, type, degree),
90 | });
91 | }, [actions, gradientPoints, gradientDegree, gradientType]);
92 |
93 | const changeActivePointIndex = useCallback(index => {
94 | setActivePointIndex(index);
95 |
96 | const localGradientPoint = gradientPoints[index];
97 | const {
98 | red, green, blue, alpha,
99 | } = localGradientPoint;
100 | setActivePoint(localGradientPoint);
101 |
102 | setColorRed(red);
103 | setColorGreen(green);
104 | setColorBlue(blue);
105 | setColorAlpha(alpha);
106 |
107 | const { hue, saturation, value } = rgbToHsv({ red, green, blue });
108 |
109 | setColorHue(hue);
110 | setColorSaturation(saturation);
111 | setColorValue(value);
112 | }, [gradientPoints]);
113 |
114 | const updateColor = useCallback(({
115 | red, green, blue, alpha, hue, saturation, value,
116 | }, actionName = 'onChange') => {
117 | red = getRightValue(red, colorRed);
118 | green = getRightValue(green, colorGreen);
119 | blue = getRightValue(blue, colorBlue);
120 | alpha = getRightValue(alpha, colorAlpha);
121 | hue = getRightValue(hue, colorHue);
122 | saturation = getRightValue(saturation, colorSaturation);
123 | value = getRightValue(value, colorValue);
124 |
125 | const localGradientPoints = gradientPoints.slice();
126 |
127 | localGradientPoints[activePointIndex] = {
128 | ...localGradientPoints[activePointIndex],
129 | red,
130 | green,
131 | blue,
132 | alpha,
133 | };
134 |
135 | setColorRed(red);
136 | setColorGreen(green);
137 | setColorBlue(blue);
138 | setColorAlpha(alpha);
139 | setColorHue(hue);
140 | setColorSaturation(saturation);
141 | setColorValue(value);
142 | setGradientPoints(localGradientPoints);
143 |
144 | const action = actions[actionName];
145 |
146 | action && action({
147 | points: localGradientPoints,
148 | type: gradientType,
149 | degree: gradientDegree,
150 | style: generateGradientStyle(localGradientPoints, gradientType, gradientDegree),
151 | });
152 | }, [
153 | colorRed, colorGreen, colorBlue, colorAlpha,
154 | colorHue, colorSaturation, colorValue,
155 | activePointIndex, gradientPoints, actions, gradientType, gradientDegree,
156 | ]);
157 |
158 | const updateGradientLeft = useCallback((left, index, actionName = 'onChange') => {
159 | const localGradientPoints = gradientPoints.slice();
160 | localGradientPoints[index].left = left;
161 |
162 | setGradientPoints(localGradientPoints);
163 |
164 | const action = actions[actionName];
165 |
166 | action && action({
167 | points: localGradientPoints,
168 | type: gradientType,
169 | degree: gradientDegree,
170 | style: generateGradientStyle(localGradientPoints, gradientType, gradientDegree),
171 | });
172 | }, [actions, gradientPoints, gradientDegree, gradientType]);
173 |
174 | const addPoint = useCallback(left => {
175 | const localGradientPoints = gradientPoints.slice();
176 |
177 | localGradientPoints.push({
178 | ...localGradientPoints[activePointIndex],
179 | left,
180 | });
181 |
182 | setGradientPoints(localGradientPoints);
183 | setActivePointIndex(localGradientPoints.length - 1);
184 |
185 | onChange && onChange({
186 | points: localGradientPoints,
187 | type: gradientType,
188 | degree: gradientDegree,
189 | style: generateGradientStyle(localGradientPoints, gradientType, gradientDegree),
190 | });
191 | }, [onChange, gradientPoints, activePointIndex, gradientType, gradientDegree]);
192 |
193 | return (
194 | <>
195 |
200 |
220 |
227 |
228 | );
229 | }
230 |
231 | export default Gradient;
232 |
--------------------------------------------------------------------------------
/src/lib/components/ColorPicker/Preview/Hex/index.jsx:
--------------------------------------------------------------------------------
1 | import React, { useState, useEffect, useCallback } from 'react';
2 |
3 | import { rgbToHex, hexToRgb } from 'lib/helpers';
4 | import { Input } from 'lib/components/UI';
5 |
6 | function Hex({
7 | red, green, blue, updateRgb,
8 | }) {
9 | const [hexValue, setHexValue] = useState('');
10 | const [progress, setProgress] = useState(false);
11 |
12 | useEffect(() => {
13 | if (progress) {
14 | return;
15 | }
16 | const hex = rgbToHex(red, green, blue);
17 |
18 | setHexValue(hex);
19 | }, [red, green, blue, progress]);
20 |
21 | const changeHex = useCallback(event => {
22 | setHexValue(event.target.value);
23 | const color = hexToRgb(event.target.value);
24 |
25 | if (color) {
26 | updateRgb(color);
27 | }
28 | }, [setHexValue, updateRgb]);
29 |
30 | return (
31 |
setProgress(true)}
36 | onBlur={() => setProgress(false)}
37 | classes="hex"
38 | />
39 | );
40 | }
41 |
42 | export default Hex;
43 |
--------------------------------------------------------------------------------
/src/lib/components/ColorPicker/Preview/RGB/index.jsx:
--------------------------------------------------------------------------------
1 | import React, { useCallback } from 'react';
2 |
3 | import { rgbToHsv } from 'lib/helpers';
4 |
5 | import RGBItem from './item';
6 |
7 | function RGB({
8 | red, green, blue, alpha, updateRgb,
9 | }) {
10 | const changeValue = useCallback((field, value) => {
11 | if (field === 'alpha') {
12 | updateRgb({ alpha: value / 100 });
13 |
14 | return;
15 | }
16 |
17 | const color = rgbToHsv({
18 | red, green, blue, [field]: value,
19 | });
20 |
21 | updateRgb({ ...color, [field]: value });
22 | }, [red, green, blue, updateRgb]);
23 |
24 | return (
25 | <>
26 |
changeValue('red', value)}
31 | />
32 |
33 | changeValue('green', value)}
38 | />
39 |
40 | changeValue('blue', value)}
45 | />
46 |
47 | changeValue('alpha', value)}
52 | />
53 |
54 | );
55 | }
56 |
57 | export default RGB;
58 |
--------------------------------------------------------------------------------
/src/lib/components/ColorPicker/Preview/RGB/item/index.jsx:
--------------------------------------------------------------------------------
1 | import React, { useCallback, useEffect, useState } from 'react';
2 |
3 | import { Input } from 'lib/components/UI';
4 |
5 | export default function RGBItem({
6 | value, type, label, onChange,
7 | }) {
8 | const [inputValue, setInputValue] = useState(value);
9 |
10 | useEffect(() => {
11 | if (value !== +inputValue && inputValue !== '') {
12 | setInputValue(value);
13 | }
14 | }, [inputValue, value]);
15 |
16 | const onChangeHandler = useCallback(event => {
17 | const value = +event.target.value;
18 |
19 | if (Number.isNaN(value) || value.length > 3 || value < 0 || value > 255) {
20 | return;
21 | }
22 | setInputValue(event.target.value);
23 |
24 | onChange(value);
25 | }, [onChange]);
26 |
27 | const onBlur = useCallback(() => {
28 | !inputValue && inputValue !== 0 && setInputValue(value);
29 | }, [inputValue, setInputValue, value]);
30 |
31 | return (
32 |
40 | );
41 | }
42 |
--------------------------------------------------------------------------------
/src/lib/components/ColorPicker/Preview/index.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | import Hex from './Hex';
4 | import RGB from './RGB';
5 |
6 | function Preview({
7 | red, green, blue, alpha, updateRgb,
8 | }) {
9 | return (
10 |
11 |
12 |
18 |
19 |
26 |
27 |
16 | {
17 | isGradient
18 | ? (
19 |
28 | )
29 | : (
30 |
39 | )
40 | }
41 |
42 | );
43 | }
44 |
45 | ColorPicker.defaultProps = {
46 | isGradient: false,
47 | onChange: () => {},
48 | color: {
49 | red: 255,
50 | green: 0,
51 | blue: 0,
52 | alpha: 1,
53 | },
54 | gradient: {
55 | points: [
56 | {
57 | left: 0,
58 | red: 0,
59 | green: 0,
60 | blue: 0,
61 | alpha: 1,
62 | },
63 | {
64 | left: 100,
65 | red: 255,
66 | green: 0,
67 | blue: 0,
68 | alpha: 1,
69 | },
70 | ],
71 | degree: 0,
72 | type: 'linear',
73 | },
74 | };
75 |
76 | export default ColorPicker;
77 |
--------------------------------------------------------------------------------
/src/lib/components/UI/Input/index.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import './index.scss';
3 |
4 | function Input({
5 | value, label, type = 'text', onChange, onFocus, onBlur, classes,
6 | }) {
7 | return (
8 |
9 |
10 |
17 |
18 |
19 | {label}
20 |
21 |