feat(PickerItem): add icon prop (#3930)

* feat(PickerItem): add icon prop

* fix(PickerItem): fix console alarm

* chore: update demo

Author: anlyyao

packages/components/picker-item/picker-item.json

@@ -1,5 +1,7 @@
 {
   "component": true,
   "styleIsolation": "apply-shared",
-  "usingComponents": {}
+  "usingComponents": {
+    "t-icon": "../icon/icon"
+  }
 }

packages/components/picker-item/picker-item.less

@@ -31,6 +31,11 @@
     color: @picker-item-color;
     font-size: @picker-item-font-size;
 
+    &-icon {
+      font-size: 36rpx;
+      margin-right: @spacer;
+    }
+
     &-label {
       white-space: nowrap;
       text-overflow: ellipsis;

packages/components/picker-item/picker-item.ts

@@ -39,7 +39,7 @@ export default class PickerItem extends SuperComponent {
           if (keys === null || JSON.stringify(this.data.pickerKeys) === JSON.stringify(keys)) return;
 
           this.setData({
-            pickerKeys: keys,
+            pickerKeys: { ...this.data.pickerKeys, ...keys },
           });
         }
       },
@@ -68,7 +68,7 @@ export default class PickerItem extends SuperComponent {
     value: '',
     curIndex: 0,
     columnIndex: 0,
-    pickerKeys: { value: 'value', label: 'label' },
+    pickerKeys: { value: 'value', label: 'label', icon: 'icon' },
     formatOptions: props.options.value,
   };
 

packages/components/picker-item/picker-item.wxml

@@ -16,11 +16,16 @@
       class="{{_.cls(classPrefix + '__item', [['active', curIndex == index]])}}"
       style="height: {{pickItemHeight}}px"
       wx:for="{{formatOptions}}"
-      wx:key="index"
+      wx:key="value"
       wx:for-item="option"
       data-index="{{ index }}"
       bind:tap="onClickItem"
     >
+      <t-icon
+        wx:if="{{option[pickerKeys.icon]}}"
+        class="{{classPrefix}}__item-icon"
+        name="{{option[pickerKeys.icon]}}"
+      />
       <text class="{{classPrefix}}__item-label">{{option[pickerKeys.label]}}</text>
       <slot name="label-suffix--{{index}}"></slot>
     </view>

packages/components/picker-item/type.ts

@@ -25,4 +25,5 @@ export interface TdPickerItemProps {
 export interface PickerItemOption {
   label: string;
   value: string | number;
+  icon?: string;
 }

packages/components/picker/README.en-US.md

@@ -41,7 +41,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, 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/blob/develop/packages/components/picker-item/type.ts) | N
+options | Array | [] | Typescript：`PickerItemOption[]` `interface PickerItemOption { label: string; value: string \| number; icon?: string }`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/packages/components/picker-item/type.ts) | N
 
 ### CSS Variables
 

packages/components/picker/README.md

@@ -59,7 +59,7 @@ confirm-btn | String / Boolean | true | 确定按钮文字。TS 类型：`boolea
 footer | Slot | - | 底部内容。[通用类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/packages/components/common/common.ts) | N
 header | Boolean / Slot | true | 头部内容。值为 true 显示空白头部，值为 false 不显示任何内容。[通用类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/packages/components/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/packages/components/common/common.ts) | N
+keys | Object | - | 用来定义 value / label / icon 在 `options` 中对应的字段别名。TS 类型：`KeysType`。[通用类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/packages/components/common/common.ts) | N
 popup-props | Object | {} | 透传 Popup 组件全部属性。TS 类型：`PopupProps`，[Popup API Documents](./popup?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/packages/components/picker/type.ts) | N
 title | String | '' | 标题 | N
 use-popup | Boolean | true | 是否使用弹出层包裹 | N
@@ -86,7 +86,7 @@ pick | `(value: Array<PickerValue>, label: string, column: number, index: number
 style | Object | - | 样式 | N
 custom-style | Object | - | 样式，一般用于开启虚拟化组件节点场景 | 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/blob/develop/packages/components/picker-item/type.ts) | N
+options | Array | [] | 数据源。TS 类型：`PickerItemOption[]` `interface PickerItemOption { label: string; value: string \| number; icon?: string }`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/packages/components/picker-item/type.ts) | N
 
 ### CSS Variables
 

packages/components/picker/__test__/__snapshots__/demo.test.js.snap

@@ -153,6 +153,7 @@ exports[`Picker Picker base demo works fine 1`] = `
       options="{{
         Array [
           Object {
+            "icon": "home",
             "label": "北京市",
             "tag": "合",
             "value": "北京市",

packages/components/picker/_example/base/index.js

@@ -5,7 +5,7 @@ Component({
     dateText: '',
     dateValue: [],
     citys: [
-      { label: '北京市', value: '北京市', tag: '合' },
+      { label: '北京市', value: '北京市', icon: 'home', tag: '合' },
       { label: '上海市', value: '上海市', tag: '合' },
       { label: '广州市', value: '广州市' },
       { label: '深圳市', value: '深圳市' },
@@ -26,6 +26,7 @@ Component({
       const { value, label } = item;
       if (value === '北京市') {
         return {
+          ...item,
           value,
           label: label.substring(0, 2),
         };

packages/components/picker/props.ts

@@ -31,7 +31,7 @@ const props: TdPickerProps = {
     type: Number,
     value: 80,
   },
-  /** 用来定义 value / label 在 `options` 中对应的字段别名 */
+  /** 用来定义 value / label / icon 在 `options` 中对应的字段别名 */
   keys: {
     type: Object,
   },