refactor(rect): remove getRect behavior (#3795)

packages/collapse-item/index.ts

@@ -1,3 +1,4 @@
+import { getRect } from '../common/utils';
 import { VantComponent } from '../common/component';
 
 VantComponent({
@@ -70,11 +71,9 @@ VantComponent({
 
     updateStyle(expanded: boolean) {
       const { inited } = this;
-      this.getRect('.van-collapse-item__content')
-        .then(
-          (rect: WechatMiniprogram.BoundingClientRectCallbackResult) =>
-            rect.height
-        )
+      getRect
+        .call(this, '.van-collapse-item__content')
+        .then((rect) => rect.height)
         .then((height: number) => {
           const { animation } = this;
 

packages/dropdown-menu/index.ts

@@ -1,5 +1,5 @@
 import { VantComponent } from '../common/component';
-import { addUnit } from '../common/utils';
+import { addUnit, getRect } from '../common/utils';
 
 type TrivialInstance = WechatMiniprogram.Component.TrivialInstance;
 let ARRAY: TrivialInstance[] = [];
@@ -101,23 +101,20 @@ VantComponent({
     getChildWrapperStyle() {
       const { zIndex, direction } = this.data;
 
-      return this.getRect('.van-dropdown-menu').then(
-        (rect: WechatMiniprogram.BoundingClientRectCallbackResult) => {
-          const { top = 0, bottom = 0 } = rect;
-          const offset =
-            direction === 'down' ? bottom : this.windowHeight - top;
+      return getRect.call(this, '.van-dropdown-menu').then((rect) => {
+        const { top = 0, bottom = 0 } = rect;
+        const offset = direction === 'down' ? bottom : this.windowHeight - top;
 
-          let wrapperStyle = `z-index: ${zIndex};`;
+        let wrapperStyle = `z-index: ${zIndex};`;
 
-          if (direction === 'down') {
-            wrapperStyle += `top: ${addUnit(offset)};`;
-          } else {
-            wrapperStyle += `bottom: ${addUnit(offset)};`;
-          }
-
-          return wrapperStyle;
+        if (direction === 'down') {
+          wrapperStyle += `top: ${addUnit(offset)};`;
+        } else {
+          wrapperStyle += `bottom: ${addUnit(offset)};`;
         }
-      );
+
+        return wrapperStyle;
+      });
     },
 
     onTitleTap(event: WechatMiniprogram.TouchEvent) {

packages/index-anchor/index.ts

@@ -1,3 +1,4 @@
+import { getRect } from '../common/utils';
 import { VantComponent } from '../common/component';
 
 VantComponent({
@@ -20,18 +21,12 @@ VantComponent({
 
   methods: {
     scrollIntoView(scrollTop) {
-      this.getBoundingClientRect().then(
-        (rect: WechatMiniprogram.BoundingClientRectCallbackResult) => {
-          wx.pageScrollTo({
-            duration: 0,
-            scrollTop: scrollTop + rect.top - this.parent.data.stickyOffsetTop,
-          });
-        }
-      );
-    },
-
-    getBoundingClientRect() {
-      return this.getRect('.van-index-anchor-wrapper');
+      getRect.call(this, '.van-index-anchor-wrapper').then((rect) => {
+        wx.pageScrollTo({
+          duration: 0,
+          scrollTop: scrollTop + rect.top - this.parent.data.stickyOffsetTop,
+        });
+      });
     },
   },
 });

packages/mixins/basic.ts

@@ -13,23 +13,5 @@ export const basic = Behavior({
 
       return new Promise((resolve) => wx.nextTick(resolve));
     },
-
-    getRect(selector: string, all: boolean) {
-      return new Promise((resolve) => {
-        wx.createSelectorQuery()
-          .in(this)
-          [all ? 'selectAll' : 'select'](selector)
-          .boundingClientRect((rect) => {
-            if (all && Array.isArray(rect) && rect.length) {
-              resolve(rect);
-            }
-
-            if (!all && rect) {
-              resolve(rect);
-            }
-          })
-          .exec();
-      });
-    },
   },
 });

packages/rate/index.ts

@@ -1,3 +1,4 @@
+import { getAllRect } from '../common/utils';
 import { VantComponent } from '../common/component';
 import { canIUseModel } from '../common/version';
 
@@ -82,19 +83,17 @@ VantComponent({
 
       const { clientX } = event.touches[0];
 
-      this.getRect('.van-rate__icon', true).then(
-        (list: WechatMiniprogram.BoundingClientRectCallbackResult[]) => {
-          const target = list
-            .sort((item) => item.right - item.left)
-            .find((item) => clientX >= item.left && clientX <= item.right);
-          if (target != null) {
-            this.onSelect({
-              ...event,
-              currentTarget: target,
-            });
-          }
+      getAllRect.call(this, '.van-rate__icon').then((list) => {
+        const target = list
+          .sort((item) => item.right - item.left)
+          .find((item) => clientX >= item.left && clientX <= item.right);
+        if (target != null) {
+          this.onSelect({
+            ...event,
+            currentTarget: target,
+          });
         }
-      );
+      });
     },
   },
 });

packages/slider/index.ts

@@ -1,6 +1,7 @@
 import { VantComponent } from '../common/component';
 import { touch } from '../mixins/touch';
 import { canIUseModel } from '../common/version';
+import { getRect } from '../common/utils';
 
 VantComponent({
   mixins: [touch],
@@ -60,13 +61,11 @@ VantComponent({
       this.touchMove(event);
       this.dragStatus = 'draging';
 
-      this.getRect('.van-slider').then(
-        (rect: WechatMiniprogram.BoundingClientRectCallbackResult) => {
-          const diff = (this.deltaX / rect.width) * 100;
-          this.newValue = this.startValue + diff;
-          this.updateValue(this.newValue, false, true);
-        }
-      );
+      getRect.call(this, '.van-slider').then((rect) => {
+        const diff = (this.deltaX / rect.width) * 100;
+        this.newValue = this.startValue + diff;
+        this.updateValue(this.newValue, false, true);
+      });
     },
 
     onTouchEnd() {
@@ -83,13 +82,11 @@ VantComponent({
 
       const { min } = this.data;
 
-      this.getRect('.van-slider').then(
-        (rect: WechatMiniprogram.BoundingClientRectCallbackResult) => {
-          const value =
-            ((event.detail.x - rect.left) / rect.width) * this.getRange() + min;
-          this.updateValue(value, true);
-        }
-      );
+      getRect.call(this, '.van-slider').then((rect) => {
+        const value =
+          ((event.detail.x - rect.left) / rect.width) * this.getRange() + min;
+        this.updateValue(value, true);
+      });
     },
 
     updateValue(value: number, end: boolean, drag: boolean) {

packages/sticky/index.ts

@@ -1,10 +1,9 @@
+import { getRect } from '../common/utils';
 import { VantComponent } from '../common/component';
 import { pageScrollMixin } from '../mixins/page-scroll';
 
 const ROOT_ELEMENT = '.van-sticky';
 
-type BoundingClientRect = WechatMiniprogram.BoundingClientRectCallbackResult;
-
 VantComponent({
   props: {
     zIndex: {
@@ -66,29 +65,30 @@ VantComponent({
       this.scrollTop = scrollTop || this.scrollTop;
 
       if (typeof container === 'function') {
-        Promise.all([this.getRect(ROOT_ELEMENT), this.getContainerRect()]).then(
-          ([root, container]: BoundingClientRect[]) => {
-            if (offsetTop + root.height > container.height + container.top) {
-              this.setDataAfterDiff({
-                fixed: false,
-                transform: container.height - root.height,
-              });
-            } else if (offsetTop >= root.top) {
-              this.setDataAfterDiff({
-                fixed: true,
-                height: root.height,
-                transform: 0,
-              });
-            } else {
-              this.setDataAfterDiff({ fixed: false, transform: 0 });
-            }
+        Promise.all([
+          getRect.call(this, ROOT_ELEMENT),
+          this.getContainerRect(),
+        ]).then(([root, container]) => {
+          if (offsetTop + root.height > container.height + container.top) {
+            this.setDataAfterDiff({
+              fixed: false,
+              transform: container.height - root.height,
+            });
+          } else if (offsetTop >= root.top) {
+            this.setDataAfterDiff({
+              fixed: true,
+              height: root.height,
+              transform: 0,
+            });
+          } else {
+            this.setDataAfterDiff({ fixed: false, transform: 0 });
           }
-        );
+        });
 
         return;
       }
 
-      this.getRect(ROOT_ELEMENT).then((root: BoundingClientRect) => {
+      getRect.call(this, ROOT_ELEMENT).then((root) => {
         if (offsetTop >= root.top) {
           this.setDataAfterDiff({ fixed: true, height: root.height });
           this.transform = 0;

packages/tree-select/index.ts

@@ -70,7 +70,7 @@ VantComponent({
       const { items, mainActiveIndex } = this.data;
       const { children = [] } = items[mainActiveIndex] || {};
 
-      return this.set({ subItems: children });
+      this.setData({ subItems: children });
     },
   },
 });