💄 style: 优化预览器样式

packages/color-picker/src/components/Previewer/index.tsx

@@ -0,0 +1,42 @@
+import type { FC } from 'react';
+import React, { memo } from 'react';
+import reactCSS from 'reactcss';
+import isEqual from 'lodash/isEqual';
+
+import { Checkboard } from '../common';
+
+import { useStore } from '../../store';
+import type { ColorPickerProps } from '../../types';
+
+export const Previewer: FC<ColorPickerProps> = memo(() => {
+  const rgba = useStore((s) => s.colorModel.rgba(), isEqual);
+
+  const styles: any = reactCSS({
+    default: {
+      color: {
+        width: '24px',
+        height: '24px',
+        position: 'relative',
+        marginTop: '4px',
+        marginLeft: '4px',
+        borderRadius: 12,
+        overflow: 'hidden',
+      },
+      activeColor: {
+        borderRadius: 12,
+        absolute: '0px 0px 0px 0px',
+        background: `rgba(${rgba.join(',')})`,
+        boxShadow: 'inset 0 0 0 1px rgba(0,0,0,.15), inset 0 0 4px rgba(0,0,0,.25)',
+      },
+    },
+  });
+
+  return (
+    <div style={styles.color}>
+      <Checkboard />
+      <div style={styles.activeColor} />
+    </div>
+  );
+});
+
+export default Previewer;

packages/color-picker/src/components/Saturation/index.tsx

@@ -1,12 +1,12 @@
 import type { FC } from 'react';
-import React, { useEffect, useMemo, useRef } from 'react';
+import React, { memo, useEffect, useMemo, useRef } from 'react';
 import reactCSS from 'reactcss';
 
 import { fromEvent, Subject } from 'rxjs';
 import { concatMap, map, takeUntil, throttleTime } from 'rxjs/operators';
 import { useStore } from '../../store';
 
-export const Saturation: FC = () => {
+export const Saturation: FC = memo(() => {
   const hue = useStore((s) => s.hue);
   const saturation = useStore((s) => s.saturation);
   const brightness = useStore((s) => s.brightness);
@@ -127,6 +127,6 @@ export const Saturation: FC = () => {
       </div>
     </div>
   );
-};
+});
 
 export default Saturation;

packages/color-picker/src/components/SketchFields/index.tsx

@@ -1,12 +1,12 @@
 import type { FC } from 'react';
-import React, { memo } from 'react';
+import React, { memo, useMemo } from 'react';
 import isEqual from 'lodash/isEqual';
 import { Flexbox } from '@arvinxu/layout-kit';
 import cls from 'classnames';
 import copy from 'copy-to-clipboard';
 import shallow from 'zustand/shallow';
 
-import type { ColorMode, ColorObj, ColorPickerStore } from '../../store';
+import type { ColorMode, ColorPickerStore, SpaceColor } from '../../store';
 import { colorSpaceSelector, useStore } from '../../store';
 import { isValidHex } from '../../helpers/color';
 import DraggableLabel from '../DraggableLabel';
