feat(Cell): leftIcon and rightIcon attributes support object type (#2589

)

* feat: leftIcon and rightIcon attributes support object type

* test: update snapshots

* feat(Cell): support observers

src/cell/README.md

@@ -44,16 +44,16 @@ isComponent: true
 名称 | 类型 | 默认值 | 说明 | 必传
 -- | -- | -- | -- | --
 align | String | middle | 内容的对齐方式，默认居中对齐。可选项：top/middle/bottom | N
-arrow | Boolean | false | 是否显示右侧箭头 | N
-bordered | Boolean | true | 是否显示下边框 | N
+arrow | Boolean / Object | false | 是否显示右侧箭头 | N
+bordered | Boolean| true | 是否显示下边框 | N
 description | String / Slot | - | 下方内容描述 | N
 hover | Boolean | - | 是否开启点击反馈 | N
 image | String / Slot | - | 主图 | N
 jump-type | String | navigateTo | 链接跳转类型。可选项：switchTab/reLaunch/redirectTo/navigateTo | N
-left-icon | String / Slot | - | 左侧图标，出现在单元格标题的左侧 | N
+left-icon | String / Object / Slot | - | 左侧图标，出现在单元格标题的左侧 | N
 note | String / Slot | - | 和标题同行的说明文字 | N
 required | Boolean | false | 是否显示表单必填星号 | N
-right-icon | String / Slot | - | 最右侧图标 | N
+right-icon | String / Object / Slot | - | 最右侧图标 | N
 title | String / Slot | - | 标题 | N
 url | String | - | 点击后跳转链接地址。如果值为空，则表示不需要跳转 | N
 

src/cell/__test__/__snapshots__/index.test.js.snap

@@ -32,24 +32,7 @@ exports[`cell :base 1`] = `
       />
       <wx-view
         class="t-cell__right t-class-right"
-      >
-        <t-icon
-          tClass="t-cell__right-icon t-class-right-icon"
-        >
-          <wx-view
-            ariaHidden="{{false}}"
-            ariaLabel=""
-            ariaRole=""
-            class="t-icon class t-class"
-            style=""
-            bind:tap="onTap"
-          >
-            <wx-label
-              class="t-icon- t-icon-base"
-            />
-          </wx-view>
-        </t-icon>
-      </wx-view>
+      />
     </wx-view>
   </main>
 </main>

src/cell/cell.ts

@@ -1,6 +1,7 @@
 import { SuperComponent, wxComponent, RelationsOptions } from '../common/src/index';
 import config from '../common/config';
 import props from './props';
+import { calcIcon } from '../common/utils';
 
 const { prefix } = config;
 const name = `${prefix}-cell`;
@@ -39,6 +40,25 @@ export default class Cell extends SuperComponent {
     isLastChild: false,
   };
 
+  observers = {
+    leftIcon(v) {
+      this.setIcon('_leftIcon', v, '');
+    },
+    rightIcon(v) {
+      this.setIcon('_rightIcon', v, '');
+    },
+    arrow(v) {
+      this.setIcon('_arrow', v, 'chevron-right');
+    },
+  };
+
+  setIcon(name, value, defaultValue) {
+    if (!value) return;
+    this.setData({
+      [name]: calcIcon(value, defaultValue),
+    });
+  }
+
   onClick(e) {
     this.triggerEvent('click', e.detail);
     this.jumpLink();

src/cell/cell.wxml

@@ -1,3 +1,4 @@
+<import src="../common/template/icon.wxml" />
 <wxs src="../common/utils.wxs" module="_" />
 
 <view
@@ -10,10 +11,10 @@
   aria-label="{{ariaLabel}}"
 >
   <view class="{{classPrefix}}__left {{prefix}}-class-left">
-    <t-icon
-      wx:if="{{ leftIcon }}"
-      name="{{leftIcon}}"
-      t-class="{{classPrefix}}__left-icon {{prefix}}-class-left-icon"
+    <template
+      wx:if="{{_leftIcon}}"
+      is="icon"
+      data="{{tClass: classPrefix + '__left-icon ' + prefix + '-class-left-icon', ..._leftIcon }}"
     />
     <slot name="left-icon" />
     <t-image
@@ -45,13 +46,17 @@
   </view>
 
   <view class="{{classPrefix}}__right {{prefix}}-class-right">
-    <t-icon
-      wx:if="{{ arrow }}"
-      name="chevron-right"
-      t-class="{{classPrefix}}__right-icon {{prefix}}-class-right-icon"
+    <template
+      wx:if="{{_arrow}}"
+      is="icon"
+      data="{{tClass: classPrefix + '__right-icon ' + prefix + '-class-right-icon', ..._arrow }}"
     />
     <block wx:else>
-      <t-icon name="{{rightIcon}}" t-class="{{classPrefix}}__right-icon {{prefix}}-class-right-icon" />
+      <template
+        wx:if="{{_rightIcon}}"
+        is="icon"
+        data="{{tClass: classPrefix + '__right-icon ' + prefix + '-class-right-icon', ..._rightIcon }}"
+      />
       <slot name="right-icon" />
     </block>
   </view>

src/cell/props.ts

@@ -13,7 +13,7 @@ const props: TdCellProps = {
   },
   /** 是否显示右侧箭头 */
   arrow: {
-    type: Boolean,
+    type: null,
     value: false,
   },
   /** 是否显示下边框 */
@@ -44,7 +44,7 @@ const props: TdCellProps = {
   },
   /** 左侧图标，出现在单元格标题的左侧 */
   leftIcon: {
-    type: String,
+    type: null,
   },
   /** 和标题同行的说明文字 */
   note: {
@@ -57,7 +57,7 @@ const props: TdCellProps = {
   },
   /** 最右侧图标 */
   rightIcon: {
-    type: String,
+    type: null,
   },
   /** 标题 */
   title: {

src/cell/type.ts

@@ -18,8 +18,8 @@ export interface TdCellProps {
    * @default false
    */
   arrow?: {
-    type: BooleanConstructor;
-    value?: boolean;
+    type: null;
+    value?: boolean | object;
   };
   /**
    * 是否显示下边框
@@ -86,8 +86,8 @@ export interface TdCellProps {
    * 左侧图标，出现在单元格标题的左侧
    */
   leftIcon?: {
-    type: StringConstructor;
-    value?: string;
+    type: null;
+    value?: string | object;
   };
   /**
    * 和标题同行的说明文字
@@ -108,8 +108,8 @@ export interface TdCellProps {
    * 最右侧图标
    */
   rightIcon?: {
-    type: StringConstructor;
-    value?: string;
+    type: null;
+    value?: string | object;
   };
   /**
    * 标题

src/collapse/__test__/__snapshots__/index.test.js.snap

@@ -58,7 +58,9 @@ exports[`collapse :defaultExpandAll 1`] = `
                 class="t-cell__right t-class-right"
               >
                 <t-icon
+                  class=""
                   tClass="t-cell__right-icon t-class-right-icon"
+                  bind:click=""
                 >
                   <wx-view
                     ariaHidden="{{false}}"
@@ -143,7 +145,9 @@ exports[`collapse :defaultExpandAll 1`] = `
                 class="t-cell__right t-class-right"
               >
                 <t-icon
+                  class=""
                   tClass="t-cell__right-icon t-class-right-icon"
+                  bind:click=""
                 >
                   <wx-view
                     ariaHidden="{{false}}"