Skip to content

Commit c2a5916

Browse files
anlyyaoanlyyao
authored
fix(Picker): fixed format attribute being invalid (#3500)
* fix(Picker): fixed format attribute being invalid * feat(DateTimePicker): support formatter props * ci: update types-config
1 parent bcaf53c commit c2a5916

File tree

19 files changed

+95
-32
lines changed

19 files changed

+95
-32
lines changed

‎.github/workflows/typos-config.toml

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ actived = "actived"
55
Colum = "Colum"
66
ded = "ded"
77
destory ="destory"
8+
nd = "nd"
89

910
[files]
1011
extend-exclude = ["CHANGELOG.md"]

‎src/date-time-picker/README.en-US.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ end | String / Number | - | \- | N
1616
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
1717
footer | Slot | - | [see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N
1818
format | String | 'YYYY-MM-DD HH:mm:ss' | \- | N
19+
formatter | Function | - | Typescript：`(option: DateTimePickerColumnItem, columnIndex: number) => DateTimePickerColumnItem` | N
1920
header | Boolean / Slot | true | [see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N
2021
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
2122
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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -70,9 +70,10 @@ end | String / Number | - | 选择器的最大可选时间，默认为当前时
7070
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
7171
footer | Slot | - | 底部内容。[通用类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N
7272
format | String | 'YYYY-MM-DD HH:mm:ss' | 用于格式化 pick、change、confirm 事件返回的值，[详细文档](https://day.js.org/docs/en/display/format) | N
73+
formatter | Function | - | 格式化标签。TS 类型：`(option: DateTimePickerColumnItem, columnIndex: number) => DateTimePickerColumnItem` | N
7374
header | Boolean / Slot | true | 头部内容。值为 true 显示空白头部，值为 false 不显示任何内容。[通用类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N
7475
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
75-
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
76+
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
7677
show-week | Boolean | false | 【开发中】是否在日期旁边显示周几（如周一，周二，周日等） | N
7778
start | String / Number | - | 选择器的最小可选时间，默认为当前时间-10年 | N
7879
steps | Object | - | 时间间隔步数，示例：`{ minute: 5 }` | N

‎src/date-time-picker/__test__/__snapshots__/demo.test.js.snap

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -182,6 +182,7 @@ exports[`DateTimePicker DateTimePicker year-month-date demo works fine 1`] = `
182182
end="2030-09-09 12:12:12"
183183
filter="{{[Function]}}"
184184
format="YYYY-MM-DD"
185+
formatter="{{[Function]}}"
185186
mode="date"
186187
popupProps="{{
187188
Object {

‎src/date-time-picker/_example/year-month-date/index.js

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,18 @@
1+
const calendarMonth = [
2+
'January',
3+
'February',
4+
'March',
5+
'April',
6+
'May',
7+
'June',
8+
'July',
9+
'August',
10+
'September',
11+
'October',
12+
'November',
13+
'December',
14+
];
15+
116
Page({
217
data: {
318
mode: '',
@@ -17,6 +32,25 @@ Page({
1732
popupProps: {
1833
usingCustomNavbar: true,
1934
},
35+
36+
formatter(item, index) {
37+
let label = item.label.slice(0, -1);
38+
if (index === 1) {
39+
label = calendarMonth[Number(label) - 1];
40+
}
41+
if (index === 2) {
42+
const suffixes = {
43+
1: 'st',
44+
2: 'nd',
45+
3: 'rd',
46+
};
47+
label = `${label}${suffixes[label] || 'th'}`;
48+
}
49+
return {
50+
value: item.value,
51+
label,
52+
};
53+
},
2054
},
2155
showPicker(e) {
2256
const { mode } = e.currentTarget.dataset;

‎src/date-time-picker/_example/year-month-date/index.wxml

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@
2020
start="{{start}}"
2121
end="{{end}}"
2222
filter="{{filter}}"
23+
formatter="{{formatter}}"
2324
popup-props="{{popupProps}}"
2425
bindchange="onConfirm"
2526
bindpick="onColumnChange"

‎src/date-time-picker/date-time-picker.wxml

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@
2424
class="{{_.cls(classPrefix + '__item', [['roomly', columns.length > 5 && index == 0]])}}"
2525
options="{{item}}"
2626
index="index"
27+
format="{{formatter}}"
2728
/>
2829
<slot slot="footer" name="footer" />
2930
</t-picker>

‎src/date-time-picker/props.ts

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -30,10 +30,6 @@ const props: TdDateTimePickerProps = {
3030
end: {
3131
type: null,
3232
},
33-
/** 组件类名，分别用于设置组件外层元素、确认按钮、取消按钮、标题等元素类名 */
34-
externalClasses: {
35-
type: Array,
36-
},
3733
/** 列选项过滤函数，支持自定义列内容。(type 值可为: year, month, date, hour, minute, second) */
3834
filter: {
3935
type: null,
@@ -43,6 +39,10 @@ const props: TdDateTimePickerProps = {
4339
type: String,
4440
value: 'YYYY-MM-DD HH:mm:ss',
4541
},
42+
/** 格式化标签 */
43+
formatter: {
44+
type: null,
45+
},
4646
/** 头部内容。值为 true 显示空白头部，值为 false 不显示任何内容 */
4747
header: {
4848
type: Boolean,
@@ -53,7 +53,7 @@ const props: TdDateTimePickerProps = {
5353
type: null,
5454
value: 'date',
5555
},
56-
/** 透传 `Popup` 组件全部属性 */
56+
/** 透传 Popup 组件全部属性 */
5757
popupProps: {
5858
type: Object,
5959
value: {},

‎src/date-time-picker/type.ts

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -46,13 +46,6 @@ export interface TdDateTimePickerProps {
4646
type: null;
4747
value?: string | number;
4848
};
49-
/**
50-
* 组件类名，分别用于设置组件外层元素、确认按钮、取消按钮、标题等元素类名
51-
*/
52-
externalClasses?: {
53-
type: ArrayConstructor;
54-
value?: ['t-class', 't-class-confirm', 't-class-cancel', 't-class-title'];
55-
};
5649
/**
5750
* 列选项过滤函数，支持自定义列内容。(type 值可为: year, month, date, hour, minute, second)
5851
*/
@@ -68,6 +61,13 @@ export interface TdDateTimePickerProps {
6861
type: StringConstructor;
6962
value?: string;
7063
};
64+
/**
65+
* 格式化标签
66+
*/
67+
formatter?: {
68+
type: undefined;
69+
value?: (option: DateTimePickerColumnItem, columnIndex: number) => DateTimePickerColumnItem;
70+
};
7171
/**
7272
* 头部内容。值为 true 显示空白头部，值为 false 不显示任何内容
7373
* @default true
@@ -85,7 +85,7 @@ export interface TdDateTimePickerProps {
8585
value?: DateTimePickerMode;
8686
};
8787
/**
88-
* 透传 `Popup` 组件全部属性
88+
* 透传 Popup 组件全部属性
8989
* @default {}
9090
*/
9191
popupProps?: {

‎src/picker-item/picker-item.ts

Lines changed: 22 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import { SuperComponent, wxComponent, RelationsOptions, ComponentsOptionsType } from '../common/src/index';
22
import config from '../common/config';
33
import props from './props';
4+
import { PickerItemOption } from './type';
45

56
const { prefix } = config;
67
const name = `${prefix}-picker-item`;
@@ -53,6 +54,7 @@ export default class PickerItem extends SuperComponent {
5354
columnIndex: 0,
5455
labelAlias: 'label',
5556
valueAlias: 'value',
57+
formatOptions: props.options.value,
5658
};
5759

5860
lifetimes = {
@@ -84,8 +86,7 @@ export default class PickerItem extends SuperComponent {
8486
},
8587

8688
onTouchEnd() {
87-
const { offset, labelAlias, valueAlias, columnIndex, pickItemHeight } = this.data;
88-
const { options } = this.properties;
89+
const { offset, labelAlias, valueAlias, columnIndex, pickItemHeight, formatOptions } = this.data;
8990

9091
if (offset === this.StartOffset) {
9192
return;
@@ -103,30 +104,41 @@ export default class PickerItem extends SuperComponent {
103104

104105
wx.nextTick(() => {
105106
this._selectedIndex = index;
106-
this._selectedValue = options[index]?.[valueAlias];
107-
this._selectedLabel = options[index]?.[labelAlias];
107+
this._selectedValue = formatOptions[index]?.[valueAlias];
108+
this._selectedLabel = formatOptions[index]?.[labelAlias];
108109
this.$parent?.triggerColumnChange({
109110
index,
110111
column: columnIndex,
111112
});
112113
});
113114
},
114115

116+
formatOption(options: PickerItemOption[], columnIndex: number, format: any) {
117+
if (typeof format !== 'function') return options;
118+
119+
return options.map((ele: PickerItemOption) => {
120+
return format(ele, columnIndex);
121+
});
122+
},
123+
115124
// 刷新选中状态
116125
update() {
117-
const { options, value, labelAlias, valueAlias, pickItemHeight } = this.data;
126+
const { options, value, labelAlias, valueAlias, pickItemHeight, format, columnIndex } = this.data;
127+
128+
const formatOptions = this.formatOption(options, columnIndex, format);
118129

119-
const index = options.findIndex((item) => item[valueAlias] === value);
130+
const index = formatOptions.findIndex((item: PickerItemOption) => item[valueAlias] === value);
120131
const selectedIndex = index > 0 ? index : 0;
121132

133+
this._selectedIndex = selectedIndex;
134+
this._selectedValue = formatOptions[selectedIndex]?.[valueAlias];
135+
this._selectedLabel = formatOptions[selectedIndex]?.[labelAlias];
136+
122137
this.setData({
138+
formatOptions,
123139
offset: -selectedIndex * pickItemHeight,
124140
curIndex: selectedIndex,
125141
});
126-
127-
this._selectedIndex = selectedIndex;
128-
this._selectedValue = options[selectedIndex]?.[valueAlias];
129-
this._selectedLabel = options[selectedIndex]?.[labelAlias];
130142
},
131143

132144
resetOrigin() {

‎src/picker-item/picker-item.wxml

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@
1515
<view
1616
class="{{_.cls(classPrefix + '__item', [['active', curIndex == index]])}}"
1717
style="height: {{pickItemHeight}}px"
18-
wx:for="{{options}}"
18+
wx:for="{{formatOptions}}"
1919
wx:key="index"
2020
wx:for-item="option"
2121
data-index="{{ index }}"

‎src/picker-item/type.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ export interface TdPickerItemProps {
1010
*/
1111
format?: {
1212
type: undefined;
13-
value?: (option: PickerItemOption) => string;
13+
value?: (option: PickerItemOption, columnIndex: number) => PickerItemOption;
1414
};
1515
/**
1616
* 数据源

‎src/picker/README.en-US.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,7 @@ name | type | default | description | required
4040
-- | -- | -- | -- | --
4141
style | Object | - | CSS(Cascading Style Sheets) | N
4242
custom-style | Object | - | CSS(Cascading Style Sheets)，used to set style on virtual component | N
43-
format | Function | - | Typescript：`(option: PickerItemOption) => string` | N
43+
format | Function | - | Typescript：`(option: PickerItemOption, columnIndex: number) => PickerItemOption` | N
4444
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
4545

4646
### CSS Variables

‎src/picker/README.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -64,7 +64,7 @@ footer | Slot | - | 底部内容。[通用类型定义](https://github.com/Tence
6464
header | Boolean / Slot | true | 头部内容。值为 true 显示空白头部，值为 false 不显示任何内容。[通用类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N
6565
item-height | Number | 80 | PickerItem 的子项高度，单位 rpx | N
6666
keys | Object | - | 用来定义 value / label 在 `options` 中对应的字段别名。TS 类型：`KeysType`。[通用类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N
67-
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
67+
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
6868
title | String | '' | 标题 | N
6969
use-popup | Boolean | true | 是否使用弹出层包裹 | N
7070
using-custom-navbar | Boolean | false | 是否使用了自定义导航栏 | N
@@ -89,7 +89,7 @@ pick | `(value: Array<PickerValue>, label: string, column: number, index: number
8989
-- | -- | -- | -- | --
9090
style | Object | - | 样式 | N
9191
custom-style | Object | - | 样式，一般用于开启虚拟化组件节点场景 | N
92-
format | Function | - | 格式化标签。TS 类型：`(option: PickerItemOption) => string` | N
92+
format | Function | - | 格式化标签。TS 类型：`(option: PickerItemOption, columnIndex: number) => PickerItemOption` | N
9393
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
9494

9595
### CSS Variables

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -149,6 +149,7 @@ exports[`Picker Picker base demo works fine 1`] = `
149149
bind:pick="onColumnChange"
150150
>
151151
<t-picker-item
152+
format="{{[Function]}}"
152153
options="{{
153154
Array [
154155
Object {

‎src/picker/_example/base/index.js

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,16 @@ Component({
2222
{ label: '秋', value: '秋' },
2323
{ label: '冬', value: '冬' },
2424
],
25+
formatter(item) {
26+
const { value, label } = item;
27+
if (value === '北京市') {
28+
return {
29+
value,
30+
label: label.substring(0, 2),
31+
};
32+
}
33+
return item;
34+
},
2535
},
2636

2737
methods: {

‎src/picker/_example/base/index.wxml

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@
1414
bindpick="onColumnChange"
1515
bindcancel="onPickerCancel"
1616
>
17-
<t-picker-item options="{{citys}}">
17+
<t-picker-item options="{{citys}}" format="{{formatter}}">
1818
<block wx:for="{{citys}}" wx:key="index" wx:for-item="option">
1919
<view wx:if="{{option.tag}}" slot="label-suffix--{{index}}" class="label-suffix">
2020
<t-tag size="small" theme="primary">{{option.tag}}</t-tag>

‎src/picker/props.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@ const props: TdPickerProps = {
3535
keys: {
3636
type: Object,
3737
},
38-
/** 透传 `Popup` 组件全部属性 */
38+
/** 透传 Popup 组件全部属性 */
3939
popupProps: {
4040
type: Object,
4141
value: {},

‎src/picker/type.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -57,7 +57,7 @@ export interface TdPickerProps {
5757
value?: KeysType;
5858
};
5959
/**
60-
* 透传 `Popup` 组件全部属性
60+
* 透传 Popup 组件全部属性
6161
* @default {}
6262
*/
6363
popupProps?: {

0 commit comments

Comments
 (0)