diff --git a/src/color-picker/_example/enable-alpha.jsx b/src/color-picker/_example/enable-alpha.jsx
index f85f3a8f57..92496e1bef 100644
--- a/src/color-picker/_example/enable-alpha.jsx
+++ b/src/color-picker/_example/enable-alpha.jsx
@@ -2,11 +2,11 @@ import React, { useState } from 'react';
import { ColorPickerPanel } from 'tdesign-react';
export default function EnableAlpha() {
- const [value, setValue] = useState('#0052d9');
+ const [value, setValue] = useState('#0052D9CC');
const handleChange = (value) => {
setValue(value);
};
- return
;
+ return
;
}
diff --git a/src/color-picker/_example/trigger.jsx b/src/color-picker/_example/trigger.jsx
index c727c4980d..27bd19049c 100644
--- a/src/color-picker/_example/trigger.jsx
+++ b/src/color-picker/_example/trigger.jsx
@@ -2,5 +2,5 @@ import React from 'react';
import { ColorPicker } from 'tdesign-react';
export default function PanelExample() {
- return
;
+ return
;
}
diff --git a/src/color-picker/components/panel/format/index.tsx b/src/color-picker/components/panel/format/index.tsx
index 21bf52e25d..4c5eb51547 100644
--- a/src/color-picker/components/panel/format/index.tsx
+++ b/src/color-picker/components/panel/format/index.tsx
@@ -16,7 +16,6 @@ export interface TdColorFormatProps extends TdColorPickerProps {
const FormatPanel = (props: TdColorFormatProps) => {
const { baseClassName, format, onModeChange, selectInputProps } = props;
const [formatMode, setFormatMode] = useState(format);
-
const handleModeChange = (v: TdColorPickerProps['format']) => {
setFormatMode(v);
onModeChange(v);
diff --git a/src/color-picker/components/panel/index.tsx b/src/color-picker/components/panel/index.tsx
index 713959f7ef..ec2ef68f6d 100644
--- a/src/color-picker/components/panel/index.tsx
+++ b/src/color-picker/components/panel/index.tsx
@@ -44,17 +44,25 @@ const Panel = forwardRef
((props, ref) => {
closeBtn,
colorModes = ['linear-gradient', 'monochrome'],
showPrimaryColorPreview = true,
+ onRecentColorsChange,
} = props;
const [innerValue, setInnerValue] = useControlled(props, 'value', onChange);
const [mode, setMode] = useState(colorModes?.length === 1 ? colorModes[0] : 'monochrome');
- const isGradient = mode === 'linear-gradient'; // 判断是否为gradient模式
+ const [updateId, setUpdateId] = useState(0);
+ const isGradient = mode === 'linear-gradient'; // 判断是否为 linear-gradient 模式
const defaultEmptyColor = isGradient ? DEFAULT_LINEAR_GRADIENT : DEFAULT_COLOR;
+
+ const [recentlyUsedColors, setRecentlyUsedColors] = useControlled(props, 'recentColors', onRecentColorsChange, {
+ defaultRecentColors: colorPickerDefaultProps.recentColors,
+ });
+
const colorInstanceRef = useRef(new Color(innerValue || defaultEmptyColor));
- const getmodeByColor = colorInstanceRef.current.isGradient ? 'linear-gradient' : 'monochrome';
- const [updateId, setUpdateId] = useState(0);
+ const getModeByColor = colorInstanceRef.current.isGradient ? 'linear-gradient' : 'monochrome';
+ const formatRef = useRef(colorInstanceRef.current.isGradient ? 'CSS' : format ?? 'RGB');
+
const update = useCallback(
- (value) => {
+ (value: string) => {
colorInstanceRef.current.update(value);
setUpdateId(updateId + 1);
},
@@ -66,9 +74,9 @@ const Panel = forwardRef((props, ref) => {
if (mode === 'linear-gradient') {
return colorInstanceRef.current.linearGradient;
}
-
- return colorInstanceRef.current.getFormatsColorMap()[format] || colorInstanceRef.current.css;
- }, [format, mode]);
+ const finalFormat = format === 'HEX' && enableAlpha ? 'HEX8' : format; // hex should transfer to hex8 when alpha channel is opened
+ return colorInstanceRef.current.getFormatsColorMap()[finalFormat] || colorInstanceRef.current.css;
+ }, [format, enableAlpha, mode]);
const emitColorChange = useCallback(
(trigger?: ColorPickerChangeTrigger) => {
@@ -84,7 +92,6 @@ const Panel = forwardRef((props, ref) => {
if (typeof value === 'undefined' || mode === 'linear-gradient') {
return;
}
-
// common Color new 的时候使用 hsv ，一个 rgba 可以对应两个 hsv ，这里先直接用 tinycolor 比较下颜色是否修改了
const newUniqColor = tinyColor(value).toRgb();
const { r, g, b, a } = newUniqColor;
@@ -106,16 +113,9 @@ const Panel = forwardRef((props, ref) => {
if (colorModes.length === 1) {
setMode(colorModes[0]);
} else {
- setMode(getmodeByColor);
+ setMode(getModeByColor);
}
- }, [colorModes, getmodeByColor]);
-
- const formatRef = useRef(colorInstanceRef.current.isGradient ? 'CSS' : 'RGB');
-
- const { onRecentColorsChange } = props;
- const [recentlyUsedColors, setRecentlyUsedColors] = useControlled(props, 'recentColors', onRecentColorsChange, {
- defaultRecentColors: colorPickerDefaultProps.recentColors,
- });
+ }, [colorModes, getModeByColor]);
const baseProps = {
color: colorInstanceRef.current,
@@ -259,7 +259,7 @@ const Panel = forwardRef((props, ref) => {
color.update(value);
color.updateCurrentGradientColor();
} else {
- console.warn('该模式不支持渐变色');
+ console.warn('linear-gradient is not supported in this mode');
}
} else if (mode === 'linear-gradient') {
setMode('monochrome');
diff --git a/test/snap/__snapshots__/csr.test.jsx.snap b/test/snap/__snapshots__/csr.test.jsx.snap
index a175385e6f..4dd31892ec 100644
--- a/test/snap/__snapshots__/csr.test.jsx.snap
+++ b/test/snap/__snapshots__/csr.test.jsx.snap
@@ -51308,7 +51308,7 @@ exports[`csr snapshot test > csr test src/color-picker/_example/color-mode.jsx 1
>
@@ -51475,7 +51475,7 @@ exports[`csr snapshot test > csr test src/color-picker/_example/color-mode.jsx 1
>
@@ -51794,7 +51794,7 @@ exports[`csr snapshot test > csr test src/color-picker/_example/enable-alpha.jsx