feat(Picker): add option props

TDesignOteam · Oct 16, 2024 · d8b458e · d8b458e
1 parent 3a04a93
commit d8b458e
Show file tree

Hide file tree

Showing 10 changed files with 217 additions and 0 deletions.
diff --git a/db/TDesign.db b/db/TDesign.db
diff --git a/packages/products/tdesign-mobile-react/src/picker/defaultProps.ts b/packages/products/tdesign-mobile-react/src/picker/defaultProps.ts
@@ -0,0 +1,14 @@
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+import { TdPickerProps } from './type';
+
+export const pickerDefaultProps: TdPickerProps = {
+  cancelBtn: true,
+  columns: [],
+  confirmBtn: true,
+  header: true,
+  title: '',
+  visible: false,
+};
diff --git a/packages/products/tdesign-mobile-react/src/picker/picker.en-US.md b/packages/products/tdesign-mobile-react/src/picker/picker.en-US.md
@@ -0,0 +1,26 @@
+:: BASE_DOC ::
+
+## API
+
+
+### Picker Props
+
+name | type | default | description | required
+-- | -- | -- | -- | --
+className | String | - | className of component | N
+style | Object | - | CSS(Cascading Style Sheets)，Typescript：`React.CSSProperties` | N
+cancelBtn | String / Boolean / Object | true | Typescript：`boolean \| string \| ButtonProps` | N
+columns | Array / Function | [] | required。Typescript：`PickerColumn \| Array<PickerColumn> \| ((item: Array<PickerValue>)  => Array<PickerColumn>)` `type PickerColumn = PickerColumnItem[]` `interface PickerColumnItem { label: string,value: string}`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/picker/type.ts) | Y
+confirmBtn | String / Boolean / Object | true | Typescript：`boolean \| string \| ButtonProps`，[Button API Documents](./button?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/picker/type.ts) | N
+header | TNode | true | Typescript：`boolean \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N
+keys | Object | - | Typescript：`KeysType`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N
+option | TElement | - | Typescript：`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N
+renderLabel | Function | - | Typescript：`(item: PickerColumnItem) => string` | N
+title | String | '' | \- | N
+value | Array | - | Typescript：`Array<PickerValue>` `type PickerValue = string \| number`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/picker/type.ts) | N
+defaultValue | Array | - | uncontrolled property。Typescript：`Array<PickerValue>` `type PickerValue = string \| number`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/picker/type.ts) | N
+visible | Boolean | false | \- | N
+onCancel | Function |  | Typescript：`(context: { e: MouseEvent }) => void`<br/> | N
+onChange | Function |  | Typescript：`(value: Array<PickerValue>, context: { columns: Array<PickerContext>, e: MouseEvent })  => void`<br/>[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/picker/type.ts)。<br/>`interface PickerContext{ column: number,index: number }`<br/> | N
+onConfirm | Function |  | Typescript：`(value: Array<PickerValue>, context: { index: number[], e: MouseEvent, label: string[] }) => void`<br/> | N
+onPick | Function |  | Typescript：`(value: Array<PickerValue>,context: PickerContext) => void`<br/> | N
diff --git a/packages/products/tdesign-mobile-react/src/picker/picker.md b/packages/products/tdesign-mobile-react/src/picker/picker.md
@@ -0,0 +1,26 @@
+:: BASE_DOC ::
+
+## API
+
+
+### Picker Props
+
+名称 | 类型 | 默认值 | 描述 | 必传
+-- | -- | -- | -- | --
+className | String | - | 类名 | N
+style | Object | - | 样式，TS 类型：`React.CSSProperties` | N
+cancelBtn | String / Boolean / Object | true | 取消按钮文字。TS 类型：`boolean \| string \| ButtonProps` | N
+columns | Array / Function | [] | 必需。配置每一列的选项。TS 类型：`PickerColumn \| Array<PickerColumn> \| ((item: Array<PickerValue>)  => Array<PickerColumn>)` `type PickerColumn = PickerColumnItem[]` `interface PickerColumnItem { label: string,value: string}`。[详细类型定义](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/picker/type.ts) | Y
+confirmBtn | String / Boolean / Object | true | 确定按钮文字。TS 类型：`boolean \| string \| ButtonProps`，[Button API Documents](./button?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/picker/type.ts) | N
+header | TNode | true | 头部内容。值为 true 显示空白头部，值为 false 不显示任何内容，值类型为 TNode 表示自定义头部内容。TS 类型：`boolean \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N
+keys | Object | - | 用来定义 value / label 在 `options` 中对应的字段别名。TS 类型：`KeysType`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N
+option | TElement | - | 自定义选项内容。参数为 `option: PickerColumnItem, index: number`。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N
+renderLabel | Function | - | 自定义label。TS 类型：`(item: PickerColumnItem) => string` | N
+title | String | '' | 标题 | N
+value | Array | - | 选中值。TS 类型：`Array<PickerValue>` `type PickerValue = string \| number`。[详细类型定义](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/picker/type.ts) | N
+defaultValue | Array | - | 选中值。非受控属性。TS 类型：`Array<PickerValue>` `type PickerValue = string \| number`。[详细类型定义](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/picker/type.ts) | N
+visible | Boolean | false | 是否显示 | N
+onCancel | Function |  | TS 类型：`(context: { e: MouseEvent }) => void`<br/>点击取消按钮时触发 | N
+onChange | Function |  | TS 类型：`(value: Array<PickerValue>, context: { columns: Array<PickerContext>, e: MouseEvent })  => void`<br/>选中变化时候触发。[详细类型定义](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/picker/type.ts)。<br/>`interface PickerContext{ column: number,index: number }`<br/> | N
+onConfirm | Function |  | TS 类型：`(value: Array<PickerValue>, context: { index: number[], e: MouseEvent, label: string[] }) => void`<br/>点击确认按钮时触发 | N
+onPick | Function |  | TS 类型：`(value: Array<PickerValue>,context: PickerContext) => void`<br/>任何一列选中都会触发，不同的列参数不同。`context.column` 表示第几列变化，`context.index` 表示变化那一列的选中项下标 | N
diff --git a/packages/products/tdesign-mobile-react/src/picker/type.ts b/packages/products/tdesign-mobile-react/src/picker/type.ts
@@ -0,0 +1,102 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+import { ButtonProps } from '../button';
+import { TNode, TElement, KeysType } from '../common';
+import { MouseEvent } from 'react';
+
+export interface TdPickerProps {
+  /**
+   * 取消按钮文字
+   * @default true
+   */
+  cancelBtn?: boolean | string | ButtonProps;
+  /**
+   * 配置每一列的选项
+   * @default []
+   */
+  columns: PickerColumn | Array<PickerColumn> | ((item: Array<PickerValue>) => Array<PickerColumn>);
+  /**
+   * 确定按钮文字
+   * @default true
+   */
+  confirmBtn?: boolean | string | ButtonProps;
+  /**
+   * 头部内容。值为 true 显示空白头部，值为 false 不显示任何内容，值类型为 TNode 表示自定义头部内容
+   * @default true
+   */
+  header?: TNode;
+  /**
+   * 用来定义 value / label 在 `options` 中对应的字段别名
+   */
+  keys?: KeysType;
+  /**
+   * 自定义选项内容。参数为 `option: PickerColumnItem, index: number`
+   */
+  option?: TElement;
+  /**
+   * 自定义label
+   */
+  renderLabel?: (item: PickerColumnItem) => string;
+  /**
+   * 标题
+   * @default ''
+   */
+  title?: string;
+  /**
+   * 选中值
+   */
+  value?: Array<PickerValue>;
+  /**
+   * 选中值，非受控属性
+   */
+  defaultValue?: Array<PickerValue>;
+  /**
+   * 是否显示
+   * @default false
+   */
+  visible?: boolean;
+  /**
+   * 点击取消按钮时触发
+   * @default ''
+   */
+  onCancel?: (context: { e: MouseEvent<HTMLButtonElement> }) => void;
+  /**
+   * 选中变化时候触发
+   * @default ''
+   */
+  onChange?: (
+    value: Array<PickerValue>,
+    context: { columns: Array<PickerContext>; e: MouseEvent<HTMLDivElement> },
+  ) => void;
+  /**
+   * 点击确认按钮时触发
+   * @default ''
+   */
+  onConfirm?: (
+    value: Array<PickerValue>,
+    context: { index: number[]; e: MouseEvent<HTMLDivElement>; label: string[] },
+  ) => void;
+  /**
+   * 任何一列选中都会触发，不同的列参数不同。`context.column` 表示第几列变化，`context.index` 表示变化那一列的选中项下标
+   * @default ''
+   */
+  onPick?: (value: Array<PickerValue>, context: PickerContext) => void;
+}
+
+export type PickerColumn = PickerColumnItem[];
+
+export interface PickerColumnItem {
+  label: string;
+  value: string;
+}
+
+export type PickerValue = string | number;
+
+export interface PickerContext {
+  column: number;
+  index: number;
+}
diff --git a/packages/products/tdesign-mobile-vue/src/picker/picker.en-US.md b/packages/products/tdesign-mobile-vue/src/picker/picker.en-US.md
@@ -10,6 +10,7 @@ cancelBtn | String / Boolean | true | Typescript：`boolean \| string` | N
 columns | Array / Function | [] | required。Typescript：`PickerColumn \| Array<PickerColumn> \| ((item: Array<PickerValue>)  => Array<PickerColumn>)` `type PickerColumn = PickerColumnItem[]` `interface PickerColumnItem { label: string,value: string}`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/picker/type.ts) | Y
 confirmBtn | String / Boolean | true | Typescript：`boolean \| string` | N
 header | Slot / Function | - | Typescript：`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
