feat: swipe 组件对外暴露 onTouchStart onTouchMove onTouchEnd 事件 (#656)

src/packages/swipe/demo.taro.tsx

@@ -164,6 +164,9 @@ const SwipeDemo = () => {
               {translated.del}
             </Button>
           }
+          onTouchEnd={(e) => console.log(e)}
+          onTouchMove={(e) => console.log(e)}
+          onTouchStart={(e) => console.log(e)}
         >
           <Cell title={translated.leftDel} roundRadius={0} />
         </Swipe>

src/packages/swipe/demo.tsx

@@ -151,6 +151,9 @@ const SwipeDemo = () => {
               {translated.del}
             </Button>
           }
+          onTouchStart={(event) => console.log('touch start', event)}
+          onTouchMove={(event) => console.log('touch Move', event)}
+          onTouchEnd={(event) => console.log('touch End', event)}
         >
           <Cell title={translated.leftDel} roundRadius={0} />
         </Swipe>

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

@@ -217,7 +217,9 @@ export default App;
 |onOpen | open the cell sidebar |_name: string , position: `left \| right`_ |
 |onClose | collapse the cell sidebar |_name: string , position: `left \| right`_ |
 |onActionClick | triggered when clicking on the left or right |_event: Event , position: `left \| right`_ |
-
+| onTouchStart`v1.4.7` | ontouchStart | _event: Event      |
+| onTouchMove`v1.4.7`         | ontouchmove  | _event: Event     |
+| onTouchEnd`v1.4.7`          | ontouchend   | _event: Event     |
 ## Theming
 
 ### CSS Variables

src/packages/swipe/doc.md

@@ -201,12 +201,14 @@ export default App;
 
 ### Events
 
-| 事件名 | 说明           | 回调参数     |
-|--------|----------------|--------------|
-| onOpen   | 打开单元格侧边栏 | _name: string , position: `left \| right`_      |
-| onClose  | 收起单元格侧边栏 | _name: string , position: `left \| right`_    |
-| onActionClick  | 点击左侧或者右侧时触发 | _event: Event , position: `left \| right`_     |
-
+| 事件名           | 说明           | 回调参数     |
+|---------------|--------------|--------------|
+| onOpen        | 打开单元格侧边栏     | _name: string , position: `left \| right`_      |
+| onClose       | 收起单元格侧边栏     | _name: string , position: `left \| right`_    |
+| onActionClick | 点击左侧或者右侧时触发  | _event: Event , position: `left \| right`_     |
+| onTouchStart`v1.4.7` | ontouchStart | _event: Event      |
+| onTouchMove`v1.4.7`         | ontouchmove  | _event: Event     |
+| onTouchEnd`v1.4.7`          | ontouchend   | _event: Event     |
 
 ## 主题定制
 

src/packages/swipe/doc.taro.md

@@ -205,6 +205,9 @@ export default App;
 | onOpen   | 打开单元格侧边栏 | _name: string , position: `left \| right`_      |
 | onClose  | 收起单元格侧边栏 | _name: string , position: `left \| right`_    |
 | onActionClick  | 点击左侧或者右侧时触发 | _event: Event , position: `left \| right`_     |
+| onTouchStart`v1.4.7` | ontouchStart | _event: Event      |
+| onTouchMove`v1.4.7`         | ontouchmove  | _event: Event     |
+| onTouchEnd`v1.4.7`          | ontouchend   | _event: Event     |
 
 
 ## 主题定制

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

@@ -200,16 +200,14 @@ export default App;
 
 ### Events
 
-|事件名|說明|回檔參數|
-
-|--------|----------------|--------------|
-
-| onOpen |打開儲存格側邊欄| _name: string，position: `left \| right`_ |
-
-| onClose |收起儲存格側邊欄| _name: string，position: `left \| right`_ |
-
-| onActionClick |點擊左側或者右側時觸發| _event: Event，position: `left \| right`_ |
-
+| 事件名                 | 說明           |回檔參數|
+|---------------------|--------------|--------------|
+| onOpen              | 打開儲存格側邊欄     | _name: string，position: `left \| right`_ |
+| onClose             | 收起儲存格側邊欄     | _name: string，position: `left \| right`_ |
+| onActionClick       | 點擊左側或者右側時觸發  | _event: Event，position: `left \| right`_ |
+| onTouchStart`v1.4.7` | ontouchStart | _event: Event      |
+| onTouchMove`v1.4.7`         | ontouchmove  | _event: Event     |
+| onTouchEnd`v1.4.7`          | ontouchend   | _event: Event     |
 
 ## 主題定制
 

src/packages/swipe/swipe.taro.tsx

@@ -66,6 +66,9 @@ export interface SwipeProps {
   }) => void
   /** 点击时触发 */
   onActionClick?: (event: Event, position: SwipePosition) => void
