feat(Picker): 增加可选项禁用配置

zhangminggeek · zhangminggeek · commit bff8f63f31bd · 2024-12-05T17:27:49.000+08:00
diff --git a/src/packages/picker/demos/h5/demo1.tsx b/src/packages/picker/demos/h5/demo1.tsx
@@ -22,7 +22,7 @@ const Demo1 = () => {
       { value: 8, text: '大庆市' },
       { value: 9, text: '绥化市' },
       { value: 10, text: '潍坊市' },
-      { value: 12, text: '乌鲁木齐市' },
+      { value: 12, text: '乌鲁木齐市', disabled: true },
     ],
   ]
   const changePicker = (list: any[], option: any, columnIndex: number) => {
diff --git a/src/packages/picker/demos/taro/demo1.tsx b/src/packages/picker/demos/taro/demo1.tsx
@@ -22,7 +22,7 @@ const Demo1 = () => {
       { value: 8, text: '大庆市' },
       { value: 9, text: '绥化市' },
       { value: 10, text: '潍坊市' },
-      { value: 12, text: '乌鲁木齐市' },
+      { value: 12, text: '乌鲁木齐市', disabled: true },
     ],
   ]
   const changePicker = (list: any[], option: any, columnIndex: number) => {
diff --git a/src/packages/picker/doc.en-US.md b/src/packages/picker/doc.en-US.md
@@ -103,6 +103,7 @@ Cancel the 3D display effect by setting `threeDimensional`, and control the dura
 | --- | --- | --- | --- |
 | text | Text of column | `string` \| `number` | `-` |
 | value | Value of column | `string` \| `number` | `-` |
+| disabled | Whether to disable | `boolean` | `false` |
 | children | Cascader Option | `Array` | `-` |
 
 ## Theming
diff --git a/src/packages/picker/doc.md b/src/packages/picker/doc.md
@@ -103,6 +103,7 @@ import { Picker } from '@nutui/nutui-react'
 | --- | --- | --- | --- |
 | text | 选项的文字内容 | `string` \| `number` | `-` |
 | value | 选项对应的值，且唯一 | `string` \| `number` | `-` |
+| disabled | 是否禁用 | `boolean` | `false` |
 | children | 用于级联选项 | `Array` | `-` |
 
 ## 主题定制
diff --git a/src/packages/picker/doc.taro.md b/src/packages/picker/doc.taro.md
@@ -103,6 +103,7 @@ import { Picker } from '@nutui/nutui-react-taro'
 | --- | --- | --- | --- |
 | text | 选项的文字内容 | `string` \| `number` | `-` |
 | value | 选项对应的值，且唯一 | `string` \| `number` | `-` |
+| disabled | 是否禁用 | `boolean` | `false` |
 | children | 用于级联选项 | `Array` | `-` |
 
 ## 主题定制
diff --git a/src/packages/picker/doc.zh-TW.md b/src/packages/picker/doc.zh-TW.md
@@ -103,6 +103,7 @@ import { Picker } from '@nutui/nutui-react'
 | --- | --- | --- | --- |
 | text | 選項的文字內容 | `string` \| `number` | `-` |
 | value | 選項對應的值，且唯一 | `string` \| `number` | `-` |
+| disabled | 是否禁用 | `boolean` | `false` |
 | children | 用於級聯選項 | `Array` | `-` |
 
 ## 主題定製
diff --git a/src/packages/picker/picker.scss b/src/packages/picker/picker.scss
@@ -119,6 +119,10 @@
     color: $picker-item-text-color;
     font-size: $picker-item-text-font-size;
     text-align: center;
+
+    &-disabled {
+      color: $picker-item-text-color-disabled;
+    }
   }
 
   &-item {
diff --git a/src/packages/picker/pickerpanel.taro.tsx b/src/packages/picker/pickerpanel.taro.tsx
@@ -118,7 +118,9 @@ const InternalPickerPanel: ForwardRefRenderFunction<
   }
 
   const setChooseValue = (move: number) => {
-    chooseItem?.(options?.[Math.round(-move / lineSpacing.current)], keyIndex)
+    const option = options?.[Math.round(-move / lineSpacing.current)]
+    if (option.disabled) return
+    chooseItem?.(option, keyIndex)
   }
 
   // 开始滚动
@@ -278,7 +280,7 @@ const InternalPickerPanel: ForwardRefRenderFunction<
               <div
                 className={`nut-picker-roller-item ${
                   isHidden(index + 1) && 'nut-picker-roller-item-hidden'
-                }`}
+                } ${item.disabled && 'nut-picker-roller-item-disabled'}`}
                 style={{
                   transform: `rotate3d(1, 0, 0, ${
                     -rotation * (index + 1)
diff --git a/src/packages/picker/pickerpanel.tsx b/src/packages/picker/pickerpanel.tsx
@@ -114,7 +114,9 @@ const InternalPickerPanel: ForwardRefRenderFunction<
   }
 
   const setChooseValue = (move: number) => {
-    chooseItem?.(options?.[Math.round(-move / lineSpacing)], keyIndex)
+    const option = options?.[Math.round(-move / lineSpacing)]
+    if (option.disabled) return
+    chooseItem?.(option, keyIndex)
   }
 
   // 开始滚动
@@ -268,7 +270,7 @@ const InternalPickerPanel: ForwardRefRenderFunction<
               <div
                 className={`nut-picker-roller-item ${
                   isHidden(index + 1) && 'nut-picker-roller-item-hidden'
-                }`}
+                } ${item.disabled && 'nut-picker-roller-item-disabled'}`}
                 style={{
                   transform: `rotate3d(1, 0, 0, ${
                     -rotation * (index + 1)
diff --git a/src/styles/variables-jmapp.scss b/src/styles/variables-jmapp.scss
@@ -584,6 +584,10 @@ $picker-item-text-color: var(
   --nutui-picker-item-text-color,
   $color-text
 ) !default;
+$picker-item-text-color-disabled: var(
+  --nutui-picker-item-text-color,
+  $color-text-disabled
+) !default;
 $picker-item-active-text-color: var(
   --nutui-picker-item-active-text-color,
   $color-text
diff --git a/src/styles/variables.scss b/src/styles/variables.scss
@@ -550,6 +550,10 @@ $picker-item-text-color: var(
   --nutui-picker-item-text-color,
   $color-title
 ) !default;
+$picker-item-text-color-disabled: var(
+  --nutui-picker-item-text-color,
+  $color-text-disabled
+) !default;
 $picker-item-text-font-size: var(
   --nutui-picker-item-text-font-size,
   $font-size-base

Original file line number	Diff line number	Diff line change
`@@ -22,7 +22,7 @@ const Demo1 = () => {`
`22`	`22`	`{ value: 8, text: '大庆市' },`
`23`	`23`	`{ value: 9, text: '绥化市' },`
`24`	`24`	`{ value: 10, text: '潍坊市' },`
`25`		`- { value: 12, text: '乌鲁木齐市' },`
	`25`	`+ { value: 12, text: '乌鲁木齐市', disabled: true },`
`26`	`26`	`],`
`27`	`27`	`]`
`28`	`28`	`const changePicker = (list: any[], option: any, columnIndex: number) => {`