chore: backup

packages/semi-foundation/colorPicker/colorPicker.scss

@@ -1,37 +1,23 @@
+@import "./variables.scss";
+
+
 $module: #{$prefix}-colorPicker;
 
 
 .#{$module} {
 
     &-colorChooseArea{
-
-
-
-        box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.05);
         position: relative;
         flex-grow: 1;
         border-color: transparent;
-        border-radius: 8px 8px 0 0;
-        background-image: linear-gradient(to top, #000, rgba(0, 0, 0, 0)),
-        linear-gradient(to right, #fff, rgba(255, 255, 255, 0));
+        border-radius: $radius-colorPicker-topLeft $radius-colorPicker-topRight $radius-colorPicker-bottomLeft $radius-colorPicker-bottomRight;
+        background-image: linear-gradient(to top, #000, rgba(0, 0, 0, 0)), linear-gradient(to right, #fff, rgba(255, 255, 255, 0));
     }
 
-    .interactive{
-        position: absolute;
-        left: 0;
-        top: 0;
-        right: 0;
-        bottom: 0;
-        border-radius: inherit;
-        outline: none;
-        /* Don't trigger the default scrolling behavior when the event is originating from this element */
-        touch-action: none;
-    }
 
     &-handle{
-
-        border-radius: 99999px;
-        border: 2px solid var(--semi-color-white);
+        border-radius: $radius-colorPicker-handle;
+        border: $width-colorPicker_handle-border solid $color-colorPicker_handle-border;
         position: absolute;
         box-sizing: border-box;
         cursor: grab;
@@ -43,21 +29,21 @@ $module: #{$prefix}-colorPicker;
     &-alphaSlider{
         position: relative;
         cursor: pointer;
-        margin-top: 6px;
-        border-radius: var(--semi-border-radius-full);
+        margin-top: $spacing-colorPicker_slider-marginTop;
+        border-radius: $radius-colorPicker-handle;
         background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill-opacity=".05"><rect x="8" width="8" height="8"/><rect y="8" width="8" height="8"/></svg>');
 
 
         .#{$module}-alphaSliderInner{
             width: 100%;
             height: 100%;
-            border-radius: 4px;
+            border-radius: $radius-colorPicker-alphaSliderInner;
         }
 
         .#{$module}-alphaHandle{
             background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill-opacity=".05"><rect x="8" width="8" height="8"/><rect y="8" width="8" height="8"/></svg>');
-            border-radius: 99999px;
-            border: 2px solid var(--semi-color-white);
+            border-radius: $radius-colorPicker-handle;
+            border: $width-colorPicker_handle-border solid $color-colorPicker_handle-border;
             position: absolute;
             box-sizing: border-box;
             cursor: grab;
@@ -69,31 +55,22 @@ $module: #{$prefix}-colorPicker;
     &-colorSlider{
         position: relative;
         cursor: pointer;
-        margin-top: 6px;
-        border-radius: var(--semi-border-radius-full);
-        background: linear-gradient(
-                        to right,
-                        #f00 0%,
-                        #ff0 17%,
-                        #0f0 33%,
-                        #0ff 50%,
-                        #00f 67%,
-                        #f0f 83%,
-                        #f00 100%
-        );
+        margin-top: $spacing-colorPicker_slider-marginTop;
+        border-radius: $radius-colorPicker-handle;
+        background: linear-gradient(to right, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%);
     }
 
 
 
     &-dataPart{
-        margin-top: 8px;
+        margin-top: $spacing-colorPicker_dataPart-marginTop;
         display: flex;
         align-items: center;
         .#{$module}-colorDemoBlock{
-            border-radius: 4px;
+            border-radius: $radius-colorPicker-demoBlock;
         }
         .#{$module}-inputGroup{
-            margin-left: 4px;
+            margin-left: $spacing-colorPicker_inputGroup-marginLeft;
             width: 100%;
             flex:1;
             flex-wrap: nowrap;
@@ -101,19 +78,23 @@ $module: #{$prefix}-colorPicker;
                 flex: 1;
             }
             .#{$module}-colorPickerInputNumber{
-                width: 60px;
+                width: $width-colorPicker-colorPickerInputNumber;
                 .#{$module}-inputNumberSuffix{
-                    font-size: 14px;
-                    padding: 0 4px;
+                    font-size: $font-colorPicker_inputNumberSuffix-fontSize;
+                    padding: $spacing-colorPicker_inputNumberSuffix-vertical $spacing-colorPicker_inputNumberSuffix-horizontal;
                 }
             }
         }
         .#{$module}-formatSelect{
