refactor: bump fast-color version (#259)

* chore: adjust new ver

* chore: bump

Author: zombieJ

docs/example/basic.tsx

@@ -7,7 +7,13 @@ export default () => {
 
   return (
     <>
-      <ColorPicker color={value} onChange={setValue} />
+      <ColorPicker
+        color={value}
+        onChange={nextValue => {
+          console.log('onChange', nextValue.toHsbString(), nextValue);
+          setValue(nextValue);
+        }}
+      />
       <br />
       <div
         style={{

package.json

@@ -45,7 +45,7 @@
     ]
   },
   "dependencies": {
-    "@ant-design/fast-color": "^1.2.0",
+    "@ant-design/fast-color": "^2.0.1",
     "@babel/runtime": "^7.23.6",
     "classnames": "^2.2.6",
     "rc-util": "^5.38.1"

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<HTMLDivElement, ColorPickerProps>((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) => {
@@ -92,17 +90,10 @@ export default forwardRef<HTMLDivElement, ColorPickerProps>((props, ref) => {
   };
 
   // Convert
-  const getHueColor = (hue: number) => {
-    const hsb = colorValue.toHsb();
-    hsb.h = hue;
-    return new Color(hsb);
-  };
+  const getHueColor = (hue: number) => new Color(colorValue.setHue(hue));
 
-  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 +161,7 @@ export default forwardRef<HTMLDivElement, ColorPickerProps>((props, ref) => {
               ]}
               min={0}
               max={100}
-              value={colorValue.getAlpha() * 100}
+              value={colorValue.a * 100}
               onChange={onAlphaChange}
               onChangeComplete={onAlphaChangeComplete}
             />

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();
         })

src/components/Slider.tsx

@@ -41,7 +41,7 @@ const Slider: FC<BaseSliderProps> = 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) => {

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);
             }}
           />
         </>