From 13ee4f4d96fc3045a696a0d5584bfde67389b018 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?=
 <smith3816@gmail.com>
Date: Thu, 18 Jul 2024 20:12:16 +0800
Subject: [PATCH] fix: components value

---
 src/ColorPicker.tsx       |  2 +-
 src/components/Slider.tsx |  2 +-
 tests/components.test.tsx | 35 ++++++++++++++++++++++++++---------
 3 files changed, 28 insertions(+), 11 deletions(-)

diff --git a/src/ColorPicker.tsx b/src/ColorPicker.tsx
index 081c241..e5049e3 100644
--- a/src/ColorPicker.tsx
+++ b/src/ColorPicker.tsx
@@ -100,7 +100,7 @@ export default forwardRef<HTMLDivElement, ColorPickerProps>((props, ref) => {
 
   const getAlphaColor = (alpha: number) => {
     const hsb = colorValue.toHsb();
-    hsb.a = Math.round(alpha * 100) / 100;
+    hsb.a = Math.round(alpha) / 100;
     return new Color(hsb);
   };
 
diff --git a/src/components/Slider.tsx b/src/components/Slider.tsx
index 7bd8eec..cdd6dd9 100644
--- a/src/components/Slider.tsx
+++ b/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();
+    return type === 'hue' ? c.getHue() : c.getAlpha() * 100;
   };
 
   const onDragChange = useEvent((offsetValue: TransformOffset) => {
diff --git a/tests/components.test.tsx b/tests/components.test.tsx
index e931f6b..bfcd5d3 100644
--- a/tests/components.test.tsx
+++ b/tests/components.test.tsx
@@ -1,5 +1,5 @@
 /* eslint-disable @typescript-eslint/no-loop-func */
-import { render } from '@testing-library/react';
+import { fireEvent, render } from '@testing-library/react';
 import React from 'react';
 import { expect } from 'vitest';
 import ColorPicker, { type BaseSliderProps } from '../src';
@@ -14,11 +14,18 @@ describe('ColorPicker.Components', () => {
   });
 
   it('Should component render correct', () => {
+    const onColorChange = vi.fn();
+
     const Slider = (props: BaseSliderProps) => {
-      const { type, min, max, value, prefixCls } = props;
+      const { type, min, max, value, prefixCls, onChange } = props;
 
       return (
-        <div className={`${prefixCls}-customize-${type}`}>
+        <div
+          className={`${prefixCls}-customize-${type}`}
+          onClick={() => {
+            onChange(33);
+          }}
+        >
           {`${min}/${max}/${value}`}
         </div>
       );
@@ -30,13 +37,23 @@ describe('ColorPicker.Components', () => {
         components={{
           slider: Slider,
         }}
+        onChange={onColorChange}
       />,
     );
-    expect(
-      container.querySelector('.rc-color-picker-customize-hue')?.textContent,
-    ).toBe('0/360/215');
-    expect(
-      container.querySelector('.rc-color-picker-customize-alpha')?.textContent,
-    ).toBe('0/100/100');
+
+    const hueEle = container.querySelector('.rc-color-picker-customize-hue');
+    const alphaEle = container.querySelector(
+      '.rc-color-picker-customize-alpha',
+    );
+
+    expect(hueEle.textContent).toBe('0/360/215');
+    expect(alphaEle.textContent).toBe('0/100/100');
+
+    // Change to trigger
+    fireEvent.click(hueEle);
+    expect(hueEle.textContent).toBe('0/360/33');
+
+    fireEvent.click(alphaEle);
+    expect(alphaEle.textContent).toBe('0/100/33');
   });
 });