feat(Compact): Add editable input.

uiwjs · Jul 9, 2021 · f234f3d · f234f3d
1 parent 4e2f991
commit f234f3d
Show file tree

Hide file tree

Showing 7 changed files with 80 additions and 23 deletions.
diff --git a/package.json b/package.json
@@ -1,10 +1,10 @@
 {
   "private": true,
   "scripts": {
-    "lib:t:esm": "lerna exec --scope @uiw/react-color-editable-input -- tsbb types --outDir lib/esm",
-    "lib:t:cjs": "lerna exec --scope @uiw/react-color-editable-input -- tsbb types --outDir lib/cjs",
-    "lib:b": "lerna exec --scope @uiw/react-color-editable-input -- tsbb build --target react",
-    "lib:watch": "lerna exec --scope @uiw/react-color-editable-input -- tsbb watch --target react",
+    "lib:t:esm": "lerna exec --scope @uiw/react-color-compact -- tsbb types --outDir lib/esm",
+    "lib:t:cjs": "lerna exec --scope @uiw/react-color-compact -- tsbb types --outDir lib/cjs",
+    "lib:b": "lerna exec --scope @uiw/react-color-compact -- tsbb build --target react",
+    "lib:watch": "lerna exec --scope @uiw/react-color-compact -- tsbb watch --target react",
     "lib:watch:type": "npm run lib:t:esm -- --watch & npm run lib:t:cjs -- --watch",
     "lib:type": "npm run lib:t:cjs && npm run lib:t:esm",
     "lib:build": "npm run lib:b && npm run lib:type",

diff --git a/packages/color-compact/README.md b/packages/color-compact/README.md
@@ -3,7 +3,7 @@ React Color Compact
 
 [![npm bundle size](https://img.shields.io/bundlephobia/minzip/@uiw/react-color-compact)](https://bundlephobia.com/package/@uiw/react-color-compact) [![npm version](https://img.shields.io/npm/v/@uiw/react-color-compact.svg)](https://www.npmjs.com/package/@uiw/react-color-compact) [![Open in unpkg](https://img.shields.io/badge/Open%20in-unpkg-blue)](https://uiwjs.github.io/npm-unpkg/#/pkg/@uiw/react-color-compact/file/README.md)
 
-![image](https://user-images.githubusercontent.com/1680273/124771923-22500c00-df6e-11eb-9376-4709d4fc6478.png)
+![react-color-compact](https://user-images.githubusercontent.com/1680273/125018470-bf629000-e0a7-11eb-8cfb-11c22c6b185b.png)
 
 ## Install
 

diff --git a/packages/color-compact/package.json b/packages/color-compact/package.json
@@ -30,7 +30,8 @@
   "dependencies": {
     "@babel/runtime": "7.14.6",
     "@uiw/color-convert": "^0.0.10",
-    "@uiw/react-color-alpha": "^0.0.10"
+    "@uiw/react-color-alpha": "^0.0.10",
+    "@uiw/react-color-editable-input": "^0.0.10"
   },
   "devDependencies": {
     "@types/react": "17.0.13",

diff --git a/packages/color-compact/src/index.tsx b/packages/color-compact/src/index.tsx
@@ -3,18 +3,21 @@ import {
   ColorResult,
   color as handleColor,
   hexToHsva,
-  equalColorObjects,
   validHex,
   HsvaColor,
   hsvaToHex,
   getContrastingColor,
+  hsvaToRgba,
+  RgbaColor,
+  rgbaToHsva,
 } from '@uiw/color-convert';
+import EditableInput, { EditableInputProps } from '@uiw/react-color-editable-input';
 
-export interface CompactProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange' | 'color'> {
+export interface CompactProps<T> extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange' | 'color'> {
   prefixCls?: string;
   color?: string | HsvaColor;
   colors?: string[];
-  onChange?: (color: ColorResult, evn: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
+  onChange?: (color: ColorResult, evn?: T) => void;
 }
 
 const COLORS = [
@@ -56,12 +59,55 @@ const COLORS = [
   '#AB149E',
 ];
 
-export default React.forwardRef<HTMLDivElement, CompactProps>((props, ref) => {
+const EditableInputRGB = ({ style, ...props }: EditableInputProps) => (
+  <EditableInput
+    labelStyle={{ paddingRight: 5, marginTop: -1 }}
+    inputStyle={{
+      outline: 'none',
+      boxShadow: 'initial',
+      background: 'transparent',
+    }}
+    style={{
+      flexDirection: 'row-reverse',
+      flex: '1 1 0%',
+      ...style,
+    }}
+    {...props}
+  />
+);
+
+export default React.forwardRef<HTMLDivElement, CompactProps<React.MouseEvent<HTMLDivElement, MouseEvent>>>((props, ref) => {
   const { prefixCls = 'w-color-compact', className, style, onChange, color, colors = COLORS, ...other } = props;
   const hsva = (typeof color === 'string' && validHex(color) ? hexToHsva(color) : color) as HsvaColor;
   const handleClick = (hexStr: string, evn: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
     onChange && onChange(handleColor(hexToHsva(hexStr)), evn);
   };
+  const rgba = (color ? hsvaToRgba(hsva) : {}) as RgbaColor;
+  const hex = color ? hsvaToHex(hsva).replace(/^#/, '') : '';
+  const handleChange = (
+    value: string | number,
+    type: 'hex' | 'r' | 'g' | 'b' | 'a',
+    evn: React.ChangeEvent<HTMLInputElement>,
+  ) => {
+    if (typeof value === 'number') {
+      if (value > 255) value = 255;
+      if (type === 'a') {
+        onChange && onChange(handleColor({ ...hsva, a: value / 100 }));
+      }
+      if (type === 'r') {
+        onChange && onChange(handleColor(rgbaToHsva({ ...rgba, r: value })));
+      }
+      if (type === 'g') {
+        onChange && onChange(handleColor(rgbaToHsva({ ...rgba, g: value })));
+      }
+      if (type === 'b') {
+        onChange && onChange(handleColor(rgbaToHsva({ ...rgba, b: value })));
+      }
+    }
+    if (typeof value === 'string' && type === 'hex' && validHex(value) && /(3|6)/.test(String(value.length))) {
+      onChange && onChange(handleColor(hexToHsva(value)));
+    }
+  };
   return (
     <div
       ref={ref}
@@ -117,6 +163,17 @@ export default React.forwardRef<HTMLDivElement, CompactProps>((props, ref) => {
           </div>
         );
       })}
+      <div style={{ display: 'flex', margin: '0 4px 3px 0' }}>
+        <EditableInputRGB
+          style={{ minWidth: 80 }}
+          onChange={(evn, val) => handleChange(val, 'hex', evn)}
+          label={<div style={{ width: 8, height: 8, backgroundColor: `#${hex}` }} />}
+          value={hex}
+        />
+        <EditableInputRGB label="R" value={rgba.r || 0} onChange={(evn, val) => handleChange(val, 'r', evn)} />
+        <EditableInputRGB label="G" value={rgba.g || 0} onChange={(evn, val) => handleChange(val, 'g', evn)} />
+        <EditableInputRGB label="B" value={rgba.b || 0} onChange={(evn, val) => handleChange(val, 'b', evn)} />
+      </div>
     </div>
   );
 });
diff --git a/packages/color-editable-input/src/index.tsx b/packages/color-editable-input/src/index.tsx
@@ -7,7 +7,7 @@ const getNumberValue = (value: string) => Number(String(value).replace(/%/g, '')
 export interface EditableInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange'> {
   prefixCls?: string;
   value?: string | number;
-  label?: string;
+  label?: React.ReactNode;
   labelStyle?: React.CSSProperties;
   inputStyle?: React.CSSProperties;
   onChange?: (evn: React.ChangeEvent<HTMLInputElement>, value: string | number) => void;
@@ -86,14 +86,16 @@ export default React.forwardRef<HTMLInputElement, EditableInputProps>((props, re
           ...inputStyle,
         }}
       />
-      <span
-        style={{
-          color: 'rgb(153, 153, 153)',
-          textTransform: 'capitalize',
-          ...labelStyle,
-        }}
-        children={label}
-      />
+      {label && (
+        <span
+          style={{
+            color: 'rgb(153, 153, 153)',
+            textTransform: 'capitalize',
+            ...labelStyle,
+          }}
+          children={label}
+        />
+      )}
     </div>
   );
 });
diff --git a/packages/color-sketch/src/index.tsx b/packages/color-sketch/src/index.tsx
@@ -171,7 +171,6 @@ export default React.forwardRef<HTMLDivElement, SketchProps>((props, ref) => {
         <EditableInput
           label="G"
           value={rgba.g}
-          // onChange={handleRGBA}
           onChange={(_, val) => handleRGBA(val, 'g')}
           style={{
             flexDirection: 'column',
@@ -182,7 +181,6 @@ export default React.forwardRef<HTMLDivElement, SketchProps>((props, ref) => {
         <EditableInput
           label="B"
           value={rgba.b}
-          // onChange={handleRGBA}
           onChange={(_, val) => handleRGBA(val, 'b')}
           style={{
             flexDirection: 'column',
@@ -193,7 +191,6 @@ export default React.forwardRef<HTMLDivElement, SketchProps>((props, ref) => {
         <EditableInput
           label="A"
           value={parseInt(String(rgba.a * 100), 10)}
-          // onChange={handleRGBA}
           onChange={(_, val) => handleRGBA(val, 'a')}
           style={{
             flexDirection: 'column',

diff --git a/test/compact.test.tsx b/test/compact.test.tsx
@@ -36,7 +36,7 @@ it('Alpha', async () => {
       boxShadow: 'rgb(0 0 0 / 15%) 0px 0px 0px 1px, rgb(0 0 0 / 15%) 0px 8px 16px',
     });
     if (tree.children) {
-      expect(tree.children.length).toEqual(36);
+      expect(tree.children.length).toEqual(37);
       tree.children.forEach((child) => {
         if (typeof child === 'object') {
           expect(child.type).toEqual('div');