chore: backup

packages/semi-foundation/colorPicker/colorPicker.scss

@@ -0,0 +1,122 @@
+$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));
+    }
+
+    .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);
+        position: absolute;
+        box-sizing: border-box;
+        cursor: grab;
+    }
+
+
+
+
+    @mixin rectBg{
+        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>');
+    }
+
+    .alphaSlider{
+        position: relative;
+        cursor: pointer;
+        @include rectBg;
+
+
+        .alphaSliderInner{
+            width: 100%;
+            height: 100%;
+            border-radius: 4px;
+        }
+
+        .alphaHandle{
+            @include rectBg;
+            border-radius: 99999px;
+            border: 2px solid var(--semi-color-white);
+            position: absolute;
+            box-sizing: border-box;
+            cursor: grab;
+
+        }
+
+    }
+
+    .colorSlider{
+        position: relative;
+        cursor: pointer;
+        background: linear-gradient(
+                        to right,
+                        #f00 0%,
+                        #ff0 17%,
+                        #0f0 33%,
+                        #0ff 50%,
+                        #00f 67%,
+                        #f0f 83%,
+                        #f00 100%
+        );
+    }
+
+
+
+    .dataPart{
+        display: flex;
+        align-items: center;
+
+        .colorDemoBlock{
+            border-radius: 4px;
+        }
+
+        .inputGroup{
+            margin-left: 4px;
+            width: 100%;
+            flex-wrap: nowrap;
+            .colorPickerInput{
+
+            }
+            .colorPickerInputNumber{
+                width: 100px;
+                .inputNumberSuffix{
+                    font-size: 14px;
+                    padding: 0 4px;
+                }
+
+            }
+
+        }
+        .formatSelect{
+            margin-left: 4px;
+            width: 80px;
+        }
+    }
+
+
+
+
+}

packages/semi-foundation/colorPicker/constants.ts

@@ -0,0 +1,11 @@
+import { BASE_CLASS_PREFIX } from '../base/constants';
+
+const cssClasses = {
+    PREFIX: `${BASE_CLASS_PREFIX}-colorPicker`,
+};
+
+const strings = {
+
+};
+
+export { cssClasses };

packages/semi-foundation/colorPicker/foundation.ts

