diff --git a/.github/workflows/typos-config.toml b/.github/workflows/typos-config.toml index aafd552a8..1639e7e8d 100644 --- a/.github/workflows/typos-config.toml +++ b/.github/workflows/typos-config.toml @@ -5,6 +5,7 @@ actived = "actived" Colum = "Colum" ded = "ded" destory ="destory" +nd = "nd" [files] extend-exclude = ["CHANGELOG.md"] diff --git a/src/date-time-picker/README.en-US.md b/src/date-time-picker/README.en-US.md index 5e74c6edf..8fbe1d2a7 100644 --- a/src/date-time-picker/README.en-US.md +++ b/src/date-time-picker/README.en-US.md @@ -16,6 +16,7 @@ end | String / Number | - | \- | 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 +formatter | Function | - | Typescript:`(option: DateTimePickerColumnItem, columnIndex: number) => DateTimePickerColumnItem` | N header | Boolean / Slot | true | [see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N mode | String / Array | 'date' | Typescript:`DateTimePickerMode` `type DateTimePickerMode = TimeModeValues \| Array ` `type TimeModeValues = 'year' \| 'month' \| 'date' \| 'hour' \| 'minute' \| 'second'`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/date-time-picker/type.ts) | N popup-props | Object | {} | popup properties。Typescript:`PopupProps`,[Popup API Documents](./popup?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/date-time-picker/type.ts) | N diff --git a/src/date-time-picker/README.md b/src/date-time-picker/README.md index 23e575296..5ddaca5cd 100644 --- a/src/date-time-picker/README.md +++ b/src/date-time-picker/README.md @@ -70,9 +70,10 @@ end | String / Number | - | 选择器的最大可选时间,默认为当前时 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 +formatter | Function | - | 格式化标签。TS 类型:`(option: DateTimePickerColumnItem, columnIndex: number) => DateTimePickerColumnItem` | N header | Boolean / Slot | true | 头部内容。值为 true 显示空白头部,值为 false 不显示任何内容。[通用类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N mode | String / Array | 'date' | year = 年;month = 年月;date = 年月日;hour = 年月日时; minute = 年月日时分;当类型为数组时,第一个值控制年月日,第二个值控制时分秒。TS 类型:`DateTimePickerMode` `type DateTimePickerMode = TimeModeValues \| Array ` `type TimeModeValues = 'year' \| 'month' \| 'date' \| 'hour' \| 'minute' \| 'second'`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/date-time-picker/type.ts) | N -popup-props | Object | {} | 透传 `Popup` 组件全部属性。TS 类型:`PopupProps`,[Popup API Documents](./popup?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/date-time-picker/type.ts) | N +popup-props | Object | {} | 透传 Popup 组件全部属性。TS 类型:`PopupProps`,[Popup API Documents](./popup?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/date-time-picker/type.ts) | N show-week | Boolean | false | 【开发中】是否在日期旁边显示周几(如周一,周二,周日等) | N start | String / Number | - | 选择器的最小可选时间,默认为当前时间-10年 | N steps | Object | - | 时间间隔步数,示例:`{ minute: 5 }` | N diff --git a/src/date-time-picker/__test__/__snapshots__/demo.test.js.snap b/src/date-time-picker/__test__/__snapshots__/demo.test.js.snap index 80ad0c9c3..f38496f1c 100644 --- a/src/date-time-picker/__test__/__snapshots__/demo.test.js.snap +++ b/src/date-time-picker/__test__/__snapshots__/demo.test.js.snap @@ -182,6 +182,7 @@ exports[`DateTimePicker DateTimePicker year-month-date demo works fine 1`] = ` end="2030-09-09 12:12:12" filter="{{[Function]}}" format="YYYY-MM-DD" + formatter="{{[Function]}}" mode="date" popupProps="{{ Object { diff --git a/src/date-time-picker/_example/year-month-date/index.js b/src/date-time-picker/_example/year-month-date/index.js index dd5fb7825..3e7ed568e 100644 --- a/src/date-time-picker/_example/year-month-date/index.js +++ b/src/date-time-picker/_example/year-month-date/index.js @@ -1,3 +1,18 @@ +const calendarMonth = [ + 'January', + 'February', + 'March', + 'April', + 'May', + 'June', + 'July', + 'August', + 'September', + 'October', + 'November', + 'December', +]; + Page({ data: { mode: '', @@ -17,6 +32,25 @@ Page({ popupProps: { usingCustomNavbar: true, }, + + formatter(item, index) { + let label = item.label.slice(0, -1); + if (index === 1) { + label = calendarMonth[Number(label) - 1]; + } + if (index === 2) { + const suffixes = { + 1: 'st', + 2: 'nd', + 3: 'rd', + }; + label = `${label}${suffixes[label] || 'th'}`; + } + return { + value: item.value, + label, + }; + }, }, showPicker(e) { const { mode } = e.currentTarget.dataset; diff --git a/src/date-time-picker/_example/year-month-date/index.wxml b/src/date-time-picker/_example/year-month-date/index.wxml index d3f695458..56cb45110 100644 --- a/src/date-time-picker/_example/year-month-date/index.wxml +++ b/src/date-time-picker/_example/year-month-date/index.wxml @@ -20,6 +20,7 @@ start="{{start}}" end="{{end}}" filter="{{filter}}" + formatter="{{formatter}}" popup-props="{{popupProps}}" bindchange="onConfirm" bindpick="onColumnChange" diff --git a/src/date-time-picker/date-time-picker.wxml b/src/date-time-picker/date-time-picker.wxml index eea4578a2..f7faaf6bc 100644 --- a/src/date-time-picker/date-time-picker.wxml +++ b/src/date-time-picker/date-time-picker.wxml @@ -24,6 +24,7 @@ class="{{_.cls(classPrefix + '__item', [['roomly', columns.length > 5 && index == 0]])}}" options="{{item}}" index="index" + format="{{formatter}}" /> diff --git a/src/date-time-picker/props.ts b/src/date-time-picker/props.ts index fdbd0470d..0726612b5 100644 --- a/src/date-time-picker/props.ts +++ b/src/date-time-picker/props.ts @@ -30,10 +30,6 @@ const props: TdDateTimePickerProps = { end: { type: null, }, - /** 组件类名,分别用于设置组件外层元素、确认按钮、取消按钮、标题等元素类名 */ - externalClasses: { - type: Array, - }, /** 列选项过滤函数,支持自定义列内容。(type 值可为: year, month, date, hour, minute, second) */ filter: { type: null, @@ -43,6 +39,10 @@ const props: TdDateTimePickerProps = { type: String, value: 'YYYY-MM-DD HH:mm:ss', }, + /** 格式化标签 */ + formatter: { + type: null, + }, /** 头部内容。值为 true 显示空白头部,值为 false 不显示任何内容 */ header: { type: Boolean, @@ -53,7 +53,7 @@ const props: TdDateTimePickerProps = { type: null, value: 'date', }, - /** 透传 `Popup` 组件全部属性 */ + /** 透传 Popup 组件全部属性 */ popupProps: { type: Object, value: {}, diff --git a/src/date-time-picker/type.ts b/src/date-time-picker/type.ts index 060437032..8ddf5b70f 100644 --- a/src/date-time-picker/type.ts +++ b/src/date-time-picker/type.ts @@ -46,13 +46,6 @@ export interface TdDateTimePickerProps { type: null; value?: string | number; }; - /** - * 组件类名,分别用于设置组件外层元素、确认按钮、取消按钮、标题等元素类名 - */ - externalClasses?: { - type: ArrayConstructor; - value?: ['t-class', 't-class-confirm', 't-class-cancel', 't-class-title']; - }; /** * 列选项过滤函数,支持自定义列内容。(type 值可为: year, month, date, hour, minute, second) */ @@ -68,6 +61,13 @@ export interface TdDateTimePickerProps { type: StringConstructor; value?: string; }; + /** + * 格式化标签 + */ + formatter?: { + type: undefined; + value?: (option: DateTimePickerColumnItem, columnIndex: number) => DateTimePickerColumnItem; + }; /** * 头部内容。值为 true 显示空白头部,值为 false 不显示任何内容 * @default true @@ -85,7 +85,7 @@ export interface TdDateTimePickerProps { value?: DateTimePickerMode; }; /** - * 透传 `Popup` 组件全部属性 + * 透传 Popup 组件全部属性 * @default {} */ popupProps?: { diff --git a/src/picker-item/picker-item.ts b/src/picker-item/picker-item.ts index fc2393f0b..403a64634 100644 --- a/src/picker-item/picker-item.ts +++ b/src/picker-item/picker-item.ts @@ -1,6 +1,7 @@ import { SuperComponent, wxComponent, RelationsOptions, ComponentsOptionsType } from '../common/src/index'; import config from '../common/config'; import props from './props'; +import { PickerItemOption } from './type'; const { prefix } = config; const name = `${prefix}-picker-item`; @@ -53,6 +54,7 @@ export default class PickerItem extends SuperComponent { columnIndex: 0, labelAlias: 'label', valueAlias: 'value', + formatOptions: props.options.value, }; lifetimes = { @@ -84,8 +86,7 @@ export default class PickerItem extends SuperComponent { }, onTouchEnd() { - const { offset, labelAlias, valueAlias, columnIndex, pickItemHeight } = this.data; - const { options } = this.properties; + const { offset, labelAlias, valueAlias, columnIndex, pickItemHeight, formatOptions } = this.data; if (offset === this.StartOffset) { return; @@ -103,8 +104,8 @@ export default class PickerItem extends SuperComponent { wx.nextTick(() => { this._selectedIndex = index; - this._selectedValue = options[index]?.[valueAlias]; - this._selectedLabel = options[index]?.[labelAlias]; + this._selectedValue = formatOptions[index]?.[valueAlias]; + this._selectedLabel = formatOptions[index]?.[labelAlias]; this.$parent?.triggerColumnChange({ index, column: columnIndex, @@ -112,21 +113,32 @@ export default class PickerItem extends SuperComponent { }); }, + formatOption(options: PickerItemOption[], columnIndex: number, format: any) { + if (typeof format !== 'function') return options; + + return options.map((ele: PickerItemOption) => { + return format(ele, columnIndex); + }); + }, + // 刷新选中状态 update() { - const { options, value, labelAlias, valueAlias, pickItemHeight } = this.data; + const { options, value, labelAlias, valueAlias, pickItemHeight, format, columnIndex } = this.data; + + const formatOptions = this.formatOption(options, columnIndex, format); - const index = options.findIndex((item) => item[valueAlias] === value); + const index = formatOptions.findIndex((item: PickerItemOption) => item[valueAlias] === value); const selectedIndex = index > 0 ? index : 0; + this._selectedIndex = selectedIndex; + this._selectedValue = formatOptions[selectedIndex]?.[valueAlias]; + this._selectedLabel = formatOptions[selectedIndex]?.[labelAlias]; + this.setData({ + formatOptions, offset: -selectedIndex * pickItemHeight, curIndex: selectedIndex, }); - - this._selectedIndex = selectedIndex; - this._selectedValue = options[selectedIndex]?.[valueAlias]; - this._selectedLabel = options[selectedIndex]?.[labelAlias]; }, resetOrigin() { diff --git a/src/picker-item/picker-item.wxml b/src/picker-item/picker-item.wxml index 29b4eca4a..6a2833085 100644 --- a/src/picker-item/picker-item.wxml +++ b/src/picker-item/picker-item.wxml @@ -15,7 +15,7 @@ string; + value?: (option: PickerItemOption, columnIndex: number) => PickerItemOption; }; /** * 数据源 diff --git a/src/picker/README.en-US.md b/src/picker/README.en-US.md index d02c1a0f0..594b5268a 100644 --- a/src/picker/README.en-US.md +++ b/src/picker/README.en-US.md @@ -40,7 +40,7 @@ name | type | default | description | required -- | -- | -- | -- | -- style | Object | - | CSS(Cascading Style Sheets) | N custom-style | Object | - | CSS(Cascading Style Sheets),used to set style on virtual component | N -format | Function | - | Typescript:`(option: PickerItemOption) => string` | N +format | Function | - | Typescript:`(option: PickerItemOption, columnIndex: number) => PickerItemOption` | N options | Array | [] | Typescript:`PickerItemOption[]` `interface PickerItemOption { label: string; value: string \| number }`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/picker-item/type.ts) | N ### CSS Variables diff --git a/src/picker/README.md b/src/picker/README.md index f623b3fa9..4399c236c 100644 --- a/src/picker/README.md +++ b/src/picker/README.md @@ -64,7 +64,7 @@ footer | Slot | - | 底部内容。[通用类型定义](https://github.com/Tence header | Boolean / Slot | true | 头部内容。值为 true 显示空白头部,值为 false 不显示任何内容。[通用类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N item-height | Number | 80 | PickerItem 的子项高度,单位 rpx | N keys | Object | - | 用来定义 value / label 在 `options` 中对应的字段别名。TS 类型:`KeysType`。[通用类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N -popup-props | Object | {} | 透传 `Popup` 组件全部属性。TS 类型:`PopupProps`,[Popup API Documents](./popup?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/picker/type.ts) | N +popup-props | Object | {} | 透传 Popup 组件全部属性。TS 类型:`PopupProps`,[Popup API Documents](./popup?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/picker/type.ts) | N title | String | '' | 标题 | N use-popup | Boolean | true | 是否使用弹出层包裹 | N using-custom-navbar | Boolean | false | 是否使用了自定义导航栏 | N @@ -89,7 +89,7 @@ pick | `(value: Array, label: string, column: number, index: number -- | -- | -- | -- | -- style | Object | - | 样式 | N custom-style | Object | - | 样式,一般用于开启虚拟化组件节点场景 | N -format | Function | - | 格式化标签。TS 类型:`(option: PickerItemOption) => string` | N +format | Function | - | 格式化标签。TS 类型:`(option: PickerItemOption, columnIndex: number) => PickerItemOption` | N options | Array | [] | 数据源。TS 类型:`PickerItemOption[]` `interface PickerItemOption { label: string; value: string \| number }`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/picker-item/type.ts) | N ### CSS Variables diff --git a/src/picker/__test__/__snapshots__/demo.test.js.snap b/src/picker/__test__/__snapshots__/demo.test.js.snap index aa01c857c..45cb1dc0d 100644 --- a/src/picker/__test__/__snapshots__/demo.test.js.snap +++ b/src/picker/__test__/__snapshots__/demo.test.js.snap @@ -149,6 +149,7 @@ exports[`Picker Picker base demo works fine 1`] = ` bind:pick="onColumnChange" > - + {{option.tag}} diff --git a/src/picker/props.ts b/src/picker/props.ts index 3110e6a42..665f41e2e 100644 --- a/src/picker/props.ts +++ b/src/picker/props.ts @@ -35,7 +35,7 @@ const props: TdPickerProps = { keys: { type: Object, }, - /** 透传 `Popup` 组件全部属性 */ + /** 透传 Popup 组件全部属性 */ popupProps: { type: Object, value: {}, diff --git a/src/picker/type.ts b/src/picker/type.ts index 5668b38ef..2d9181d86 100644 --- a/src/picker/type.ts +++ b/src/picker/type.ts @@ -57,7 +57,7 @@ export interface TdPickerProps { value?: KeysType; }; /** - * 透传 `Popup` 组件全部属性 + * 透传 Popup 组件全部属性 * @default {} */ popupProps?: {