feat(fab): improve auto-collapse demo

packages/components/fab/README.md

@@ -46,6 +46,8 @@ isComponent: true
 
 {{ collapsible }}
 
+该示例会在页面空闲约 3 秒后自动收缩；点击收缩状态的箭头即可展开，并重新开始计时。页面滚动时会重置收缩计时。
+
 ## FAQ
 
 ### 为什么通过 style/customStyle 设置 top/left 调整初试定位后，会使页面内容无法点击以及拖拽异常？

packages/components/fab/__test__/demo.test.js

@@ -14,6 +14,22 @@ describe('Fab', () => {
       const container = simulate.render(id);
       container.attach(document.createElement('parent-wrapper'));
       expect(container.toJSON()).toMatchSnapshot();
+
+      if (demoName !== 'collapsible') return;
+
+      expect(container.data.collapsed).toBe(false);
+
+      container.instance.clearCollapseTimer();
+      jest.useFakeTimers();
+      container.instance.startCollapseTimer();
+      jest.advanceTimersByTime(3000);
+      expect(container.data.collapsed).toBe(true);
+
+      container.instance.onExpand();
+      expect(container.data.collapsed).toBe(false);
+
+      jest.clearAllTimers();
+      jest.useRealTimers();
     });
   });
 });

packages/components/fab/_example/collapsible/index.js

@@ -1,10 +1,19 @@
 import pageScrollMixin from 'tdesign-miniprogram/mixins/page-scroll';
 
+const COLLAPSE_DELAY = 3000;
+
 Component({
   behaviors: [pageScrollMixin()],
   data: {
-    scrolling: false,
-    timer: null,
+    collapsed: false,
+  },
+  lifetimes: {
+    attached() {
+      this.startCollapseTimer();
+    },
+    detached() {
+      this.clearCollapseTimer();
+    },
   },
   methods: {
     handleClick(e) {
@@ -17,15 +26,24 @@ Component({
       console.log('handleDragEnd: ', e);
     },
     onScroll() {
+      this.startCollapseTimer();
+    },
+    onExpand() {
+      if (!this.data.collapsed) return;
+      this.setData({ collapsed: false });
+      this.startCollapseTimer();
+    },
+    clearCollapseTimer() {
+      if (!this.timer) return;
       clearTimeout(this.timer);
-      this.setData({
-        scrolling: true,
-      });
+      this.timer = null;
+    },
+    startCollapseTimer() {
+      this.clearCollapseTimer();
       this.timer = setTimeout(() => {
-        this.setData({
-          scrolling: false,
-        });
-      }, 100);
+        this.setData({ collapsed: true });
+        this.timer = null;
+      }, COLLAPSE_DELAY);
     },
   },
 });

packages/components/fab/_example/collapsible/index.wxml

@@ -1,10 +1,11 @@
 <t-fab
-  customStyle="{{scrolling ? 'right: 0;bottom:64px;' : 'right:16px;bottom:24px'}}"
+  wx:if="{{!collapsed}}"
+  customStyle="right:16px;bottom:24px"
   bind:click="handleClick"
   bind:dragstart="handleDragStart"
   bind:dragend="handleDragEnd"
 >
-  <view wx:if="{{!scrolling}}" class="wrap">
+  <view class="wrap">
     <view class="item">
       <t-icon name="add-circle" size="20" />
       <view class="text">添加</view>
@@ -18,7 +19,8 @@
       <view class="text">分享</view>
     </view>
   </view>
-  <view wx:else class="symbol">
-    <t-icon name="chevron-left" size="20" />
-  </view>
 </t-fab>
+
+<view wx:else class="symbol" bind:tap="onExpand">
+  <t-icon name="chevron-left" size="20" />
+</view>

packages/components/fab/_example/collapsible/index.wxss

@@ -38,6 +38,9 @@
 }
 
 .symbol {
+  position: fixed;
+  right: 0;
+  bottom: 64px;
   width: 32px;
   height: 32px;
   display: flex;