+option | Slot / Function | - | Typescript：`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
 renderLabel | Function | - | Typescript：`(item: PickerColumnItem) => string` | N
 title | String | '' | \- | N
 value | Array | - | `v-model` and `v-model:value` is supported。Typescript：`Array<PickerValue>` `type PickerValue = string \| number`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/picker/type.ts) | N

diff --git a/packages/products/tdesign-mobile-vue/src/picker/picker.md b/packages/products/tdesign-mobile-vue/src/picker/picker.md
@@ -10,6 +10,7 @@ cancelBtn | String / Boolean | true | 取消按钮文字。TS 类型：`boolean
 columns | Array / Function | [] | 必需。配置每一列的选项。TS 类型：`PickerColumn \| Array<PickerColumn> \| ((item: Array<PickerValue>)  => Array<PickerColumn>)` `type PickerColumn = PickerColumnItem[]` `interface PickerColumnItem { label: string,value: string}`。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/picker/type.ts) | Y
 confirmBtn | String / Boolean | true | 确定按钮文字。TS 类型：`boolean \| string` | N
 header | Slot / Function | - | 自定义头部内容。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
+option | Slot / Function | - | 自定义选项内容。参数为 `option: PickerColumnItem, index: number`。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
 renderLabel | Function | - | 自定义label。TS 类型：`(item: PickerColumnItem) => string` | N
 title | String | '' | 标题 | N
 value | Array | - | 选中值。支持语法糖 `v-model` 或 `v-model:value`。TS 类型：`Array<PickerValue>` `type PickerValue = string \| number`。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/picker/type.ts) | N

