From bff8f63f31bd27106954d2fa3dc0de22521eb6e6 Mon Sep 17 00:00:00 2001
From: zhangming <qianzm2490@gmail.com>
Date: Thu, 28 Nov 2024 18:35:59 +0800
Subject: [PATCH] =?UTF-8?q?feat(Picker):=20=E5=A2=9E=E5=8A=A0=E5=8F=AF?=
 =?UTF-8?q?=E9=80=89=E9=A1=B9=E7=A6=81=E7=94=A8=E9=85=8D=E7=BD=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/packages/picker/demos/h5/demo1.tsx   | 2 +-
 src/packages/picker/demos/taro/demo1.tsx | 2 +-
 src/packages/picker/doc.en-US.md         | 1 +
 src/packages/picker/doc.md               | 1 +
 src/packages/picker/doc.taro.md          | 1 +
 src/packages/picker/doc.zh-TW.md         | 1 +
 src/packages/picker/picker.scss          | 4 ++++
 src/packages/picker/pickerpanel.taro.tsx | 6 ++++--
 src/packages/picker/pickerpanel.tsx      | 6 ++++--
 src/styles/variables-jmapp.scss          | 4 ++++
 src/styles/variables.scss                | 4 ++++
 11 files changed, 26 insertions(+), 6 deletions(-)

diff --git a/src/packages/picker/demos/h5/demo1.tsx b/src/packages/picker/demos/h5/demo1.tsx
index b0c5f799ba..99599a5401 100644
--- 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
index f34f7003f3..03c91deb8e 100644
--- 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
index 53c7004f06..33abc5d240 100644
--- 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
index 38554d701e..62bbc5a424 100644
--- 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
index 6d07ec41cb..0a2856c4b1 100644
--- 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
index 354e679eb9..e62d5cce2c 100644
--- 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
index 6516efc1bf..a6a548a218 100644
--- 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
index 8a593f9eeb..bb00a803f5 100644
--- 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
index 15e66ce773..c5911baacc 100644
--- 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
index 5665af21ef..4188b3a37f 100644
--- 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
index c1c326b1ec..dd6e0e0601 100644
--- 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