ColorPicker如果初始值默认设置为#ffffff,那么会使用colorPicker的滑块不起作用,所以初始值不能设为#ffffff,另外在调整的过程中也不能把颜色设置为#ffffff,这样也会导致错误;官方的示例会显示“请输入颜色”的错误信息,所以使用这个组件的时候需要注意一下这个隐藏的Bug,下面是自己写的Color组件,如下所示
export const ColorItem = ({
form,
fieldInfo,
value,
onChange,
}: {
fieldInfo: StlConfigFormField;
form: FormInstance<any>;
value?: string | Color;
onChange?: (value: string | Color) => void;
}) => {
const [colorRgb, setColorRgb] = useState<Color | string>(value || '#1ab74c');
const [formatRgb, setFormatRgb] = useState<ColorPickerProps['format']>('rgb');
const [messageApi, contextHolder] = message.useMessage();
const triggerChange = (changedValue: string | Color) => {
onChange?.(changedValue);
};
const handleColorChange = (newValue: string | Color) => {
setColorRgb(newValue);
if (typeof newValue === 'string') {
if (newValue === '#ffffff') {
messageApi.error('请输入颜色');
form.setFieldValue([STLFORMKEY, fieldInfo.uuid, 'value'], '');
return;
}
triggerChange(newValue);
} else {
if (newValue?.toHexString() === '#ffffff') {
messageApi.error('请输入颜色');
form.setFieldValue([STLFORMKEY, fieldInfo.uuid, 'value'], '');
return;
}
triggerChange(newValue?.toHexString());
}
};
const rgbString = useMemo(
() => (typeof colorRgb === 'string' ? colorRgb : colorRgb.toRgbString()),
[colorRgb],
);
return (
<>
<ColorPicker
format={formatRgb}
value={colorRgb}
onChange={handleColorChange}
onFormatChange={setFormatRgb}
/>
<span style={{ padding: '10px' }}>{rgbString}</span>
{contextHolder}
</>
);
};