chore: backup

packages/semi-foundation/colorPicker/AlphaSliderFoundation.ts

@@ -1,61 +1,56 @@
-import BaseFoundation, {DefaultAdapter} from "../base/foundation";
-import ColorPickerFoundation, {ColorPickerAdapter, ColorPickerProps, ColorPickerState} from "./foundation";
-import {HsvaColor} from "./interface";
-import {CSSProperties} from "react";
+import BaseFoundation, { DefaultAdapter } from "../base/foundation";
+import ColorPickerFoundation, { ColorPickerAdapter, ColorPickerProps, ColorPickerState } from "./foundation";
+import { HsvaColor } from "./interface";
 
-export  interface AlphaSliderProps{
+export interface AlphaSliderBaseProps {
     width: number;
     height: number;
     hsva: HsvaColor;
     handleSize: number;
-    className?: string;
-    style?: CSSProperties;
     foundation: ColorPickerFoundation
 }
 
-export interface AlphaSliderState{
+export interface AlphaSliderBaseState {
     handlePosition: number;
     isHandleGrabbing: boolean
 }
 
 
 export interface AlphaSliderAdapter<P = Record<string, any>, S = Record<string, any>> extends DefaultAdapter<P, S> {
-    handleMouseDown:(e:any)=>void,
-    handleMouseUp:(e:any)=>void
-    getColorPickerFoundation:()=>ColorPickerFoundation
-    getDOM:()=>HTMLDivElement
+    handleMouseDown: (e: any) => void;
+    handleMouseUp: (e: any) => void;
+    getColorPickerFoundation: () => ColorPickerFoundation;
+    getDOM: () => HTMLDivElement
 }
 
 
-class AlphaSliderFoundation extends BaseFoundation<AlphaSliderAdapter<AlphaSliderProps, AlphaSliderState>, AlphaSliderProps, AlphaSliderState> {
+class AlphaSliderFoundation extends BaseFoundation<AlphaSliderAdapter<AlphaSliderBaseProps, AlphaSliderBaseState>, AlphaSliderBaseProps, AlphaSliderBaseState> {
 
-    constructor(adapter: AlphaSliderAdapter<AlphaSliderProps, AlphaSliderState>) {
+    constructor(adapter: AlphaSliderAdapter<AlphaSliderBaseProps, AlphaSliderBaseState>) {
         super({
             ...adapter
         });
     }
 
-    handleMouseDown = (e:any)=>{
+    handleMouseDown = (e: any)=>{
         this._adapter.handleMouseDown(e);
     }
 
 
-    handleMouseUp = (e:any)=>{
+    handleMouseUp = (e: any)=>{
         this._adapter.handleMouseUp(e);
     }
 
 
     setHandlePositionByMousePosition = (e: MouseEvent)=>{
-        const rect = this._adapter.getDOM().getBoundingClientRect()
-        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) });
-        // const handlePosition = colorPickerFoundation.getColorHandlePositionByMousePosition(mousePosition, width, handleSize);
-        // this.setState({ handlePosition });
-
+        const rect = this._adapter.getDOM()?.getBoundingClientRect();
+        if (!rect) {
+            return;
+        }
+        const { width, handleSize } = this._adapter.getProps();
+        const colorPickerFoundation = this._adapter.getColorPickerFoundation();
         const mousePosition = e.clientX - rect.x;
-        const handlePosition = colorPickerFoundation.getAlphaHandlePositionByMousePosition(mousePosition,width, handleSize);
+        const handlePosition = colorPickerFoundation.getAlphaHandlePositionByMousePosition(mousePosition, width, handleSize);
         colorPickerFoundation.handleAlphaChangeByHandle({ a: Number((Math.min(Math.max( mousePosition / width, 0), 1)).toFixed(2)) });
         this.setState({ handlePosition });
     }

packages/semi-foundation/colorPicker/ColorChooseAreaFoundation.ts

@@ -0,0 +1,29 @@
+import BaseFoundation, { DefaultAdapter } from "../base/foundation";
+
+export interface ColorChooseAreaBaseProps {
+
+}
+
+export interface ColorChooseAreaBaseState {
+
+}
+
+
+export interface ColorChooseAreaAdapter<P = Record<string, any>, S = Record<string, any>> extends DefaultAdapter<P, S> {
+
+}
+
+
+class ColorChooseAreaFoundation extends BaseFoundation<ColorChooseAreaAdapter<ColorChooseAreaBaseProps, ColorChooseAreaBaseState>, ColorChooseAreaBaseProps, ColorChooseAreaBaseState> {
+
+    constructor(adapter: ColorChooseAreaAdapter<ColorChooseAreaBaseProps, ColorChooseAreaBaseState>) {
+        super({
+            ...adapter
+        });
+    }
+
+
+}
+
+
+export default ColorChooseAreaFoundation;

packages/semi-foundation/colorPicker/ColorSliderFoundation.ts

@@ -0,0 +1,62 @@
+import BaseFoundation, { DefaultAdapter } from "../base/foundation";
+import ColorPickerFoundation, { ColorPickerAdapter, ColorPickerProps, ColorPickerState } from "./foundation";
+import { HsvaColor } from "./interface";
+
+export interface ColorSliderBaseProps {
+    width: number;
+    height: number;
+    hue: number;
+    handleSize: number;
+    foundation: ColorPickerFoundation
+}
+
+export interface ColorSliderBaseState {
+    handlePosition: number;
+    isHandleGrabbing: boolean
+}
+
+
+export interface ColorSliderAdapter<P = Record<string, any>, S = Record<string, any>> extends DefaultAdapter<P, S> {
+    handleMouseDown: (e: any) => void;
+    handleMouseUp: (e: any) => void;
+    getColorPickerFoundation: () => ColorPickerFoundation;
+    getDOM: () => HTMLDivElement
+}
+
+
+class ColorSliderFoundation extends BaseFoundation<ColorSliderAdapter<ColorSliderBaseProps, ColorSliderBaseState>, ColorSliderBaseProps, ColorSliderBaseState> {
+
+    constructor(adapter: ColorSliderAdapter<ColorSliderBaseProps, ColorSliderBaseState>) {
+        super({
+            ...adapter
+        });
+    }
+
+    handleMouseDown = (e: any)=>{
+        this._adapter.handleMouseDown(e);
+    }
+
+
+    handleMouseUp = (e: any)=>{
+        this._adapter.handleMouseUp(e);
+    }
+
+
+    setHandlePositionByMousePosition = (e: MouseEvent)=>{
+        const rect = this._adapter.getDOM()?.getBoundingClientRect();
+        if (!rect) {
+            return;
+        }
+        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) });
+        const handlePosition = colorPickerFoundation.getColorHandlePositionByMousePosition(mousePosition, width, handleSize);
+        this.setState({ handlePosition });
+    }
+
+
+}
+
+
+export default ColorSliderFoundation;

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

@@ -1,15 +1,22 @@
-import React, { PropsWithChildren } from 'react';
+import React, { CSSProperties, PropsWithChildren } from 'react';
 import { hsvaToHslaString, hsvaToRgbaString } from "@douyinfe/semi-foundation/colorPicker/utils/convert";
 import { round } from "@douyinfe/semi-foundation/colorPicker/utils/round";
 import { cssClasses } from '@douyinfe/semi-foundation/colorPicker/constants';
-import BaseComponent from "@douyinfe/semi-ui/_base/baseComponent";
+import BaseComponent from "../../_base/baseComponent";
 import AlphaSliderFoundation, {
     AlphaSliderAdapter,
-    AlphaSliderProps,
-    AlphaSliderState
+    AlphaSliderBaseProps,
+    AlphaSliderBaseState
 } from "@douyinfe/semi-foundation/colorPicker/AlphaSliderFoundation";
 
+export interface AlphaSliderProps extends AlphaSliderBaseProps{
+    className?: string;
+    style?: CSSProperties
+}
+
+export interface AlphaSliderState extends AlphaSliderBaseState{
 
+}
 
 class AlphaSlider extends BaseComponent<PropsWithChildren<AlphaSliderProps>, AlphaSliderState> {
     private ref: React.RefObject<HTMLDivElement>;
@@ -42,7 +49,7 @@ class AlphaSlider extends BaseComponent<PropsWithChildren<AlphaSliderProps>, Alp
         };
     }
 
