feat: support null/undefined & add hue props (#128).

uiwjs · Sep 21, 2023 · f8c7183 · f8c7183
1 parent 959d2ca
commit f8c7183
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 15 deletions.
diff --git a/packages/color-saturation/README.md b/packages/color-saturation/README.md
@@ -34,6 +34,22 @@ export default function Demo() {
 }
 ```
 
+The value of `hsva` does not exist
+
+```jsx mdx:preview
+import React from 'react';
+import Saturation from '@uiw/react-color-saturation';
+
+export default function Demo() {
+  return (
+    <div style={{ display: 'flex', gap: 10 }}>
+      <Saturation hue={122} />
+      <Saturation hue={210} />
+      <Saturation hue={23} />
+    </div>
+  );
+}
+```
 ## Props
 
 ```ts

diff --git a/packages/color-saturation/src/index.tsx b/packages/color-saturation/src/index.tsx
@@ -1,20 +1,21 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import { HsvaColor, hsvaToHslaString } from '@uiw/color-convert';
 import Interactive, { Interaction } from '@uiw/react-drag-event-interactive';
 import { Pointer, PointerProps } from './Pointer';
 
 export interface SaturationProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {
   prefixCls?: string;
   /** hsva => `{ h: 0, s: 75, v: 82, a: 1 }` */
-  hsva: HsvaColor;
+  hsva?: HsvaColor;
+  hue?: number;
   radius?: React.CSSProperties['borderRadius'];
   /** React Component, Custom pointer component */
   pointer?: ({ prefixCls, left, top, color }: PointerProps) => JSX.Element;
   onChange?: (newColor: HsvaColor) => void;
 }
 
 const Saturation = React.forwardRef<HTMLDivElement, SaturationProps>((props, ref) => {
-  const { prefixCls = 'w-color-saturation', radius = 0, pointer, className, style, hsva, onChange, ...other } = props;
+  const { prefixCls = 'w-color-saturation', radius = 0, pointer, className, hue = 0, style, hsva, onChange, ...other } = props;
   const containerStyle: React.CSSProperties = {
     width: 200,
     height: 200,
@@ -25,6 +26,7 @@ const Saturation = React.forwardRef<HTMLDivElement, SaturationProps>((props, ref
 
   const handleChange = (interaction: Interaction, event: MouseEvent | TouchEvent) => {
     onChange &&
+      hsva &&
       onChange({
         h: hsva.h,
         s: interaction.left * 100,
@@ -34,17 +36,19 @@ const Saturation = React.forwardRef<HTMLDivElement, SaturationProps>((props, ref
       });
   };
 
-  const comProps = {
-    top: `${100 - hsva.v}%`,
-    left: `${hsva.s}%`,
-    color: hsvaToHslaString(hsva),
-  };
-  const pointerElement =
-    pointer && typeof pointer === 'function' ? (
-      pointer({ prefixCls, ...comProps })
-    ) : (
-      <Pointer prefixCls={prefixCls} {...comProps} />
-    );
+  const pointerElement = useMemo(() => {
+    if (!hsva) return null;
+    const comProps = {
+      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, pointer, prefixCls]);
+
   return (
     <Interactive
       className={[prefixCls, className || ''].filter(Boolean).join(' ')}
@@ -53,7 +57,9 @@ const Saturation = React.forwardRef<HTMLDivElement, SaturationProps>((props, ref
         position: 'absolute',
         inset: 0,
         cursor: 'crosshair',
-        backgroundImage: `linear-gradient(0deg, #000, transparent), linear-gradient(90deg, #fff, hsl(${hsva.h}, 100%, 50%))`,
+        backgroundImage: `linear-gradient(0deg, #000, transparent), linear-gradient(90deg, #fff, hsl(${
+          hsva?.h ?? hue
+        }, 100%, 50%))`,
         ...containerStyle,
       }}
       ref={ref}