-            width: 76px;
+            width: $width-colorPicker-formatSelect;
         }
     }
 
 
+    &-popover{
+        padding: $spacing-colorPicker_popover-padding;
+    }
+
 
 
 }

packages/semi-foundation/colorPicker/foundation.ts

@@ -67,7 +67,7 @@ class ColorPickerFoundation extends BaseFoundation<ColorPickerAdapter<ColorPicke
             h: newH
         };
         const rgba = hsvaToRgba(hsva);
-        const hex = hsvaToHex(hsva)
+        const hex = hsvaToHex(hsva);
 
         currentColor = {
             rgba,
@@ -89,11 +89,11 @@ class ColorPickerFoundation extends BaseFoundation<ColorPickerAdapter<ColorPicke
         const rgba = {
             ...currentColor.rgba,
             a: newAlpha
-        }
+        };
         const hex = rgbaToHex(rgba);
         currentColor = {
             rgba,
-            hex: alpha ? hex : hex.slice(0,7),
+            hex: alpha ? hex : hex.slice(0, 7),
             hsva: {
                 ...currentColor.hsva,
                 a: newAlpha
@@ -110,14 +110,14 @@ class ColorPickerFoundation extends BaseFoundation<ColorPickerAdapter<ColorPicke
         if (format==='hsva') {
             currentColor = {
                 hsva: color as HsvaColor,
-                rgba: ColorPickerFoundation.hsvaToRgba(color),
-                hex: ColorPickerFoundation.hsvaToHex(color)
+                rgba: ColorPickerFoundation.hsvaToRgba(color as HsvaColor),
+                hex: ColorPickerFoundation.hsvaToHex(color as HsvaColor)
             };
         } else if (format==='rgba') {
             currentColor = {
                 rgba: color as RgbaColor,
-                hsva: ColorPickerFoundation.rgbaToHsva(color),
-                hex: ColorPickerFoundation.rgbaToHex(color)
+                hsva: ColorPickerFoundation.rgbaToHsva(color as RgbaColor),
+                hex: ColorPickerFoundation.rgbaToHex(color as RgbaColor)
             };
         } else if (format==='hex') {
             currentColor = {

packages/semi-foundation/colorPicker/types.ts

@@ -1,42 +1,42 @@
 export interface HsvColor {
     h: number;
     s: number;
-    v: number;
+    v: number
 }
 
 export interface HsvaColor extends HsvColor {
-    a: number;
+    a: number
 }
 
 
 export interface RgbColor {
     r: number;
     g: number;
-    b: number;
+    b: number
 }
 
 export interface RgbaColor extends RgbColor {
-    a: number;
+    a: number
 }
 
 export interface HslColor {
     h: number;
     s: number;
-    l: number;
+    l: number
 }
 
 export interface HslaColor extends HslColor {
-    a: number;
+    a: number
 }
 
 export interface HsvColor {
     h: number;
     s: number;
-    v: number;
+    v: number
 }
 
 export interface HsvaColor extends HsvColor {
-    a: number;
+    a: number
 }
 
 export type ObjectColor = RgbColor | HslColor | HsvColor | RgbaColor | HslaColor | HsvaColor;
@@ -47,5 +47,5 @@ export interface ColorModel<T extends AnyColor> {
     defaultColor: T;
     toHsva: (defaultColor: T) => HsvaColor;
     fromHsva: (hsva: HsvaColor) => T;
-    equal: (first: T, second: T) => boolean;
+    equal: (first: T, second: T) => boolean
 }

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

@@ -148,7 +148,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);
 
@@ -159,8 +159,8 @@ export const rgbaStringToRgba = (rgbaString: string):RgbaColor=>{
         g: Number(match[3]) / (match[4] ? 100 / 255 : 1),
         b: Number(match[5]) / (match[6] ? 100 / 255 : 1),
         a: match[7] === undefined ? 1 : Number(match[7]) / (match[8] ? 100 : 1),
-    }
-}
+    };
+};
 
 
 export const rgbStringToHsva = rgbaStringToHsva;

