feat(date-time-picker): add filter props ts type (#448)

* feat(date-time-picker): add filter ts type * feat: columns change to option * docs: update doc * feat: add DateTimePickerColumn * chore: fix typos --------- Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
TDesignOteam · Oct 29, 2024 · c7b1412 · c7b1412
1 parent ff5758b
commit c7b1412
Show file tree

Hide file tree

Showing 11 changed files with 31 additions and 12 deletions.
diff --git a/db/TDesign.db b/db/TDesign.db
diff --git a/packages/products/tdesign-miniprogram/src/date-time-picker/README.en-US.md b/packages/products/tdesign-miniprogram/src/date-time-picker/README.en-US.md
@@ -12,7 +12,7 @@ cancel-btn | String | 取消 | \- | N
 confirm-btn | String | - | \- | N
 custom-locale | String | zh | \- | N
 end | String / Number | - | \- | N
-filter | Function | - | \- | N
+filter | Function | - | Typescript：`(type: TimeModeValues, columns: DateTimePickerColumn) => DateTimePickerColumn` `type DateTimePickerColumn = DateTimePickerColumnItem[]` `interface DateTimePickerColumnItem { label: string,value: string}`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/date-time-picker/type.ts) | N
 footer | Slot | - | [see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N
 format | String | 'YYYY-MM-DD HH:mm:ss' | \- | N
 header | Boolean / Slot | true | [see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N

diff --git a/packages/products/tdesign-miniprogram/src/date-time-picker/README.md b/packages/products/tdesign-miniprogram/src/date-time-picker/README.md
@@ -12,7 +12,7 @@ cancel-btn | String | 取消 | 取消按钮文字 | N
 confirm-btn | String | - | 确定按钮文字 | N
 custom-locale | String | zh |  组件国际化语言，目前支持: 简体中文(zh)、(tc)、英文(en)、日语(ja)、韩语(ko)、俄语(ru)等六种语言 | N
 end | String / Number | - | 选择器的最大可选时间，默认为当前时间+10年 | N
-filter | Function | - | 列选项过滤函数，支持自定义列内容。(type 值可为: year, month, date, hour, minute, second) | N
+filter | Function | - | 列选项过滤函数，支持自定义列内容。(type 值可为: year, month, date, hour, minute, second)。TS 类型：`(type: TimeModeValues, columns: DateTimePickerColumn) => DateTimePickerColumn` `type DateTimePickerColumn = DateTimePickerColumnItem[]` `interface DateTimePickerColumnItem { label: string,value: string}`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/date-time-picker/type.ts) | N
 footer | Slot | - | 底部内容。[通用类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N
 format | String | 'YYYY-MM-DD HH:mm:ss' | 用于格式化 pick、change、confirm 事件返回的值，[详细文档](https://day.js.org/docs/en/display/format) | N
 header | Boolean / Slot | true | 头部内容。值为 true 显示空白头部，值为 false 不显示任何内容。[通用类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N

diff --git a/packages/products/tdesign-miniprogram/src/date-time-picker/type.ts b/packages/products/tdesign-miniprogram/src/date-time-picker/type.ts
@@ -50,7 +50,7 @@ export interface TdDateTimePickerProps {
    */
   filter?: {
     type: undefined;
-    value?: null;
+    value?: (type: TimeModeValues, columns: DateTimePickerColumn) => DateTimePickerColumn;
   };
   /**
    * 用于格式化 pick、change、confirm 事件返回的值，[详细文档](https://day.js.org/docs/en/display/format)
@@ -146,6 +146,13 @@ export interface TdDateTimePickerProps {
   };
 }
 
+export type DateTimePickerColumn = DateTimePickerColumnItem[];
+
+export interface DateTimePickerColumnItem {
+  label: string;
+  value: string;
+}
+
 export type DateTimePickerMode = TimeModeValues | Array<TimeModeValues>;
 
 export type TimeModeValues = 'year' | 'month' | 'date' | 'hour' | 'minute' | 'second';

diff --git a/...es/products/tdesign-mobile-react/src/date-time-picker/date-time-picker.en-US.md b/...es/products/tdesign-mobile-react/src/date-time-picker/date-time-picker.en-US.md
@@ -2,7 +2,6 @@
 
 ## API
 
-
 ### DateTimePicker Props
 
 name | type | default | description | required
@@ -12,7 +11,7 @@ style | Object | - | CSS(Cascading Style Sheets)，Typescript：`React.CSSProper
 cancelBtn | String | 取消 | \- | N
 confirmBtn | String | - | \- | N
 end | String / Number | - | \- | N
-filter | Function | - | \- | N
+filter | Function | - | Typescript：`(type: TimeModeValues, columns: DateTimePickerColumn) => DateTimePickerColumn` `type DateTimePickerColumn = DateTimePickerColumnItem[]` `interface DateTimePickerColumnItem { label: string,value: string}`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/date-time-picker/type.ts) | N
 footer | TElement | true | Typescript：`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N
 format | String | 'YYYY-MM-DD HH:mm:ss' | \- | N
 header | TNode | true | Typescript：`boolean \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N

diff --git a/packages/products/tdesign-mobile-react/src/date-time-picker/date-time-picker.md b/packages/products/tdesign-mobile-react/src/date-time-picker/date-time-picker.md
@@ -2,7 +2,6 @@
 
 ## API
 
-
 ### DateTimePicker Props
 
 名称 | 类型 | 默认值 | 描述 | 必传
@@ -12,7 +11,7 @@ style | Object | - | 样式，TS 类型：`React.CSSProperties` | N
 cancelBtn | String | 取消 | 取消按钮文字 | N
 confirmBtn | String | - | 确定按钮文字 | N
 end | String / Number | - | 选择器的最大可选时间，默认为当前时间+10年 | N
-filter | Function | - | 列选项过滤函数，支持自定义列内容。(type 值可为: year, month, date, hour, minute, second) | N
+filter | Function | - | 列选项过滤函数，支持自定义列内容。(type 值可为: year, month, date, hour, minute, second)。TS 类型：`(type: TimeModeValues, columns: DateTimePickerColumn) => DateTimePickerColumn` `type DateTimePickerColumn = DateTimePickerColumnItem[]` `interface DateTimePickerColumnItem { label: string,value: string}`。[详细类型定义](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/date-time-picker/type.ts) | N
 footer | TElement | true | 底部内容。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N
 format | String | 'YYYY-MM-DD HH:mm:ss' | 用于格式化 pick、change、confirm 事件返回的值，[详细文档](https://day.js.org/docs/en/display/format) | N
 header | TNode | true | 头部内容。值为 true 显示空白头部，值为 false 不显示任何内容。TS 类型：`boolean \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N

diff --git a/packages/products/tdesign-mobile-react/src/date-time-picker/type.ts b/packages/products/tdesign-mobile-react/src/date-time-picker/type.ts
@@ -25,7 +25,7 @@ export interface TdDateTimePickerProps {
   /**
    * 列选项过滤函数，支持自定义列内容。(type 值可为: year, month, date, hour, minute, second)
    */
-  filter?: function;
+  filter?: (type: TimeModeValues, columns: DateTimePickerColumn) => DateTimePickerColumn;
   /**
    * 底部内容
    * @default true
@@ -108,6 +108,13 @@ export interface TdDateTimePickerProps {
   onPick?: (value: DateValue) => void;
 }
 
+export type DateTimePickerColumn = DateTimePickerColumnItem[];
+
+export interface DateTimePickerColumnItem {
+  label: string;
+  value: string;
+}
+
 export type DateTimePickerMode = TimeModeValues | Array<TimeModeValues>;
 
 export type TimeModeValues = 'year' | 'month' | 'date' | 'hour' | 'minute' | 'second';

diff --git a/...ages/products/tdesign-mobile-vue/src/date-time-picker/date-time-picker.en-US.md b/...ages/products/tdesign-mobile-vue/src/date-time-picker/date-time-picker.en-US.md
@@ -9,7 +9,7 @@ name | type | default | description | required
 cancelBtn | String | 取消 | \- | N
 confirmBtn | String | - | \- | N
 end | String / Number | - | \- | N
-filter | Function | - | \- | N
+filter | Function | - | Typescript：`(type: TimeModeValues, columns: DateTimePickerColumn) => DateTimePickerColumn` `type DateTimePickerColumn = DateTimePickerColumnItem[]` `interface DateTimePickerColumnItem { label: string,value: string}`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/date-time-picker/type.ts) | N
 format | String | 'YYYY-MM-DD HH:mm:ss' | \- | N
 mode | String / Array | 'date' | Typescript：`DateTimePickerMode` `type DateTimePickerMode = TimeModeValues \| Array<TimeModeValues> ` `type TimeModeValues = 'year' \| 'month' \| 'date' \| 'hour' \| 'minute' \| 'second'`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/date-time-picker/type.ts) | N
 renderLabel | Function | - | Typescript：`(type: string, value: number) => string` | N

diff --git a/packages/products/tdesign-mobile-vue/src/date-time-picker/date-time-picker.md b/packages/products/tdesign-mobile-vue/src/date-time-picker/date-time-picker.md
@@ -9,7 +9,7 @@
 cancelBtn | String | 取消 | 取消按钮文字 | N
 confirmBtn | String | - | 确定按钮文字 | N
 end | String / Number | - | 选择器的最大可选时间，默认为当前时间+10年 | N
-filter | Function | - | 列选项过滤函数，支持自定义列内容。(type 值可为: year, month, date, hour, minute, second) | N
+filter | Function | - | 列选项过滤函数，支持自定义列内容。(type 值可为: year, month, date, hour, minute, second)。TS 类型：`(type: TimeModeValues, columns: DateTimePickerColumn) => DateTimePickerColumn` `type DateTimePickerColumn = DateTimePickerColumnItem[]` `interface DateTimePickerColumnItem { label: string,value: string}`。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/date-time-picker/type.ts) | N
 format | String | 'YYYY-MM-DD HH:mm:ss' | 用于pick、change、confirm事件参数格式化[详细文档](https://day.js.org/docs/en/display/format) | N
 mode | String / Array | 'date' | year = 年；month = 年月；date = 年月日；hour = 年月日时； minute = 年月日时分；当类型为数组时，第一个值控制年月日，第二个值控制时分秒。TS 类型：`DateTimePickerMode` `type DateTimePickerMode = TimeModeValues \| Array<TimeModeValues> ` `type TimeModeValues = 'year' \| 'month' \| 'date' \| 'hour' \| 'minute' \| 'second'`。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/date-time-picker/type.ts) | N
 renderLabel | Function | - | 自定义label。TS 类型：`(type: string, value: number) => string` | N

diff --git a/packages/products/tdesign-mobile-vue/src/date-time-picker/type.ts b/packages/products/tdesign-mobile-vue/src/date-time-picker/type.ts
@@ -22,7 +22,7 @@ export interface TdDateTimePickerProps {
   /**
    * 列选项过滤函数，支持自定义列内容。(type 值可为: year, month, date, hour, minute, second)
    */
-  filter?: Function;
+  filter?: (type: TimeModeValues, columns: DateTimePickerColumn) => DateTimePickerColumn;
   /**
    * 用于pick、change、confirm事件参数格式化[详细文档](https://day.js.org/docs/en/display/format)
    * @default 'YYYY-MM-DD HH:mm:ss'
@@ -86,6 +86,13 @@ export interface TdDateTimePickerProps {
   onPick?: (value: DateValue) => void;
 }
 
+export type DateTimePickerColumn = DateTimePickerColumnItem[];
+
+export interface DateTimePickerColumnItem {
+  label: string;
+  value: string;
+}
+
 export type DateTimePickerMode = TimeModeValues | Array<TimeModeValues>;
 
 export type TimeModeValues = 'year' | 'month' | 'date' | 'hour' | 'minute' | 'second';

diff --git a/packages/scripts/api.json b/packages/scripts/api.json
@@ -35481,7 +35481,7 @@
       "create_time": "2024-10-24 12:54:16",
       "update_time": "2024-10-24 12:54:16",
       "event_output": null,
-      "custom_field_type": null,
+      "custom_field_type": "(type: TimeModeValues, columns: DateTimePickerColumn) => DateTimePickerColumn【type DateTimePickerColumn = DateTimePickerColumnItem[]】【interface DateTimePickerColumnItem { label: string,value: string}】",
       "syntactic_sugar": null,
       "readonly": 1,
       "html_attribute": 0,