{
)
expect(container).toMatchSnapshot()
+ expect(screen.getByText('南京市')).toBeInTheDocument()
})
test('should render tiled', () => {
@@ -115,7 +116,17 @@ test('should render with Multi Column', () => {
const { container } = render(
)
- expect(container.querySelectorAll('.nut-pickerview-list').length).toBe(2)
+ const columns = container.querySelectorAll('.nut-pickerview-list')
+ expect(columns.length).toBe(2)
+
+ // 检查列内容
+ const firstColumn = columns[0]
+ expect(firstColumn.textContent).toContain('周一')
+ expect(firstColumn.textContent).toContain('周二')
+
+ const secondColumn = columns[1]
+ expect(secondColumn.textContent).toContain('上午')
+ expect(secondColumn.textContent).toContain('下午')
expect(container).toMatchSnapshot()
})
@@ -123,15 +134,29 @@ test('should match onchange', async () => {
const PenderContent = () => {
const [value, setValue] = useState([1])
- setTimeout(() => {
- setValue([2])
- }, 1000)
+ useEffect(() => {
+ setTimeout(() => {
+ setValue([3])
+ }, 1000)
+ }, [])
- return
+ return (
+
{
+ if (value[0] === 3) {
+ setValue([1])
+ }
+ }}
+ />
+ )
}
const container = render()
- expect(container).toMatchSnapshot()
+ await waitFor(() => {
+ expect(container).toMatchSnapshot()
+ })
})
test('should match cascade', () => {
diff --git a/src/packages/pickerview/demo.taro.tsx b/src/packages/pickerview/demo.taro.tsx
index 73487d67b0..8f34000096 100644
--- a/src/packages/pickerview/demo.taro.tsx
+++ b/src/packages/pickerview/demo.taro.tsx
@@ -9,6 +9,7 @@ import Demo3 from './demos/taro/demo3'
import Demo4 from './demos/taro/demo4'
import Demo5 from './demos/taro/demo5'
import Demo6 from './demos/taro/demo6'
+import Demo7 from './demos/taro/demo7'
const PickerViewDemo = () => {
const [translated] = useTranslate({
@@ -19,6 +20,7 @@ const PickerViewDemo = () => {
controlled: '受控',
tiled: '平铺',
cascade: '级联',
+ asynchronous: '异步数据',
},
'en-US': {
title: 'Basic Usage',
@@ -27,6 +29,7 @@ const PickerViewDemo = () => {
controlled: 'Controlled',
tiled: 'Tiled',
cascade: 'Cascade',
+ asynchronous: 'Asynchronous',
},
'zh-TW': {
title: '基礎用法',
@@ -35,6 +38,7 @@ const PickerViewDemo = () => {
controlled: '受控',
tiled: '平鋪',
cascade: '級聯',
+ asynchronous: '異步數據',
},
})
return (
@@ -53,6 +57,8 @@ const PickerViewDemo = () => {
{translated.cascade}
+ {translated.asynchronous}
+
)
diff --git a/src/packages/pickerview/demo.tsx b/src/packages/pickerview/demo.tsx
index b94f91de80..8d95022679 100644
--- a/src/packages/pickerview/demo.tsx
+++ b/src/packages/pickerview/demo.tsx
@@ -6,6 +6,7 @@ import Demo3 from './demos/h5/demo3'
import Demo4 from './demos/h5/demo4'
import Demo5 from './demos/h5/demo5'
import Demo6 from './demos/h5/demo6'
+import Demo7 from './demos/h5/demo7'
const PickerViewDemo = () => {
const [translated] = useTranslate({
@@ -16,6 +17,7 @@ const PickerViewDemo = () => {
controlled: '受控',
tiled: '平铺',
cascade: '级联',
+ asynchronous: '异步数据',
},
'en-US': {
title: 'Basic Usage',
@@ -24,6 +26,7 @@ const PickerViewDemo = () => {
controlled: 'Controlled',
tiled: 'Tiled',
cascade: 'Cascade',
+ asynchronous: 'Asynchronous',
},
'zh-TW': {
title: '基礎用法',
@@ -32,6 +35,7 @@ const PickerViewDemo = () => {
controlled: '受控',
tiled: '平鋪',
cascade: '級聯',
+ asynchronous: '異步數據',
},
})
return (
@@ -48,6 +52,8 @@ const PickerViewDemo = () => {
{translated.cascade}
+ {translated.asynchronous}
+
)
}
diff --git a/src/packages/pickerview/demos/h5/demo7.tsx b/src/packages/pickerview/demos/h5/demo7.tsx
new file mode 100644
index 0000000000..d245a189c5
--- /dev/null
+++ b/src/packages/pickerview/demos/h5/demo7.tsx
@@ -0,0 +1,38 @@
+import React, { useEffect, useState } from 'react'
+import { PickerView, Cell, PickerOptions } from '@nutui/nutui-react'
+
+const Demo7 = () => {
+ const [columnsList, setColumnsList] = useState([] as PickerOptions[])
+
+ useEffect(() => {
+ setTimeout(() => {
+ setColumnsList([
+ [
+ { value: 1, label: '南京市' },
+ { value: 2, label: '无锡市' },
+ { value: 3, label: '海北藏族自治区' },
+ { value: 4, label: '北京市' },
+ { value: 5, label: '连云港市' },
+ { value: 8, label: '大庆市' },
+ { value: 9, label: '绥化市' },
+ { value: 10, label: '潍坊市' },
+ { value: 12, label: '乌鲁木齐市' },
+ ],
+ ])
+ }, 3000)
+ }, [])
+ return (
+ <>
+
+ {
+ console.log('onChange', value, selectedOptions)
+ }}
+ />
+ |
+
+ )
+}
+export default Demo7
diff --git a/src/packages/pickerview/demos/taro/demo7.tsx b/src/packages/pickerview/demos/taro/demo7.tsx
new file mode 100644
index 0000000000..a32defecfc
--- /dev/null
+++ b/src/packages/pickerview/demos/taro/demo7.tsx
@@ -0,0 +1,38 @@
+import React, { useEffect, useState } from 'react'
+import { PickerView, Cell, PickerOptions } from '@nutui/nutui-react-taro'
+
+const Demo7 = () => {
+ const [columnsList, setColumnsList] = useState([] as PickerOptions[])
+
+ useEffect(() => {
+ setTimeout(() => {
+ setColumnsList([
+ [
+ { value: 1, label: '南京市' },
+ { value: 2, label: '无锡市' },
+ { value: 3, label: '海北藏族自治区' },
+ { value: 4, label: '北京市' },
+ { value: 5, label: '连云港市' },
+ { value: 8, label: '大庆市' },
+ { value: 9, label: '绥化市' },
+ { value: 10, label: '潍坊市' },
+ { value: 12, label: '乌鲁木齐市' },
+ ],
+ ])
+ }, 3000)
+ }, [])
+ return (
+ <>
+
+ {
+ console.log('onChange', value, selectedOptions)
+ }}
+ />
+ |
+
+ )
+}
+export default Demo7
diff --git a/src/packages/pickerview/pickerview.taro.tsx b/src/packages/pickerview/pickerview.taro.tsx
index c13a3c052b..a1ba018910 100644
--- a/src/packages/pickerview/pickerview.taro.tsx
+++ b/src/packages/pickerview/pickerview.taro.tsx
@@ -118,7 +118,8 @@ const InternalPickerView: ForwardRefRenderFunction<
}, [innerValue, options, columnsType])
useEffect(() => {
- if (props.options !== innerOptions) {
+ const options = props.options
+ if (Array.isArray(options) && options.length && options !== innerOptions) {
setInnerOptions(formatOptions as PickerOptions[])
}
}, [props.options, innerValue])
@@ -207,8 +208,12 @@ const InternalPickerView: ForwardRefRenderFunction<
threeDimensional={threeDimensional}
/>
))}
-
-
+ {innerOptions?.length ? (
+ <>
+
+
+
+ ) : null}
)
}
diff --git a/src/packages/pickerview/pickerview.tsx b/src/packages/pickerview/pickerview.tsx
index 60b98efe85..66770248c0 100644
--- a/src/packages/pickerview/pickerview.tsx
+++ b/src/packages/pickerview/pickerview.tsx
@@ -117,7 +117,8 @@ const InternalPickerView: ForwardRefRenderFunction<
}, [innerValue, options, columnsType])
useEffect(() => {
- if (props.options !== innerOptions) {
+ const options = props.options
+ if (Array.isArray(options) && options.length && options !== innerOptions) {
setInnerOptions(formatOptions as PickerOptions[])
}
}, [props.options, innerValue])
@@ -206,8 +207,12 @@ const InternalPickerView: ForwardRefRenderFunction<
threeDimensional={threeDimensional}
/>
))}
-
-
+ {innerOptions?.length ? (
+ <>
+
+
+
+ ) : null}
)
}
From fe66362d4d9bd81e29569e9591a9e48d385aafaf Mon Sep 17 00:00:00 2001
From: songchenglin3 <353833373@qq.com>
Date: Wed, 12 Feb 2025 14:51:56 +0800
Subject: [PATCH 11/24] fix: update doc
---
src/packages/pickerview/doc.en-US.md | 6 +++---
src/packages/pickerview/doc.md | 5 +++--
src/packages/pickerview/doc.taro.md | 5 +++--
src/packages/pickerview/doc.zh-TW.md | 5 +++--
4 files changed, 12 insertions(+), 9 deletions(-)
diff --git a/src/packages/pickerview/doc.en-US.md b/src/packages/pickerview/doc.en-US.md
index 6ec4aa0aa8..a66464c311 100644
--- a/src/packages/pickerview/doc.en-US.md
+++ b/src/packages/pickerview/doc.en-US.md
@@ -64,20 +64,20 @@ import { Picker } from '@nutui/nutui-react'
| Property | Description | Type | Default |
| --- | --- | --- | --- |
-| options | Tabular data | `Array` | `[]` |
+| options | Tabular data | `PickerOptionItem[][]` | `[]` |
| value | Selected value, controlled | `Array` | `[]` |
| defaultValue | Default value | `Array` | `[]` |
| threeDimensional | Whether to enable 3D effect | `boolean` | `true` |
| duration | The duration of inertial rolling during rapid sliding, in ms | `string` \| `number` | `1000` |
| onChange | Called when the value of each column changes | `({value, index, selectedOptions}) => void` | `-` |
-### options
+### PickerOptionItem
| Property | Description | Type | Default |
| --- | --- | --- | --- |
| label | Text of column | `string` \| `number` | `-` |
| value | Value of column | `string` \| `number` | `-` |
-| children | Cascader Option | `Array` | `-` |
+| children | Cascader Option | `PickerOptionItem[]` | `-` |
## Theming
diff --git a/src/packages/pickerview/doc.md b/src/packages/pickerview/doc.md
index ba0979c327..0ba9af80dc 100644
--- a/src/packages/pickerview/doc.md
+++ b/src/packages/pickerview/doc.md
@@ -64,19 +64,20 @@ import { PickerView } from '@nutui/nutui-react'
| 属性 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
-| options | 列表数据 | `Array` | `[]` |
+| options | 列表数据 | `PickerOptionItem[][]` | `[]` |
| value | 选中值，受控 | `Array` | `[]` |
| defaultValue | 默认选中 | `Array` | `[]` |
| threeDimensional | 是否开启3D效果 | `boolean` | `true` |
| duration | 快速滑动时惯性滚动的时长，单位 ms | `string` \| `number` | `1000` |
| onChange | 每一列值变更时调用 | `({value, index, selectedOptions}) => void` | `-` |
-### options 数据结构
+### PickerOptionItem
| 属性 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| label | 选项的文字内容 | `string` \| `number` | `-` |
| value | 选项对应的值，且唯一 | `string` \| `number` | `-` |
+| children | 用于级联选项 | `PickerOptionItem[]` | `-` |
## 主题定制
diff --git a/src/packages/pickerview/doc.taro.md b/src/packages/pickerview/doc.taro.md
index 03fdff98cc..fe1a838aca 100644
--- a/src/packages/pickerview/doc.taro.md
+++ b/src/packages/pickerview/doc.taro.md
@@ -64,19 +64,20 @@ import { PickerView } from '@nutui/nutui-react-taro'
| 属性 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
-| options | 列表数据 | `Array` | `[]` |
+| options | 列表数据 | `PickerOptionItem[][]` | `[]` |
| value | 选中值，受控 | `Array` | `[]` |
| defaultValue | 默认选中 | `Array` | `[]` |
| threeDimensional | 是否开启3D效果 | `boolean` | `true` |
| duration | 快速滑动时惯性滚动的时长，单位 ms | `string` \| `number` | `1000` |
| onChange | 每一列值变更时调用 | `({value, index, selectedOptions}) => void` | `-` |
-### options 数据结构
+### PickerOptionItem
| 属性 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| label | 选项的文字内容 | `string` \| `number` | `-` |
| value | 选项对应的值，且唯一 | `string` \| `number` | `-` |
+| children | 用于级联选项 | `PickerOptionItem[]` | `-` |
## 主题定制
diff --git a/src/packages/pickerview/doc.zh-TW.md b/src/packages/pickerview/doc.zh-TW.md
index 155b4fc341..aecd67eaff 100644
--- a/src/packages/pickerview/doc.zh-TW.md
+++ b/src/packages/pickerview/doc.zh-TW.md
@@ -64,19 +64,20 @@ import { PickerView } from '@nutui/nutui-react-taro'
| 屬性 | 說明 | 類型 | 默認值 |
| --- | --- | --- | --- |
-| options | 列錶數據 | `Array` | `[]` |
+| options | 列錶數據 | `PickerOptionItem[][]` | `[]` |
| value | 選中值，受控 | `Array` | `[]` |
| defaultValue | 默認選中 | `Array` | `[]` |
| threeDimensional | 是否開啟3D效果 | `boolean` | `true` |
| duration | 快速滑動時慣性滾動的時長，單位 ms | `string` \| `number` | `1000` |
| onChange | 每一列值變更時調用 | `({value, index, selectedOptions}) => void` | `-` |
-### options 數據結構
+### PickerOptionItem
| 屬性 | 說明 | 類型 | 默認值 |
| --- | --- | --- | --- |
| label | 選項的文字內容 | `string` \| `number` | `-` |
| value | 選項對應的值，且唯一 | `string` \| `number` | `-` |
+| children | 用於級聯選項 | `PickerOptionItem[]` | `-` |
## 主題定制
From d5118f6f22e75f56dede15257aec3dcd01b08a62 Mon Sep 17 00:00:00 2001
From: songchenglin3 <353833373@qq.com>
Date: Thu, 13 Feb 2025 09:39:17 +0800
Subject: [PATCH 12/24] =?UTF-8?q?fix:=20=E4=BF=AE=E6=94=B9=E6=A0=87?=
=?UTF-8?q?=E7=AD=BE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/packages/pickerview/pickerview.taro.tsx | 4 ++--
1 file changed, 2 insertions(+), 2 deletions(-)
diff --git a/src/packages/pickerview/pickerview.taro.tsx b/src/packages/pickerview/pickerview.taro.tsx
index a1ba018910..b6675f4dd1 100644
--- a/src/packages/pickerview/pickerview.taro.tsx
+++ b/src/packages/pickerview/pickerview.taro.tsx
@@ -210,8 +210,8 @@ const InternalPickerView: ForwardRefRenderFunction<
))}
{innerOptions?.length ? (
<>
-
) : null}
From a787f7da9bbb2e4de3c59875a5fe029e38e8889b Mon Sep 17 00:00:00 2001
From: songchenglin3 <353833373@qq.com>
Date: Thu, 13 Feb 2025 11:58:58 +0800
Subject: [PATCH 13/24] feat: add test
---
.../__snapshots__/pickerview.spec.tsx.snap | 298 +-----------------
.../pickerview/__test__/pickerview.spec.tsx | 50 ++-
2 files changed, 42 insertions(+), 306 deletions(-)
diff --git a/src/packages/pickerview/__test__/__snapshots__/pickerview.spec.tsx.snap b/src/packages/pickerview/__test__/__snapshots__/pickerview.spec.tsx.snap
index 0ab994d585..2374bb7a94 100644
--- a/src/packages/pickerview/__test__/__snapshots__/pickerview.spec.tsx.snap
+++ b/src/packages/pickerview/__test__/__snapshots__/pickerview.spec.tsx.snap
@@ -1,21 +1,6 @@
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
-exports[`should handle empty options 1`] = `
-
-`;
-
-exports[`should handle invalid defaultValue 1`] = `
+exports[`should match base 1`] = `