feat(SwipeCell): support icon

Tencent · Dec 9, 2022 · 6841547 · 6841547
1 parent b7e2d3f
commit 6841547
Show file tree

Hide file tree

Showing 23 changed files with 417 additions and 100 deletions.
diff --git a/src/swipe-cell/README.en-US.md b/src/swipe-cell/README.en-US.md
@@ -10,7 +10,7 @@ custom-style | String | - | \- | N
 disabled | Boolean | - | \- | N
 opened   | Boolean / Array | false  | \- | N
 left | Array / Slot | - | Typescript：`Array<SwipeActionItem>` | N
-right | Array / Slot | - | Typescript：`Array<SwipeActionItem>` `interface SwipeActionItem {text: string; className?: string; style?: string; onClick?: () => void; [key: string]: any }`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/swipe-cell/type.ts) | N
+right | Array / Slot | - | Typescript：`Array<SwipeActionItem>` `interface SwipeActionItem {text?: string; icon?: string | object; className?: string; style?: string; onClick?: () => void; [key: string]: any }`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/swipe-cell/type.ts) | N
 
 ### SwipeCell Events
 

diff --git a/src/swipe-cell/README.md b/src/swipe-cell/README.md
@@ -16,18 +16,24 @@ isComponent: true
 }
 ```
 
-## 代码演示
+### 组件类型
 
-<img src="https://tdesign.gtimg.com/miniprogram/readme/swipeout-1.png" width="375px" height="50%">
-
-### 往左滑动
+左滑单操作
 
 {{ left }}
 
-### 往右滑动
+右滑单操作
 
 {{ right }}
 
+左右滑操作
+
+{{ double }}
+
+带图标的滑动操作
+
+{{ icon }}
+
 ## API
 ### SwipeCell Props
 
@@ -37,7 +43,7 @@ custom-style | String | - | 自定义组件样式 | N
 disabled | Boolean | - | 是否禁用滑动 | N
 opened   | Boolean / Array | false  | 操作项是否呈现为打开态，值为数组时表示分别控制左右滑动的展开和收起状态。TS 类型：`boolean| Array<boolean>` | N   |
 left | Array / Slot | - | 左侧滑动操作项。所有行为同 `right`。TS 类型：`Array<SwipeActionItem>` | N
-right | Array / Slot | - | 右侧滑动操作项。有两种定义方式，一种是使用数组，二种是使用插槽。`right.text` 表示操作文本，`right.className` 表示操作项类名，`right.style` 表示操作项样式，`right.onClick` 表示点击操作项后执行的回调函数。示例：`[{ text: '删除', style: 'background-color: red', onClick: () => {} }]`。TS 类型：`Array<SwipeActionItem>` `interface SwipeActionItem {text: string; className?: string; style?: string; onClick?: () => void; [key: string]: any }`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/swipe-cell/type.ts) | N
+right | Array / Slot | - | 右侧滑动操作项。有两种定义方式，一种是使用数组，二种是使用插槽。`right.text` 表示操作文本，`right.className` 表示操作项类名，`right.style` 表示操作项样式，`right.onClick` 表示点击操作项后执行的回调函数。示例：`[{ text: '删除', icon: 'delete', style: 'background-color: red', onClick: () => {} }]`。TS 类型：`Array<SwipeActionItem>` `interface SwipeActionItem {text?: string; icon?: string | object, className?: string; style?: string; onClick?: () => void; [key: string]: any }`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/swipe-cell/type.ts) | N
 
 ### SwipeCell Events
 

diff --git a/src/swipe-cell/__test__/__snapshots__/demo.test.js.snap b/src/swipe-cell/__test__/__snapshots__/demo.test.js.snap
@@ -1,32 +1,54 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`SwipeCell SwipeCell left demo works fine 1`] = `
-<left>
+exports[`SwipeCell SwipeCell double demo works fine 1`] = `
+<double>
   <t-swipe-cell
-    tClass="test-class-123"
+    left="{{
+      Array [
+        Object {
+          "className": "btn favor-btn",
+          "text": "选择",
+        },
+      ]
+    }}"
+    right="{{
+      Array [
+        Object {
+          "className": "btn delete-btn",
+          "text": "删除",
+        },
+      ]
+    }}"
+    bind:click="onActionClick"
   >
     <t-cell
       bordered="{{false}}"
       note="辅助信息"
-      title="列表-左滑单操作"
+      title="左右滑操作"
     />
-    <wx-view
-      class="t-swipe-cell-demo-btn delete-btn"
-      slot="right"
-      bind:tap="onDelete"
-    >
-      删除
-    </wx-view>
   </t-swipe-cell>
+</double>
+`;
+
+exports[`SwipeCell SwipeCell icon demo works fine 1`] = `
+<wx-icon>
   <t-swipe-cell
     right="{{
       Array [
         Object {
-          "className": "t-swipe-cell-demo-btn edit-btn",
+          "className": "btn edit-btn",
+          "icon": Object {
+            "name": "edit",
+            "size": 16,
+          },
           "text": "编辑",
         },
         Object {
-          "className": "t-swipe-cell-demo-btn delete-btn",
+          "className": "btn delete-btn",
+          "icon": Object {
+            "name": "delete",
+            "size": 16,
+          },
           "text": "删除",
         },
       ]
@@ -35,56 +57,156 @@ exports[`SwipeCell SwipeCell left demo works fine 1`] = `
   >
     <t-cell
       bordered="{{false}}"
