🚧 wip: 非受控模式进度 70%

Author: arvinxx

packages/color-picker/demos/Controlled.tsx

@@ -0,0 +1,18 @@
+import React, { useState } from 'react';
+
+import SketchPicker from '@arvinxu/color-picker';
+
+const Demo = () => {
+  const [x, setX] = useState();
+  return (
+    <SketchPicker
+      color={x}
+      onChange={(e) => {
+        console.log(e);
+        setX(e);
+      }}
+    />
+  );
+};
+
+export default Demo;

packages/color-picker/package.json

@@ -23,8 +23,14 @@
     "clean": "rm -rf es lib dist build coverage .umi"
   },
   "dependencies": {
-    "reactcss": "^1.2.3",
+    "chroma-js": "^2.1.1",
+    "classnames": "^2.3.1",
     "lodash": "^4.17.21",
-    "tinycolor2": "^1.4.2"
+    "reactcss": "^1.2.3",
+    "tinycolor2": "^1.4.2",
+    "zustand": "^3.7.1"
+  },
+  "devDependencies": {
+    "@types/lodash": "^4.14.181"
   }
 }

packages/color-picker/src/ColorPicker.md

@@ -1,13 +1,13 @@
 ---
-title: ColorPicker
+title: ColorPicker 取色器
 order: 2
 group:
   path: /
 nav:
   path: /components
 ---
 
-# ColorPicker
+# ColorPicker 取色器
 
 一个更好用的取色器
 

packages/color-picker/src/components/sketch/__snapshots__/spec.js.snap renamed to packages/color-picker/src/__snapshots__/spec.js.snap

@@ -2,21 +2,18 @@
 
 import React from 'react';
 import reactCSS from 'reactcss';
-import * as color from '../../helpers/color';
+import * as color from '../helpers/color';
 
-import { EditableInput } from '../common';
-import type { HSLColor, RGBColor } from './Sketch';
+import { EditableInput } from './common';
+import { colorSelector, useStore } from '@arvinxu/color-picker/store';
+import isEqual from 'lodash/isEqual';
 
 export const SketchFields: React.FC<{
-  hex?: string;
-  hsl?: HSLColor;
-  rgb?: RGBColor;
-  hsv?: RGBColor;
-  renderers?: any;
-  width?: any;
   onChange?: (color: any, e: React.ChangeEvent<HTMLInputElement>) => void | undefined;
   disableAlpha?: boolean;
-}> = ({ onChange, rgb, hsl, hex, disableAlpha }) => {
+}> = ({ onChange, disableAlpha }) => {
+  const { rgb, hsl, hex } = useStore(colorSelector, isEqual);
+
   const styles = reactCSS(
     {
       default: {

packages/color-picker/src/components/sketch/SketchFields.tsx renamed to packages/color-picker/src/components/SketchFields.tsx

@@ -1,7 +1,8 @@
-import React, { ChangeEvent } from 'react';
+import type { ChangeEvent } from 'react';
+import React from 'react';
 
-import { Swatch } from '../common';
-import { ColorChangeHandler, ColorResult, PresetColor } from './Sketch';
+import type { ColorChangeHandler, ColorResult, PresetColor } from '../types';
+import { Swatch } from './common';
 
 export const SketchPresetColors: React.FC<{
   colors?: PresetColor[] | undefined;

packages/color-picker/src/components/sketch/SketchPresetColors.tsx renamed to packages/color-picker/src/components/SketchPresetColors.tsx

@@ -1,14 +1,8 @@
-// @ts-ignore
+// @ts-nocheck
+
 export { default as Alpha } from './Alpha';
-// @ts-ignore
 export { default as Checkboard } from './Checkboard';
-// @ts-ignore
 export { default as Hue } from './Hue';
-// @ts-ignore
 export { default as Saturation } from './Saturation';
-// @ts-ignore
-export { default as ColorWrap } from './ColorWrap';
-// @ts-ignore
 export { default as EditableInput } from './EditableInput';
-// @ts-ignore
 export { default as Swatch } from './Swatch';