chore: backup

packages/semi-foundation/colorPicker/AlphaSliderFoundation.ts

@@ -32,17 +32,17 @@ class AlphaSliderFoundation extends BaseFoundation<AlphaSliderAdapter<AlphaSlide
         });
     }
 
-    handleMouseDown = (e: any)=>{
+    handleMouseDown = (e: any) => {
         this._adapter.handleMouseDown(e);
     }
 
 
-    handleMouseUp = (e: any)=>{
+    handleMouseUp = (e: any) => {
         this._adapter.handleMouseUp(e);
     }
 
 
-    setHandlePositionByMousePosition = (e: MouseEvent)=>{
+    setHandlePositionByMousePosition = (e: MouseEvent) => {
         const rect = this._adapter.getDOM()?.getBoundingClientRect();
         if (!rect) {
             return;
@@ -51,7 +51,7 @@ class AlphaSliderFoundation extends BaseFoundation<AlphaSliderAdapter<AlphaSlide
         const colorPickerFoundation = this._adapter.getColorPickerFoundation();
         const mousePosition = e.clientX - rect.x;
         const handlePosition = colorPickerFoundation.getAlphaHandlePositionByMousePosition(mousePosition, width, handleSize);
-        colorPickerFoundation.handleAlphaChangeByHandle({ a: Number((Math.min(Math.max( mousePosition / width, 0), 1)).toFixed(2)) });
+        colorPickerFoundation.handleAlphaChangeByHandle({ a: Number((Math.min(Math.max(mousePosition / width, 0), 1)).toFixed(2)) });
         this.setState({ handlePosition });
     }
 

packages/semi-foundation/colorPicker/ColorChooseAreaFoundation.ts

@@ -1,7 +1,7 @@
 import BaseFoundation, { DefaultAdapter } from "../base/foundation";
 import ColorPickerFoundation from "./foundation";
 import { HsvaColor } from "./interface";
-import React, { CSSProperties } from "react";
+
 
 export interface ColorChooseAreaBaseProps {
     hsva: HsvaColor;
@@ -22,8 +22,8 @@ export interface ColorChooseAreaAdapter<P = Record<string, any>, S = Record<stri
     getColorPickerFoundation: () => ColorPickerFoundation;
     handleMouseDown: (e: any) => void;
     handleMouseUp: (e: any) => void;
-    getDOM: () => HTMLDivElement
-    onChange:(newColor: { s: number; v: number }) => void;
+    getDOM: () => HTMLDivElement;
+    onChange: (newColor: { s: number; v: number }) => void
 }
 
 
@@ -35,23 +35,26 @@ class ColorChooseAreaFoundation extends BaseFoundation<ColorChooseAreaAdapter<Co
         });
     }
 
-    getHandlePositionByHSVA = ()=>{
+    getHandlePositionByHSVA = () => {
         const { hsva, width, height, handleSize } = this.getProps();
 
-        return this._adapter.getColorPickerFoundation().getHandlePositionByHSVA(hsva, { width: width, height: height }, handleSize);
+        return this._adapter.getColorPickerFoundation().getHandlePositionByHSVA(hsva, {
+            width: width,
+            height: height
+        }, handleSize);
 
     }
 
-    handleMouseDown=(e: any)=>{
+    handleMouseDown = (e: any) => {
         this._adapter.handleMouseDown(e);
     }
 
-    handleMouseUp=(e: any)=>{
+    handleMouseUp = (e: any) => {
         this._adapter.handleMouseUp(e);
     }
 
 
-    setHandlePositionByMousePosition = (e: globalThis.MouseEvent|React.MouseEvent) => {
+    setHandlePositionByMousePosition = (e: globalThis.MouseEvent) => {
         const rect = this._adapter.getDOM()?.getBoundingClientRect();
         if (!rect) {
             return;
@@ -62,7 +65,10 @@ class ColorChooseAreaFoundation extends BaseFoundation<ColorChooseAreaAdapter<Co
         };
         const { width, height, handleSize } = this.getProps();
         const colorPickerFoundation = this._adapter.getColorPickerFoundation();
-        const handlePosition = colorPickerFoundation.getHandlePositionByMousePosition(mousePosition, { width, height }, handleSize);
+        const handlePosition = colorPickerFoundation.getHandlePositionByMousePosition(mousePosition, {
+            width,
+            height
+        }, handleSize);
         if (handlePosition) {
             this.setState({ handlePosition });
             this._adapter.onChange({
@@ -74,8 +80,6 @@ class ColorChooseAreaFoundation extends BaseFoundation<ColorChooseAreaAdapter<Co
     }
 
 
-
-
 }
 
 

packages/semi-foundation/colorPicker/ColorSliderFoundation.ts

@@ -1,6 +1,5 @@
-import BaseFoundation, {DefaultAdapter} from "../base/foundation";
-import ColorPickerFoundation, {ColorPickerAdapter, ColorPickerProps, ColorPickerState} from "./foundation";
-import {HsvaColor} from "./interface";
+import BaseFoundation, { DefaultAdapter } from "../base/foundation";
+import ColorPickerFoundation from "./foundation";
 
 export interface ColorSliderBaseProps {
     width: number;
@@ -47,12 +46,12 @@ class ColorSliderFoundation extends BaseFoundation<ColorSliderAdapter<ColorSlide
         if (!rect) {
             return;
         }
-        const {width, handleSize} = this._adapter.getProps();
+        const { width, handleSize } = this._adapter.getProps();
         const colorPickerFoundation = this._adapter.getColorPickerFoundation();
         const mousePosition = e.clientX - rect.x;
-        colorPickerFoundation.handleColorChangeByHandle({h: Math.round(Math.min(Math.max(mousePosition / width, 0), 1) * 360)});
+        colorPickerFoundation.handleColorChangeByHandle({ h: Math.round(Math.min(Math.max(mousePosition / width, 0), 1) * 360) });
         const handlePosition = colorPickerFoundation.getColorHandlePositionByMousePosition(mousePosition, width, handleSize);
-        this.setState({handlePosition});
+        this.setState({ handlePosition });
     }
 
 

packages/semi-foundation/colorPicker/DataPartFoundation.ts

@@ -0,0 +1,103 @@
+import BaseFoundation, { DefaultAdapter } from "../base/foundation";
+import ColorPickerFoundation, { ColorPickerProps } from "./foundation";
+import split from "./utils/split";
+import { HsvaColor, RgbaColor } from "./interface";
+
+type Value = ColorPickerProps['value']
+
+export interface DataPartBaseProps {
+    currentColor: Value;
+    defaultFormat: 'hex' | 'rgba' | 'hsva';
+    width: number;
+    alpha?: boolean;
+    foundation: ColorPickerFoundation;
+    eyeDropper: boolean
+}
+
+export interface DataPartBaseState {
+    format: 'hex' | 'rgba' | 'hsva';
+    inputValue: string
+}
+
+
+export interface DataPartAdapter<P = Record<string, any>, S = Record<string, any>> extends DefaultAdapter<P, S> {
+    getColorPickerFoundation: () => ColorPickerFoundation
+}
+
+
+class DataPartFoundation extends BaseFoundation<DataPartAdapter<DataPartBaseProps, DataPartBaseState>, DataPartBaseProps, DataPartBaseState> {
+
+    constructor(adapter: DataPartAdapter<DataPartBaseProps, DataPartBaseState>) {
+        super({
+            ...adapter
+        });
+    }
+
+    getInputValue = () => {
+        const { currentColor } = this._adapter.getProps();
+        const { format } = this._adapter.getStates();
+        const rgba = currentColor.rgba;
+        const hsva = currentColor.hsva;
+        const hex = currentColor.hex;
+        if (format === 'rgba') {
+            return `${rgba.r},${rgba.g},${rgba.b}`;
+        } else if (format === 'hsva') {
+            return `${hsva.h},${hsva.s},${hsva.v}`;
+        } else {
+            return hex.slice(0, 7);
+        }
+    }
+
+    getValueByInputValue = (value: string) => {
+        const { format } = this.getStates();
+        if (format === 'rgba') {
+            const result = split(value, format);
+            if (result) {
+                return result as RgbaColor;
+            }
+
+        } else if (format === 'hsva') {
+            const result = split(value, format);
+            if (result) {
+                return result as HsvaColor;
+            }
+        } else if (format === 'hex') {
+            // hack chrome bug, format mismatch with w3c.
+            if (!value.startsWith('#')) {
+                value = '#' + value;
+            }
+            if (/#[\d\w]{6,8}/.test(value)) {
+                return value;
+            }
+        }
+        return false;
+    }
+
+    handlePickValueWithStraw = async () => {
+        const colorPickerFoundation = this._adapter.getColorPickerFoundation();
+        if (!window['EyeDropper']) {
+            return;
+        }
+        //@ts-ignore
+        const eyeDropper = new EyeDropper();
+
+        try {
+            const result = await eyeDropper.open();
+            const color = result['sRGBHex'];
+            if (color.startsWith("#")) {
+                colorPickerFoundation.handleChange(color, 'hex');
+            } else if (color.startsWith('rgba')) {
+                const rgba = ColorPickerFoundation.rgbaStringToRgba(color);
+                rgba.a = 1;
+                colorPickerFoundation.handleChange(rgba, 'rgba');
+            }
+        } catch (e) {
+
+        }
+    }
+
+
+}
+
+
+export default DataPartFoundation;

packages/semi-foundation/colorPicker/utils/convert.ts

@@ -19,10 +19,10 @@ export const hexToHsva = (hex: string): HsvaColor => rgbaToHsva(hexToRgba(hex));
 export const hexToRgba = (hex: string): RgbaColor => {
     if (hex[0] === "#") hex = hex.substring(1);
 
-    const hexToPercent = (str: string)=>{
+    const hexToPercent = (str: string) => {
         const decimal = parseInt(str, 16);
         if (!isNaN(decimal)) {
-            const percent = decimal/255;
+            const percent = decimal / 255;
             return percent;
         }
         return 1;
@@ -152,7 +152,7 @@ export const rgbaStringToHsva = (rgbaString: string): HsvaColor => {
     return rgbaToHsva(rgbaStringToRgba(rgbaString));
 };
 
-export const rgbaStringToRgba = (rgbaString: string): RgbaColor=>{
+export const rgbaStringToRgba = (rgbaString: string): RgbaColor => {
     const matcher = /rgba?\(?\s*(-?\d*\.?\d+)(%)?[,\s]+(-?\d*\.?\d+)(%)?[,\s]+(-?\d*\.?\d+)(%)?,?\s*[/\s]*(-?\d*\.?\d+)?(%)?\s*\)?/i;
     const match = matcher.exec(rgbaString);
 
@@ -176,15 +176,15 @@ const format = (number: number) => {
 
 export const rgbaToHex = ({ r, g, b, a }: RgbaColor): string => {
     const percentToHex = (p) => {
-    //const percent = Math.max(0, Math.min(100, p)); // bound percent from 0 to 100
+        //const percent = Math.max(0, Math.min(100, p)); // bound percent from 0 to 100
         const intValue = Math.round(p / 100 * 255); // map percent to nearest integer (0 - 255)
         const hexValue = intValue.toString(16); // get hexadecimal representation
         return hexValue.padStart(2, '0').toLowerCase(); // format with leading 0 and upper case characters
     };
-    if (a===undefined || a===1) {
+    if (a === undefined || a === 1) {
         return "#" + format(r) + format(g) + format(b);
     } else {
-        return "#" + format(r) + format(g) + format(b) + percentToHex(a*100);
+        return "#" + format(r) + format(g) + format(b) + percentToHex(a * 100);
     }
 
 };

packages/semi-foundation/colorPicker/utils/split.ts

@@ -1,4 +1,4 @@
-const split = (str: string, mode: 'rgba'|'hsva')=> {
+const split = (str: string, mode: 'rgba' | 'hsva') => {
     // 12,32,43 => [12,32,43]
     const reg = /^\s*([\d.]+)\s*,\s*([\d.]+)\s*,\s*([\d.]+)\s*,?\s*([\d.]*)\s*$/;
     const res = str.match(reg);
@@ -6,18 +6,18 @@ const split = (str: string, mode: 'rgba'|'hsva')=> {
     result[0] = Number(res?.[1]);
     result[1] = Number(res?.[2]);
     result[2] = Number(res?.[3]);
-    result[3] = Number((res?.[4]===undefined || res?.[4]==='') ? 1:res?.[4]);
+    result[3] = Number((res?.[4] === undefined || res?.[4] === '') ? 1 : res?.[4]);
 
-    const check = (a: number, max: number)=>{
-        return !(isNaN(a) || a<0 || a>max);
+    const check = (a: number, max: number) => {
+        return !(isNaN(a) || a < 0 || a > max);
     };
 
-    const ok = check(result[0], mode==='rgba'?255:360)
-        && check(result[1], mode==='rgba'?255:100)
-        && check(result[2], mode==='rgba'?255:100)
+    const ok = check(result[0], mode === 'rgba' ? 255 : 360)
+        && check(result[1], mode === 'rgba' ? 255 : 100)
+        && check(result[2], mode === 'rgba' ? 255 : 100)
         && check(result[3], 1);
     if (ok) {
-        if (mode==='rgba') {
+        if (mode === 'rgba') {
             return {
                 r: result[0],
                 g: result[1],
@@ -35,6 +35,6 @@ const split = (str: string, mode: 'rgba'|'hsva')=> {
     } else {
         return false;
     }
-}
+};
 
-export default split
+export default split;

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

@@ -9,12 +9,12 @@ import AlphaSliderFoundation, {
     AlphaSliderBaseState
 } from "@douyinfe/semi-foundation/colorPicker/AlphaSliderFoundation";
 
-export interface AlphaSliderProps extends AlphaSliderBaseProps{
+export interface AlphaSliderProps extends AlphaSliderBaseProps {
     className?: string;
     style?: CSSProperties
 }
 
-export interface AlphaSliderState extends AlphaSliderBaseState{
+export interface AlphaSliderState extends AlphaSliderBaseState {
 
 }
 
@@ -44,8 +44,8 @@ class AlphaSlider extends BaseComponent<PropsWithChildren<AlphaSliderProps>, Alp
                 window.removeEventListener('mousemove', this.foundation.setHandlePositionByMousePosition);
                 window.removeEventListener('mouseup', this.foundation.handleMouseUp);
             },
-            getColorPickerFoundation: ()=>this.props.foundation,
-            getDOM: ()=>this.ref.current
+            getColorPickerFoundation: () => this.props.foundation,
+            getDOM: () => this.ref.current
         };
     }
 
@@ -55,10 +55,11 @@ class AlphaSlider extends BaseComponent<PropsWithChildren<AlphaSliderProps>, Alp
         }
     }
 
-    handleClick = (e: React.MouseEvent)=>{
+    handleClick = (e: React.MouseEvent) => {
         this.foundation.setHandlePositionByMousePosition(e);
         this.foundation.handleMouseDown(e);
     }
+
     render() {
         const colorFrom = hsvaToHslaString({ ...this.props.hsva, a: 0 });
         const colorTo = hsvaToHslaString({ ...this.props.hsva, a: 1 });

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

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

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

@@ -1,4 +1,4 @@
-import React, {CSSProperties, PropsWithChildren} from 'react';
+import React, { CSSProperties, PropsWithChildren } from 'react';
 import ColorPickerFoundation from '@douyinfe/semi-foundation/colorPicker/foundation';
 import { cssClasses } from '@douyinfe/semi-foundation/colorPicker/constants';
 import cls from 'classnames';
@@ -9,17 +9,18 @@ import ColorSliderFoundation, {
 } from "@douyinfe/semi-foundation/colorPicker/ColorSliderFoundation";
 import BaseComponent from "../../_base/baseComponent";
 
-interface ColorSliderProps extends ColorSliderBaseProps{
+interface ColorSliderProps extends ColorSliderBaseProps {
     className?: string;
     style?: CSSProperties
 }
 
-interface ColorSliderState extends ColorSliderBaseState{
-   
+interface ColorSliderState extends ColorSliderBaseState {
+
 }
 
 class ColorSlider extends BaseComponent<PropsWithChildren<ColorSliderProps>, ColorSliderState> {
     private readonly ref: React.RefObject<HTMLDivElement>;
+
     constructor(props: ColorSliderProps) {
         super(props);
         this.foundation = new ColorSliderFoundation(this.adapter);
@@ -43,8 +44,8 @@ class ColorSlider extends BaseComponent<PropsWithChildren<ColorSliderProps>, Col
                 window.removeEventListener('mousemove', this.foundation.setHandlePositionByMousePosition);
                 window.removeEventListener('mouseup', this.foundation.handleMouseUp);
             },
-            getColorPickerFoundation: ()=>this.props.foundation,
-            getDOM: ()=>this.ref.current
+            getColorPickerFoundation: () => this.props.foundation,
+            getDOM: () => this.ref.current
         };
     }
 
@@ -55,14 +56,12 @@ class ColorSlider extends BaseComponent<PropsWithChildren<ColorSliderProps>, Col
     }
 
 
-
-    handleClick = (e: React.MouseEvent)=>{
+    handleClick = (e: React.MouseEvent) => {
         this.foundation.setHandlePositionByMousePosition(e);
         this.foundation.handleMouseDown(e);
     }
 
 
-
     render() {
         return <div className={cls(`${cssClasses.PREFIX}-colorSlider`, this.props.className)} ref={this.ref}
             onMouseDown={this.handleClick}

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

@@ -1,133 +1,79 @@
-import React, { ReactNode } from 'react';
+import React, { PropsWithChildren, ReactNode } from 'react';
 import { HsvaColor, RgbaColor } from '@douyinfe/semi-foundation/colorPicker/interface';
 import Input from "../../input";
 import InputGroup from "../../input/inputGroup";
 import InputNumber from "../../inputNumber";
 import Select from "../../select";
 import Button from "../../button";
-import split from "@douyinfe/semi-foundation/colorPicker/utils/split";
 import ColorPickerFoundation, { ColorPickerProps } from '@douyinfe/semi-foundation/colorPicker/foundation';
 import { isEqual } from 'lodash';
 import { IconEyedropper } from '@douyinfe/semi-icons';
 import { cssClasses } from '@douyinfe/semi-foundation/colorPicker/constants';
+import BaseComponent from "../../_base/baseComponent";
+import DataPartFoundation, {
+    DataPartAdapter,
+    DataPartBaseProps,
+    DataPartBaseState
+} from "@douyinfe/semi-foundation/colorPicker/DataPartFoundation";
 
 
-
-type Value = ColorPickerProps['value']
-interface DataPartProps {
-    currentColor: Value;
-    defaultFormat: 'hex'|'rgba'|'hsva';
-    width: number;
-    alpha?: boolean;
-    foundation: ColorPickerFoundation;
-    eyeDropper: boolean
+interface DataPartProps extends DataPartBaseProps {
 
 }
 
-interface DataPartState{
-    format: 'hex'|'rgba'|'hsva';
-    inputValue: string
+interface DataPartState extends DataPartBaseState {
+
 }
 
 
-class DataPart extends React.Component<DataPartProps, DataPartState> {
+class DataPart extends BaseComponent<PropsWithChildren<DataPartProps>, DataPartState> {
 
     constructor(props: DataPartProps) {
         super(props);
+        this.foundation = new DataPartFoundation(this.adapter);
         this.state = {
             format: this.props.defaultFormat,
             inputValue: ''
         };
     }
 
+    get adapter(): DataPartAdapter<DataPartBaseProps, DataPartBaseState> {
+        return {
+            ...super.adapter,
+
+            getColorPickerFoundation: () => this.props.foundation,
+        };
+    }
+
     componentDidMount() {
-        this.setState({ inputValue: this.getInputValue() });
+        this.setState({ inputValue: 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.getInputValue() });
-        }
-
-    }
-
-    getInputValue = ()=>{
-        const rgba = this.props.currentColor.rgba;
-        const hsva = this.props.currentColor.hsva;
-        const hex = this.props.currentColor.hex;
-        if (this.state.format === 'rgba') {
-            return `${rgba.r},${rgba.g},${rgba.b}`;
-        } else if (this.state.format === 'hsva') {
-            return `${hsva.h},${hsva.s},${hsva.v}`;
-        } else {
-            return hex.slice(0, 7);
+            this.setState({ inputValue: this.foundation.getInputValue() });
         }
     }
 
 
-    handleChange = (newColor: RgbaColor|HsvaColor|string)=>{
+    handleChange = (newColor: RgbaColor | HsvaColor | string) => {
         this.props.foundation.handleChange(newColor, this.state.format);
     }
 
-    getValueByInputValue = (value: string)=>{
-        if (this.state.format === 'rgba') {
-            const result = split(value, this.state.format);
-            if (result) {
-                return result as RgbaColor;
-            }
-
-        } else if (this.state.format === 'hsva') {
-            const result = split(value, this.state.format);
-            if (result) {
-                return result as HsvaColor;
-            }
-        } else if (this.state.format === 'hex') {
-            if (!value.startsWith('#')) {
-                value = '#' + value;
-            }
-            if (/#[\d\w]{6,8}/.test(value)) {
-                return value;
-            }
-        }
-        return false;
-    }
-
-    handlePickValueWithStraw = async ()=>{
-        if (!window['EyeDropper']) {
-            return;
-        }
-        //@ts-ignore
-        const eyeDropper = new EyeDropper();
-
-        try {
-            const result = await eyeDropper.open();
-            const color = result['sRGBHex'];
-            if (color.startsWith("#")) {
-                this.props.foundation.handleChange(color, 'hex');
-            } else if (color.startsWith('rgba')) {
-                const rgba = ColorPickerFoundation.rgbaStringToRgba(color);
-                rgba.a = 1;
-                this.props.foundation.handleChange(rgba, 'rgba');
-            }
-        } catch (e) {
-
-        }
-    }
-
-
-
 
     render() {
         const rgba = this.props.currentColor.rgba;
         return <div className={`${cssClasses.PREFIX}-dataPart`} style={{ width: this.props.width }}>
-            <div className={`${cssClasses.PREFIX}-colorDemoBlock`} style={{ minWidth: 20, minHeight: 20, backgroundColor:
-                    `rgba(${rgba.r},${rgba.g},${rgba.b},${rgba.a})` }}>
+            <div className={`${cssClasses.PREFIX}-colorDemoBlock`} style={{
+                minWidth: 20, minHeight: 20, backgroundColor:
+                    `rgba(${rgba.r},${rgba.g},${rgba.b},${rgba.a})`
+            }}>
             </div>
-            <InputGroup size={'small'} className={`${cssClasses.PREFIX}-inputGroup`} >
+            <InputGroup size={'small'} className={`${cssClasses.PREFIX}-inputGroup`}>
                 <Input className={`${cssClasses.PREFIX}-colorPickerInput`}
                     value={this.state.inputValue}
-                    onChange={(v)=>{
-                        const value = this.getValueByInputValue(v);
+                    onChange={(v) => {
+                        const value = this.foundation.getValueByInputValue(v);
                         if (value) {
                             this.handleChange(value);
                         }
@@ -141,7 +87,7 @@ class DataPart extends React.Component<DataPartProps, DataPartState> {
                         max={100}
                         className={`${cssClasses.PREFIX}-colorPickerInputNumber`}
                         value={Number(Math.round(this.props.currentColor.rgba.a * 100))}
-                        onNumberChange={v=>{
+                        onNumberChange={v => {
                             if (this.state.format === 'rgba') {
                                 this.handleChange({ ...this.props.currentColor.rgba, a: Number((v / 100).toFixed(2)) });
                             } else if (this.state.format === 'hex') {
@@ -153,17 +99,18 @@ class DataPart extends React.Component<DataPartProps, DataPartState> {
                                 this.handleChange(rgba);
                             }
                         }}
-                        suffix={<span className={`${cssClasses.PREFIX}-inputNumberSuffix`}>%</span>} hideButtons={true} />
+                        suffix={<span className={`${cssClasses.PREFIX}-inputNumberSuffix`}>%</span>} hideButtons={true}/>
                 }
                 <Select className={`${cssClasses.PREFIX}-formatSelect`}
                     size={'small'}
                     value={this.state.format}
-                    onSelect={v=>this.setState({ format: v as DataPartState['format'] })}
-                    optionList={['hex', 'rgba', 'hsva'].map(type=>({ label: type, value: type }))}/>
+                    onSelect={v => this.setState({ format: v as DataPartState['format'] })}
+                    optionList={['hex', 'rgba', 'hsva'].map(type => ({ label: type, value: type }))}/>
             </InputGroup>
 
-            {this.props.eyeDropper && <Button type={'tertiary'} theme={'light'} size={'small'} onClick={this.handlePickValueWithStraw}
-                icon={<IconEyedropper />} />}
+            {this.props.eyeDropper && <Button type={'tertiary'} theme={'light'} size={'small'}
+                onClick={this.foundation.handlePickValueWithStraw}
+                icon={<IconEyedropper/>}/>}
 
         </div>;
     }

packages/semi-ui/colorPicker/index.tsx

@@ -1,5 +1,8 @@
 import React, { CSSProperties, PropsWithChildren, ReactNode } from 'react';
-import ColorPickerFoundation, { ColorPickerProps, ColorPickerState } from '@douyinfe/semi-foundation/colorPicker/foundation';
+import ColorPickerFoundation, {
+    ColorPickerProps,
+    ColorPickerState
+} from '@douyinfe/semi-foundation/colorPicker/foundation';
 import BaseComponent from '../_base/baseComponent';
 import { PopoverProps } from '../popover';
 import ColorChooseArea from './ColorChooseArea';
@@ -11,7 +14,6 @@ import cls from 'classnames';
 import "@douyinfe/semi-foundation/colorPicker/colorPicker.scss";
 import { cssClasses } from '@douyinfe/semi-foundation/colorPicker/constants';
 import Popover from '../popover';
-import Button from '../button';
 import {
     hexToHsva,
     hexToRgba, hsvaStringToHsva, hsvaToHex, hsvaToRgba,
@@ -20,7 +22,7 @@ import {
 } from '@douyinfe/semi-foundation/colorPicker/utils/convert';
 
 
-export interface ColorPickerReactProps extends ColorPickerProps{
+export interface ColorPickerReactProps extends ColorPickerProps {
     usePopover?: boolean;
     popoverProps?: PopoverProps;
     className?: string;
@@ -30,7 +32,7 @@ export interface ColorPickerReactProps extends ColorPickerProps{
 }
 
 
-export interface ColorPickerReactState extends ColorPickerState{
+export interface ColorPickerReactState extends ColorPickerState {
 }
 
 
@@ -60,13 +62,13 @@ class ColorPicker extends BaseComponent<PropsWithChildren<ColorPickerReactProps>
     get adapter(): ColorPickerAdapter<ColorPickerReactProps, ColorPickerReactState> {
         return {
             ...super.adapter,
-            notifyChange: (value)=>{
+            notifyChange: (value) => {
                 this.props.onChange?.(value);
             }
         };
     }
 
-    static colorStringToValue = (raw: string)=>{
+    static colorStringToValue = (raw: string) => {
         if (raw.startsWith("#")) {
             return {
                 hsva: hexToHsva(raw),
@@ -102,7 +104,6 @@ class ColorPicker extends BaseComponent<PropsWithChildren<ColorPickerReactProps>
     }
 
 
-
     renderPicker() {
         const { className: userClassName } = this.props;
         const className = cls(`${cssClasses.PREFIX}`, userClassName);
@@ -110,7 +111,12 @@ class ColorPicker extends BaseComponent<PropsWithChildren<ColorPickerReactProps>
         return <div className={className}>
             {this.props.topSlot}
             <ColorChooseArea hsva={this.state.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 }, 'hsva');
+                this.foundation.handleChange({
+                    s,
+                    v,
+                    a: this.state.currentColor.hsva.a,
+                    h: this.state.currentColor.hsva.h
+                }, 'hsva');
             }} handleSize={20} width={this.props.width ?? 280} height={this.props.height ?? 280}/>
             <ColorSlider width={this.props.width ?? 280}
                 height={10}
@@ -129,7 +135,7 @@ class ColorPicker extends BaseComponent<PropsWithChildren<ColorPickerReactProps>
             <DataPart currentColor={currentColor}
                 eyeDropper={this.props.eyeDropper}
                 alpha={this.props.alpha}
-                width={this.props.width ?? 280 }
+                width={this.props.width ?? 280}
                 foundation={this.foundation}
                 defaultFormat={this.props.defaultFormat}/>
             {this.props.bottomSlot}
@@ -138,8 +144,11 @@ class ColorPicker extends BaseComponent<PropsWithChildren<ColorPickerReactProps>
 
     render() {
         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 }} className={cls(`${cssClasses.PREFIX}-popover-defaultChildren`)}></div>}
+            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 }}
+                    className={cls(`${cssClasses.PREFIX}-popover-defaultChildren`)}></div>}
             </Popover>;
         } else {
             return this.renderPicker();