packages/semi-foundation/colorPicker/variables.scss

@@ -0,0 +1,26 @@
+$radius-colorPicker-topLeft:8px; // 圆角 - 左上
+$radius-colorPicker-topRight:8px; // 圆角 - 右上
+$radius-colorPicker-bottomLeft:0px; // 圆角 - 左下
+$radius-colorPicker-bottomRight:0px; // 圆角 - 右下
+$radius-colorPicker-handle:var(--semi-border-radius-full); // 圆角 - 拖拽把手
+$radius-colorPicker-alphaSliderInner:4px; // 圆角 - 透明度 Slider
+$radius-colorPicker-demoBlock: 4px; // 圆角 - 颜色手动输入区域左侧当前选中颜色色块
+
+
+
+$width-colorPicker_handle-border: 2px; // 把手宽度
+$width-colorPicker-colorPickerInputNumber:60px; // 数组输入器宽度
+$width-colorPicker-formatSelect:76px; // 格式选择下拉 Select 宽度
+
+$color-colorPicker_handle-border:var(--semi-color-white); // 把手边框颜色
+
+
+$spacing-colorPicker_inputNumberSuffix-horizontal:4px; // 数字输入框后百分比水平距离
+$spacing-colorPicker_inputGroup-marginLeft:4px; //  颜色手动输入区域 左侧距离色块距离
+$spacing-colorPicker_popover-padding:8px; // 弹层模式时整体内边距
+$spacing-colorPicker_inputNumberSuffix-vertical:4px; // 数字输入框后百分比垂直距离
+$spacing-colorPicker_slider-marginTop:6px; // 滑动选择器上边距
+$spacing-colorPicker_dataPart-marginTop:8px; // 颜色手动输入区域 上边距
+
+
+$font-colorPicker_inputNumberSuffix-fontSize:14px; // 颜色手动输入区域百分比字体大小

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

@@ -45,7 +45,7 @@ class ColorSlider extends React.Component<AlphaSliderProps, AlphaSliderState> {
         window.addEventListener('mouseup', this.handleMouseUp);
     }
 
