From 783e7a6beb36d43e6b281394e62167f56309cebc Mon Sep 17 00:00:00 2001 From: oasis-cloud Date: Tue, 21 Feb 2023 15:20:33 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20swipe=20=E7=BB=84=E4=BB=B6=E5=AF=B9?= =?UTF-8?q?=E5=A4=96=E6=9A=B4=E9=9C=B2=20open=20=E5=92=8C=20close=20?= =?UTF-8?q?=E6=96=B9=E6=B3=95=EF=BC=8C=E4=BC=98=E5=8C=96=20taro=20?= =?UTF-8?q?=E7=89=88=E6=9C=AC=E4=B8=8B=20width=20=E7=9A=84=E8=AE=A1?= =?UTF-8?q?=E7=AE=97=E6=97=B6=E6=9C=BA=20(#714)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * feat: swipe 组件对外暴露 open 和 close 方法，优化 taro 版本下 width 的计算时机 * feat: swipe 组件对外暴露 open 和 close 方法，优化 taro 版本下 width 的计算时机 --- src/packages/checkbox/doc.en-US.md | 6 +-- src/packages/swipe/demo.taro.tsx | 58 +++++++++++++++++++++-- src/packages/swipe/demo.tsx | 54 +++++++++++++++++++++ src/packages/swipe/doc.en-US.md | 75 +++++++++++++++++++++++++++++- src/packages/swipe/doc.md | 69 +++++++++++++++++++++++++++ src/packages/swipe/doc.taro.md | 69 +++++++++++++++++++++++++++ src/packages/swipe/doc.zh-TW.md | 70 ++++++++++++++++++++++++++++ src/packages/swipe/swipe.taro.tsx | 49 +++++++------------ 8 files changed, 410 insertions(+), 40 deletions(-) diff --git a/src/packages/checkbox/doc.en-US.md b/src/packages/checkbox/doc.en-US.md index 0b0d75c..5f888f8 100644 --- a/src/packages/checkbox/doc.en-US.md +++ b/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 diff --git a/src/packages/swipe/demo.taro.tsx b/src/packages/swipe/demo.taro.tsx index 381fb59..a1acd2c 100644 --- a/src/packages/swipe/demo.taro.tsx +++ b/src/packages/swipe/demo.taro.tsx @@ -1,4 +1,5 @@ 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(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 ( <>
@@ -170,6 +191,37 @@ const SwipeDemo = () => { > +

{translated.title6}

+ + {translated.del} + + } + > + + + + +

{translated.title7}

+ + {translated.del} + + } + onActionClick={() => { + ;(closeRef.current as any)?.close() + }} + > + +

{translated.title2}

{ 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 ( <>
@@ -157,6 +180,37 @@ const SwipeDemo = () => { > +

{translated.title6}

+ + {translated.del} + + } + > + + + + +

{translated.title7}

+ + {translated.del} + + } + onActionClick={() => { + ;(closeRef.current as any)?.close() + }} + > + +

{translated.title2}

{ } > - + + + +} +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 <> + + Delete + + } + > + + + + + +} +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 <> + + Delete + + } + onActionClick={() => { + closeRef.current.close() + }} + > + } @@ -58,7 +121,7 @@ const App = () => { } disabled > - + } @@ -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 diff --git a/src/packages/swipe/doc.md b/src/packages/swipe/doc.md index 1127128..c643f2c 100644 --- a/src/packages/swipe/doc.md +++ b/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 <> + + 删除 + + } + > + + + + + +} +export default App; +``` +::: + +### 点击关闭 + +:::demo +```tsx +import React from "react"; +import { Swipe, Cell, Button } from '@nutui/nutui-react'; + +const App = () => { + const closeRef = useRef(null) + return <> + + 删除 + + } + onActionClick={() => { + closeRef.current.close() + }} + > + + + +} +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 | 关闭 | - | + ## 主题定制 ### 样式变量 diff --git a/src/packages/swipe/doc.taro.md b/src/packages/swipe/doc.taro.md index e5c30be..870d8f4 100644 --- a/src/packages/swipe/doc.taro.md +++ b/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 <> + + 删除 + + } + > + + + + + +} +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 <> + + 删除 + + } + onActionClick={() => { + closeRef.current.close() + }} + > + + + +} +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 | 关闭 | - | ## 主题定制 diff --git a/src/packages/swipe/doc.zh-TW.md b/src/packages/swipe/doc.zh-TW.md index a51fe40..e3526dc 100644 --- a/src/packages/swipe/doc.zh-TW.md +++ b/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 <> + + 删除 + + } + > + + + + + +} +export default App; +``` +::: + +### 點擊關閉 + +:::demo +```tsx +import React from "react"; +import { Swipe, Cell, Button } from '@nutui/nutui-react'; + +const App = () => { + const closeRef = useRef(null) + return <> + + 删除 + + } + onActionClick={() => { + closeRef.current.close() + }} + > + + + +} +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 | 關閉 | - | + ## 主題定制 ### 樣式變量 diff --git a/src/packages/swipe/swipe.taro.tsx b/src/packages/swipe/swipe.taro.tsx index 4cb16cc..bfd1ad0 100644 --- a/src/packages/swipe/swipe.taro.tsx +++ b/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() @@ -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 (
handleOperate(e, side)} -- GitLab