-      note="双操作"
-      title="列表-左滑双操作"
+      note="辅助信息"
+      title="左滑-带图标文本双操作"
+    />
+  </t-swipe-cell>
+  <t-swipe-cell
+    right="{{
+      Array [
+        Object {
+          "className": "btn edit-btn",
+          "icon": "edit",
+        },
+        Object {
+          "className": "btn delete-btn",
+          "icon": "delete",
+        },
+      ]
+    }}"
+  >
+    <t-cell
+      bordered="{{false}}"
+      note="辅助信息"
+      title="左滑-仅带图标双操作"
     />
   </t-swipe-cell>
   <t-swipe-cell>
     <t-cell
       bordered="{{false}}"
-      note="多操作"
-      title="列表-左滑多操作"
+      description="一段很长很长的内容文字"
+      image="https://we-retail-static-1300977798.cos.ap-guangzhou.myqcloud.com/retail-ui/components-exp/placeholder/quartet.svg"
+      note="辅助信息"
+      title="左滑大列表-仅带图标双操作"
     />
     <wx-view
-      class="t-swipe-cell-demo-btn-wrapper"
+      class="btn-wrapper"
       slot="right"
     >
       <wx-view
-        class="t-swipe-cell-demo-btn favor-btn"
-        bind:tap="onFavor"
-      >
-        收藏
-      </wx-view>
-      <wx-view
-        class="t-swipe-cell-demo-btn edit-btn"
+        class="btn edit-btn column"
         bind:tap="onEdit"
       >
-        编辑
+        <t-icon
+          class="padding-bottom"
+          name="edit"
+          size="32rpx"
+        />
+        
+      编辑
+    
       </wx-view>
       <wx-view
-        class="t-swipe-cell-demo-btn delete-btn"
+        class="btn delete-btn column"
         bind:tap="onDelete"
       >
-        删除
+        <t-icon
+          class="padding-bottom"
+          name="delete"
+          size="32rpx"
+        />
+        
+      删除
+    
       </wx-view>
     </wx-view>
   </t-swipe-cell>
+</wx-icon>
+`;
+
+exports[`SwipeCell SwipeCell left demo works fine 1`] = `
+<left>
   <t-swipe-cell>
     <t-cell
       bordered="{{false}}"
-      description="一段很长很长的内容文字一段很长很长的内容文字一段很长很长的内容文字"
+      note="辅助信息"
+      title="左滑单操作"
+    />
+    <wx-view
+      class="btn delete-btn"
+      slot="right"
+      bind:tap="onDelete"
+    >
+      删除
+    </wx-view>
+  </t-swipe-cell>
+  <t-swipe-cell>
+    <t-cell
+      bordered="{{false}}"
+      description="一段很长很长的内容文字"
       image="https://we-retail-static-1300977798.cos.ap-guangzhou.myqcloud.com/retail-ui/components-exp/placeholder/quartet.svg"
