feat(color-picker): colorpicker saturation

Tencent · Apr 14, 2022 · 920263a · 920263a
1 parent 295c8c1
commit 920263a
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 6 deletions.
diff --git a/src/color-picker/components/panel/index.tsx b/src/color-picker/components/panel/index.tsx
@@ -117,18 +117,16 @@ const Panel = (props: ColorPickerProps) => {
 
   // 饱和度变化
   const handleSaturationChange = ({ saturation, value }: TdColorSaturationData) => {
-    const colorInstance = colorInstanceRef.current;
-    const { saturation: sat, value: val } = colorInstance;
+    const { saturation: sat, value: val } = colorInstanceRef.current;
     let changeTrigger: ColorPickerChangeTrigger = 'palette-saturation-brightness';
+    colorInstanceRef.current.saturation = saturation;
+    colorInstanceRef.current.value = value;
+
     if (value !== val && saturation !== sat) {
-      colorInstance.saturation = saturation;
-      colorInstance.value = value;
       changeTrigger = 'palette-saturation-brightness';
     } else if (saturation !== sat) {
-      colorInstance.saturation = saturation;
       changeTrigger = 'palette-saturation';
     } else if (value !== val) {
-      colorInstance.value = value;
       changeTrigger = 'palette-brightness';
     } else {
       return;

diff --git a/src/color-picker/components/panel/saturation.tsx b/src/color-picker/components/panel/saturation.tsx
@@ -36,11 +36,17 @@ const Saturation = (props: TdColorBaseProps) => {
     };
   };
 
+  const isDragging = useRef<Boolean>(false);
+
   const handleDrag = useCallback(
     (coordinate: Coordinate, isEnded?: boolean) => {
       if (disabled) {
         return;
       }
+      if (coordinate.x < 0 || coordinate.y < 0) {
+        return;
+      }
+
       const { saturation, value } = getSaturationAndValueByCoordinate(coordinate);
       onChange({
         saturation: saturation / 100,
@@ -56,11 +62,39 @@ const Saturation = (props: TdColorBaseProps) => {
       if (disabled) {
         return;
       }
+
+      isDragging.current = false;
       handleDrag(coordinate, true);
     },
     [disabled, handleDrag],
   );
 
+  // 移动中
+  const handleMove = useCallback(
+    (e: MouseEvent) => {
+      if (!isDragging.current || disabled) {
+        return;
+      }
+
+      const panelRect = panelRef.current.getBoundingClientRect();
+      handleDrag({ x: e.clientX - panelRect.x, y: e.clientY - panelRect.y }, false);
+    },
+    [disabled, handleDrag],
+  );
+
+  const handleEnd = useCallback(() => {
+    isDragging.current = false;
+  }, []);
+
+  useEffect(() => {
+    window.addEventListener('mousemove', handleMove, false);
+    window.addEventListener('mouseup', handleEnd, false);
+    return () => {
+      window.removeEventListener('mousemove', handleMove, false);
+      window.removeEventListener('mouseup', handleEnd, false);
+    };
+  }, [handleMove, handleEnd]);
+
   useEffect(() => {
     panelRectRef.current.width = panelRef.current.offsetWidth || SATURATION_PANEL_DEFAULT_WIDTH;
     panelRectRef.current.height = panelRef.current.offsetHeight || SATURATION_PANEL_DEFAULT_HEIGHT;
@@ -70,6 +104,7 @@ const Saturation = (props: TdColorBaseProps) => {
         panelRectRef.current.height = panelRef.current.offsetHeight;
       },
       drag: (coordinate: Coordinate) => {
+        isDragging.current = true;
         handleDrag(coordinate);
       },
       end: handleDragEnd,