Picker & CascadePicker component doc

[Towry Wang]

-> made with this tool

Picker 数据定义：

interface ColumnItem {
   name: string;
   value: number | string;
}

type Column = ColumnItem[];
type Columns = Column[];

Picker 数据实例

// single column
const columns = [
  [ { name: 'col1_1', value: '1' }, { name: 'col1_2', value: '2' } ]
]
// multiple column
const columnsMultiple = [
   columns[0].slice(),
   columns[0].slice(),
]

Picker value definition:

interface PickerValueItem {
  value: string | name;
}

type PickerValue = PickerValueItem[];
type PickerValueIndex = number[];

我们使用 PickerValueIndex 来操作组件，因为这样比较方便，结合上面的 columnsMultiple 我们看下 PickerValueIndex 和
Columns 之间的关系。

// index is -1 means no value/no selected item.
const selectedPickerIndex: PickerValueIndex = [1, -1];
const columnIndex = 0;
const column = columnsMultiple[columnIndex];
const selectedItemIndexInColumn = selectedPickerIndex[columnIndex];
const selectedItemInColumn = column[selectedItemIndexInColumn];

expect(selectedItemInColumn).toBe(columnsMultiple[ columnIndex ][ 1 ])

级联 cascader

对于级联（操作一个数据，影响后面的数据，数据联动），我们需要的数据必须是数状结构的。

级联数据定义：

type PickerCascadeItem = PickerValue & { children: PickerCascadeItem[] }
type PickerCascadeColumns = PickerCascadeItem[];

级联Picker的 column:0 来自 第一层的数据，column:1 来自 column:0[column_0_picked_index].children 即选中第一层后的 PickerCascadeItem.children 数据。

级联多选 Cascader with multiiple

级联多选的数据不变，但是 PickerValueIndex需要变下。

在此之前先说下新的选项：leafOnly: boolean 代表值是否只有叶节点，而不是节点路径。

type PickerCascaderValueIndex = PickerValueIndex[];
type PickerCascaderValue = PickerValueItem[][];

数据示例：

// 里面每个数组代表一个已选择的item。
const selectedMultipleValueIndex = [ [1, 0, -1], [-1, -1, -1]]

异步

异步 Picker 应该接受一个 pending Prop，来指明当前是pending状态，不允许用户操作。然后在每次更改一个 column 的值的时候，触发 onChange 事件。父组件监听此 onChange 事件，并判断是否要 pending，是否要异步获取下一级数据（column）。