(
+ options.map((item: PickerOption, index: number) => (
item.label,
+ renderLabel: (item: PickerOption) => item.label,
} as PickerViewProps
const InternalPickerView: ForwardRefRenderFunction<
@@ -77,7 +77,7 @@ const InternalPickerView: ForwardRefRenderFunction<
if (!options.length) return [] // 如果 options 为空，直接返回空数组
const formatted: PickerOptions[] = []
- let columnOptions: PickerOptionItem = {
+ let columnOptions: PickerOption = {
label: '',
value: '',
children: options,
@@ -95,7 +95,7 @@ const InternalPickerView: ForwardRefRenderFunction<
} else if (currentValue) {
// 如果 currentValue 存在，查找匹配的项
const index = currentOptions.findIndex(
- (columnItem) => columnItem.value === currentValue
+ (columnItem: PickerOption) => columnItem.value === currentValue
)
columnOptions = currentOptions[index === -1 ? 0 : index] // 如果未找到，默认取第一个
} else {
@@ -131,7 +131,7 @@ const InternalPickerView: ForwardRefRenderFunction<
}, [selectedValue])
const handleSelect = useCallback(
- (option: PickerOptionItem, index: number) => {
+ (option: PickerOption, index: number) => {
const newValue = option?.value
if (!newValue || innerValue[index] === newValue) return
changeIndex.current = index
@@ -159,7 +159,7 @@ const InternalPickerView: ForwardRefRenderFunction<
...values.splice(startIndex),
]
setInnerValue([...combineResult])
- const optionFirst = props?.options?.[0] as PickerOptionItem[]
+ const optionFirst = props?.options?.[0] as PickerOptions
if (
!isEqual(
formatCascadeOptions(optionFirst, combineResult),
@@ -177,12 +177,12 @@ const InternalPickerView: ForwardRefRenderFunction<
return innerOptions
.map((columnOptions, index) => {
const selectedOption = columnOptions.find(
- (item) => item.value === innerValue[index]
+ (item: PickerOption) => item.value === innerValue[index]
)
return selectedOption
// return selectedOption || columnOptions[0]
})
- .filter(Boolean) as PickerOptionItem[]
+ .filter(Boolean) as PickerOptions
}, [innerOptions, innerValue])
useEffect(() => {
diff --git a/src/packages/pickerview/pickerview.tsx b/src/packages/pickerview/pickerview.tsx
index 0fef411bea..fbf2189c52 100644
--- a/src/packages/pickerview/pickerview.tsx
+++ b/src/packages/pickerview/pickerview.tsx
@@ -12,7 +12,7 @@ import { ComponentDefaults } from '@/utils/typings'
import { usePropsValue } from '@/hooks/use-props-value'
import {
PickerViewProps,
- PickerOptionItem,
+ PickerOption,
PickerValue,
PickerOptions,
} from './types'
@@ -23,7 +23,7 @@ const defaultProps = {
options: [],
defaultValue: [],
value: undefined,
- renderLabel: (item: PickerOptionItem) => item.label,
+ renderLabel: (item: PickerOption) => item.label,
} as PickerViewProps
const InternalPickerView: ForwardRefRenderFunction<
@@ -76,7 +76,7 @@ const InternalPickerView: ForwardRefRenderFunction<
if (!options.length) return [] // 如果 options 为空，直接返回空数组
const formatted: PickerOptions[] = []
- let columnOptions: PickerOptionItem = {
+ let columnOptions: PickerOption = {
label: '',
value: '',
children: options,
@@ -94,7 +94,7 @@ const InternalPickerView: ForwardRefRenderFunction<
} else if (currentValue) {
// 如果 currentValue 存在，查找匹配的项
const index = currentOptions.findIndex(
- (columnItem) => columnItem.value === currentValue
+ (columnItem: PickerOption) => columnItem.value === currentValue
)
columnOptions = currentOptions[index === -1 ? 0 : index] // 如果未找到，默认取第一个
} else {
@@ -130,7 +130,7 @@ const InternalPickerView: ForwardRefRenderFunction<
}, [selectedValue])
const handleSelect = useCallback(
- (option: PickerOptionItem, index: number) => {
+ (option: PickerOption, index: number) => {
const newValue = option?.value
if (!newValue || innerValue[index] === newValue) return
changeIndex.current = index
@@ -158,7 +158,7 @@ const InternalPickerView: ForwardRefRenderFunction<
...values.splice(startIndex),
]
setInnerValue([...combineResult])
- const optionFirst = props?.options?.[0] as PickerOptionItem[]
+ const optionFirst = props?.options?.[0] as PickerOptions
if (
!isEqual(
formatCascadeOptions(optionFirst, combineResult),
@@ -176,12 +176,12 @@ const InternalPickerView: ForwardRefRenderFunction<
return innerOptions
.map((columnOptions, index) => {
const selectedOption = columnOptions.find(
- (item) => item.value === innerValue[index]
+ (item: PickerOption) => item.value === innerValue[index]
)
return selectedOption
// return selectedOption || columnOptions[0]
})
- .filter(Boolean) as PickerOptionItem[]
+ .filter(Boolean) as PickerOptions
}, [innerOptions, innerValue])
useEffect(() => {
diff --git a/src/packages/pickerview/types.ts b/src/packages/pickerview/types.ts
index e25d83faf5..57efbd2b7e 100644
--- a/src/packages/pickerview/types.ts
+++ b/src/packages/pickerview/types.ts
@@ -2,28 +2,28 @@ import { BasicComponent } from '@/utils/typings'
export type PickerValue = string | number | null
-export interface PickerOptionItem {
+export interface PickerOption {
label: string | number
value: string | number
- children?: PickerOptionItem[]
+ children?: PickerOptions
}
-export type PickerOptions = PickerOptionItem[]
+export type PickerOptions = PickerOption[]
export interface PickerRollerProps {
- options: PickerOptionItem[]
+ options: PickerOptions
keyIndex: number
value: PickerValue
threeDimensional?: boolean
duration?: number | string
- onSelect: (option: PickerOptionItem, index: number) => void
- renderLabel: (item: PickerOptionItem) => React.ReactNode
+ onSelect: (option: PickerOption, index: number) => void
+ renderLabel: (item: PickerOption) => React.ReactNode
}
export interface PickerOnChangeCallbackParameter {
value: PickerValue[]
index: number
- selectedOptions: PickerOptionItem[]
+ selectedOptions: PickerOptions
}
export interface PickerViewProps extends BasicComponent {
@@ -33,6 +33,6 @@ export interface PickerViewProps extends BasicComponent {
defaultValue?: PickerValue[]
threeDimensional?: boolean
duration?: number | string
- renderLabel: (item: PickerOptionItem) => React.ReactNode
+ renderLabel: (item: PickerOption) => React.ReactNode
onChange?: (arg0: PickerOnChangeCallbackParameter) => void
}
diff --git a/src/packages/popover/demos/h5/demo4-1.tsx b/src/packages/popover/demos/h5/demo4-1.tsx
index 891b2f4928..0cced79b3d 100644
--- a/src/packages/popover/demos/h5/demo4-1.tsx
+++ b/src/packages/popover/demos/h5/demo4-1.tsx
@@ -1,15 +1,13 @@
import React, { useState } from 'react'
-import { Popover, Cell, Picker, Toast } from '@nutui/nutui-react'
+import {
+ Popover,
+ Cell,
+ Picker,
+ Toast,
+ PickerOnChangeCallbackParameter,
+} from '@nutui/nutui-react'
import { Tips, Close } from '@nutui/icons-react'
-interface PickerOption {
- text: string | number
- value: string | number
- disabled?: boolean
- children?: PickerOption[]
- className?: string | number
-}
-
const Demo41 = () => {
const [baseDesc, setBaseDesc] = useState('')
const [showPicker, setShowPicker] = useState(false)
@@ -17,12 +15,14 @@ const Demo41 = () => {
const [curPostion, setCurPostion] = useState('')
const columns = [
- { text: 'top', value: 'top' },
- { text: 'top-start', value: 'top-start' },
- { text: 'top-end', value: 'top-end' },
- { text: 'bottom', value: 'bottom' },
- { text: 'bottom-start', value: 'bottom-start' },
- { text: 'bottom-end', value: 'bottom-end' },
+ [
+ { label: 'top', value: 'top' },
+ { label: 'top-start', value: 'top-start' },
+ { label: 'top-end', value: 'top-end' },
+ { label: 'bottom', value: 'bottom' },
+ { label: 'bottom-start', value: 'bottom-start' },
+ { label: 'bottom-end', value: 'bottom-end' },
+ ],
]
const positionList = [
{
@@ -60,13 +60,13 @@ const Demo41 = () => {
onConfirm={(list) => {
let description = ''
list.forEach((option: any) => {
- description += ` ${option.text}`
+ description += ` ${option.label}`
})
setBaseDesc(description)
}}
- onChange={(options: PickerOption[]) => {
- if (options[0]?.value) {
- setCurPostion(options[0].value as string)
+ onChange={({ selectedOptions }: PickerOnChangeCallbackParameter) => {
+ if (selectedOptions[0]?.value) {
+ setCurPostion(selectedOptions[0].value as string)
}
}}
onClose={() => {
diff --git a/src/packages/popover/demos/h5/demo4.tsx b/src/packages/popover/demos/h5/demo4.tsx
index 27ce80a3c9..d75b9bb232 100644
--- a/src/packages/popover/demos/h5/demo4.tsx
+++ b/src/packages/popover/demos/h5/demo4.tsx
@@ -1,13 +1,10 @@
import React, { useState } from 'react'
-import { Popover, Cell, Picker } from '@nutui/nutui-react'
-
-interface PickerOption {
- text: string | number
- value: string | number
- disabled?: boolean
- children?: PickerOption[]
- className?: string | number
-}
+import {
+ Popover,
+ Cell,
+ Picker,
+ PickerOnChangeCallbackParameter,
+} from '@nutui/nutui-react'
const Demo4 = () => {
const [baseDesc, setBaseDesc] = useState('')
@@ -16,18 +13,20 @@ const Demo4 = () => {
const [curPostion, setCurPostion] = useState('')
const columns = [
- { text: 'top', value: 'top' },
- { text: 'top-start', value: 'top-start' },
- { text: 'top-end', value: 'top-end' },
- { text: 'right', value: 'right' },
- { text: 'right-start', value: 'right-start' },
- { text: 'right-end', value: 'right-end' },
- { text: 'bottom', value: 'bottom' },
- { text: 'bottom-start', value: 'bottom-start' },
- { text: 'bottom-end', value: 'bottom-end' },
- { text: 'left', value: 'left' },
- { text: 'left-start', value: 'left-start' },
- { text: 'left-end', value: 'left-end' },
+ [
+ { label: 'top', value: 'top' },
+ { label: 'top-start', value: 'top-start' },
+ { label: 'top-end', value: 'top-end' },
+ { label: 'right', value: 'right' },
+ { label: 'right-start', value: 'right-start' },
+ { label: 'right-end', value: 'right-end' },
+ { label: 'bottom', value: 'bottom' },
+ { label: 'bottom-start', value: 'bottom-start' },
+ { label: 'bottom-end', value: 'bottom-end' },
+ { label: 'left', value: 'left' },
+ { label: 'left-start', value: 'left-start' },
+ { label: 'left-end', value: 'left-end' },
+ ],
]
const positionList = [
{
@@ -57,13 +56,13 @@ const Demo4 = () => {
onConfirm={(list) => {
let description = ''
list.forEach((option: any) => {
- description += ` ${option.text}`
+ description += ` ${option.label}`
})
setBaseDesc(description)
}}
- onChange={(options: PickerOption[]) => {
- if (options[0]?.value) {
- setCurPostion(options[0].value as string)
+ onChange={({ selectedOptions }: PickerOnChangeCallbackParameter) => {
+ if (selectedOptions[0]?.value) {
+ setCurPostion(selectedOptions[0].value as string)
}
}}
onClose={() => {
diff --git a/src/packages/popover/demos/taro/demo4-1.tsx b/src/packages/popover/demos/taro/demo4-1.tsx
index 04147e9466..5d3f4d4326 100644
--- a/src/packages/popover/demos/taro/demo4-1.tsx
+++ b/src/packages/popover/demos/taro/demo4-1.tsx
@@ -1,15 +1,14 @@
import React, { useState } from 'react'
import { View } from '@tarojs/components'
-import { Popover, Cell, Picker, Toast } from '@nutui/nutui-react-taro'
+import {
+ Popover,
+ Cell,
+ Picker,
+ Toast,
+ PickerOnChangeCallbackParameter,
+} from '@nutui/nutui-react-taro'
import { Tips, Close } from '@nutui/icons-react-taro'
-interface PickerOption {
- text: string | number
- value: string | number
- disabled?: boolean
- children?: PickerOption[]
- className?: string | number
-}
const Demo4 = () => {
const [baseDesc, setBaseDesc] = useState('')
const [showPicker, setShowPicker] = useState(false)
@@ -18,14 +17,16 @@ const Demo4 = () => {
const [showToast, SetShowToast] = useState(false)
const columns = [
- { text: 'top', value: 'top' },
- { text: 'top-start', value: 'top-start' },
- { text: 'top-end', value: 'top-end' },
- { text: 'right', value: 'right' },
- { text: 'bottom', value: 'bottom' },
- { text: 'bottom-start', value: 'bottom-start' },
- { text: 'bottom-end', value: 'bottom-end' },
- { text: 'left', value: 'left' },
+ [
+ { label: 'top', value: 'top' },
+ { label: 'top-start', value: 'top-start' },
+ { label: 'top-end', value: 'top-end' },
+ { label: 'right', value: 'right' },
+ { label: 'bottom', value: 'bottom' },
+ { label: 'bottom-start', value: 'bottom-start' },
+ { label: 'bottom-end', value: 'bottom-end' },
+ { label: 'left', value: 'left' },
+ ],
]
const positionList = [
{
@@ -63,13 +64,13 @@ const Demo4 = () => {
onConfirm={(list) => {
let description = ''
list.forEach((option: any) => {
- description += ` ${option.text}`
+ description += ` ${option.label}`
})
setBaseDesc(description)
}}
- onChange={(options: PickerOption[]) => {
- if (options[0]?.value) {
- setCurPostion(options[0].value as string)
+ onChange={({ selectedOptions }: PickerOnChangeCallbackParameter) => {
+ if (selectedOptions[0]?.value) {
+ setCurPostion(selectedOptions[0].value as string)
}
}}
onClose={() => {
diff --git a/src/packages/popover/demos/taro/demo4.tsx b/src/packages/popover/demos/taro/demo4.tsx
index 633170b9aa..430160cf20 100644
--- a/src/packages/popover/demos/taro/demo4.tsx
+++ b/src/packages/popover/demos/taro/demo4.tsx
@@ -1,14 +1,12 @@
import React, { useState } from 'react'
import { View } from '@tarojs/components'
-import { Popover, Cell, Picker } from '@nutui/nutui-react-taro'
+import {
+ Popover,
+ Cell,
+ Picker,
+ PickerOnChangeCallbackParameter,
+} from '@nutui/nutui-react-taro'
-interface PickerOption {
- text: string | number
- value: string | number
- disabled?: boolean
- children?: PickerOption[]
- className?: string | number
-}
const Demo4 = () => {
const [baseDesc, setBaseDesc] = useState('')
const [showPicker, setShowPicker] = useState(false)
@@ -16,18 +14,20 @@ const Demo4 = () => {
const [curPostion, setCurPostion] = useState('')
const columns = [
- { text: 'top', value: 'top' },
- { text: 'top-start', value: 'top-start' },
- { text: 'top-end', value: 'top-end' },
- { text: 'right', value: 'right' },
- { text: 'right-start', value: 'right-start' },
- { text: 'right-end', value: 'right-end' },
- { text: 'bottom', value: 'bottom' },
- { text: 'bottom-start', value: 'bottom-start' },
- { text: 'bottom-end', value: 'bottom-end' },
- { text: 'left', value: 'left' },
- { text: 'left-start', value: 'left-start' },
- { text: 'left-end', value: 'left-end' },
+ [
+ { label: 'top', value: 'top' },
+ { label: 'top-start', value: 'top-start' },
+ { label: 'top-end', value: 'top-end' },
+ { label: 'right', value: 'right' },
+ { label: 'right-start', value: 'right-start' },
+ { label: 'right-end', value: 'right-end' },
+ { label: 'bottom', value: 'bottom' },
+ { label: 'bottom-start', value: 'bottom-start' },
+ { label: 'bottom-end', value: 'bottom-end' },
+ { label: 'left', value: 'left' },
+ { label: 'left-start', value: 'left-start' },
+ { label: 'left-end', value: 'left-end' },
+ ],
]
const positionList = [
{
@@ -57,13 +57,13 @@ const Demo4 = () => {
onConfirm={(list) => {
let description = ''
list.forEach((option: any) => {
- description += ` ${option.text}`
+ description += ` ${option.label}`
})
setBaseDesc(description)
}}
- onChange={(options: PickerOption[]) => {
- if (options[0]?.value) {
- setCurPostion(options[0].value as string)
+ onChange={({ selectedOptions }: PickerOnChangeCallbackParameter) => {
+ if (selectedOptions[0]?.value) {
+ setCurPostion(selectedOptions[0].value as string)
}
}}
onClose={() => {