@@ -13,38 +13,30 @@ import {
 
 
 type Value = {
-    format: 'hex' | 'rgba' | 'hsva';
-    value: HsvaColor|RgbaColor|string
+    hsva: HsvaColor;
+    rgba: RgbaColor;
+    hex: string
 }
 export interface ColorPickerProps {
-    defaultFormat: 'hex' | 'rgba' | 'hsva';
     defaultValue?: Value;
     value?: Value;
-    onChange: (value: {
-        rgba: RgbaColor;
-        hex: string;
-        hsva: HsvaColor
-    }) => void;
+    onChange: (value: Value) => void;
     alpha: boolean;
     width?: number;
-    height?: number
+    height?: number;
+    defaultFormat: 'hex' | 'rgba' | 'hsva'
 }
 
 export interface ColorPickerState {
-    currentColor: RgbaColor;
-    currentColorHSVA: HsvaColor
+    currentColor: Value
 }
 
 
 export interface ColorPickerAdapter<P = Record<string, any>, S = Record<string, any>> extends DefaultAdapter<P, S> {
-    notifyChange: (value: {
-        rgba: RgbaColor;
-        hex: string;
-        hsva: HsvaColor
-    }) => void
+    notifyChange: (value: Value) => void;
 
     notifyAlphaChangeByHandle: (newAlpha: { a: number }) => void;
-    notifyColorChangeByHandle: (newHue: { h: number }) => void;
+    notifyColorChangeByHandle: (newHue: { h: number }) => void
 }
 
 
@@ -68,57 +60,96 @@ class ColorPickerFoundation extends BaseFoundation<ColorPickerAdapter<ColorPicke
     static rgbaStringToRgba = rgbaStringToRgba
 
 
-    handleChangeHSVA = (currentColor: HsvaColor) => {
-        const alpha = this._adapter.getProp('alpha');
-        if (!alpha) {
-            currentColor.a = 1;
-        }
-        const rgba = hsvaToRgba(currentColor);
-        const hex = rgbaToHex(rgba);
-        
-        this._adapter.notifyChange({
-            hex,
+    handleChangeH = (currentColor: Value, newH: number) => {
+
+        const hsva = {
+            ...currentColor.hsva,
+            h: newH
+        };
+        const rgba = hsvaToRgba(hsva);
+        const hex = hsvaToHex(hsva)
+
+        currentColor = {
             rgba,
-            hsva: currentColor
-        });
-        this._adapter.setState({ currentColor: hsvaToRgba(currentColor), currentColorHSVA: currentColor });
+            hsva,
+            hex
+        };
+
+        this._adapter.notifyChange(currentColor);
+        this._adapter.setState({ currentColor: currentColor });
 
     }
 
 
-    handleChangeRGBA = (currentColor: RgbaColor) => {
-        const alpha = this._adapter.getProp('alpha');
+    handleChangeA = (currentColor: Value, newAlpha: number) => {
+        let alpha = this._adapter.getProp('alpha');
         if (!alpha) {
-            currentColor.a = 1;
+            newAlpha = 1;
+        }
+        const rgba = {
+            ...currentColor.rgba,
+            a: newAlpha
         }
-        const rgba = currentColor;
-        const hsva = rgbaToHsva(currentColor);
         const hex = rgbaToHex(rgba);
-        this._adapter.notifyChange({
-            hex,
+        currentColor = {
             rgba,
-            hsva
-        });
-        this._adapter.setState({ currentColor: currentColor, currentColorHSVA: hsva });
+            hex: alpha ? hex : hex.slice(0,7),
+            hsva: {
+                ...currentColor.hsva,
+                a: newAlpha
+            }
+        };
+        this._adapter.notifyChange(currentColor);
+        this._adapter.setState({ currentColor: currentColor });
 
     }
 
-    handleAlphaChangeByHandle = (newAlpha:{a:number})=>{
-        this._adapter.notifyAlphaChangeByHandle(newAlpha)
+    handleChange = (color: HsvaColor|RgbaColor|string, format: 'hex'|'rgba'|'hsva')=>{
+        let currentColor;
+
+        if (format==='hsva') {
+            currentColor = {
+                hsva: color as HsvaColor,
+                rgba: ColorPickerFoundation.hsvaToRgba(color),
+                hex: ColorPickerFoundation.hsvaToHex(color)
+            };
+        } else if (format==='rgba') {
+            currentColor = {
+                rgba: color as RgbaColor,
+                hsva: ColorPickerFoundation.rgbaToHsva(color),
+                hex: ColorPickerFoundation.rgbaToHex(color)
+            };
+        } else if (format==='hex') {
+            currentColor = {
+                hex: color as string,
+                hsva: ColorPickerFoundation.hexToHsva(color as string),
+                rgba: ColorPickerFoundation.hexToRgba(color as string)
+            };
+        } else {
+            throw new Error('format error');
+        }
+
+        this._adapter.notifyChange(currentColor);
+        this._adapter.setState({ currentColor: currentColor });
     }
 
-    handleColorChangeByHandle = (newHue:{h:number})=>{
-        this._adapter.notifyColorChangeByHandle(newHue)
+
+    handleAlphaChangeByHandle = (newAlpha: {a: number})=>{
+        this._adapter.notifyAlphaChangeByHandle(newAlpha);
     }
 
+    handleColorChangeByHandle = (newHue: {h: number})=>{
+        this._adapter.notifyColorChangeByHandle(newHue);
+    }
 
-    getHandlePositionByHSVA = (hsva:HsvaColor,{width,height}:{width:number,height:number},handleSize:number)=>{
+
+    getHandlePositionByHSVA = (hsva: HsvaColor, { width, height }: {width: number;height: number}, handleSize: number)=>{
 
         const defaultColorPosition = { x: hsva.s/100 * width, y: (1 - hsva.v/100) * height };
         return { x: defaultColorPosition.x - handleSize / 2, y: defaultColorPosition.y - handleSize / 2 };
     }
 
-    getHandlePositionByMousePosition = (mousePosition:{x:number,y:number},{width,height}:{width:number,height:number},handleSize:number)=>{
+    getHandlePositionByMousePosition = (mousePosition: {x: number;y: number}, { width, height }: {width: number;height: number}, handleSize: number)=>{
         if (mousePosition.x > width || mousePosition.x < 0) {
             return null;
         }
@@ -132,18 +163,18 @@ class ColorPickerFoundation extends BaseFoundation<ColorPickerAdapter<ColorPicke
             y: mousePosition.y - handleSize/2
         };
 
-        return handlePosition
+        return handlePosition;
     }
 
 
-    getAlphaHandlePositionByMousePosition = (mousePosition:number,width:number,handleSize:number)=>{
+    getAlphaHandlePositionByMousePosition = (mousePosition: number, width: number, handleSize: number)=>{
         if (mousePosition < 0 || mousePosition > width) {
             return null;
         }
-        return  mousePosition - handleSize / 2;
+        return mousePosition - handleSize / 2;
     }
 
-    getColorHandlePositionByMousePosition = (mousePosition:number,width:number,handleSize:number)=>{
+    getColorHandlePositionByMousePosition = (mousePosition: number, width: number, handleSize: number)=>{
         if (mousePosition<0 || mousePosition > width) {
             return null;
         }
@@ -152,22 +183,12 @@ class ColorPickerFoundation extends BaseFoundation<ColorPickerAdapter<ColorPicke
     }
 
 
-    static transValueToRGBA = (value: Value)=>{
-        if (value.format==='hex') {
-            return hexToRgba(value.value as string);
-        } else if (value.format==='hsva') {
-            return hsvaToRgba(value.value as HsvaColor);
-        } else {
-            return value.value as RgbaColor;
-        }
-    }
     
 
 
 
 
-
 }
 
-export default ColorPickerFoundation
+export default ColorPickerFoundation;
 

packages/semi-foundation/colorPicker/index.scss

@@ -1,114 +0,0 @@
-.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));
-}
-
-.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);
-    position: absolute;
-    box-sizing: border-box;
-    cursor: grab;
-}
-
-
-
-
-@mixin rectBg{
-    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>');
-}
-
-.alphaSlider{
-    position: relative;
-    cursor: pointer;
-    @include rectBg;
-
-
-    .alphaSliderInner{
-        width: 100%;
-        height: 100%;
-        border-radius: 4px;
-    }
-
-    .alphaHandle{
-        @include rectBg;
-        border-radius: 99999px;
-        border: 2px solid var(--semi-color-white);
-        position: absolute;
-        box-sizing: border-box;
-        cursor: grab;
-
-    }
-
-}
-
-.colorSlider{
-    position: relative;
-    cursor: pointer;
-    background: linear-gradient(
-                    to right,
-                    #f00 0%,
-                    #ff0 17%,
-                    #0f0 33%,
-                    #0ff 50%,
-                    #00f 67%,
-                    #f0f 83%,
-                    #f00 100%
-    );
-}
-
-
-
-.dataPart{
-    display: flex;
-    align-items: center;
-
-    .colorDemoBlock{
-        border-radius: 4px;
-    }
-
-    .inputGroup{
-        margin-left: 4px;
-        width: 100%;
-        flex-wrap: nowrap;
-        .colorPickerInput{
-
-        }
-        .colorPickerInputNumber{
-            width: 100px;
-            .inputNumberSuffix{
-                font-size: 14px;
-                padding: 0 4px;
-            }
-
-        }
-
-    }
-    .formatSelect{
-        margin-left: 4px;
-        width: 80px;
-    }
-}
-
-

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

@@ -2,7 +2,6 @@ import React, { CSSProperties } from 'react';
 import { HsvaColor } from "@douyinfe/semi-foundation/colorPicker/types";
 import { hsvaToHslString, hsvaToRgba } from "@douyinfe/semi-foundation/colorPicker/utils/convert";
 import ColorPickerFoundation from '@douyinfe/semi-foundation/colorPicker/foundation';
-import "@douyinfe/semi-foundation/colorPicker/index.scss";
 const round = (number: number, digits = 0, base = Math.pow(10, digits)): number => {
     return Math.round(base * number) / base;
 };

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

@@ -2,11 +2,14 @@ import React from 'react';
 import { HsvaColor, RgbaColor } from '@douyinfe/semi-foundation/colorPicker/types';
 import { Input, InputGroup, InputNumber, Select } from '@douyinfe/semi-ui';
 import { hexToRgba, hsvaToRgba } from '@douyinfe/semi-foundation/colorPicker/utils/convert';
-import split from "@douyinfe/semi-foundation/colorPicker/utils/split"
-import ColorPickerFoundation from '@douyinfe/semi-foundation/colorPicker/foundation';
+import split from "@douyinfe/semi-foundation/colorPicker/utils/split";
+import ColorPickerFoundation, { ColorPickerProps } from '@douyinfe/semi-foundation/colorPicker/foundation';
+import { isEqual } from 'lodash';
 
+
+type Value = ColorPickerProps['value']
 interface DataPartProps {
-    currentColor: RgbaColor;
+    currentColor: Value;
     defaultFormat: 'hex'|'rgba'|'hsva';
     width: number;
     alpha?: boolean;
@@ -21,7 +24,7 @@ interface DataPartState{
 
 class DataPart extends React.Component<DataPartProps, DataPartState> {
 
-    constructor(props) {
+    constructor(props:DataPartProps) {
         super(props);
         this.state = {
             format: this.props.defaultFormat,
@@ -34,20 +37,16 @@ class DataPart extends React.Component<DataPartProps, DataPartState> {
     }
 
     componentDidUpdate(prevProps: Readonly<DataPartProps>, prevState: Readonly<DataPartState>, snapshot?: any) {
-        if (JSON.stringify(prevProps.currentColor) !== JSON.stringify(this.props.currentColor) || prevState.format !== this.state.format) {
-            const currentRGBA = this.getRGBAByInputValue(this.state.inputValue);
-            if (JSON.stringify(currentRGBA)!==JSON.stringify(this.props.currentColor)) {
-                this.setState({ inputValue: this.getInputValue() });
-            }
-
+        if (!isEqual(prevProps.currentColor,this.props.currentColor)|| prevState.format !== this.state.format) {
+            this.setState({ inputValue: this.getInputValue() });
         }
 
     }
 
     getInputValue = ()=>{
-        const rgba = this.props.currentColor;
-        const hsva = ColorPickerFoundation.rgbaToHsva(this.props.currentColor);
-        const hex = ColorPickerFoundation.rgbaToHex(this.props.currentColor);
+        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') {
@@ -58,26 +57,28 @@ class DataPart extends React.Component<DataPartProps, DataPartState> {
     }
 
 
-    handleChange = (newColor: RgbaColor)=>{
-        this.props.foundation.handleChangeRGBA(newColor)
+    handleChange = (newColor: RgbaColor|HsvaColor|string)=>{
+        this.props.foundation.handleChange(newColor, this.state.format);
     }
 
-    getRGBAByInputValue = (value: string)=>{
+    getValueByInputValue = (value: string)=>{
         if (this.state.format==='rgba') {
             const result = split(value, this.state.format);
-            if (result) {
+            if(result){
                 return result as RgbaColor;
             }
+
         } else if (this.state.format==='hsva') {
             const result = split(value, this.state.format);
             if (result) {
-                return hsvaToRgba(result as HsvaColor) as RgbaColor;
+                return result as HsvaColor;
             }
         } else if (this.state.format==='hex') {
+            if (!value.startsWith('#')) {
+                value = '#'+value;
+            }
             if (/#[\d\w]{6,8}/.test(value)) {
-                return hexToRgba(value);
-            } else if (/#[\d\w]{6,8}/.test("#"+value)) {
-                return hexToRgba("#"+value) as RgbaColor;
+                return value
             }
         }
         return false;
@@ -86,7 +87,7 @@ class DataPart extends React.Component<DataPartProps, DataPartState> {
 
 
     render() {
-        const rgba = this.props.currentColor;
+        const rgba = this.props.currentColor.rgba;
         return <div className={'dataPart'} style={{ width: this.props.width }}>
             <div className={'colorDemoBlock'} style={{ minWidth: 20, minHeight: 20, backgroundColor:
                     `rgba(${rgba.r},${rgba.g},${rgba.b},${rgba.a})` }}>
@@ -95,9 +96,9 @@ class DataPart extends React.Component<DataPartProps, DataPartState> {
                 <Input className={'colorPickerInput'}
                     value={this.state.inputValue}
                     onChange={(v)=>{
-                        const rgba = this.getRGBAByInputValue(v);
-                        if (rgba) {
-                            this.handleChange(rgba as RgbaColor);
+                        const value = this.getValueByInputValue(v);
+                        if (value) {
+                            this.handleChange(value);
                         }
                         this.setState({ inputValue: v });
 
@@ -108,9 +109,18 @@ class DataPart extends React.Component<DataPartProps, DataPartState> {
                         min={0}
                         max={100}
                         className={'colorPickerInputNumber'}
-                        value={Number(Math.round(this.props.currentColor.a*100))}
+                        value={Number(Math.round(this.props.currentColor.rgba.a*100))}
                         onNumberChange={v=>{
-                            this.handleChange({ ...this.props.currentColor, 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)) }
+                                this.handleChange(rgba);
+                            }
                         }}
                         suffix={<span className={'inputNumberSuffix'}>%</span>} hideButtons={true} />
                 }

packages/semi-ui/colorPicker/index.tsx

@@ -5,11 +5,13 @@ import Button from "../button";
 import { PopoverProps } from '@douyinfe/semi-ui/popover';
 import ColorChooseArea from './ColorChooseArea';
 import { ColorPickerAdapter } from '@douyinfe/semi-foundation/colorPicker/foundation';
-import { HsvaColor, RgbaColor } from '@douyinfe/semi-foundation/colorPicker/types';
 import AlphaSlider from './AlphaSlider';
 import ColorSlider from './ColorSlider';
 import DataPart from './DataPart';
-import { IconEyedropper,IconEyeOpened } from '@douyinfe/semi-icons';
+import { IconEyedropper, IconEyeOpened } from '@douyinfe/semi-icons';
+import cls from 'classnames';
+import "@douyinfe/semi-foundation/colorPicker/colorPicker.scss"
+import { cssClasses } from '@douyinfe/semi-foundation/colorPicker/constants';
 
 
 export interface ColorPickerReactProps extends ColorPickerProps{
@@ -33,13 +35,20 @@ class ColorPicker extends BaseComponent<ColorPickerReactProps, ColorPickerReactS
         super(props);
         this.foundation = new ColorPickerFoundation(this.adapter);
         const initValue = (props.value ?? props.defaultValue);
-        const currentColorRGBA = initValue?ColorPickerFoundation.transValueToRGBA(initValue):{ r: 50, g: 50, b: 50, a: 1 };
         this.state = {
-            currentColor: currentColorRGBA,
-            currentColorHSVA: ColorPickerFoundation.rgbaToHsva(currentColorRGBA),
+            currentColor: initValue,
         };
     }
 
+    static defaultProps = {
+        defaultValue:{
+            hsva: { h: 0, s: 0, v: 0, a: 1 },
+            rgba: { r: 0, g: 0, b: 0, a: 1 },
+            hex: '#000000'
+        },
+        defaultFormat:'rgba'
+    }
+
     get adapter(): ColorPickerAdapter<ColorPickerReactProps, ColorPickerReactState> {
         return {
             ...super.adapter,
@@ -47,17 +56,17 @@ class ColorPicker extends BaseComponent<ColorPickerReactProps, ColorPickerReactS
                 this.props.onChange?.(value);
             },
             notifyAlphaChangeByHandle: (newAlpha)=>{
-                this.foundation.handleChangeRGBA( { ...this.getCurrentColor(), a: newAlpha.a });
+                this.foundation.handleChangeA(this.getCurrentColor(), newAlpha.a);
             },
             notifyColorChangeByHandle: ({ h })=>{
-                this.foundation.handleChangeHSVA({ ...ColorPickerFoundation.rgbaToHsva(this.getCurrentColor()), h });
+                this.foundation.handleChangeH(this.getCurrentColor(), h);
             }
         };
     }
     
 
     getCurrentColor = ()=>{
-        return this.props.value ? (this.props.value.value as RgbaColor) : this.state.currentColor;
+        return this.props.value ? (this.props.value) : this.state.currentColor;
     }
 
     handlePickValueWithStraw = async ()=>{
@@ -70,11 +79,10 @@ class ColorPicker extends BaseComponent<ColorPickerReactProps, ColorPickerReactS
             const result = await eyeDropper.open();
             const color = result['sRGBHex'];
             if (color.startsWith("#")) {
-                const rgba = ColorPickerFoundation.hexToRgba(color);
-                this.foundation.handleChangeRGBA(rgba);
+                this.foundation.handleChange(color, 'hex');
             } else if (color.startsWith('rgba')) {
                 const rgba = ColorPickerFoundation.rgbaStringToRgba(color);
-                this.foundation.handleChangeRGBA(rgba)
+                this.foundation.handleChange(rgba, 'rgba');
             }
         } catch (e) {
 
@@ -83,26 +91,25 @@ class ColorPicker extends BaseComponent<ColorPickerReactProps, ColorPickerReactS
 
 
     render() {
-        if (this.props.value && this.props.value.format!=='rgba') {
-            throw "[semi] Error: value must be passed in rgba format when using controlled mode, because rbg->hsv->rgb is lossless.You can use the util method exported by ColorPicker Class.";
-        }
+        // const {className:userClassName} = this.props;
+        // const className = cls(`${cssClasses.PREFIX}`, userClassName)
         const currentColor = this.getCurrentColor();
-        return <div className={'colorPicker'}>
+        return <div className={"className"}>
 
-            <ColorChooseArea hsva={this.state.currentColorHSVA} foundation={this.foundation} onChange={({ s, v }) => {
-                this.foundation.handleChangeHSVA( { ...this.state.currentColorHSVA, s, v });
+            <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}/>
             <ColorSlider width={this.props.width ?? 280}
                 height={10}
                 handleSize={18}
-                hue={ColorPickerFoundation.rgbaToHsva(currentColor).h}
+                hue={currentColor.hsva.h}
                 className={'colorSliderWrapper'}
                 foundation={this.foundation}
             />
             <AlphaSlider width={this.props.width ?? 280}
                 height={10}
                 handleSize={18}
-                hsva={ColorPickerFoundation.rgbaToHsva(currentColor)}
+                hsva={currentColor.hsva}
                 className={'alphaSliderWrapper'}
                 foundation={this.foundation}
             />