fix(Picker): fixed format attribute being invalid

.github/workflows/typos-config.toml

@@ -5,6 +5,7 @@ actived = "actived"
 Colum = "Colum"
 ded = "ded"
 destory ="destory"
+nd = "nd"
 
 [files]
 extend-exclude = ["CHANGELOG.md"]

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<TimeModeValues> ` `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

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<TimeModeValues> ` `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

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 {

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;

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"

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}}"
   />
   <slot slot="footer" name="footer" />
 </t-picker>

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: {},

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?: {

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,30 +104,41 @@ 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,
         });
       });
     },
 
+    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() {

src/picker-item/picker-item.wxml

@@ -15,7 +15,7 @@
     <view
       class="{{_.cls(classPrefix + '__item', [['active', curIndex == index]])}}"
       style="height: {{pickItemHeight}}px"
-      wx:for="{{options}}"
+      wx:for="{{formatOptions}}"
       wx:key="index"
       wx:for-item="option"
       data-index="{{ index }}"

src/picker-item/type.ts

@@ -10,7 +10,7 @@ export interface TdPickerItemProps {
    */
   format?: {
     type: undefined;
-    value?: (option: PickerItemOption) => string;
+    value?: (option: PickerItemOption, columnIndex: number) => PickerItemOption;
   };
   /**
    * 数据源

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

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<PickerValue>, 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

src/picker/__test__/__snapshots__/demo.test.js.snap

@@ -149,6 +149,7 @@ exports[`Picker Picker base demo works fine 1`] = `
     bind:pick="onColumnChange"
   >
     <t-picker-item
+      format="{{[Function]}}"
       options="{{
         Array [
           Object {

src/picker/_example/base/index.js

@@ -22,6 +22,16 @@ Component({
       { label: '秋', value: '秋' },
       { label: '冬', value: '冬' },
     ],
+    formatter(item) {
+      const { value, label } = item;
+      if (value === '北京市') {
+        return {
+          value,
+          label: label.substring(0, 2),
+        };
+      }
+      return item;
+    },
   },
 
   methods: {

src/picker/_example/base/index.wxml

@@ -14,7 +14,7 @@
   bindpick="onColumnChange"
   bindcancel="onPickerCancel"
 >
-  <t-picker-item options="{{citys}}">
+  <t-picker-item options="{{citys}}" format="{{formatter}}">
     <block wx:for="{{citys}}" wx:key="index" wx:for-item="option">
       <view wx:if="{{option.tag}}" slot="label-suffix--{{index}}" class="label-suffix">
         <t-tag size="small" theme="primary">{{option.tag}}</t-tag>

src/picker/props.ts

@@ -35,7 +35,7 @@ const props: TdPickerProps = {
   keys: {
     type: Object,
   },
-  /** 透传 `Popup` 组件全部属性 */
+  /** 透传 Popup 组件全部属性 */
   popupProps: {
     type: Object,
     value: {},

src/picker/type.ts

@@ -57,7 +57,7 @@ export interface TdPickerProps {
     value?: KeysType;
   };
   /**
-   * 透传 `Popup` 组件全部属性
+   * 透传 Popup 组件全部属性
    * @default {}
    */
   popupProps?: {