fix(Saturation): fix hsva props issue. #176

Author: jaywcjlove

packages/color-saturation/src/index.tsx

@@ -24,9 +24,7 @@ const Saturation = React.forwardRef<HTMLDivElement, SaturationProps>((props, ref
     position: 'relative',
   };
 
-  const [interaction, setInteraction] = useState<Interaction>({ left: 0, top: 0, x: 0, y: 0, width: 0, height: 0 });
   const handleChange = (interaction: Interaction, event: MouseEvent | TouchEvent) => {
-    setInteraction(interaction);
     onChange &&
       hsva &&
       onChange({
@@ -40,22 +38,16 @@ const Saturation = React.forwardRef<HTMLDivElement, SaturationProps>((props, ref
 
   const pointerElement = useMemo(() => {
     if (!hsva) return null;
-    var ponitX = `${clamp(interaction.x, 0, interaction.width)}px`;
-    var ponitY = `${clamp(interaction.y, 0, interaction.height)}px`;
-    if (interaction.width === 0 || interaction.height === 0) {
-      ponitX = `${hsva.s}%`;
-      ponitY = `${100 - hsva.v}%`;
-    }
     const comProps = {
-      top: ponitY,
-      left: ponitX,
+      top: `${100 - hsva.v}%`,
+      left: `${hsva.s}%`,
       color: hsvaToHslaString(hsva),
     };
     if (pointer && typeof pointer === 'function') {
       return pointer({ prefixCls, ...comProps });
     }
     return <Pointer prefixCls={prefixCls} {...comProps} />;
-  }, [hsva, interaction, pointer, prefixCls]);
+  }, [hsva, pointer, prefixCls]);
 
   return (
     <Interactive

packages/color-sketch/README.md

@@ -23,18 +23,28 @@ import React, { useState } from 'react';
 import Sketch from '@uiw/react-color-sketch';
 
 function Demo() {
-  const [hex, setHex] = useState("#fff");
+  const [hsva, setHsva] = useState({ h: 214, s: 43, v: 90, a: 1 });
   const [disableAlpha, setDisableAlpha] = useState(false);
   return (
     <div>
-      <Sketch
-        style={{ marginLeft: 20 }}
-        color={hex}
-        disableAlpha={disableAlpha}
-        onChange={(color) => {
-          setHex(color.hex);
-        }}
-      />
+      <div style={{ display: 'flex' }}>
+        <Sketch
+          style={{ marginLeft: 20 }}
+          color={hsva}
+          disableAlpha={disableAlpha}
+          onChange={(color) => {
+            setHsva(color.hsva);
+          }}
+        />
+        <Sketch
+          style={{ marginLeft: 20 }}
+          color={hsva}
+          disableAlpha={disableAlpha}
+          onChange={(color) => {
+            setHsva(color.hsva);
+          }}
+        />
+      </div>
       <button onClick={() => setDisableAlpha(!disableAlpha)}>
         disableAlpha={disableAlpha.toString()}
       </button>