feat(color-hue): add reverse prop and performance optimizations #202

- Add reverse prop to flip hue progression direction (similar to color-alpha)
- Fix vertical mode drag interaction logic for proper color mapping
- Optimize performance with useCallback and useMemo for gradient functions
- Improve color gradient calculation for both horizontal and vertical modes

Author: jaywcjlove

packages/color-hue/README.md

@@ -60,17 +60,53 @@ npm i @uiw/react-color-hue
 
 ```jsx mdx:preview
 import React, { useState } from 'react';
+import { hsvaToRgbaString } from '@uiw/color-convert';
 import Hue from '@uiw/react-color-hue';
 
 export default function Demo() {
-  const [hsva, setHsva] = useState({ h: 0, s: 0, v: 68, a: 1 });
+  const [hsva, setHsva] = useState({ "h":0,"s":100,"v":100,"a":1 });
   return (
-    <Hue
-      hue={hsva.h}
-      onChange={(newHue) => {
-        setHsva({ ...hsva, ...newHue });
-      }}
-    />
+  <>
+    <div style={{ display: "flex", gap: 10, flexDirection: "column", paddingBottom: 20 }}>
+      <Hue
+        hue={hsva.h}
+        onChange={(newHue) => {
+          setHsva({ ...hsva, ...newHue });
+        }}
+      />
+      <Hue
+        hue={hsva.h}
+        reverse={true}
+        onChange={(newHue) => {
+          setHsva({ ...hsva, ...newHue });
+        }}
+      />
+    </div>
+    <div style={{ display: "flex", gap: 10, flexDirection: "row" }}>
+      <Hue
+        hue={hsva.h}
+        direction="vertical"
+        width={16}
+        height={120}
+        onChange={(newHue) => {
+          setHsva({ ...hsva, ...newHue });
+        }}
+      />
+      <Hue
+        hue={hsva.h}
+        direction="vertical"
+        reverse={true}
+        width={16}
+        height={120}
+        onChange={(newHue) => {
+          setHsva({ ...hsva, ...newHue });
+        }}
+      />
+    </div>
+    <div style={{ background: hsvaToRgbaString(hsva), marginTop: 30, padding: 10 }}>
+      {JSON.stringify(hsva)}
+    </div>
+  </>
   );
 }
 ```

packages/color-hue/src/index.tsx

@@ -1,25 +1,60 @@
-import React from 'react';
+import React, { useCallback, useMemo } from 'react';
 import Alpha, { AlphaProps } from '@uiw/react-color-alpha';
 
+const NORMAL_COLORS =
+  'rgb(255, 0, 0) 0%, rgb(255, 255, 0) 17%, rgb(0, 255, 0) 33%, rgb(0, 255, 255) 50%, rgb(0, 0, 255) 67%, rgb(255, 0, 255) 83%, rgb(255, 0, 0) 100%';
+const REVERSED_COLORS =
+  'rgb(255, 0, 0) 0%, rgb(255, 0, 255) 17%, rgb(0, 0, 255) 33%, rgb(0, 255, 255) 50%, rgb(0, 255, 0) 67%, rgb(255, 255, 0) 83%, rgb(255, 0, 0) 100%';
+
 export interface HueProps extends Omit<AlphaProps, 'hsva' | 'onChange'> {
   onChange?: (newHue: { h: number }) => void;
   hue?: number;
 }
 
 const Hue = React.forwardRef<HTMLDivElement, HueProps>((props, ref) => {
-  const { prefixCls = 'w-color-hue', className, hue = 0, onChange, direction = 'horizontal', ...other } = props;
+  const { prefixCls = 'w-color-hue', className, hue = 0, onChange, direction = 'horizontal', reverse = false, ...other } = props;
+
+  const getGradientBackground = useCallback(() => {
+    if (direction === 'horizontal') {
+      const colors = reverse ? REVERSED_COLORS : NORMAL_COLORS;
+      const gradientDirection = 'right';
+      return `linear-gradient(to ${gradientDirection}, ${colors})`;
+    } else {
+      // 垂直模式下，由于交互逻辑使用了 1-value，所以渐变颜色也要反转
+      const colors = reverse ? NORMAL_COLORS : REVERSED_COLORS;
+      const gradientDirection = 'bottom';
+      return `linear-gradient(to ${gradientDirection}, ${colors})`;
+    }
+  }, [direction, reverse]);
+
+  const getHueFromInteraction = useCallback(
+    (interaction: any) => {
+      const value = direction === 'horizontal' ? interaction.left : interaction.top;
+      let normalizedValue;
+      if (direction === 'horizontal') {
+        normalizedValue = reverse ? 1 - value : value;
+      } else {
+        // 垂直模式下，正常情况下顶部应该是0，底部是360，所以需要反转
+        normalizedValue = reverse ? value : 1 - value;
+      }
+      return 360 * normalizedValue;
+    },
+    [direction, reverse],
+  );
+
+  const gradientBackground = useMemo(() => getGradientBackground(), [getGradientBackground]);
+
   return (
     <Alpha
       ref={ref}
       className={`${prefixCls} ${className || ''}`}
       {...other}
       direction={direction}
-      background={`linear-gradient(to ${
-        direction === 'horizontal' ? 'right' : 'bottom'
-      }, rgb(255, 0, 0) 0%, rgb(255, 255, 0) 17%, rgb(0, 255, 0) 33%, rgb(0, 255, 255) 50%, rgb(0, 0, 255) 67%, rgb(255, 0, 255) 83%, rgb(255, 0, 0) 100%)`}
+      reverse={reverse}
+      background={gradientBackground}
       hsva={{ h: hue, s: 100, v: 100, a: hue / 360 }}
       onChange={(_, interaction) => {
-        onChange && onChange({ h: direction === 'horizontal' ? 360 * interaction.left : 360 * interaction.top });
+        onChange && onChange({ h: getHueFromInteraction(interaction) });
       }}
     />
   );