feat(Fab): support y-bounds props (#3125)

* feat(Fab): support y-edge props * feat(Fab): update demo * feat(Fab): support y-edge props * feat(Fab): update demo * chore: y-edge is renamed to y-bounds * fix(Fab): init draggable mode bottom value --------- Co-authored-by: jarmywang <[email protected]>
Tencent · Sep 11, 2024 · b564c03 · b564c03
1 parent 6c4f8ba
commit b564c03
Show file tree

Hide file tree

Showing 8 changed files with 52 additions and 16 deletions.
diff --git a/src/fab/README.en-US.md b/src/fab/README.en-US.md
@@ -6,13 +6,14 @@
 
 name | type | default | description | required
 -- | -- | -- | -- | --
-style | String | right: 16px; bottom: 32px; | \- | N
+style | Object | - | CSS(Cascading Style Sheets) | N
 custom-style | Object | - | CSS(Cascading Style Sheets)，used to set style on virtual component | N
 button-props | Object | - | Typescript：`ButtonProps`，[Button API Documents](./button?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/fab/type.ts) | N
-draggable | Boolean / String | false | \- | N
+draggable | String / Boolean | false | Typescript：`boolean \| FabDirectionEnum ` `type FabDirectionEnum = 'all' \| 'vertical' \| 'horizontal'`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/fab/type.ts) | N
 icon | String | - | \- | N
 text | String | - | \- | N
 using-custom-navbar | Boolean | false | \- | N
+y-bounds | Array | - | Typescript：`Array<string \| number>` | N
 
 ### Fab Events
 

diff --git a/src/fab/README.md b/src/fab/README.md
@@ -51,13 +51,14 @@ isComponent: true
 
 名称 | 类型 | 默认值 | 描述 | 必传
 -- | -- | -- | -- | --
-style | String | right: 16px; bottom: 32px; | 悬浮按钮的样式，常用于调整位置（即将废弃，建议使用 `style`） | N
+style | Object | - | 样式 | N
 custom-style | Object | - | 样式，一般用于开启虚拟化组件节点场景 | N
 button-props | Object | - | 透传至 Button 组件。TS 类型：`ButtonProps`，[Button API Documents](./button?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/fab/type.ts) | N
-draggable | Boolean / String | false | `true` / `'all'`可拖动<br>`'vertical'`可垂直拖动<br>`'horizontal'`可水平拖动<br>`false`禁止拖动 | N
+draggable | String / Boolean | false | 是否可拖拽。`true` / `'all'`可拖动<br>`'vertical'`可垂直拖动<br>`'horizontal'`可水平拖动<br>`false`禁止拖动。TS 类型：`boolean \| FabDirectionEnum ` `type FabDirectionEnum = 'all' \| 'vertical' \| 'horizontal'`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/fab/type.ts) | N
 icon | String | - | 图标 | N
 text | String | - | 文本内容 | N
 using-custom-navbar | Boolean | false | 是否使用了自定义导航栏 | N
+y-bounds | Array | - | 设置垂直方向边界限制，示例：[48, 48] 或 ['96rpx', 80]。TS 类型：`Array<string \| number>` | N
 
 ### Fab Events
 

