feat: [color-picker] 添加disabled属性 fix #983

kingdee · Dec 11, 2024 · aa1b80b · aa1b80b
1 parent 743612b
commit aa1b80b
Show file tree

Hide file tree

Showing 5 changed files with 20 additions and 3 deletions.
diff --git a/components/color-picker/__tests__/index.test.tsx b/components/color-picker/__tests__/index.test.tsx
@@ -239,6 +239,18 @@ describe('ColorPicker', () => {
       '100%',
     )
 
+    // disabled
+    underlineDefValueWrapper.setProps({ disabled: true })
+    borderedDefValueWrapper.setProps({ disabled: true })
+    underlineDefValueWrapper.update()
+    borderedDefValueWrapper.update()
+    expect(underlineDefValueWrapper.find('.kd-input-wrapper-disabled')).toExist()
+    expect(borderedDefValueWrapper.find('.kd-input-wrapper-disabled')).toExist()
+    underlineDefValueWrapper.setProps({ disabled: false })
+    borderedDefValueWrapper.setProps({ disabled: false })
+    underlineDefValueWrapper.update()
+    borderedDefValueWrapper.update()
+
     // value
     underlineDefValueWrapper.setProps({ value: 'red' })
     borderedDefValueWrapper.setProps({ value: 'blue' })

diff --git a/components/color-picker/color-picker.tsx b/components/color-picker/color-picker.tsx
@@ -48,6 +48,7 @@ const InternalColorPicker = (props: Partial<IColorPickerProps>, ref: RefObject<I
     placeholder,
     defaultValue,
     defaultOpen,
+    disabled,
     visible,
     popperClassName,
     suffixIcon,
@@ -164,6 +165,7 @@ const InternalColorPicker = (props: Partial<IColorPickerProps>, ref: RefObject<I
   }
 
   const handleClick = () => {
+    if (disabled) return
     if (typeof visible === 'undefined') {
       setShowPanel(!showPanel)
     }
@@ -218,6 +220,7 @@ const InternalColorPicker = (props: Partial<IColorPickerProps>, ref: RefObject<I
       <Input
         borderType={pure ? 'bordered' : borderType}
         placeholder={placeholder}
+        disabled={disabled}
         value={value ?? inputColorValue}
         className={inputCls}
         onChange={handleChange}

diff --git a/components/color-picker/index.md b/components/color-picker/index.md
@@ -19,6 +19,7 @@ subtitle: 颜色选择器
 | className | color-picker 输入框类名 | string | - | 1.7.0 |
 | defaultOpen | 颜色面板展开配置 | boolean | false | 1.7.0 |
 | defaultValue | 设置输入框的默认值，可以是十六进制、RGB 、HSB 、HSL 或者颜色英文名称 | string | - | 1.7.0 |
+| disabled | 输入框禁用状态 | boolean | `false` | `true` `false` | 1.8.22 |
 | format | 限制颜色选择器的输出格式，必须是 HEX、RGB 、HSB 、HSL 中的一种 | `HEX` \| `RGB` \| `HSB` \| `HSL` | `HEX` | 1.8.16 |
 | functionalColor | 设置功能色色值，可以是十六进制、RGB 、HSB 、HSL 或者颜色英文名称 | string | - | 1.7.0 |
 | functionalColorName | 设置功能色的名称 | string | #themeColor | 1.7.0 |
@@ -44,8 +45,8 @@ subtitle: 颜色选择器
 
 ## ColorPickerInstance
 
-| 属性 | 说明       | 类型           | 版本 |
-| ---- | ---------- | -------------- | ---- |
+| 属性 | 说明       | 类型           | 版本   |
+| ---- | ---------- | -------------- | ------ |
 | dom  | 输入框容器 | HTMLDivElement | 1.8.22 |
 
 ## Design Token

diff --git a/components/color-picker/interface.ts b/components/color-picker/interface.ts
@@ -30,6 +30,8 @@ export interface IColorPickerProps extends PopperProps {
   defaultValue: string
   // 颜色选择面板显隐配置
   defaultOpen: boolean
+  // 禁用状态
+  disabled: boolean
   // 功能色名称
   functionalColorName: string
   // 功能色色值

diff --git a/components/color-picker/style/index.less b/components/color-picker/style/index.less
@@ -36,7 +36,6 @@
     height: 100%;
     width: 100%;
     padding: 0 8px;
-    border-bottom: 1px solid rgba(217, 217, 217, 1);
     font-size: @color-picker-input-font-size;
   }