-    componentDidUpdate(prevProps: Readonly<AlphaSliderProps>, prevState: Readonly<AlphaSliderState>, snapshot?: any) {
+    componentDidUpdate(prevProps: Readonly<AlphaSliderBaseProps>, prevState: Readonly<AlphaSliderBaseState>, snapshot?: any) {
         if (prevProps.hsva.a !== this.props.hsva.a) {
             this.setState({ handlePosition: this.props.hsva.a * this.props.width - this.props.handleSize / 2 });
         }

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

@@ -38,7 +38,7 @@ class ColorChooseArea extends React.Component<ColorChooseAreaProps, ColorChooseA
     }
 
     componentDidUpdate(prevProps: Readonly<ColorChooseAreaProps>, prevState: Readonly<ColorChooseAreaState>, snapshot?: any) {
-        if (JSON.stringify(prevProps.hsva)!==JSON.stringify(this.props.hsva)) {
+        if (JSON.stringify(prevProps.hsva) !== JSON.stringify(this.props.hsva)) {
             this.setState({ handlePosition: this.getHandlePositionByHSVA() });
         }
     }

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

@@ -1,62 +1,64 @@
-import React, { CSSProperties } 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';
+import ColorSliderFoundation, {
+    ColorSliderAdapter,
+    ColorSliderBaseProps,
+    ColorSliderBaseState
+} from "@douyinfe/semi-foundation/colorPicker/ColorSliderFoundation";
+import BaseComponent from "../../_base/baseComponent";
 
-interface ColorSliderProps{
-    width: number;
-    height: number;
-    hue: number;
-    handleSize: number;
+interface ColorSliderProps extends ColorSliderBaseProps{
     className?: string;
-    style?: CSSProperties;
-    foundation: ColorPickerFoundation
+    style?: CSSProperties
 }
 
-interface ColorSliderState{
-    handlePosition: number;
-    isHandleGrabbing: boolean
+interface ColorSliderState extends ColorSliderBaseState{
+   
 }
 
-class ColorSlider extends React.Component<ColorSliderProps, ColorSliderState> {
+class ColorSlider extends BaseComponent<PropsWithChildren<ColorSliderProps>, ColorSliderState> {
     private readonly ref: React.RefObject<HTMLDivElement>;
     constructor(props: ColorSliderProps) {
         super(props);
-        this.state={
-            handlePosition: props.hue/360 * props.width - props.handleSize/2,
+        this.foundation = new ColorSliderFoundation(this.adapter);
+        this.state = {
+            handlePosition: props.hue / 360 * props.width - props.handleSize / 2,
             isHandleGrabbing: false
         };
         this.ref = React.createRef<HTMLDivElement>();
     }
 
+    get adapter(): ColorSliderAdapter<ColorSliderProps, ColorSliderState> {
+        return {
+            ...super.adapter,
+            handleMouseDown: (e: any) => {
+                this.setState({ isHandleGrabbing: true });
+                window.addEventListener('mousemove', this.foundation.setHandlePositionByMousePosition);
+                window.addEventListener('mouseup', this.foundation.handleMouseUp);
+            },
+            handleMouseUp: (e: MouseEvent) => {
+                this.setState({ isHandleGrabbing: false });
+                window.removeEventListener('mousemove', this.foundation.setHandlePositionByMousePosition);
+                window.removeEventListener('mouseup', this.foundation.handleMouseUp);
+            },
+            getColorPickerFoundation: ()=>this.props.foundation,
+            getDOM: ()=>this.ref.current
+        };
+    }
+
     componentDidUpdate(prevProps: Readonly<ColorSliderProps>, prevState: Readonly<ColorSliderState>, snapshot?: any) {
         if (prevProps.hue !== this.props.hue) {
-            this.setState({ handlePosition: this.props.hue/360 * this.props.width - this.props.handleSize/2 });
+            this.setState({ handlePosition: this.props.hue / 360 * this.props.width - this.props.handleSize / 2 });
         }
     }
 
-    handleHandleMouseDown = (e: React.MouseEvent)=>{
-        this.setState({ isHandleGrabbing: true });
-        window.addEventListener('mousemove', this.setHandlePositionByMousePosition);
-        window.addEventListener('mouseup', this.handleMouseUp);
-    }
 
-    setHandlePositionByMousePosition = (e: MouseEvent)=>{
-        const mousePosition = e.clientX - this.ref.current.getBoundingClientRect().x;
-        this.props.foundation.handleColorChangeByHandle({ h: Math.round(Math.min(Math.max(mousePosition / this.props.width, 0), 1) * 360) });
-        const handlePosition = this.props.foundation.getColorHandlePositionByMousePosition(mousePosition, this.props.width, this.props.handleSize);
-        this.setState({ handlePosition });
-    }
-
-    handleMouseUp = (e: MouseEvent)=>{
-        this.setState({ isHandleGrabbing: false });
-        window.removeEventListener('mouseup', this.handleMouseUp);
-        window.removeEventListener('mousemove', this.setHandlePositionByMousePosition);
-    }
 
     handleClick = (e: React.MouseEvent)=>{
-        this.setHandlePositionByMousePosition(e);
-        this.handleHandleMouseDown(e);
+        this.foundation.setHandlePositionByMousePosition(e);
+        this.foundation.handleMouseDown(e);
     }
 
 
@@ -79,7 +81,7 @@ class ColorSlider extends React.Component<ColorSliderProps, ColorSliderState> {
                     transform: `translateY(-50%)`,
                     backgroundColor: ColorPickerFoundation.hsvaToHslString({ h: this.props.hue, s: 100, v: 100, a: 1 })
                 }}
-                onMouseDown={(e) => this.handleHandleMouseDown(e)}>
+                onMouseDown={(e) => this.foundation.handleMouseDown(e)}>
             </div>
 
         </div>;

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

@@ -19,8 +19,8 @@ interface DataPartProps {
     defaultFormat: 'hex'|'rgba'|'hsva';
     width: number;
     alpha?: boolean;
-    foundation: ColorPickerFoundation,
-    eyeDropper:boolean
+    foundation: ColorPickerFoundation;
+    eyeDropper: boolean
 
 }
 
@@ -45,7 +45,7 @@ class DataPart extends React.Component<DataPartProps, DataPartState> {
     }
 
     componentDidUpdate(prevProps: Readonly<DataPartProps>, prevState: Readonly<DataPartState>, snapshot?: any) {
-        if (!isEqual(prevProps.currentColor, this.props.currentColor)|| prevState.format !== this.state.format) {
+        if (!isEqual(prevProps.currentColor, this.props.currentColor) || prevState.format !== this.state.format) {
             this.setState({ inputValue: this.getInputValue() });
         }
 
@@ -70,20 +70,20 @@ class DataPart extends React.Component<DataPartProps, DataPartState> {
     }
 
     getValueByInputValue = (value: string)=>{
-        if (this.state.format==='rgba') {
+        if (this.state.format === 'rgba') {
             const result = split(value, this.state.format);
             if (result) {
                 return result as RgbaColor;
             }
 
-        } else if (this.state.format==='hsva') {
+        } 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') {
+        } else if (this.state.format === 'hex') {
             if (!value.startsWith('#')) {
-                value = '#'+value;
+                value = '#' + value;
             }
             if (/#[\d\w]{6,8}/.test(value)) {
                 return value;
@@ -140,16 +140,16 @@ class DataPart extends React.Component<DataPartProps, DataPartState> {
                         min={0}
                         max={100}
                         className={`${cssClasses.PREFIX}-colorPickerInputNumber`}
-                        value={Number(Math.round(this.props.currentColor.rgba.a*100))}
+                        value={Number(Math.round(this.props.currentColor.rgba.a * 100))}
                         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') {
-                                const rgba = { ...this.props.currentColor.rgba, a: Number((v/100).toFixed(2)) };
+                            if (this.state.format === 'rgba') {
+                                this.handleChange({ ...this.props.currentColor.rgba, a: Number((v / 100).toFixed(2)) });
+                            } else if (this.state.format === 'hex') {
+                                const rgba = { ...this.props.currentColor.rgba, a: Number((v / 100).toFixed(2)) };
                                 const hex = ColorPickerFoundation.rgbaToHex(rgba);
                                 this.handleChange(hex);
-                            } else if (this.state.format==='hsva') {
-                                const rgba = { ...this.props.currentColor.hsva, a: Number((v/100).toFixed(2)) };
+                            } else if (this.state.format === 'hsva') {
+                                const rgba = { ...this.props.currentColor.hsva, a: Number((v / 100).toFixed(2)) };
                                 this.handleChange(rgba);
                             }
                         }}
@@ -163,7 +163,7 @@ class DataPart extends React.Component<DataPartProps, DataPartState> {
             </InputGroup>
 
             {this.props.eyeDropper && <Button type={'tertiary'} theme={'light'} size={'small'} onClick={this.handlePickValueWithStraw}
-                     icon={<IconEyedropper />} />}
+                icon={<IconEyedropper />} />}
 
         </div>;
     }