chore(image-viewer): update demo (#1968)

* chore(image-viewer): update demo

* chore(image-viewer): update demo

* fix(action-sheet): enable close when click cancel

* chore: recover demo

Author: LeeJim

src/action-sheet/action-sheet.ts

@@ -105,6 +105,10 @@ export default class ActionSheet extends SuperComponent {
 
     onCancel() {
       this.triggerEvent('cancel');
+      if (this.autoClose) {
+        this.setData({ visible: false });
+        this.autoClose = false;
+      }
     },
   };
 }

src/image-viewer/__test__/__snapshots__/demo.test.js.snap

@@ -7,7 +7,7 @@ exports[`ImageViewer ImageViewer base demo works fine 1`] = `
     size="large"
     theme="primary"
     variant="outline"
-    bind:tap="clickHandle"
+    bind:tap="onClick"
   >
     基础图片预览
   </t-button>
@@ -34,12 +34,12 @@ exports[`ImageViewer ImageViewer delete demo works fine 1`] = `
     size="large"
     theme="primary"
     variant="outline"
-    bind:tap="clickHandle"
+    bind:tap="onClick"
   >
     带操作图片预览
   </t-button>
-  <t-toast
-    id="t-toast"
+  <t-action-sheet
+    id="t-action-sheet"
   />
   <t-image-viewer
     closeBtn="{{false}}"

src/image-viewer/_example/base/index.js

@@ -9,7 +9,7 @@ Component({
     images: [],
   },
   methods: {
-    clickHandle() {
+    onClick() {
       this.setData({
         images: [
           'https://tdesign.gtimg.com/miniprogram/images/swiper1.png',
@@ -20,20 +20,14 @@ Component({
       });
     },
     onChange(e) {
-      const {
-        detail: { index },
-      } = e;
-      Toast({
-        context: this,
-        selector: '#t-toast',
-        message: `翻到第${index + 1}个`,
-      });
+      const { index } = e.detail;
+
+      console.log('change', index);
     },
 
     onDelete(e) {
-      const {
-        detail: { index },
-      } = e;
+      const { index } = e.detail;
+
       Toast({
         context: this,
         selector: '#t-toast',
@@ -42,22 +36,8 @@ Component({
     },
 
     onClose(e) {
-      const {
-        detail: { trigger },
-      } = e;
-      if (trigger === 'overlay') {
-        Toast({
-          context: this,
-          selector: '#t-toast',
-          message: '点击overlay关闭',
-        });
-      } else if (trigger === 'button') {
-        Toast({
-          context: this,
-          selector: '#t-toast',
-          message: `点击button关闭`,
-        });
-      }
+      const { trigger } = e.detail;
+      console.log(trigger);
       this.setData({
         visible: false,
       });

src/image-viewer/_example/base/index.wxml

@@ -1,4 +1,4 @@
-<t-button theme="primary" size="large" variant="outline" block bind:tap="clickHandle">基础图片预览</t-button>
+<t-button theme="primary" size="large" variant="outline" block bind:tap="onClick">基础图片预览</t-button>
 <t-toast id="t-toast" />
 <t-image-viewer
   deleteBtn="{{deleteBtn}}"

src/image-viewer/_example/delete/index.js

@@ -1,4 +1,4 @@
-import Toast from 'tdesign-miniprogram/toast/index';
+import ActionSheet from 'tdesign-miniprogram/action-sheet/index';
 
 Component({
   data: {
@@ -9,7 +9,7 @@ Component({
     images: [],
   },
   methods: {
-    clickHandle() {
+    onClick() {
       this.setData({
         images: [
           'https://tdesign.gtimg.com/miniprogram/images/swiper1.png',
@@ -22,44 +22,33 @@ Component({
       });
     },
     onChange(e) {
-      const {
-        detail: { index },
-      } = e;
-      Toast({
-        context: this,
-        selector: '#t-toast',
-        message: `翻到第${index + 1}个`,
-      });
+      const { index } = e.detail;
+
+      console.log(index);
     },
 
     onDelete(e) {
-      const {
-        detail: { index },
-      } = e;
-      Toast({
+      const { index } = e.detail;
+
+      console.log(index);
+
+      ActionSheet.show({
         context: this,
-        selector: '#t-toast',
-        message: `删除第${index + 1}个`,
+        selector: '#t-action-sheet',
+        description: '要删除这张照片吗？',
+        items: [
+          {
+            label: '删除',
+            color: '#d54941',
+          },
+        ],
       });
     },
 
     onClose(e) {
-      const {
-        detail: { trigger },
-      } = e;
-      if (trigger === 'overlay') {
-        Toast({
-          context: this,
-          selector: '#t-toast',
-          message: '点击overlay关闭',
-        });
-      } else if (trigger === 'button') {
-        Toast({
-          context: this,
-          selector: '#t-toast',
-          message: `点击button关闭`,
-        });
-      }
+      const { trigger } = e.detail;
+
+      console.log(trigger);
       this.setData({
         visible: false,
       });

src/image-viewer/_example/delete/index.json

@@ -2,7 +2,7 @@
   "component": true,
   "usingComponents": {
     "t-button": "tdesign-miniprogram/button/button",
-    "t-toast": "tdesign-miniprogram/toast/toast",
+    "t-action-sheet": "tdesign-miniprogram/action-sheet/action-sheet",
     "t-image-viewer": "tdesign-miniprogram/image-viewer/image-viewer"
   }
 }

src/image-viewer/_example/delete/index.wxml

@@ -1,5 +1,7 @@
-<t-button theme="primary" size="large" variant="outline" block bind:tap="clickHandle">带操作图片预览</t-button>
-<t-toast id="t-toast" />
+<t-button theme="primary" size="large" variant="outline" block bind:tap="onClick">带操作图片预览</t-button>
+
+<t-action-sheet id="t-action-sheet" />
+
 <t-image-viewer
   deleteBtn="{{deleteBtn}}"
   closeBtn="{{closeBtn}}"

src/image-viewer/_example/image-viewer.wxml

@@ -1,7 +1,7 @@
 <view class="demo">
   <view class="demo-title">ImageViewer 图片预览</view>
   <view class="demo-desc">用于图片内容的缩略展示与查看。</view>
-  <t-demo title="01 类型" desc="基础图片预览" padding>
+  <t-demo title="01 组件类型" desc="基础图片预览" padding>
     <base />
   </t-demo>
   <t-demo desc="带操作图片预览" padding>

src/image-viewer/image-viewer.json

@@ -2,7 +2,6 @@
   "component": true,
   "usingComponents": {
     "t-image": "../image/image",
-    "t-icon": "../icon/icon",
-    "t-swiper": "../swiper/swiper"
+    "t-icon": "../icon/icon"
   }
 }