fix: optimize colorPicker code

content/input/colorpicker/index.md

@@ -81,7 +81,7 @@ function Demo(){
         <ColorPicker 
             defaultValue={ColorPicker.colorStringToValue("rgb(57,197,187)")}
             onChange={(value)=>{
-            setValue(value)
+            console.log(value)
         }} className={""} alpha={true}/>
     </div>
 

packages/semi-foundation/colorPicker/ColorChooseAreaFoundation.ts

@@ -23,7 +23,7 @@ export interface ColorChooseAreaAdapter<P = Record<string, any>, S = Record<stri
     handleMouseDown: (e: any) => void;
     handleMouseUp: (e: any) => void;
     getDOM: () => HTMLDivElement;
-    onChange: (newColor: { s: number; v: number }) => void
+    notifyChange: (newColor: { s: number; v: number }) => void
 }
 
 
@@ -71,7 +71,7 @@ class ColorChooseAreaFoundation extends BaseFoundation<ColorChooseAreaAdapter<Co
         }, handleSize);
         if (handlePosition) {
             this.setState({ handlePosition });
-            this._adapter.onChange({
+            this._adapter.notifyChange({
                 s: Math.round(mousePosition.x / width * 100),
                 v: Math.round(100 - (Math.min(Math.max(mousePosition.y / height, 0), 1)) * 100),
             });
@@ -83,4 +83,4 @@ class ColorChooseAreaFoundation extends BaseFoundation<ColorChooseAreaAdapter<Co
 }
 
 
-export default ColorChooseAreaFoundation;
+export default ColorChooseAreaFoundation;

packages/semi-foundation/colorPicker/DataPartFoundation.ts

@@ -3,6 +3,7 @@ import ColorPickerFoundation, { ColorPickerProps } from "./foundation";
 import split from "./utils/split";
 import { HsvaColor, RgbaColor } from "./interface";
 
+
 type Value = ColorPickerProps['value']
 
 export interface DataPartBaseProps {
@@ -97,7 +98,16 @@ class DataPartFoundation extends BaseFoundation<DataPartAdapter<DataPartBaseProp
     }
 
 
+    handleInputValueChange = (value: string) => {
+        this._adapter.setState({ inputValue: value });
+    }
+
+    handleFormatChange = (format: DataPartBaseState['format']) => {
+        this._adapter.setState({ format });
+    }
+
+
 }
 
 
-export default DataPartFoundation;
+export default DataPartFoundation;

packages/semi-foundation/colorPicker/foundation.ts

@@ -12,16 +12,16 @@ import {
 } from './utils/convert';
 
 
-export type Value = {
+export type ColorValue = {
     hsva: HsvaColor;
     rgba: RgbaColor;
     hex: string
 }
 export interface ColorPickerProps {
     eyeDropper?: boolean;
-    defaultValue?: Value;
-    value?: Value;
-    onChange: (value: Value) => void;
+    defaultValue?: ColorValue;
+    value?: ColorValue;
+    onChange: (value: ColorValue) => void;
     alpha: boolean;
     width?: number;
     height?: number;
@@ -29,12 +29,12 @@ export interface ColorPickerProps {
 }
 
 export interface ColorPickerState {
-    currentColor: Value
+    currentColor: ColorValue
 }
 
 
 export interface ColorPickerAdapter<P = Record<string, any>, S = Record<string, any>> extends DefaultAdapter<P, S> {
-    notifyChange: (value: Value) => void
+    notifyChange: (value: ColorValue) => void
 }
 
 
@@ -46,7 +46,7 @@ class ColorPickerFoundation extends BaseFoundation<ColorPickerAdapter<ColorPicke
         });
     }
 
-    static hsvaToRgba =hsvaToRgba
+    static hsvaToRgba = hsvaToRgba
     static rgbaToHsva = rgbaToHsva
     static rgbaToHex = rgbaToHex
     static hsvaToHex = hsvaToHex
@@ -58,7 +58,7 @@ class ColorPickerFoundation extends BaseFoundation<ColorPickerAdapter<ColorPicke
     static rgbaStringToRgba = rgbaStringToRgba
 
 
