diff --git a/src/components/PickerView/defaultProps.ts b/src/components/PickerView/defaultProps.ts index 22cc993..8a255bf 100644 --- a/src/components/PickerView/defaultProps.ts +++ b/src/components/PickerView/defaultProps.ts @@ -3,8 +3,11 @@ import { noop } from 'vtils' export default { data: [], value: [], + /** 单个条目高度 */ itemHeight: '2.5em' as string, + /** 显示条目数量 */ visibleItemCount: 5 as number, + /** 是否禁止选中 */ disabled: false as boolean, onChange: noop, } diff --git a/src/components/PickerView/index.tsx b/src/components/PickerView/index.tsx index 0fb5935..2fef92d 100644 --- a/src/components/PickerView/index.tsx +++ b/src/components/PickerView/index.tsx @@ -4,8 +4,10 @@ import { clamp, isArray, isEqualArray, isNumber, noop, parseCSSValue } from 'vti import { component } from '../component' import { PickerView, PickerViewColumn, View } from '@tarojs/components' -export type NormalItem = { +export interface NormalItem { + /** 标签,用于显示 */ label: string | number, + /** 值 */ value: V, } @@ -13,9 +15,8 @@ export type NormalColData = NormalItem[] export type NormalData = NormalColData[] -export type CascadedItem = { - label: string | number, - value: V, +export interface CascadedItem extends NormalItem { + /** 下级选项数据 */ children?: CascadedData, } @@ -25,27 +26,43 @@ export type CascadedData = CascadedColData export type ColData = NormalColData | CascadedColData +/** 条目 */ +export type Item = NormalItem | CascadedItem + +/** 选项数据 */ export type Data = NormalData | CascadedData -class MPickerView ? VV : any) = any> extends component({ +/** + * 选择器视图组件。 + */ +export default class MPickerView ? VV : any) = any> extends component({ props: { ...defaultProps, + /** 选择开始事件 */ onPickStart: noop as () => void, + /** 选择结束事件 */ onPickEnd: noop as () => void, }, state: { + /** 选中条目的索引列表 */ selectedIndexes: [] as number[], normalizedData: [], }, })<{ + /** 选项数据 */ data: D, + /** 选中条目的值列表 */ value?: V[], + /** 选中值改变事件 */ onChange?: (value: V[]) => void, }, { + /** 规范化的选项数据 */ normalizedData: NormalData, }> { + /** 是否级联 */ isCascaded: boolean = false + /** 上一次选中的值 */ prevValue: V[] = null componentWillMount() { @@ -56,6 +73,14 @@ class MPickerView ? VV : any this.update(nextProps, { ...this.props, value: this.prevValue }) } + /** + * 更新状态。 + * + * @param nextProps 新的 props 数据 + * @param prevProps 旧的 props 数据 + * @param [callback=noop] 更新完成后的回调函数 + * @param [disableEmitChangeEvent=false] 是否禁止触发 change 事件 + */ update( { data, value }: MPickerView['props'], { data: prevData, value: prevValue }: MPickerView['props'], @@ -98,10 +123,11 @@ class MPickerView ? VV : any callback, ) + this.prevValue = selectedIndexes.map( + (selectedIndex, colIndex) => normalizedData[colIndex][selectedIndex].value, + ) + if (!disableEmitChangeEvent && data !== prevData) { - this.prevValue = selectedIndexes.map( - (selectedIndex, colIndex) => normalizedData[colIndex][selectedIndex].value, - ) this.props.onChange(this.prevValue) } } @@ -184,5 +210,3 @@ class MPickerView ? VV : any ) } } - -export default MPickerView