feat: swipe-cell 异步返回开发

hellof2e · Jul 24, 2023 · 5402848 · 5402848
1 parent 95b70d9
commit 5402848
Show file tree

Hide file tree

Showing 5 changed files with 99 additions and 31 deletions.
diff --git a/packages/quarkd/src/swipecell/demo.scss b/packages/quarkd/src/swipecell/demo.scss
@@ -4,8 +4,8 @@
   .right,
   .left {
     height: 100%;
-    border: 1px solid black;
   }
+
   .quark-button {
     height: 100%;
   }

diff --git a/packages/quarkd/src/swipecell/demo.vue b/packages/quarkd/src/swipecell/demo.vue
@@ -1,7 +1,12 @@
 <template>
   <div class="demo no-padding swipe-cell-demo">
     <h2>{{ translate("CellTitle.basicUsage") }}</h2>
-    <quark-swipe-cell @click="onClick" @open="onOpen" @close="onClose">
+    <quark-swipe-cell
+      ref="swipeCellRef"
+      @click="onClick"
+      @open="onOpen"
+      @close="onClose"
+    >
       <quark-cell :title="translate('title')" :desc="translate('desc')" />
       <div class="left" slot="left">
         <quark-button type="primary" shape="square" @click="leftClick">
@@ -26,15 +31,15 @@
 import { createComponent } from "@/utils/create";
 const { createDemo, translate } = createComponent("cell");
 import { useTranslate } from "@/sites/assets/util/useTranslate";
