Skip to content

Commit 60d58b3

Browse files
anlyyaoanlyyao
committed
fix(Picker): fixed format attribute being invalid
1 parent 5a806b5 commit 60d58b3

File tree

10 files changed

+41
-18
lines changed

10 files changed

+41
-18
lines changed

‎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)