-    handleChangeH = (currentColor: Value, newH: number) => {
+    handleChangeH = (currentColor: ColorValue, newH: number) => {
 
         const hsva = {
             ...currentColor.hsva,
@@ -79,7 +79,7 @@ class ColorPickerFoundation extends BaseFoundation<ColorPickerAdapter<ColorPicke
     }
 
 
-    handleChangeA = (currentColor: Value, newAlpha: number) => {
+    handleChangeA = (currentColor: ColorValue, newAlpha: number) => {
         let alpha = this._adapter.getProp('alpha');
         if (!alpha) {
             newAlpha = 1;

packages/semi-ui/colorPicker/ColorChooseArea/index.tsx

@@ -50,7 +50,7 @@ class ColorChooseArea extends BaseComponent<PropsWithChildren<ColorChooseAreaPro
                 this.setState({ isHandleGrabbing: false });
             },
             getDOM: ()=>this.ref.current,
-            onChange: (newColor)=>this.props.onChange(newColor)
+            notifyChange: (newColor)=>this.props.onChange(newColor)
 
         };
     }

packages/semi-ui/colorPicker/DataPart/index.tsx

@@ -46,12 +46,12 @@ class DataPart extends BaseComponent<PropsWithChildren<DataPartProps>, DataPartS
     }
 
     componentDidMount() {
-        this.setState({ inputValue: this.foundation.getInputValue() });
+        this.foundation.handleInputValueChange(this.foundation.getInputValue());
     }
 
     componentDidUpdate(prevProps: Readonly<DataPartProps>, prevState: Readonly<DataPartState>, snapshot?: any) {
         if (!isEqual(prevProps.currentColor, this.props.currentColor) || prevState.format !== this.state.format) {
-            this.setState({ inputValue: this.foundation.getInputValue() });
+            this.foundation.handleInputValueChange(this.foundation.getInputValue());
         }
     }
 
@@ -77,8 +77,7 @@ class DataPart extends BaseComponent<PropsWithChildren<DataPartProps>, DataPartS
                         if (value) {
                             this.handleChange(value);
                         }
-                        this.setState({ inputValue: v });
-
+                        this.foundation.handleInputValueChange(v);
                     }}
                 />
                 {
@@ -104,7 +103,7 @@ class DataPart extends BaseComponent<PropsWithChildren<DataPartProps>, DataPartS
                 <Select className={`${cssClasses.PREFIX}-formatSelect`}
                     size={'small'}
                     value={this.state.format}
-                    onSelect={v => this.setState({ format: v as DataPartState['format'] })}
+                    onSelect={v => this.foundation.handleFormatChange(v)}
                     optionList={['hex', 'rgba', 'hsva'].map(type => ({ label: type, value: type }))}/>
             </InputGroup>
 

packages/semi-ui/colorPicker/index.tsx

@@ -6,7 +6,7 @@ import ColorPickerFoundation, {
 import BaseComponent from '../_base/baseComponent';
 import { PopoverProps } from '../popover';
 import ColorChooseArea from './ColorChooseArea';
-import { ColorPickerAdapter,Value } from '@douyinfe/semi-foundation/colorPicker/foundation';
+import { ColorPickerAdapter, ColorValue } from '@douyinfe/semi-foundation/colorPicker/foundation';
 import AlphaSlider from './AlphaSlider';
 import ColorSlider from './ColorSlider';
 import DataPart from './DataPart';
@@ -112,12 +112,12 @@ class ColorPicker extends BaseComponent<PropsWithChildren<ColorPickerReactProps>
         const currentColor = this.foundation.getCurrentColor();
         return <div className={className}>
             {this.props.topSlot}
-            <ColorChooseArea hsva={this.state.currentColor.hsva} foundation={this.foundation} onChange={({ s, v }) => {
+            <ColorChooseArea hsva={currentColor.hsva} foundation={this.foundation} onChange={({ s, v }) => {
                 this.foundation.handleChange({
                     s,
                     v,
-                    a: this.state.currentColor.hsva.a,
-                    h: this.state.currentColor.hsva.h
+                    a: currentColor.hsva.a,
+                    h: currentColor.hsva.h
                 }, 'hsva');
             }} handleSize={20} width={this.props.width ?? 280} height={this.props.height ?? 280}/>
             <ColorSlider width={this.props.width ?? 280}
@@ -145,11 +145,12 @@ class ColorPicker extends BaseComponent<PropsWithChildren<ColorPickerReactProps>
     }
 
     render() {
+        const currentColor = this.foundation.getCurrentColor();
         if (this.props.usePopover) {
             return <Popover {...this.props.popoverProps}
                 className={cls(`${cssClasses.PREFIX}-popover`, this.props.popoverProps?.className)}
                 content={this.renderPicker()}>
-                {this.props.children ?? <div style={{ backgroundColor: this.state.currentColor.hex }}
+                {this.props.children ?? <div style={{ backgroundColor: currentColor.hex }}
                     className={cls(`${cssClasses.PREFIX}-popover-defaultChildren`)}></div>}
             </Popover>;
         } else {
@@ -158,7 +159,7 @@ class ColorPicker extends BaseComponent<PropsWithChildren<ColorPickerReactProps>
     }
 }
 
-export type { Value };
+export type { ColorValue };
 export * from "@douyinfe/semi-foundation/colorPicker/interface";
 
 export default ColorPicker;