diff --git a/src/fab/__test__/__snapshots__/demo.test.js.snap b/src/fab/__test__/__snapshots__/demo.test.js.snap
@@ -34,6 +34,12 @@ exports[`Fab Fab draggable demo works fine 1`] = `
     icon="gesture-press"
     text="拖我"
     usingCustomNavbar="{{true}}"
+    yBounds="{{
+      Array [
+        0,
+        32,
+      ]
+    }}"
     bind:click="handleClick"
     bind:move="handleMove"
   />

diff --git a/src/fab/_example/draggable/index.wxml b/src/fab/_example/draggable/index.wxml
@@ -6,4 +6,5 @@
   aria-label="增加"
   usingCustomNavbar
   draggable
+  y-bounds="{{[0, 32]}}"
 ></t-fab>
diff --git a/src/fab/draggable/draggable.ts b/src/fab/draggable/draggable.ts
@@ -58,7 +58,11 @@ export default class Draggable extends SuperComponent {
 
     async computedRect() {
       this.rect = { right: 0, bottom: 0, width: 0, height: 0 };
-      this.rect = await getRect(this, `.${this.data.classPrefix}`);
+      try {
+        this.rect = await getRect(this, `.${this.data.classPrefix}`);
+      } catch (e) {
+        // ignore reject
+      }
     },
   };
 }
diff --git a/src/fab/fab.ts b/src/fab/fab.ts
@@ -2,6 +2,7 @@ import { SuperComponent, wxComponent } from '../common/src/index';
 import config from '../common/config';
 import props from './props';
 import useCustomNavbar from '../mixins/using-custom-navbar';
+import { unitConvert } from '../common/utils';
 
 const systemInfo = wx.getSystemInfoSync();
 const { prefix } = config;
@@ -29,7 +30,7 @@ export default class Fab extends SuperComponent {
   };
 
   observers = {
-    'buttonProps.**, icon, text, ariaLabel'() {
+    'buttonProps.**, icon, text, ariaLabel, yBounds'() {
       this.setData(
         {
           buttonData: {
@@ -51,22 +52,28 @@ export default class Fab extends SuperComponent {
       this.triggerEvent('click', e);
     },
     onMove(e) {
+      const { yBounds } = this.properties;
       const { distanceTop } = this.data;
 
       const { x, y, rect } = e.detail;
       const maxX = systemInfo.windowWidth - rect.width; // 父容器宽度 - 拖动元素宽度
-      const maxY = systemInfo.windowHeight - distanceTop - rect.height; // 父容器高度 - 拖动元素高度
+      const maxY = systemInfo.windowHeight - Math.max(distanceTop, unitConvert(yBounds[0])) - rect.height; // 父容器高度 - 拖动元素高度
 
       const right = Math.max(0, Math.min(x, maxX));
-      const bottom = Math.max(0, Math.min(y, maxY));
+      const bottom = Math.max(0, unitConvert(yBounds[1]), Math.min(y, maxY));
       this.setData({
         moveStyle: `right: ${right}px; bottom: ${bottom}px;`,
       });
     },
     computedSize() {
       if (!this.properties.draggable) return;
       const insChild = this.selectComponent('#draggable');
-      insChild.computedRect(); // button更新时，重新获取其尺寸
+      // button更新时，重新获取其尺寸
+      if (this.properties?.yBounds?.[1]) {
+        this.setData({ moveStyle: `bottom: ${unitConvert(this.properties.yBounds[1])}px` }, insChild.computedRect);
+      } else {
+        insChild.computedRect();
+      }
     },
   };
 }
diff --git a/src/fab/props.ts b/src/fab/props.ts
@@ -10,10 +10,9 @@ const props: TdFabProps = {
   buttonProps: {
     type: Object,
   },
-  /** 是否可移动 */
+  /** 是否可拖拽。`true` / `'all'`可拖动<br>`'vertical'`可垂直拖动<br>`'horizontal'`可水平拖动<br>`false`禁止拖动 */
   draggable: {
-    type: Boolean,
-    optionalTypes: [String],
+    type: null,
     value: false,
   },
   /** 图标 */
@@ -31,6 +30,15 @@ const props: TdFabProps = {
     type: String,
     value: '',
   },
+  /** 是否使用了自定义导航栏 */
+  usingCustomNavbar: {
+    type: Boolean,
+    value: false,
+  },
+  /** 设置垂直方向边界限制，示例：[48, 48] 或 ['96rpx', 80] */
+  yBounds: {
+    type: Array,
+  },
 };
 
 export default props;
diff --git a/src/fab/type.ts b/src/fab/type.ts
@@ -15,13 +15,12 @@ export interface TdFabProps {
     value?: ButtonProps;
   };
   /**
-   * 是否可移动
+   * 是否可拖拽。`true` / `'all'`可拖动<br>`'vertical'`可垂直拖动<br>`'horizontal'`可水平拖动<br>`false`禁止拖动
    * @default false
    */
   draggable?: {
-    type: BooleanConstructor;
-    optionalTypes: Array<StringConstructor>;
-    value?: boolean | 'all' | 'vertical' | 'horizontal';
+    type: null;
+    value?: boolean | FabDirectionEnum;
   };
   /**
    * 图标
@@ -55,4 +54,13 @@ export interface TdFabProps {
     type: BooleanConstructor;
     value?: boolean;
   };
+  /**
+   * 设置垂直方向边界限制，示例：[48, 48] 或 ['96rpx', 80]
+   */
+  yBounds?: {
+    type: ArrayConstructor;
+    value?: Array<string | number>;
+  };
 }
+
+export type FabDirectionEnum = 'all' | 'vertical' | 'horizontal';