+  onTouchStart?: (event: Event) => void
+  onTouchEnd?: (event: Event) => void
+  onTouchMove?: (event: Event) => void
   children?: React.ReactNode
 }
 const defaultProps = {
@@ -75,7 +78,11 @@ const defaultProps = {
 } as SwipeProps
 export const Swipe = forwardRef<
   SwipeInstance,
-  Partial<SwipeProps> & React.HTMLAttributes<HTMLDivElement>
+  Partial<SwipeProps> &
+    Omit<
+      React.HTMLAttributes<HTMLDivElement>,
+      'onTouchStart' | 'onTouchMove' | 'onTouchEnd'
+    >
 >((props, instanceRef) => {
   const swipeBem = bem('swipe')
   const touch: any = useTouch()
@@ -122,6 +129,7 @@ export const Swipe = forwardRef<
     if (!props.disabled) {
       startOffset.current = state.offset
       touch.start(event)
+      props.onTouchStart && props.onTouchStart(event)
     }
   }
 
@@ -131,6 +139,7 @@ export const Swipe = forwardRef<
     }
 
     touch.move(event)
+    props.onTouchMove && props.onTouchMove(event)
 
     if (touch.isHorizontal()) {
       lockClick.current = true
@@ -149,13 +158,14 @@ export const Swipe = forwardRef<
     }
   }
 
-  const onTouchEnd = () => {
+  const onTouchEnd = (event: Event) => {
     if (state.dragging) {
       setState((v) => ({ ...v, dragging: false }))
       toggle(state.offset > 0 ? 'left' : 'right')
       setTimeout(() => {
         lockClick.current = false
       }, 0)
+      props.onTouchEnd && props.onTouchEnd(event)
     }
   }
 
@@ -278,7 +288,7 @@ export const Swipe = forwardRef<
       className={`${swipeBem()} ${className}`}
       onTouchStart={(e: any) => onTouchStart(e)}
       onTouchMove={(e: any) => onTouchMove(e)}
-      onTouchEnd={onTouchEnd}
+      onTouchEnd={(e: any) => onTouchEnd(e)}
       style={style}
     >
       <div className={`${swipeBem('wrapper')}`} style={wrapperStyle}>

src/packages/swipe/swipe.tsx

@@ -67,6 +67,9 @@ export interface SwipeProps {
   }) => void
   /** 点击时触发 */
   onActionClick?: (event: Event, position: SwipePosition) => void
+  onTouchStart?: (event: Event) => void
+  onTouchEnd?: (event: Event) => void
+  onTouchMove?: (event: Event) => void
   children?: React.ReactNode
 }
 const defaultProps = {
@@ -76,7 +79,11 @@ const defaultProps = {
 } as SwipeProps
 export const Swipe = forwardRef<
   SwipeInstance,
-  Partial<SwipeProps> & React.HTMLAttributes<HTMLDivElement>
+  Partial<SwipeProps> &
+    Omit<
+      React.HTMLAttributes<HTMLDivElement>,
+      'onTouchStart' | 'onTouchMove' | 'onTouchEnd'
+    >
 >((props, instanceRef) => {
   const swipeBem = bem('swipe')
   const touch: any = useTouch()
@@ -114,6 +121,7 @@ export const Swipe = forwardRef<
     if (!props.disabled) {
       startOffset.current = state.offset
       touch.start(event)
+      props.onTouchStart && props.onTouchStart(event)
     }
   }
 
@@ -123,6 +131,7 @@ export const Swipe = forwardRef<
     }
 
     touch.move(event)
+    props.onTouchMove && props.onTouchMove(event)
 
     if (touch.isHorizontal()) {
       lockClick.current = true
@@ -142,7 +151,7 @@ export const Swipe = forwardRef<
     }
   }
 
-  const onTouchEnd = () => {
+  const onTouchEnd = (event: Event) => {
     if (state.dragging) {
       setState((v) => ({ ...v, dragging: false }))
       toggle(state.offset > 0 ? 'left' : 'right')
@@ -150,6 +159,7 @@ export const Swipe = forwardRef<
       setTimeout(() => {
         lockClick.current = false
       }, 0)
+      props.onTouchEnd && props.onTouchEnd(event)
     }
   }
 
@@ -270,7 +280,7 @@ export const Swipe = forwardRef<
       className={`${swipeBem()} ${className}`}
       onTouchStart={(e: any) => onTouchStart(e)}
       onTouchMove={(e: any) => onTouchMove(e)}
-      onTouchEnd={onTouchEnd}
+      onTouchEnd={(e: any) => onTouchEnd(e)}
       style={style}
     >
       <div className={`${swipeBem('wrapper')}`} style={wrapperStyle}>