From 328a99424ebe86baa6fffc7e105fdeb8bb748894 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Fri, 19 Jul 2024 20:54:48 +0800 Subject: [PATCH 1/2] chore: adjust new ver --- package.json | 2 +- src/ColorPicker.tsx | 29 +++++++++++++---------------- src/components/Gradient.tsx | 6 +++--- src/components/Slider.tsx | 2 +- tests/index.test.tsx | 6 ++++-- 5 files changed, 22 insertions(+), 23 deletions(-) diff --git a/package.json b/package.json index 875cfaa..34a0b93 100644 --- a/package.json +++ b/package.json @@ -45,7 +45,7 @@ ] }, "dependencies": { - "@ant-design/fast-color": "^1.2.0", + "@ant-design/fast-color": "^2.0.0", "@babel/runtime": "^7.23.6", "classnames": "^2.2.6", "rc-util": "^5.38.1" diff --git a/src/ColorPicker.tsx b/src/ColorPicker.tsx index e5049e3..d407059 100644 --- a/src/ColorPicker.tsx +++ b/src/ColorPicker.tsx @@ -1,6 +1,6 @@ import type { CSSProperties } from 'react'; import React, { forwardRef, useMemo } from 'react'; -import { ColorPickerPrefixCls, defaultColor, generateColor } from './util'; +import { ColorPickerPrefixCls, defaultColor } from './util'; import classNames from 'classnames'; import { Color } from './color'; @@ -76,12 +76,10 @@ export default forwardRef((props, ref) => { value, defaultValue, }); - const alphaColor = useMemo(() => { - const rgb = generateColor(colorValue.toRgbString()); - // alpha color need equal 1 for base color - rgb.setAlpha(1); - return rgb.toRgbString(); - }, [colorValue]); + const alphaColor = useMemo( + () => colorValue.setA(1).toRgbString(), + [colorValue], + ); // ============================ Events ============================ const handleChange: BaseColorPickerProps['onChange'] = (data, type) => { @@ -93,16 +91,15 @@ export default forwardRef((props, ref) => { // Convert const getHueColor = (hue: number) => { - const hsb = colorValue.toHsb(); - hsb.h = hue; - return new Color(hsb); + console.log('~~~~~~'); + // debugger; + const c = new Color(colorValue.setHue(hue)); + console.log('>>>', hue, colorValue, c); + return c; }; - const getAlphaColor = (alpha: number) => { - const hsb = colorValue.toHsb(); - hsb.a = Math.round(alpha) / 100; - return new Color(hsb); - }; + const getAlphaColor = (alpha: number) => + new Color(colorValue.setA(alpha / 100)); // Slider change const onHueChange = (hue: number) => { @@ -170,7 +167,7 @@ export default forwardRef((props, ref) => { ]} min={0} max={100} - value={colorValue.getAlpha() * 100} + value={colorValue.a * 100} onChange={onAlphaChange} onChangeComplete={onAlphaChangeComplete} /> diff --git a/src/components/Gradient.tsx b/src/components/Gradient.tsx index cbd7e7b..7400372 100644 --- a/src/components/Gradient.tsx +++ b/src/components/Gradient.tsx @@ -1,6 +1,6 @@ import type { FC } from 'react'; import React, { useMemo } from 'react'; -import type { Color } from '../color'; +import { Color } from '../color'; import type { HsbaColorType } from '../interface'; import { generateColor } from '../util'; @@ -15,9 +15,9 @@ const Gradient: FC<{ () => colors .map((color, idx) => { - const result = generateColor(color); + let result = generateColor(color); if (type === 'alpha' && idx === colors.length - 1) { - result.setAlpha(1); + result = new Color(result.setA(1)); } return result.toRgbString(); }) diff --git a/src/components/Slider.tsx b/src/components/Slider.tsx index cdd6dd9..6b67902 100644 --- a/src/components/Slider.tsx +++ b/src/components/Slider.tsx @@ -41,7 +41,7 @@ const Slider: FC = props => { const colorRef = useRef(color); const getValue = (c: Color) => { - return type === 'hue' ? c.getHue() : c.getAlpha() * 100; + return type === 'hue' ? c.getHue() : c.a * 100; }; const onDragChange = useEvent((offsetValue: TransformOffset) => { diff --git a/tests/index.test.tsx b/tests/index.test.tsx index 4714031..6a600ae 100644 --- a/tests/index.test.tsx +++ b/tests/index.test.tsx @@ -421,11 +421,13 @@ describe('ColorPicker', () => { color={value} onChange={(color, type) => { onChange(color, type); + + let passedColor = color; if (type !== 'alpha') { // bad case, color should be immutable - color.setAlpha(1); + passedColor = new Color(color.setA(1)); } - setValue(color); + setValue(passedColor); }} /> From 064851c1eeccb8b038e7a2b02b49d0f89a8fc59c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Fri, 19 Jul 2024 23:45:29 +0800 Subject: [PATCH 2/2] chore: bump --- docs/example/basic.tsx | 8 +++++++- package.json | 2 +- src/ColorPicker.tsx | 8 +------- 3 files changed, 9 insertions(+), 9 deletions(-) diff --git a/docs/example/basic.tsx b/docs/example/basic.tsx index 6f94b12..c217143 100644 --- a/docs/example/basic.tsx +++ b/docs/example/basic.tsx @@ -7,7 +7,13 @@ export default () => { return ( <> - + { + console.log('onChange', nextValue.toHsbString(), nextValue); + setValue(nextValue); + }} + />
((props, ref) => { }; // Convert - const getHueColor = (hue: number) => { - console.log('~~~~~~'); - // debugger; - const c = new Color(colorValue.setHue(hue)); - console.log('>>>', hue, colorValue, c); - return c; - }; + const getHueColor = (hue: number) => new Color(colorValue.setHue(hue)); const getAlphaColor = (alpha: number) => new Color(colorValue.setA(alpha / 100));