-      tClassImage="title-image-large"
+      note="辅助信息"
       title="左滑大列表"
     />
     <wx-view
-      class="t-swipe-cell-demo-btn delete-btn"
+      class="btn delete-btn"
       slot="right"
       bind:tap="onDelete"
     >
       删除
     </wx-view>
   </t-swipe-cell>
+  <t-swipe-cell
+    right="{{
+      Array [
+        Object {
+          "className": "btn edit-btn",
+          "text": "编辑",
+        },
+        Object {
+          "className": "btn delete-btn",
+          "text": "删除",
+        },
+      ]
+    }}"
+    bind:click="onActionClick"
+  >
+    <t-cell
+      bordered="{{false}}"
+      note="辅助信息"
+      title="左滑双操作"
+    />
+  </t-swipe-cell>
+  <t-swipe-cell>
+    <t-cell
+      bordered="{{false}}"
+      note="辅助信息"
+      title="左滑多操作"
+    />
+    <wx-view
+      class="btn-wrapper"
+      slot="right"
+    >
+      <wx-view
+        class="btn favor-btn"
+        bind:tap="onFavor"
+      >
+        收藏
+      </wx-view>
+      <wx-view
+        class="btn edit-btn"
+        bind:tap="onEdit"
+      >
+        编辑
+      </wx-view>
+      <wx-view
+        class="btn delete-btn"
+        bind:tap="onDelete"
+      >
+        删除
+      </wx-view>
+    </wx-view>
+  </t-swipe-cell>
 </left>
 `;
 
@@ -94,10 +216,10 @@ exports[`SwipeCell SwipeCell right demo works fine 1`] = `
     <t-cell
       bordered="{{false}}"
       note="辅助信息"
-      title="列表-右滑单操作"
+      title="右滑单操作"
     />
     <wx-view
-      class="t-swipe-cell-demo-btn favor-btn"
+      class="btn favor-btn"
       slot="left"
       bind:tap="onChoice"
     >

diff --git a/src/swipe-cell/__test__/demo.test.js b/src/swipe-cell/__test__/demo.test.js
@@ -5,7 +5,7 @@
 import simulate from 'miniprogram-simulate';
 import path from 'path';
 
-const mapper = ['left', 'right'];
+const mapper = ['double', 'icon', 'left', 'right'];
 
 describe('SwipeCell', () => {
   mapper.forEach((demoName) => {

diff --git a/src/swipe-cell/_example/double/index.js b/src/swipe-cell/_example/double/index.js
@@ -0,0 +1,22 @@
+Component({
+  data: {
+    right: [
+      {
+        text: '删除',
+        className: 'btn delete-btn',
+      },
+    ],
+    left: [
+      {
+        text: '选择',
+        className: 'btn favor-btn',
+      },
+    ],
+  },
+
+  methods: {
+    onActionClick({ detail }) {
+      wx.showToast({ title: `你点击了${detail.text}`, icon: 'none' });
+    },
+  },
+});
diff --git a/src/swipe-cell/_example/double/index.json b/src/swipe-cell/_example/double/index.json
@@ -0,0 +1,7 @@
+{
+  "component": true,
+  "usingComponents": {
+    "t-cell": "tdesign-miniprogram/cell/cell",
+    "t-swipe-cell": "tdesign-miniprogram/swipe-cell/swipe-cell"
+  }
+}
diff --git a/src/swipe-cell/_example/double/index.wxml b/src/swipe-cell/_example/double/index.wxml
@@ -0,0 +1,3 @@
+<t-swipe-cell right="{{right}}" left="{{left}}" bind:click="onActionClick">
+  <t-cell title="左右滑操作" note="辅助信息" bordered="{{false}}" />
+</t-swipe-cell>
diff --git a/src/swipe-cell/_example/double/index.wxss b/src/swipe-cell/_example/double/index.wxss
@@ -0,0 +1,16 @@
+.btn {
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  width: 120rpx;
+  height: 100%;
+  color: white;
+}
+
+.favor-btn {
+  background-color: #0052d9;
+}
+
+.delete-btn {
+  background-color: #e34d59;
+}