Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
wants to merge 2 commits into
base: next
Choose a base branch
from
Open

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
bff8f63
feat(Picker): 增加可选项禁用配置
zhangminggeek Nov 28, 2024
88edd4e
Merge branch 'next' into feat/picker
xiaoyatong Dec 12, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion src/packages/picker/demos/h5/demo1.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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) => {
Expand Down
2 changes: 1 addition & 1 deletion src/packages/picker/demos/taro/demo1.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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) => {
Expand Down
1 change: 1 addition & 0 deletions src/packages/picker/doc.en-US.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
1 change: 1 addition & 0 deletions src/packages/picker/doc.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -103,6 +103,7 @@ import { Picker } from '@nutui/nutui-react'
| --- | --- | --- | --- |
| text | 选项的文字内容 | `string` \| `number` | `-` |
| value | 选项对应的值，且唯一 | `string` \| `number` | `-` |
| disabled | 是否禁用 | `boolean` | `false` |
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 Codebase verification

需要补充禁用状态的使用示例说明

示例代码中已经包含了 disabled 属性的使用，但文档中缺少对应的使用说明和示例代码展示。建议在文档中添加以下内容：

  • 在"基础用法"或"禁用选项"小节中展示如何使用 disabled 属性
  • 添加示例代码，说明如何禁用特定选项
🔗 Analysis chain

文档更新清晰完整！

disabled 属性的文档说明简洁明了，类型定义和默认值的描述符合规范。

运行以下脚本验证示例代码中是否正确展示了禁用选项的用法：

🏁 Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# 描述：检查示例代码中是否包含 disabled 属性的使用示例

# 搜索示例代码中的 disabled 属性使用
fd -e tsx -e jsx . src/packages/picker/demos -x rg -l "disabled.*true"

Length of output: 152

Script:

#!/bin/bash
# 检查示例代码中 disabled 属性的具体使用情况
rg -A 5 "disabled.*true" src/packages/picker/demos/h5/demo1.tsx src/packages/picker/demos/taro/demo1.tsx

# 检查文档中是否包含禁用状态的示例说明
rg -A 5 "disabled" src/packages/picker/doc.md

Length of output: 1094

| children | 用于级联选项 | `Array` | `-` |

## 主题定制
Expand Down
1 change: 1 addition & 0 deletions src/packages/picker/doc.taro.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -103,6 +103,7 @@ import { Picker } from '@nutui/nutui-react-taro'
| --- | --- | --- | --- |
| text | 选项的文字内容 | `string` \| `number` | `-` |
| value | 选项对应的值，且唯一 | `string` \| `number` | `-` |
| disabled | 是否禁用 | `boolean` | `false` |
| children | 用于级联选项 | `Array` | `-` |

## 主题定制
Expand Down
1 change: 1 addition & 0 deletions src/packages/picker/doc.zh-TW.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -103,6 +103,7 @@ import { Picker } from '@nutui/nutui-react'
| --- | --- | --- | --- |
| text | 選項的文字內容 | `string` \| `number` | `-` |
| value | 選項對應的值，且唯一 | `string` \| `number` | `-` |
| disabled | 是否禁用 | `boolean` | `false` |
| children | 用於級聯選項 | `Array` | `-` |

## 主題定製
Expand Down
4 changes: 4 additions & 0 deletions src/packages/picker/picker.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down
6 changes: 4 additions & 2 deletions src/packages/picker/pickerpanel.taro.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

选择的时候不可以选，也要体现在 confirm 的时候 不要选其他的值。
在 confirm 的时候 最好可以增加回调，告知该项 disabled。

chooseItem?.(option, keyIndex)
}

// 开始滚动
Expand Down Expand Up @@ -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)
Expand Down
6 changes: 4 additions & 2 deletions src/packages/picker/pickerpanel.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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)
}

// 开始滚动
Expand Down Expand Up @@ -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)
Expand Down
4 changes: 4 additions & 0 deletions src/styles/variables-jmapp.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
4 changes: 4 additions & 0 deletions src/styles/variables.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
Loading