-    setHandlePositionByMousePosition = (e: MouseEvent) => {
+    setHandlePositionByMousePosition = (e: MouseEvent|React.MouseEvent) => {
         const mousePosition = e.clientX - this.ref.current.getBoundingClientRect().x;
         const handlePosition = this.props.foundation.getAlphaHandlePositionByMousePosition(mousePosition, this.props.width, this.props.handleSize);
         this.props.foundation.handleAlphaChangeByHandle({ a: Number((Math.min(Math.max( mousePosition/this.props.width, 0), 1)).toFixed(2)) });

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

@@ -62,7 +62,7 @@ class ColorSlider extends React.Component<ColorSliderProps, ColorSliderState> {
 
 
     render() {
-        return <div className={cls(`${cssClasses.PREFIX}-colorSlider`,this.props.className)} ref={this.ref}
+        return <div className={cls(`${cssClasses.PREFIX}-colorSlider`, this.props.className)} ref={this.ref}
             onMouseDown={this.handleClick}
             style={{
                 width: this.props.width,

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

@@ -104,7 +104,6 @@ class DataPart extends React.Component<DataPartProps, DataPartState> {
             if (color.startsWith("#")) {
                 this.props.foundation.handleChange(color, 'hex');
             } else if (color.startsWith('rgba')) {
-                console.log("color",color);
                 const rgba = ColorPickerFoundation.rgbaStringToRgba(color);
                 rgba.a = 1;
                 this.props.foundation.handleChange(rgba, 'rgba');
@@ -162,7 +161,7 @@ class DataPart extends React.Component<DataPartProps, DataPartState> {
                     optionList={['hex', 'rgba', 'hsva'].map(type=>({ label: type, value: type }))}/>
             </InputGroup>
 
-            <Button type={'tertiary'} theme={"borderless"} size={'small'} onClick={this.handlePickValueWithStraw} icon={<IconEyedropper />}/>
+            <Button type={'tertiary'} theme={"light"} size={'small'} onClick={this.handlePickValueWithStraw} icon={<IconEyedropper />}/>
 
         </div>;
     }

packages/semi-ui/colorPicker/_story/colorPicker.stories.jsx

@@ -1,16 +1,47 @@
 import React, { useState } from 'react';
 import ColorPicker from '../index';
+import Button from '../../button';
 
 export default {
   title: 'ColorPicker',
 }
 
 
-export const Size = () => {
+export const Basic = () => {
 
   return (
       <div>
             <ColorPicker alpha={true}/>
+          <ColorPicker alpha={true} usePopover={true} popoverProps={{trigger:'custom',visible:true}}>
+              <Button>test</Button>
+          </ColorPicker>
       </div>
   );
 };
+
+
+
+export const Control  = ()=>{
+    const [value,setValue] = useState({
+        "hsva": {
+            "s": 72,
+            "v": 60,
+            "a": 1,
+            "h": 0
+        },
+        "rgba": {
+            "r": 153,
+            "g": 43,
+            "b": 43,
+            "a": 1
+        },
+        "hex": "#992b2b"
+    });
+    console.log(value);
+    return <div>
+        <ColorPicker value={value} onChange={(value)=>{
+            setValue(value)
+        }} className={""} alpha={true}/>
+    </div>
+
+}

packages/semi-ui/colorPicker/_story/colorPicker.stories.tsx

@@ -7,6 +7,8 @@ const stories = storiesOf('ColorPicker', module);
 
 stories.add('不同大小', () => (
   <div>
-      <ColorPicker/>
+      <ColorPicker alpha={false} onChange={(v)=>{
+          console.log(v)
+      }}/>
   </div>
 ));

packages/semi-ui/colorPicker/index.tsx

@@ -1,7 +1,7 @@
-import React, { CSSProperties } from 'react';
+import React, { CSSProperties, PropsWithChildren, ReactNode } from 'react';
 import ColorPickerFoundation, { ColorPickerProps, ColorPickerState } from '@douyinfe/semi-foundation/colorPicker/foundation';
 import BaseComponent from '../_base/baseComponent';
-import PopoverProps from '../popover';
+import { PopoverProps } from '../popover';
 import ColorChooseArea from './ColorChooseArea';
 import { ColorPickerAdapter } from '@douyinfe/semi-foundation/colorPicker/foundation';
 import AlphaSlider from './AlphaSlider';
@@ -10,14 +10,16 @@ import DataPart from './DataPart';
 import cls from 'classnames';
 import "@douyinfe/semi-foundation/colorPicker/colorPicker.scss";
 import { cssClasses } from '@douyinfe/semi-foundation/colorPicker/constants';
+import Popover from '../popover';
 
 
 export interface ColorPickerReactProps extends ColorPickerProps{
     usePopover?: boolean;
     popoverProps?: PopoverProps;
-    className: string;
-    style?: CSSProperties
-
+    className?: string;
+    style?: CSSProperties;
+    bottomSlot?: ReactNode;
+    topSlot?: ReactNode
 }
 
 
@@ -25,7 +27,7 @@ export interface ColorPickerReactState extends ColorPickerState{
 }
 
 
-class ColorPicker extends BaseComponent<ColorPickerReactProps, ColorPickerReactState> {
+class ColorPicker extends BaseComponent<PropsWithChildren<ColorPickerReactProps>, ColorPickerReactState> {
     static __SemiComponentName__ = "ColorPicker";
     public foundation: ColorPickerFoundation;
 
@@ -61,19 +63,22 @@ class ColorPicker extends BaseComponent<ColorPickerReactProps, ColorPickerReactS
             }
         };
     }
-    
+
+    static colorStringToValue = (raw: string)=>{
+
+    }
 
     getCurrentColor = ()=>{
         return this.props.value ? (this.props.value) : this.state.currentColor;
     }
 
 
-    render() {
+    renderPicker() {
         const { className: userClassName } = this.props;
         const className = cls(`${cssClasses.PREFIX}`, userClassName);
         const currentColor = this.getCurrentColor();
         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');
             }} handleSize={20} width={this.props.width ?? 280} height={this.props.height ?? 280}/>
@@ -96,9 +101,19 @@ class ColorPicker extends BaseComponent<ColorPickerReactProps, ColorPickerReactS
                 width={this.props.width ?? 280 }
                 foundation={this.foundation}
                 defaultFormat={this.props.defaultFormat}/>
-
+            {this.props.bottomSlot}
         </div>;
     }
+
+    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}
+            </Popover>;
+        } else {
+            return this.renderPicker();
+        }
+    }
 }