refactor: Use ptg offset instead of px (#263)

* refactor: use ptg offset * test: update test case
react-component · Jul 24, 2024 · 2896f26 · 2896f26
1 parent d8a2d53
commit 2896f26
Show file tree

Hide file tree

Showing 6 changed files with 47 additions and 70 deletions.
diff --git a/src/components/Picker.tsx b/src/components/Picker.tsx
@@ -2,7 +2,7 @@ import type { FC } from 'react';
 import React, { useRef } from 'react';
 import useColorDrag from '../hooks/useColorDrag';
 import type { BaseColorPickerProps, TransformOffset } from '../interface';
-import { calculateColor, calculateOffset } from '../util';
+import { calcOffset, calculateColor } from '../util';
 
 import { useEvent } from 'rc-util';
 import Handler from './Handler';
@@ -37,8 +37,7 @@ const Picker: FC<PickerProps> = ({
     color,
     containerRef: pickerRef,
     targetRef: transformRef,
-    calculate: containerRef =>
-      calculateOffset(containerRef, transformRef, color),
+    calculate: () => calcOffset(color),
     onDragChange,
     onDragChangeComplete: () => onChangeComplete?.(colorRef.current),
     disabledDrag: disabled,
@@ -52,7 +51,7 @@ const Picker: FC<PickerProps> = ({
       onTouchStart={dragStartHandle}
     >
       <Palette prefixCls={prefixCls}>
-        <Transform offset={offset} ref={transformRef}>
+        <Transform x={offset.x} y={offset.y} ref={transformRef}>
           <Handler color={color.toRgbString()} prefixCls={prefixCls} />
         </Transform>
         <div

diff --git a/src/components/Slider.tsx b/src/components/Slider.tsx
@@ -7,7 +7,7 @@ import Palette from './Palette';
 import classNames from 'classnames';
 import { useEvent } from 'rc-util';
 import { Color } from '../color';
-import { calculateColor, calculateOffset } from '../util';
+import { calcOffset, calculateColor } from '../util';
 import Gradient from './Gradient';
 import Handler from './Handler';
 import Transform from './Transform';
@@ -61,8 +61,7 @@ const Slider: FC<BaseSliderProps> = props => {
     color,
     targetRef: transformRef,
     containerRef: sliderRef,
-    calculate: containerRef =>
-      calculateOffset(containerRef, transformRef, color, type),
+    calculate: () => calcOffset(color, type),
     onDragChange,
     onDragChangeComplete() {
       onChangeComplete(getValue(colorRef.current));
@@ -103,7 +102,7 @@ const Slider: FC<BaseSliderProps> = props => {
       onTouchStart={dragStartHandle}
     >
       <Palette prefixCls={prefixCls}>
-        <Transform offset={offset} ref={transformRef}>
+        <Transform x={offset.x} y={offset.y} ref={transformRef}>
           <Handler
             size="small"
             color={handleColor.toHexString()}

diff --git a/src/components/Transform.tsx b/src/components/Transform.tsx
@@ -1,22 +1,23 @@
 import React, { forwardRef } from 'react';
-import type { TransformOffset } from '../interface';
 
 const Transform = forwardRef<
   HTMLDivElement,
   {
-    offset?: TransformOffset;
-    children?: React.ReactNode;
+    x: number;
+    y: number;
+    children: React.ReactNode;
   }
 >((props, ref) => {
-  const { children, offset } = props;
+  const { children, x, y } = props;
   return (
     <div
       ref={ref}
       style={{
         position: 'absolute',
-        left: offset.x,
-        top: offset.y,
+        left: `${x}%`,
+        top: `${y}%`,
         zIndex: 1,
+        transform: 'translate(-50%, -50%)',
       }}
     >
       {children}

diff --git a/src/hooks/useColorDrag.ts b/src/hooks/useColorDrag.ts
@@ -17,9 +17,7 @@ interface useColorDragProps {
   direction?: 'x' | 'y';
   onDragChange?: (offset: TransformOffset) => void;
   onDragChangeComplete?: () => void;
-  calculate?: (
-    containerRef: React.RefObject<HTMLDivElement>,
-  ) => TransformOffset;
+  calculate?: () => TransformOffset;
   /** Disabled drag */
   disabledDrag?: boolean;
 }
@@ -56,9 +54,7 @@ function useColorDrag(
 
   // Always get position from `color`
   useEffect(() => {
-    if (containerRef.current) {
-      setOffsetValue(calculate(containerRef));
-    }
+    setOffsetValue(calculate());
   }, [color]);
 
   useEffect(
@@ -104,7 +100,6 @@ function useColorDrag(
       return false;
     }
 
-    // setOffsetValue(calcOffset);
     onDragChange?.(calcOffset);
   };
 

diff --git a/src/util.ts b/src/util.ts
@@ -58,43 +58,26 @@ export const calculateColor = (props: {
   });
 };
 
-export const calculateOffset = (
-  containerRef: React.RefObject<HTMLDivElement>,
-  targetRef: React.RefObject<HTMLDivElement>,
-  color?: Color,
-  type?: HsbaColorType,
-): TransformOffset => {
-  const { width, height } = containerRef.current.getBoundingClientRect();
-  const { width: targetWidth, height: targetHeight } =
-    targetRef.current.getBoundingClientRect();
-  const centerOffsetX = targetWidth / 2;
-  const centerOffsetY = targetHeight / 2;
+export const calcOffset = (color: Color, type?: HsbaColorType) => {
   const hsb = color.toHsb();
 
-  // Exclusion of boundary cases
-  if (
-    (targetWidth === 0 && targetHeight === 0) ||
-    targetWidth !== targetHeight
-  ) {
-    return { x: 0, y: 0 };
-  }
+  switch (type) {
+    case 'hue':
+      return {
+        x: (hsb.h / 360) * 100,
+        y: 50,
+      };
+    case 'alpha':
+      return {
+        x: color.a * 100,
+        y: 50,
+      };
 
-  if (type) {
-    switch (type) {
-      case 'hue':
-        return {
-          x: (hsb.h / 360) * width - centerOffsetX,
-          y: -centerOffsetY / 3,
-        };
-      case 'alpha':
-        return {
-          x: (hsb.a / 1) * width - centerOffsetX,
-          y: -centerOffsetY / 3,
-        };
-    }
+    // Picker panel
+    default:
+      return {
+        x: hsb.s * 100,
+        y: (1 - hsb.b) * 100,
+      };
   }
-  return {
-    x: hsb.s * width - centerOffsetX,
-    y: (1 - hsb.b) * height - centerOffsetY,
-  };
 };
diff --git a/tests/__snapshots__/index.test.tsx.snap b/tests/__snapshots__/index.test.tsx.snap
@@ -13,7 +13,7 @@ exports[`ColorPicker > Should component onChange work on no control mode 1`] = `
         style="position: relative;"
       >
         <div
-          style="position: absolute; left: 41.372549019607845px; top: -50px; z-index: 1;"
+          style="position: absolute; left: 91.37254901960785%; top: 0%; z-index: 1; transform: translate(-50%, -50%);"
         >
           <div
             class="rc-color-picker-handler"
@@ -40,7 +40,7 @@ exports[`ColorPicker > Should component onChange work on no control mode 1`] = `
             style="position: relative;"
           >
             <div
-              style="position: absolute; left: 9.722222222222221px; top: -16.666666666666668px; z-index: 1;"
+              style="position: absolute; left: 59.72222222222222%; top: 50%; z-index: 1; transform: translate(-50%, -50%);"
             >
               <div
                 class="rc-color-picker-handler rc-color-picker-handler-sm"
@@ -61,7 +61,7 @@ exports[`ColorPicker > Should component onChange work on no control mode 1`] = `
             style="position: relative;"
           >
             <div
-              style="position: absolute; left: 50px; top: -16.666666666666668px; z-index: 1;"
+              style="position: absolute; left: 100%; top: 50%; z-index: 1; transform: translate(-50%, -50%);"
             >
               <div
                 class="rc-color-picker-handler rc-color-picker-handler-sm"
@@ -101,7 +101,7 @@ exports[`ColorPicker > Should component render correct 1`] = `
         style="position: relative;"
       >
         <div
-          style="position: absolute; left: 0px; top: 0px; z-index: 1;"
+          style="position: absolute; left: 91.37254901960785%; top: 0%; z-index: 1; transform: translate(-50%, -50%);"
         >
           <div
             class="rc-color-picker-handler"
@@ -128,7 +128,7 @@ exports[`ColorPicker > Should component render correct 1`] = `
             style="position: relative;"
           >
             <div
-              style="position: absolute; left: 0px; top: 0px; z-index: 1;"
+              style="position: absolute; left: 59.72222222222222%; top: 50%; z-index: 1; transform: translate(-50%, -50%);"
             >
               <div
                 class="rc-color-picker-handler rc-color-picker-handler-sm"
@@ -149,7 +149,7 @@ exports[`ColorPicker > Should component render correct 1`] = `
             style="position: relative;"
           >
             <div
-              style="position: absolute; left: 0px; top: 0px; z-index: 1;"
+              style="position: absolute; left: 100%; top: 50%; z-index: 1; transform: translate(-50%, -50%);"
             >
               <div
                 class="rc-color-picker-handler rc-color-picker-handler-sm"
@@ -192,7 +192,7 @@ exports[`ColorPicker > Should custom panel work 1`] = `
           style="position: relative;"
         >
           <div
-            style="position: absolute; left: 0px; top: 0px; z-index: 1;"
+            style="position: absolute; left: 91.37254901960785%; top: 0%; z-index: 1; transform: translate(-50%, -50%);"
           >
             <div
               class="rc-color-picker-handler"
@@ -219,7 +219,7 @@ exports[`ColorPicker > Should custom panel work 1`] = `
               style="position: relative;"
             >
               <div
-                style="position: absolute; left: 0px; top: 0px; z-index: 1;"
+                style="position: absolute; left: 59.72222222222222%; top: 50%; z-index: 1; transform: translate(-50%, -50%);"
               >
                 <div
                   class="rc-color-picker-handler rc-color-picker-handler-sm"
@@ -240,7 +240,7 @@ exports[`ColorPicker > Should custom panel work 1`] = `
               style="position: relative;"
             >
               <div
-                style="position: absolute; left: 0px; top: 0px; z-index: 1;"
+                style="position: absolute; left: 100%; top: 50%; z-index: 1; transform: translate(-50%, -50%);"
               >
                 <div
                   class="rc-color-picker-handler rc-color-picker-handler-sm"
@@ -281,7 +281,7 @@ exports[`ColorPicker > Should disabled alpha work 1`] = `
         style="position: relative;"
       >
         <div
-          style="position: absolute; left: 0px; top: 0px; z-index: 1;"
+          style="position: absolute; left: 91.37254901960785%; top: 0%; z-index: 1; transform: translate(-50%, -50%);"
         >
           <div
             class="rc-color-picker-handler"
@@ -308,7 +308,7 @@ exports[`ColorPicker > Should disabled alpha work 1`] = `
             style="position: relative;"
           >
             <div
-              style="position: absolute; left: 0px; top: 0px; z-index: 1;"
+              style="position: absolute; left: 59.72222222222222%; top: 50%; z-index: 1; transform: translate(-50%, -50%);"
             >
               <div
                 class="rc-color-picker-handler rc-color-picker-handler-sm"
@@ -348,7 +348,7 @@ exports[`ColorPicker > Should prefixCls work 1`] = `
         style="position: relative;"
       >
         <div
-          style="position: absolute; left: 0px; top: 0px; z-index: 1;"
+          style="position: absolute; left: 91.37254901960785%; top: 0%; z-index: 1; transform: translate(-50%, -50%);"
         >
           <div
             class="test-prefixCls-handler"
@@ -375,7 +375,7 @@ exports[`ColorPicker > Should prefixCls work 1`] = `
             style="position: relative;"
           >
             <div
-              style="position: absolute; left: 0px; top: 0px; z-index: 1;"
+              style="position: absolute; left: 59.72222222222222%; top: 50%; z-index: 1; transform: translate(-50%, -50%);"
             >
               <div
                 class="test-prefixCls-handler test-prefixCls-handler-sm"
@@ -396,7 +396,7 @@ exports[`ColorPicker > Should prefixCls work 1`] = `
             style="position: relative;"
           >
             <div
-              style="position: absolute; left: 0px; top: 0px; z-index: 1;"
+              style="position: absolute; left: 100%; top: 50%; z-index: 1; transform: translate(-50%, -50%);"
             >
               <div
                 class="test-prefixCls-handler test-prefixCls-handler-sm"