@@ -27,7 +27,7 @@ export const SketchFields: FC = memo(() => {
   const hex = useStore((s) => s.colorModel.hex('rgb'));
   const alpha = useStore((s) => Math.round(s.colorModel.alpha() * 100));
 
-  const modeValue = useStore(colorSpaceSelector, isEqual) as ColorObj;
+  const modeValue = useStore(colorSpaceSelector, isEqual) as SpaceColor;
 
   const { updateAlpha, updateByHex, updateColorMode, updateByColorSpace } = useStore(
     selector,
@@ -36,6 +36,38 @@ export const SketchFields: FC = memo(() => {
 
   const prefixCls = 'avx-color-fields';
 
+  const inputGroup = useMemo(
+    () =>
+      mode.split('').map((dim) => {
+        return (
+          <div key={dim}>
+            <EditableInput
+              value={Math.round(modeValue?.[dim] || 0)}
+              onChange={(value) => {
+                updateByColorSpace(dim, value);
+              }}
+            />
+          </div>
+        );
+      }),
+    [mode, modeValue, updateByColorSpace],
+  );
+
+  const labelGroup = useMemo(
+    () =>
+      mode.split('').map((dim, index) => (
+        <DraggableLabel
+          key={`${dim}-${index}`}
+          text={dim}
+          value={modeValue[dim]}
+          onChange={(value) => {
+            updateByColorSpace(dim, value);
+          }}
+        />
+      )),
+    [mode, modeValue, updateByColorSpace],
+  );
+
   return (
     <Flexbox gap={2} style={{ margin: '4px 0' }}>
       <Flexbox horizontal className={prefixCls} gap={5}>
@@ -50,19 +82,7 @@ export const SketchFields: FC = memo(() => {
             style={{ width: 56, fontFamily: 'monospace' }}
           />
         </div>
-        {mode.split('').map((dim) => {
-          return (
-            <div key={dim}>
-              <EditableInput
-                value={Math.round(modeValue?.[dim] || 0)}
-                onChange={(value) => {
-                  updateByColorSpace(dim, value);
-                }}
-              />
-            </div>
-          );
-        })}
-
+        {inputGroup}
         <div>
           <EditableInput value={alpha} onChange={updateAlpha} />
         </div>
@@ -94,20 +114,11 @@ export const SketchFields: FC = memo(() => {
               value={mode}
             >
               <option value="rgb">RGB</option>
-              <option value="hsl">HSL</option>
+              {/*<option value="hsl">HSL</option>*/}
               <option value="hsv">HSV</option>
             </select>
           </div>
-          {mode.split('').map((dim, index) => (
-            <DraggableLabel
-              key={`${dim}-${index}`}
-              text={dim}
-              value={modeValue[dim]}
-              onChange={(value) => {
-                updateByColorSpace(dim, value);
-              }}
-            />
-          ))}
+          {labelGroup}
         </Flexbox>
         <DraggableLabel
           className={`${prefixCls}-label-alpha`}

packages/color-picker/src/container/Sketch.tsx

@@ -1,22 +1,18 @@
 import type { FC } from 'react';
 import React, { memo } from 'react';
 import reactCSS from 'reactcss';
-import isEqual from 'lodash/isEqual';
 import cls from 'classnames';
 
-import { Checkboard } from '../components/common';
 import SketchFields from '../components/SketchFields';
 import Alpha from '../components/Alpha';
 import Hue from '../components/Hue';
 import Saturation from '../components/Saturation';
+import Previewer from '../components/Previewer';
 import SketchPresetColors from '../components/SketchPresetColors';
 
-import { useStore } from '../store';
 import type { ColorPickerProps } from '../types';
 
 export const Sketch: FC<ColorPickerProps> = memo(({ className }) => {
-  const rgba = useStore((s) => s.colorModel.rgba(), isEqual);
-
   const styles: any = reactCSS({
     default: {
       picker: {
@@ -41,20 +37,7 @@ export const Sketch: FC<ColorPickerProps> = memo(({ className }) => {
         padding: '4px 0',
         flex: '1',
       },
-      color: {
-        width: '24px',
-        height: '24px',
-        position: 'relative',
-        marginTop: '4px',
-        marginLeft: '4px',
-        borderRadius: '50%',
-        overflow: 'hidden',
-      },
-      activeColor: {
-        absolute: '0px 0px 0px 0px',
-        background: `rgba(${rgba.join(',')})`,
-        boxShadow: 'inset 0 0 0 1px rgba(0,0,0,.15), inset 0 0 4px rgba(0,0,0,.25)',
-      },
+
       hue: {
         position: 'relative',
         height: '10px',
@@ -84,10 +67,7 @@ export const Sketch: FC<ColorPickerProps> = memo(({ className }) => {
             <Alpha />
           </div>
         </div>
-        <div style={styles.color}>
-          <Checkboard />
-          <div style={styles.activeColor} />
-        </div>
+        <Previewer />
       </div>
 
       <SketchFields />

packages/color-picker/src/store.ts

@@ -9,16 +9,22 @@ import type { HSLColor, HSVColor, RGBColor } from './types';
 
 export type ColorMode = 'rgb' | 'hsl' | 'hsv';
 
+type OnColorChange = ({ hex, color }: { hex: string; color: Color }) => void;
 interface ColorPickerState {
-  colorMode: ColorMode;
+  // 外部预设值
   presetColors: string[];
-  onSwatchHover?: any;
-  onChange?: ({ hex, color }: { hex: string; color: Color }) => void;
+  // 回调方法
+  onSwatchHover?: OnColorChange;
+  onChange?: OnColorChange;
+
   colorModel: Color;
+  colorMode: ColorMode;
+
   hue: number;
   saturation: number;
   brightness: number;
 }
+
 interface ColorPickerAction {
   internalUpdateColor: (color: Color) => void;
   updateAlpha: (a: number) => void;
@@ -183,10 +189,10 @@ const createStore = () => {
         },
 
         updateByRgb: (rgb) => {
-          const { r, g, b, a } = rgb;
-          const { internalUpdateColor } = get();
+          const { r, g, b } = rgb;
+          const { internalUpdateColor, colorModel } = get();
 
-          internalUpdateColor(chroma([r, g, b, a], 'rgb'));
+          internalUpdateColor(chroma([r, g, b, colorModel.alpha()], 'rgb'));
         },
       }),
       { name: 'ColorPicker' },
@@ -208,28 +214,23 @@ const { Provider, useStore } = createContext<ColorPickerStore>();
 
 export { Provider, useStore, createStore };
 
-export interface ColorObj {
-  rgb: RGBColor;
-  hsl: HSLColor;
-  hsv: HSVColor;
-  hex: string;
-}
+// ============ Selector =========== //
 
 export type SpaceColor = RGBColor | HSLColor | HSVColor;
 
 export const colorSpaceSelector = (s: ColorPickerState): SpaceColor => {
-  const [r, g, b, a] = s.colorModel.rgba();
+  const [r, g, b] = s.colorModel.rgba();
   const hsl = s.colorModel.hsl();
 
   switch (s.colorMode) {
     case 'rgb': {
-      return { r, g, b, a };
+      return { r, g, b };
     }
     case 'hsv': {
-      return { h: s.hue, s: s.saturation, v: s.brightness, a };
+      return { h: s.hue, s: s.saturation, v: s.brightness };
     }
     case 'hsl': {
-      return { h: s.hue, s: hsl[1] * 100, l: hsl[2] * 100, a };
+      return { h: s.hue, s: hsl[1] * 100, l: hsl[2] * 100 };
     }
   }
 };

packages/color-picker/src/types.ts

@@ -2,21 +2,18 @@ import type { CSSProperties } from 'react';
 import type React from 'react';
 
 export interface HSLColor {
-  a?: number | undefined;
   h: number;
   l: number;
   s: number;
 }
 
 export interface HSVColor {
-  a?: number | undefined;
   h: number;
   s: number;
   v: number;
 }
 
 export interface RGBColor {
-  a?: number | undefined;
   b: number;
   g: number;
   r: number;