feat(Colorful): add disableAlpha props (#95).

uiwjs · Jul 25, 2022 · ed0b0ac · ed0b0ac
1 parent 6ca544f
commit ed0b0ac
Show file tree

Hide file tree

Showing 3 changed files with 53 additions and 10 deletions.
diff --git a/packages/color-colorful/README.md b/packages/color-colorful/README.md
@@ -38,6 +38,36 @@ function Demo() {
 export default Demo;
 ```
 
+```jsx mdx:preview
+import React, { useState } from 'react';
+import Colorful from '@uiw/react-color-colorful';
+
+function Demo() {
+  const [hex, setHex] = useState("#59c09a");
+  const [disableAlpha, setDisableAlpha] = useState(false);
+  return (
+    <>
+      <label>
+        <input type="checkbox" checked={disableAlpha} onChange={(evn) => setDisableAlpha(evn.target.checked)} />
+        {disableAlpha ? "隐藏" : "显示"} Alpha
+      </label>
+      <Colorful
+        color={hex}
+        disableAlpha={disableAlpha}
+        onChange={(color) => {
+          setHex(color.hexa);
+        }}
+      />
+      <div style={{ background: hex, marginTop: 30, padding: 10 }}>
+        {hex}
+      </div>
+    </>
+  );
+}
+export default Demo;
+```
+
+
 ## Props
 
 ```ts
@@ -47,6 +77,7 @@ export interface ColorfulProps extends Omit<React.HTMLAttributes<HTMLDivElement>
   prefixCls?: string;
   onChange?: (color: ColorResult) => void;
   color?: string | HsvaColor;
+  disableAlpha?: boolean;
 }
 ```
 

diff --git a/packages/color-colorful/src/index.tsx b/packages/color-colorful/src/index.tsx
@@ -16,6 +16,7 @@ export interface ColorfulProps extends Omit<React.HTMLAttributes<HTMLDivElement>
   prefixCls?: string;
   onChange?: (color: ColorResult) => void;
   color?: string | HsvaColor;
+  disableAlpha?: boolean;
 }
 
 const Pointer = ({ style, color, ...props }: React.HTMLAttributes<HTMLDivElement> & { color: string }) => (
@@ -47,7 +48,7 @@ const Pointer = ({ style, color, ...props }: React.HTMLAttributes<HTMLDivElement
 );
 
 const Colorful = React.forwardRef<HTMLDivElement, ColorfulProps>((props, ref) => {
-  const { prefixCls = 'w-color-colorful', className, onChange, color, style, ...other } = props;
+  const { prefixCls = 'w-color-colorful', className, onChange, color, style, disableAlpha, ...other } = props;
   const hsva = (typeof color === 'string' && validHex(color) ? hexToHsva(color) : color || {}) as HsvaColor;
   const handleChange = (value: HsvaColor) => onChange && onChange(handleColor(value));
   return (
@@ -74,18 +75,21 @@ const Colorful = React.forwardRef<HTMLDivElement, ColorfulProps>((props, ref) =>
       <Hue
         hue={hsva.h}
         height={24}
+        radius={disableAlpha ? '0 0 8px 8px' : 0}
         className={prefixCls}
         onChange={(newHue) => handleChange({ ...hsva, ...newHue })}
         pointer={({ left }) => <Pointer style={{ left }} color={`hsl(${hsva.h || 0}deg 100% 50%)`} />}
       />
-      <Alpha
-        hsva={hsva}
-        height={24}
-        className={prefixCls}
-        radius="0 0 8px 8px"
-        pointer={({ left }) => <Pointer style={{ left }} color={hsvaToRgbaString(hsva)} />}
-        onChange={(newAlpha) => handleChange({ ...hsva, ...newAlpha })}
-      />
+      {!disableAlpha && (
+        <Alpha
+          hsva={hsva}
+          height={24}
+          className={prefixCls}
+          radius="0 0 8px 8px"
+          pointer={({ left }) => <Pointer style={{ left }} color={hsvaToRgbaString(hsva)} />}
+          onChange={(newAlpha) => handleChange({ ...hsva, ...newAlpha })}
+        />
+      )}
     </div>
   );
 });

diff --git a/website/src/pages/colorful/index.tsx b/website/src/pages/colorful/index.tsx
@@ -1,18 +1,26 @@
-import { useContext } from 'react';
+import { useContext, useState } from 'react';
 import Colorful from '@uiw/react-color-colorful';
 import Markdown from '../../components/Markdown';
 import { Context } from '../../Store';
 
 function Example() {
   const { hsva, dispatch } = useContext(Context);
+  const [disableAlpha, setDisableAlpha] = useState(false);
   return (
     <div style={{ width: 256 }}>
       <Colorful
         color={hsva}
+        disableAlpha={disableAlpha}
         onChange={(color) => {
           dispatch!({ hsva: { ...hsva, ...color.hsva } });
         }}
       />
+      <div>
+        <label>
+          <input type="checkbox" checked={disableAlpha} onChange={(evn) => setDisableAlpha(evn.target.checked)} />
+          {disableAlpha ? '隐藏' : '显示'} Alpha
+        </label>
+      </div>
     </div>
   );
 }