feat: swipe 组件对外暴露 open 和 close 方法，优化 taro 版本下 width 的计算时机 (#714)

* feat: swipe 组件对外暴露 open 和 close 方法，优化 taro 版本下 width 的计算时机

* feat: swipe 组件对外暴露 open 和 close 方法，优化 taro 版本下 width 的计算时机

src/packages/checkbox/doc.en-US.md

@@ -437,9 +437,9 @@ export default CheckboxGroupOptions;
 
 ## Checkbox.Group API
 
-| 方法名 | 说明 | 参数 |
-|----- | ----- | ----- |
-| toggleAll | Select all / cancel | `f`,`true`,to select all，`false`,cancel the selection |
+| API           | Description | Callback parameters |
+|---------------| ----- | ----- |
+| toggleAll     | Select all / cancel | `f`,`true`,to select all，`false`,cancel the selection |
 | toggleReverse | Reverse selection | - |
 
 ## Theming

src/packages/swipe/demo.taro.tsx

 import React, { useRef, useState } from 'react'
+import Taro from '@tarojs/taro'
 import { useTranslate } from '@/sites/assets/locale/taro'
 import {
   Button,
@@ -9,7 +10,6 @@ import {
   Swipe,
 } from '@/packages/nutui.react.taro'
 import Header from '@/sites/components/header'
-import Taro from '@tarojs/taro'
 
 type TSwipeDemo = {
   title1: string
@@ -17,6 +17,9 @@ type TSwipeDemo = {
   title3: string
   title4: string
   title5: string
+  title6: string
+  openOrClose: string
+  title7: string
   click: string
   sure: string
   del: string
@@ -26,6 +29,7 @@ type TSwipeDemo = {
   collect: string
   open: string
   close: string
+  closeLeft: string
   tips: string
   cart: string
   leftDel: string
@@ -42,6 +46,9 @@ const SwipeDemo = () => {
       title3: '事件监听',
       title4: '非同步控制',
       title5: '自定义內容',
+      title6: '通过实例方法控制',
+      openOrClose: '点击下方按钮打开或关闭',
+      title7: '点击关闭',
       click: '点击',
       sure: '确定',
       del: '删除',
@@ -51,6 +58,7 @@ const SwipeDemo = () => {
       collect: '收藏',
       open: '打开',
       close: '关闭',
+      closeLeft: '点击右侧按钮关闭',
       tips: '提示',
       cart: '加入购物车',
       leftDel: '左滑删除',
@@ -64,6 +72,9 @@ const SwipeDemo = () => {
       title3: '事件監聽',
       title4: '非同步控制',
       title5: '自定義內容',
+      title6: '通過實例方法控制',
+      openOrClose: '點擊下方按鈕打開或關閉',
+      title7: '点击关闭',
       click: '點擊',
       sure: '確定',
       del: '刪除',
@@ -73,6 +84,7 @@ const SwipeDemo = () => {
       collect: '收藏',
       open: '打開',
       close: '關閉',
+      closeLeft: '點擊右側按鈕關閉',
       tips: '提示',
       cart: '加入購物車',
       leftDel: '左滑刪除',
@@ -86,6 +98,9 @@ const SwipeDemo = () => {
       title3: 'Event monitoring',
       title4: 'Asynchronous control',
       title5: 'Custom content',
+      title6: 'Control via instance method',
+      openOrClose: 'Click the button below',
+      title7: 'Click to close',
       click: 'click',
       sure: 'ok',
       del: 'delete',
@@ -95,6 +110,7 @@ const SwipeDemo = () => {
       collect: 'collect',
       open: 'open',
       close: 'close',
+      closeLeft: 'Click the right button to close',
       tips: 'tips',
       cart: 'add to shopping cart',
       leftDel: 'left slide delete',
@@ -108,6 +124,9 @@ const SwipeDemo = () => {
       title3: 'Monitor waktu',
       title4: 'kontrol asinkron',
       title5: 'isi suai',
+      title6: 'kontrol melalui metode instance',
+      openOrClose: 'Klik tombol di bawah untuk membuka atau menutup',
+      title7: 'klik untuk menutup',
       click: 'klik',
       sure: 'OK',
       del: 'Hapus',
@@ -117,6 +136,7 @@ const SwipeDemo = () => {
       collect: 'kumpulkan',
       open: 'buka',
       close: 'tutup',
+      closeLeft: 'Klik tombol kanan untuk menutup',
       tips: 'tip',
       cart: 'tambah ke kereta belanja',
       leftDel: 'padam slide kiri',
@@ -134,7 +154,6 @@ const SwipeDemo = () => {
 
   const refDom = useRef<any>(null)
   const handleChange = () => {
-    // Toast.text(translated.click)
     toastShow(translated.click)
   }
   const beforeClose = (postion: string) => {
@@ -149,10 +168,12 @@ const SwipeDemo = () => {
   }
 
   const handleClose = () => {
-    // Toast.text('close')
     toastShow('close')
   }
 
+  const closeRef = useRef(null)
+  const openRef = useRef(null)
+
   return (
     <>
       <Header />
@@ -170,6 +191,37 @@ const SwipeDemo = () => {
         >
           <Cell title={translated.leftDel} roundRadius={0} />
         </Swipe>
+        <h2>{translated.title6}</h2>
+        <Swipe
+          ref={openRef}
+          rightAction={
+            <Button shape="square" type="danger">
+              {translated.del}
+            </Button>
+          }
+        >
+          <Cell title={translated.openOrClose} roundRadius={0} />
+        </Swipe>
+        <Button onClick={() => (openRef.current as any)?.open()}>
+          {translated.open}
+        </Button>
+        <Button onClick={() => (openRef.current as any)?.close()}>
+          {translated.close}
+        </Button>
+        <h2>{translated.title7}</h2>
+        <Swipe
+          ref={closeRef}
+          rightAction={
+            <Button shape="square" type="danger">
+              {translated.del}
+            </Button>
+          }
+          onActionClick={() => {
+            ;(closeRef.current as any)?.close()
+          }}
+        >
+          <Cell title={translated.closeLeft} roundRadius={0} />
+        </Swipe>
         <h2>{translated.title2}</h2>
         <Swipe
           rightAction={

src/packages/swipe/demo.tsx

@@ -13,6 +13,9 @@ type TSwipeDemo = {
   title3: string
   title4: string
   title5: string
+  title6: string
+  openOrClose: string
+  title7: string
   click: string
   sure: string
   del: string
@@ -22,6 +25,7 @@ type TSwipeDemo = {
   collect: string
   open: string
   close: string
+  closeLeft: string
   tips: string
   cart: string
   leftDel: string
@@ -38,6 +42,9 @@ const SwipeDemo = () => {
       title3: '事件监听',
       title4: '非同步控制',
       title5: '自定义內容',
+      title6: '通过实例方法控制',
+      openOrClose: '点击下方按钮打开或关闭',
+      title7: '点击关闭',
       click: '点击',
       sure: '确定',
       del: '删除',
@@ -47,6 +54,7 @@ const SwipeDemo = () => {
       collect: '收藏',
       open: '打开',
       close: '关闭',
+      closeLeft: '点击右侧按钮关闭',
       tips: '提示',
       cart: '加入购物车',
       leftDel: '左滑删除',
@@ -60,6 +68,9 @@ const SwipeDemo = () => {
       title3: '事件監聽',
       title4: '非同步控制',
       title5: '自定義內容',
+      title6: '通過實例方法控制',
+      openOrClose: '點擊下方按鈕打開或關閉',
+      title7: '点击关闭',
       click: '點擊',
       sure: '確定',
       del: '刪除',
@@ -69,6 +80,7 @@ const SwipeDemo = () => {
       collect: '收藏',
       open: '打開',
       close: '關閉',
+      closeLeft: '點擊右側按鈕關閉',
       tips: '提示',
       cart: '加入購物車',
       leftDel: '左滑刪除',
@@ -82,6 +94,9 @@ const SwipeDemo = () => {
       title3: 'Event monitoring',
       title4: 'Asynchronous control',
       title5: 'Custom content',
+      title6: 'Control via instance method',
+      openOrClose: 'Click the button below',
+      title7: 'Click to close',
       click: 'click',
       sure: 'ok',
       del: 'delete',
@@ -91,6 +106,7 @@ const SwipeDemo = () => {
       collect: 'collect',
       open: 'open',
       close: 'close',
+      closeLeft: 'Click the right button to close',
       tips: 'tips',
       cart: 'add to shopping cart',
       leftDel: 'left slide delete',
@@ -104,6 +120,9 @@ const SwipeDemo = () => {
       title3: 'Monitor waktu',
       title4: 'kontrol asinkron',
       title5: 'isi suai',
+      title6: 'kontrol melalui metode instance',
+      openOrClose: 'Klik tombol di bawah untuk membuka atau menutup',
+      title7: 'klik untuk menutup',
       click: 'klik',
       sure: 'OK',
       del: 'Hapus',
@@ -113,6 +132,7 @@ const SwipeDemo = () => {
       collect: 'kumpulkan',
       open: 'buka',
       close: 'tutup',
+      closeLeft: 'Klik tombol kanan untuk menutup',
       tips: 'tip',
       cart: 'tambah ke kereta belanja',
       leftDel: 'padam slide kiri',
@@ -141,6 +161,9 @@ const SwipeDemo = () => {
     Toast.text('close')
   }
 
+  const closeRef = useRef(null)
+  const openRef = useRef(null)
+
   return (
     <>
       <div className="demo">
@@ -157,6 +180,37 @@ const SwipeDemo = () => {
         >
           <Cell title={translated.leftDel} roundRadius={0} />
         </Swipe>
+        <h2>{translated.title6}</h2>
+        <Swipe
+          ref={openRef}
+          rightAction={
+            <Button shape="square" type="danger">
+              {translated.del}
+            </Button>
+          }
+        >
+          <Cell title={translated.openOrClose} roundRadius={0} />
+        </Swipe>
+        <Button onClick={() => (openRef.current as any)?.open()}>
+          {translated.open}
+        </Button>
+        <Button onClick={() => (openRef.current as any)?.close()}>
+          {translated.close}
+        </Button>
+        <h2>{translated.title7}</h2>
+        <Swipe
+          ref={closeRef}
+          rightAction={
+            <Button shape="square" type="danger">
+              {translated.del}
+            </Button>
+          }
+          onActionClick={() => {
+            ;(closeRef.current as any)?.close()
+          }}
+        >
+          <Cell title={translated.closeLeft} roundRadius={0} />
+        </Swipe>
         <h2>{translated.title2}</h2>
         <Swipe
           rightAction={

src/packages/swipe/doc.en-US.md

@@ -31,7 +31,70 @@ const App = () => {
         </Button>
       }
     >
-      <cell title= "left slide delete" roundradius={0} / >
+      <cell title= "left slide delete" />
+    </Swipe>
+  </>
+}
+export default App;
+```
+:::
+
+
+### Control via instance method
+
+:::demo
+```tsx
+import React from "react";
+import { Swipe, Cell, Button } from '@nutui/nutui-react';
+
+const App = () => {
+  const closeRef = useRef(null)
+  const openRef = useRef(null)
+  return <>
+    <Swipe
+      ref={openRef}
+      rightAction={
+        <Button shape="square" type="danger">
+          Delete
+        </Button>
+      }
+    >
+      <Cell title='Click the button below to open or close' roundRadius={0} />
+    </Swipe>
+    <Button onClick={() => openRef.current?.open()}>
+      Open
+    </Button>
+    <Button onClick={() => openRef.current?.close()}>
+      Close
+    </Button>
+  </>
+}
+export default App;
+```
+:::
+
+### Click to close
+
+:::demo
+```tsx
+import React from "react";
+import { Swipe, Cell, Button } from '@nutui/nutui-react';
+
+const App = () => {
+  const closeRef = useRef(null)
+  return <>
+    <Swipe
+      ref={openRef}
+      rightAction={
+        <Button shape="square" type="danger">
+          Delete
+        </Button>
+      }
+      onActionClick={() => {
+        closeRef.current.close()
+      }}
+    >
+      <Cell title='Click the right button to close' roundRadius={0} />
     </Swipe>
   </>
 }
@@ -58,7 +121,7 @@ const App = () => {
       }
       disabled
     >
-      <cell title= "disable sliding" roundradius={0} / >
+      <cell title= "disable sliding" />
     </Swipe>
   </>
 }
@@ -220,6 +283,14 @@ export default App;
 | onTouchStart`v1.4.7` | ontouchStart | _event: Event      |
 | onTouchMove`v1.4.7`         | ontouchmove  | _event: Event     |
 | onTouchEnd`v1.4.7`          | ontouchend   | _event: Event     |
+
+## Swipe 实例方法
+
+| API           | Description | Callback parameters |
+|---------------|-------------| ----- |
+| open | open swipe  | `left\|right` |
+| close | close swipe    | - |
+
 ## Theming
 
 ### CSS Variables

src/packages/swipe/doc.md

@@ -39,6 +39,68 @@ export default App;
 ```
 :::
 
+### 通过实例方法控制
+
+:::demo
+```tsx
+import React from "react";
+import { Swipe, Cell, Button } from '@nutui/nutui-react';
+
+const App = () => {
+  const closeRef = useRef(null)
+  const openRef = useRef(null)
+  return <>
+    <Swipe
+      ref={openRef}
+      rightAction={
+        <Button shape="square" type="danger">
+          删除
+        </Button>
+      }
+    >
+      <Cell title='点击下方按钮打开或关闭' roundRadius={0} />
+    </Swipe>
+    <Button onClick={() => openRef.current?.open()}>
+      打开
+    </Button>
+    <Button onClick={() => openRef.current?.close()}>
+      关闭
+    </Button>
+  </>
+}
+export default App;
+```
+:::
+
+### 点击关闭
+
+:::demo
+```tsx
+import React from "react";
+import { Swipe, Cell, Button } from '@nutui/nutui-react';
+
+const App = () => {
+  const closeRef = useRef(null)
+  return <>
+    <Swipe
+      ref={openRef}
+      rightAction={
+        <Button shape="square" type="danger">
+          删除
+        </Button>
+      }
+      onActionClick={() => {
+        closeRef.current.close()
+      }}
+    >
+      <Cell title='点击右侧按钮关闭' roundRadius={0} />
+    </Swipe>
+  </>
+}
+export default App;
+```
+:::
+
 ### 禁用滑动
 
 :::demo
@@ -210,6 +272,13 @@ export default App;
 | onTouchMove`v1.4.7`         | ontouchmove  | _event: Event     |
 | onTouchEnd`v1.4.7`          | ontouchend   | _event: Event     |
 
+## Swipe 实例方法
+
+| 方法名   | 说明 | 参数 |
+|-------|--| ----- |
+| open | 打开 | `left\|right` |
+| close | 关闭 | - |
+
 ## 主题定制
 
 ### 样式变量

src/packages/swipe/doc.taro.md

@@ -38,6 +38,69 @@ export default App;
 ```
 :::
 
+
+### 通过实例方法控制
+
+:::demo
+```tsx
+import React from "react";
+import { Swipe, Cell, Button } from '@nutui/nutui-react-taro';
+
+const App = () => {
+  const closeRef = useRef(null)
+  const openRef = useRef(null)
+  return <>
+    <Swipe
+      ref={openRef}
+      rightAction={
+        <Button shape="square" type="danger">
+          删除
+        </Button>
+      }
+    >
+      <Cell title='点击下方按钮打开或关闭' roundRadius={0} />
+    </Swipe>
+    <Button onClick={() => openRef.current?.open()}>
+      打开
+    </Button>
+    <Button onClick={() => openRef.current?.close()}>
+      关闭
+    </Button>
+  </>
+}
+export default App;
+```
+:::
+
+### 点击关闭
+
+:::demo
+```tsx
+import React from "react";
+import { Swipe, Cell, Button } from '@nutui/nutui-react-taro';
+
+const App = () => {
+  const closeRef = useRef(null)
+  return <>
+    <Swipe
+      ref={openRef}
+      rightAction={
+        <Button shape="square" type="danger">
+          删除
+        </Button>
+      }
+      onActionClick={() => {
+        closeRef.current.close()
+      }}
+    >
+      <Cell title='点击右侧按钮关闭' roundRadius={0} />
+    </Swipe>
+  </>
+}
+export default App;
+```
+:::
+
 ### 禁用滑动
 
 :::demo
@@ -209,6 +272,12 @@ export default App;
 | onTouchMove`v1.4.7`         | ontouchmove  | _event: Event     |
 | onTouchEnd`v1.4.7`          | ontouchend   | _event: Event     |
 
+## Swipe 实例方法
+
+| 方法名   | 说明 | 参数 |
+|-------|--| ----- |
+| open | 打开 | `left\|right` |
+| close | 关闭 | - |
 
 ## 主题定制
 

src/packages/swipe/doc.zh-TW.md

@@ -38,6 +38,69 @@ export default App;
 ```
 :::
 
+
+### 通過實例方法控制
+
+:::demo
+```tsx
+import React from "react";
+import { Swipe, Cell, Button } from '@nutui/nutui-react';
+
+const App = () => {
+  const closeRef = useRef(null)
+  const openRef = useRef(null)
+  return <>
+    <Swipe
+      ref={openRef}
+      rightAction={
+        <Button shape="square" type="danger">
+          删除
+        </Button>
+      }
+    >
+      <Cell title='點擊下方按鈕打開或關閉' roundRadius={0} />
+    </Swipe>
+    <Button onClick={() => openRef.current?.open()}>
+      打開
+    </Button>
+    <Button onClick={() => openRef.current?.close()}>
+      關閉
+    </Button>
+  </>
+}
+export default App;
+```
+:::
+
+### 點擊關閉
+
+:::demo
+```tsx
+import React from "react";
+import { Swipe, Cell, Button } from '@nutui/nutui-react';
+
+const App = () => {
+  const closeRef = useRef(null)
+  return <>
+    <Swipe
+      ref={openRef}
+      rightAction={
+        <Button shape="square" type="danger">
+          删除
+        </Button>
+      }
+      onActionClick={() => {
+        closeRef.current.close()
+      }}
+    >
+      <Cell title='點擊右側按鈕關閉' roundRadius={0} />
+    </Swipe>
+  </>
+}
+export default App;
+```
+:::
+
 ### 禁用滑動
 
 :::demo
@@ -209,6 +272,13 @@ export default App;
 | onTouchMove`v1.4.7`         | ontouchmove  | _event: Event     |
 | onTouchEnd`v1.4.7`          | ontouchend   | _event: Event     |
 
+## Swipe 实例方法
+
+| 方法名   | 說明 | 回檔參數 |
+|-------|--| ----- |
+| open | 打開 | `left\|right` |
+| close | 關閉 | - |
+
 ## 主題定制
 
 ### 樣式變量

src/packages/swipe/swipe.taro.tsx

@@ -7,6 +7,7 @@ import React, {
   useImperativeHandle,
   useEffect,
 } from 'react'
+import { nextTick, useReady } from '@tarojs/taro'
 import bem from '@/utils/bem'
 import { useTouch } from '@/utils/useTouch'
 import { getRectByTaro } from '@/utils/useClientRect'
@@ -87,6 +88,21 @@ export const Swipe = forwardRef<
   const swipeBem = bem('swipe')
   const touch: any = useTouch()
 
+  // 获取元素的时候要在页面 onReady 后，需要参考小程序的事件周期
+  useReady(() => {
+    const getWidth = async () => {
+      if (leftWrapper.current) {
+        const leftRect = await getRectByTaro(leftWrapper.current)
+        setActionWidth((v) => ({ ...v, left: leftRect.width }))
+      }
+      if (rightWrapper.current) {
+        const rightRect = await getRectByTaro(rightWrapper.current)
+        setActionWidth((v) => ({ ...v, right: rightRect.width }))
+      }
+    }
+    nextTick(() => getWidth())
+  })
+
   const { children, className, style } = { ...defaultProps, ...props }
 
   const root: any = useRef<HTMLDivElement>()
@@ -117,15 +133,6 @@ export const Swipe = forwardRef<
   )
 
   const onTouchStart = async (event: Event) => {
-    if (leftWrapper.current) {
-      const leftRect = await getRectByTaro(leftWrapper.current)
-      setActionWidth((v) => ({ ...v, left: leftRect.width }))
-    }
-    if (rightWrapper.current) {
-      const rightRect = await getRectByTaro(rightWrapper.current)
-      setActionWidth((v) => ({ ...v, right: rightRect.width }))
-    }
-
     if (!props.disabled) {
       startOffset.current = state.offset
       touch.start(event)
@@ -208,35 +215,13 @@ export const Swipe = forwardRef<
     return Math.min(Math.max(Number(num), Number(min)), Number(max))
   }
 
-  // const getNodeWidth = (node: Element) => {
-  //   if (node) {
-  //     const ele: any = getRectByTaro(node)
-  //     return ele.width
-  //   }
-  //   return 0
-  // }
-  // const leftRef = useCallback(
-  //   (node: Element | null) => {
-  //     if (node !== null) {
-  //       setActionWidth((v) => ({ ...v, left: getNodeWidth(node) }))
-  //     }
-  //   },
-  //   [props.leftAction]
-  // )
-  // const rightRef = useCallback(
-  //   (node: Element | null) => {
-  //     if (node !== null) {
-  //       setActionWidth((v) => ({ ...v, right: getNodeWidth(node) }))
-  //     }
-  //   },
-  //   [props.rightAction]
-  // )
   const leftWrapper = useRef(null)
   const rightWrapper = useRef(null)
   const renderActionContent = (side: SwipeSide) => {
     if (props[`${side}Action`]) {
       return (
         <div
+          id="left"
           ref={side === 'left' ? leftWrapper : rightWrapper}
           className={`${swipeBem(side)}`}
           onClick={(e: any) => handleOperate(e, side)}