diff --git a/packages/products/tdesign-mobile-vue/src/picker/props.ts b/packages/products/tdesign-mobile-vue/src/picker/props.ts
@@ -28,6 +28,10 @@ export default {
   header: {
     type: Function as PropType<TdPickerProps['header']>,
   },
+  /** 自定义选项内容。参数为 `option: PickerColumnItem, index: number` */
+  option: {
+    type: Function as PropType<TdPickerProps['option']>,
+  },
   /** 自定义label */
   renderLabel: {
     type: Function as PropType<TdPickerProps['renderLabel']>,

diff --git a/packages/products/tdesign-mobile-vue/src/picker/type.ts b/packages/products/tdesign-mobile-vue/src/picker/type.ts
@@ -26,6 +26,10 @@ export interface TdPickerProps {
    * 自定义头部内容
    */
   header?: TNode;
+  /**
+   * 自定义选项内容。参数为 `option: PickerColumnItem, index: number`
+   */
+  option?: TNode;
   /**
    * 自定义label
    */

diff --git a/packages/scripts/api.json b/packages/scripts/api.json
@@ -79462,6 +79462,45 @@
         "Object"
       ]
     },
+    {
+      "id": 1729074658,
+      "platform_framework": [
+        "8",
+        "16"
+      ],
+      "component": "Picker",
+      "field_category": 1,
+      "field_name": "option",
+      "field_type": [
+        "64"
+      ],
+      "field_default_value": "",
+      "field_enum": "",
+      "field_desc_zh": "自定义选项内容。参数为 `option: PickerColumnItem, index: number`",
+      "field_desc_en": null,
+      "field_required": 0,
+      "event_input": "",
+      "create_time": "2024-10-16 10:30:58",
+      "update_time": "2024-10-16 10:30:58",
+      "event_output": null,
+      "custom_field_type": null,
+      "syntactic_sugar": null,
+      "readonly": 1,
+      "html_attribute": 0,
+      "trigger_elements": "",
+      "deprecated": 0,
+      "version": "",
+      "test_description": null,
+      "support_default_value": 0,
+      "field_category_text": "Props",
+      "platform_framework_text": [
+        "Vue(Mobile)",
+        "React(Mobile)"
+      ],
+      "field_type_text": [
+        "TNode"
+      ]
+    },
     {
       "id": 1710843688,
       "platform_framework": [