-import { ref, onBeforeMount } from "vue";
+import { ref, onBeforeMount, onMounted } from "vue";
 
 export default createDemo({
   setup() {
     const onClick = ({ detail }) => {
-      console.log(1111, detail);
+      // console.log(1111, detail);
     };
     const leftClick = () => {
-      console.log("left click");
+      // console.log("left click");
     };
     onBeforeMount(() => {
       useTranslate({
@@ -75,18 +80,37 @@ export default createDemo({
     });
 
     const onOpen = ({ detail }) => {
-      console.log("opened", detail.position);
+      // console.log("opened", detail.position);
     };
 
     const onClose = ({ detail }) => {
-      console.log("closed", detail.position);
+      // console.log("closed", detail.position);
     };
+
+    const swipeCellRef = ref();
+    onMounted(() => {
+      swipeCellRef.value.setBeforeClose((position) => {
+        switch (position) {
+          case "left":
+          case "cell":
+          case "outside":
+            return true;
+          case "right":
+            return new Promise((resolve) => {
+              setTimeout(() => {
+                resolve(true);
+              }, 500);
+            });
+        }
+      });
+    });
     return {
       translate,
       onClick,
       leftClick,
       onOpen,
       onClose,
+      swipeCellRef,
     };
   },
 });

diff --git a/packages/quarkd/src/swipecell/index.tsx b/packages/quarkd/src/swipecell/index.tsx
@@ -9,13 +9,15 @@ import "@quarkd/icons/lib/arrow-right";
 import style from "./style.css";
 import { Touch } from "../../utils/touch";
 import { clamp } from "../../utils";
-import { getElementRect } from "../../utils/util";
+import { getRect, isPromise } from "../../utils/util";
 
 export interface Props {
   disabled?: boolean;
 }
 
-type beforeClose = Promise<boolean> | boolean | undefined | void;
+type beforeClose = (
+  ...args: any[]
+) => Promise<boolean> | boolean | undefined | void;
 
 const touch = new Touch();
 
@@ -27,16 +29,25 @@ class QuarkSwipeCell extends QuarkElement {
   @property({ type: Boolean })
   disabled = false;
 
+  @property({
+    type: Number,
+    attribute: "left-width",
+  })
+  leftWidth = 0;
+
+  @property({
+    type: Number,
+    attribute: "right-width",
+  })
+  rightWidth = 0;
+
   root = createRef();
   leftRef = createRef();
   rightRef = createRef();
   defaultSlotRef = createRef();
   leftSlotRef = createRef();
   rightSlotRef = createRef();
 
-  letfWidth = 0;
-  rightWidth = 0;
-
   @state()
   offset = 0;
 
@@ -46,10 +57,17 @@ class QuarkSwipeCell extends QuarkElement {
   @state()
   opened = false;
 
+  @state()
+  leftWrapWidth = 0;
+
+  @state()
+  rightWrapWidth = 0;
+
   startOffset = 0;
+
   lockClick = false;
 
-  beforeClose: beforeClose = undefined;
+  beforeClose: beforeClose | undefined = undefined;
 
   setBeforeClose(fn: beforeClose) {
     this.beforeClose = fn;
@@ -76,8 +94,8 @@ class QuarkSwipeCell extends QuarkElement {
 
       this.offset = clamp(
         deltaX + this.startOffset,
-        -this.rightWidth,
-        this.letfWidth
+        -this.rightWrapWidth,
+        this.leftWrapWidth
       );
     }
   };
@@ -94,7 +112,7 @@ class QuarkSwipeCell extends QuarkElement {
   };
 
   open(side) {
-    this.offset = side === "left" ? this.letfWidth : -this.rightWidth;
+    this.offset = side === "left" ? this.leftWrapWidth : -this.rightWrapWidth;
     if (!this.opened) {
       this.opened = true;
       this.$emit("open", {
@@ -117,7 +135,7 @@ class QuarkSwipeCell extends QuarkElement {
 
   toggle = (side: "left" | "right") => {
     const offset = Math.abs(this.offset);
-    const width = side === "left" ? this.letfWidth : this.rightWidth;
+    const width = side === "left" ? this.leftWrapWidth : this.rightWrapWidth;
     const THRESHOLD = 0.15;
     const threshold = this.opened ? 1 - THRESHOLD : THRESHOLD;
 
@@ -128,10 +146,25 @@ class QuarkSwipeCell extends QuarkElement {
     }
   };
 
-  onClick = (position = "outside") => {
+  onClick = async (position = "outside") => {
     this.$emit("click", { detail: { position } });
+
     if (this.opened && !this.lockClick) {
-      this.close(position);
+      if (this.beforeClose) {
+        const returnVal = this.beforeClose(position);
+        if (isPromise(returnVal)) {
+          returnVal.then((value) => {
+            if (value) this.close(position);
+          });
+        } else if (returnVal) {
+          console.log("returnVal", returnVal);
+          this.close(position);
+        } else {
+          console.log("returnVal else", returnVal);
+        }
+      } else {
+        this.close(position);
+      }
     }
   };
 
@@ -177,11 +210,9 @@ class QuarkSwipeCell extends QuarkElement {
         passive: false,
       }
     );
-    console.log(getElementRect(this.leftRef.current));
-    console.log(this.leftRef.current.offsetWidth);
-    console.log(this.leftRef.current.clientWidth);
-    this.letfWidth = this.leftRef.current.offsetWidth;
-    this.rightWidth = this.rightRef.current.offsetWidth;
+    this.leftWrapWidth = this.leftWidth || getRect(this.leftRef.current).width;
+    this.rightWrapWidth =
+      this.rightWidth || getRect(this.rightRef.current).width;
   }
 
   componentWillUnmount(): void {

diff --git a/packages/quarkd/utils/util.ts b/packages/quarkd/utils/util.ts
@@ -1,5 +1,3 @@
-import { QuarkElement } from "quarkc";
-
 export const objectToString = Object.prototype.toString;
 export const toTypeString = (value: unknown): string =>
   objectToString.call(value);
@@ -15,6 +13,7 @@ export const isSet = (val: unknown): val is Set<any> =>
   toTypeString(val) === "[object Set]";
 
 export const isDate = (val: unknown): val is Date => val instanceof Date;
+
 export const isFunction = (val: unknown): val is Function =>
   typeof val === "function";
 export const isString = (val: unknown): val is string =>
@@ -79,7 +78,7 @@ export const pxToVw = (
   return value;
 };
 
-export const getElementRect = (el: HTMLElement) => {
+export const getRect = (el: HTMLElement) => {
   if (el?.getBoundingClientRect) {
     return el.getBoundingClientRect();
   }

diff --git a/yarn.lock b/yarn.lock
@@ -950,6 +950,13 @@
   dependencies:
     regenerator-runtime "^0.13.4"
 
+"@babel/runtime@^7.22.5":
+  version "7.22.6"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.22.6.tgz#57d64b9ae3cff1d67eb067ae117dac087f5bd438"
+  integrity sha512-wDb5pWm4WDdF6LFUde3Jl8WzPA+3ZbxYqkC6xAXuD3irdEHN1k0NfTRrJD8ZD378SJ61miMLCqIOXYhd8x+AJQ==
+  dependencies:
+    regenerator-runtime "^0.13.11"
+
 "@babel/standalone@^7.17.11":
   version "7.18.9"
   resolved "https://registry.npmjs.org/@babel%2fstandalone/-/standalone-7.18.9.tgz"
@@ -10159,10 +10166,12 @@ qs@~6.5.2:
   resolved "https://registry.npmjs.org/qs/-/qs-6.5.3.tgz"
   integrity sha512-qxXIEh4pCGfHICj1mAJQ2/2XVZkjCDTcEgfoSQxc/fYivUZxTkk7L3bDBJSoNrEzXI17oUO5Dp07ktqE5KzczA==
 
-quarkc@^1.0.17:
-  version "1.0.17"
-  resolved "https://registry.yarnpkg.com/quarkc/-/quarkc-1.0.17.tgz#5e465e5fe34643a79404ba3cc460e407a05caaf3"
-  integrity sha512-i01rlTEWA9xrImj/3HXNnKCtzC9i24q8EHF7FcZwKUvk1cGl9tx/GpUOebYsQoGAaImNIgJ3VR8yymLOuipa8Q==
+quarkc@^1.0.5:
+  version "1.0.39"
+  resolved "https://registry.yarnpkg.com/quarkc/-/quarkc-1.0.39.tgz#e65aadd3d83bf685c9cafa915fdd9f8c9c78e0fd"
+  integrity sha512-dRWogV8BjJlaKjDzYg67ggCWukQ5asPssnIofhGXKHd1Fx2nnb7bv766lN1DyUjk4tKKVRZN0vMgq3o5eZa9PA==
+  dependencies:
+    "@babel/runtime" "^7.22.5"
 
 queue-microtask@^1.2.2:
   version "1.2.3"
@@ -10362,6 +10371,11 @@ regenerate@^1.4.2:
   resolved "https://registry.npmjs.org/regenerate/-/regenerate-1.4.2.tgz"
   integrity sha1-uTRtiCfo9aMve6KWN9OYtpAUhIo=
 
+regenerator-runtime@^0.13.11:
+  version "0.13.11"
+  resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz#f6dca3e7ceec20590d07ada785636a90cdca17f9"
+  integrity sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg==
+
 regenerator-runtime@^0.13.3, regenerator-runtime@^0.13.4, regenerator-runtime@^0.13.7, regenerator-runtime@^0.13.9:
   version "0.13.9"
   resolved "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.9.tgz"