antd Design ColorPicker初始值设为#ffffff引起的bug

536 阅读1分钟

ColorPicker如果初始值默认设置为#ffffff,那么会使用colorPicker的滑块不起作用,所以初始值不能设为#ffffff,另外在调整的过程中也不能把颜色设置为#ffffff,这样也会导致错误;官方的示例会显示“请输入颜色”的错误信息,所以使用这个组件的时候需要注意一下这个隐藏的Bug,下面是自己写的Color组件,如下所示

image.png

image.png

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}
    </>
  );
};