fix(chrome): fix showAlpha props issue. #159

Author: jaywcjlove

packages/color-chrome/README.md

@@ -77,6 +77,48 @@ function Demo() {
 export default Demo;
 ```
 
+Disable the opacity setting by setting `showAlpha` to `false`.
+
+```jsx mdx:preview
+import React, { useState } from 'react';
+
+import {
+  HsvaColor,
+  hsvaToRgbaString,
+  color as handleColor,
+  validHex,
+  hexToHsva,
+  hsvaToHex,
+  hsvaToHexa,
+} from '@uiw/color-convert';
+
+import Chrome from '@uiw/react-color-chrome';
+import { GithubPlacement } from '@uiw/react-color-github';
+
+function Demo() {
+  const [hsva, setHsva] = useState({ h:0, s:25.71, v:82.35, a:0.32});
+  const hex = hsvaToHex(hsva)
+  return (
+    <>
+      <Chrome
+        color={hsva}
+        style={{ marginTop: 10 }}
+        placement={GithubPlacement.TopRight}
+        showAlpha={false}
+        onChange={(color) => {
+          setHsva(color.hsva);
+        }}
+      />
+      <div style={{ background: hex, marginTop: 30, padding: 10 }}>
+        {hex}
+      </div>
+    </>
+  );
+}
+export default Demo;
+```
+
+
 ## Props
 
 ```ts

packages/color-chrome/src/index.tsx

@@ -1,14 +1,14 @@
-import React, { CSSProperties, Fragment } from 'react';
+import React, { type CSSProperties, Fragment } from 'react';
 import {
-  HsvaColor,
+  type HsvaColor,
   hsvaToRgbaString,
   color as handleColor,
   validHex,
   hexToHsva,
   hsvaToHex,
   hsvaToHexa,
 } from '@uiw/color-convert';
-import Github, { GithubProps, GithubPlacement } from '@uiw/react-color-github';
+import Github, { type GithubProps, GithubPlacement } from '@uiw/react-color-github';
 import Saturation from '@uiw/react-color-saturation';
 import Hue from '@uiw/react-color-hue';
 import Alpha from '@uiw/react-color-alpha';
@@ -132,7 +132,7 @@ const Chrome = React.forwardRef<HTMLDivElement, ChromeProps>((props, ref) => {
               {showHue == true && (
                 <Hue
                   hue={hsva.h}
-                  style={{ width: '100%', height: 12 }}
+                  style={{ width: '100%', height: 12, borderRadius: 2 }}
                   pointerProps={pointerProps}
                   bgProps={{
                     style: { borderRadius: 2 },
@@ -145,7 +145,7 @@ const Chrome = React.forwardRef<HTMLDivElement, ChromeProps>((props, ref) => {
               {showAlpha == true && (
                 <Alpha
                   hsva={hsva}
-                  style={{ marginTop: 6, height: 12 }}
+                  style={{ marginTop: 6, height: 12, borderRadius: 2 }}
                   pointerProps={pointerProps}
                   bgProps={{
                     style: { borderRadius: 2 },
@@ -166,7 +166,7 @@ const Chrome = React.forwardRef<HTMLDivElement, ChromeProps>((props, ref) => {
                     rProps={{ labelStyle, inputStyle }}
                     gProps={{ labelStyle, inputStyle }}
                     bProps={{ labelStyle, inputStyle }}
-                    aProps={{ labelStyle, inputStyle }}
+                    aProps={showAlpha == false ? false : { labelStyle, inputStyle }}
                     onChange={(reColor) => handleChange(reColor.hsva)}
                   />
                 )}
@@ -189,7 +189,7 @@ const Chrome = React.forwardRef<HTMLDivElement, ChromeProps>((props, ref) => {
                     hProps={{ labelStyle, inputStyle }}
                     sProps={{ labelStyle, inputStyle }}
                     lProps={{ labelStyle, inputStyle }}
-                    aProps={{ labelStyle, inputStyle }}
+                    aProps={showAlpha == false ? false : { labelStyle, inputStyle }}
                     onChange={(reColor) => handleChange(reColor.hsva)}
                   />
                 )}

packages/color-editable-input-hsla/README.md

@@ -47,7 +47,7 @@ export interface EditableInputHSLAProps extends Omit<EditableInputRGBAProps, 'rP
   hProps?: EditableInputRGBAProps['gProps'];
   sProps?: EditableInputRGBAProps['gProps'];
   lProps?: EditableInputRGBAProps['gProps'];
-  aProps?: EditableInputRGBAProps['aProps'];
+  aProps?: false | EditableInputRGBAProps['aProps'];
 }
 declare const EditableInputHSLA: React.ForwardRefExoticComponent<EditableInputHSLAProps & React.RefAttributes<HTMLDivElement>>;
 export default EditableInputHSLA;

packages/color-editable-input-hsla/src/index.tsx

@@ -1,12 +1,13 @@
 import React from 'react';
-import EditableInputRGBA, { EditableInputRGBAProps } from '@uiw/react-color-editable-input-rgba';
-import { HslaColor, color as handleColor, hsvaToHsla, hslaToHsva } from '@uiw/color-convert';
+import { type EditableInputProps } from '@uiw/react-color-editable-input';
+import EditableInputRGBA, { type EditableInputRGBAProps } from '@uiw/react-color-editable-input-rgba';
+import { type HslaColor, color as handleColor, hsvaToHsla, hslaToHsva } from '@uiw/color-convert';
 
 export interface EditableInputHSLAProps extends Omit<EditableInputRGBAProps, 'rProps' | 'gProps' | 'bProps'> {
   hProps?: EditableInputRGBAProps['gProps'];
   sProps?: EditableInputRGBAProps['gProps'];
   lProps?: EditableInputRGBAProps['gProps'];
-  aProps?: EditableInputRGBAProps['aProps'];
+  aProps?: false | EditableInputRGBAProps['aProps'];
 }
 
 const EditableInputHSLA = React.forwardRef<HTMLDivElement, EditableInputHSLAProps>((props, ref) => {
@@ -46,6 +47,15 @@ const EditableInputHSLA = React.forwardRef<HTMLDivElement, EditableInputHSLAProp
       }
     }
   };
+  let aPropsObj: false | EditableInputProps =
+    aProps == false
+      ? false
+      : {
+          label: 'A',
+          value: Math.round(hsla.a * 100) / 100,
+          ...aProps,
+          onChange: (evn, val) => handleChange(val, 'a', evn),
+        };
   return (
     <EditableInputRGBA
       ref={ref}
@@ -68,12 +78,7 @@ const EditableInputHSLA = React.forwardRef<HTMLDivElement, EditableInputHSLAProp
         ...lProps,
         onChange: (evn, val) => handleChange(val, 'l', evn),
       }}
-      aProps={{
-        label: 'A',
-        value: Math.round(hsla.a * 100) / 100,
-        ...aProps,
-        onChange: (evn, val) => handleChange(val, 'a', evn),
-      }}
+      aProps={aPropsObj}
       className={[prefixCls, className || ''].filter(Boolean).join(' ')}
       {...other}
     />