feat(drag): add the ability to support onDrag, onDragStart, onDragEnd…

… callbacks (#2418) * feat(drag): 支持onDrag,onDragStart,onDragEnd回调 * chore: 简化代码
jdf2e · Jul 5, 2024 · 9337a24 · 9337a24
1 parent f50543d
commit 9337a24
Show file tree

Hide file tree

Showing 8 changed files with 167 additions and 89 deletions.
diff --git a/src/packages/drag/demos/h5/demo1.tsx b/src/packages/drag/demos/h5/demo1.tsx
@@ -2,8 +2,22 @@ import React from 'react'
 import { Drag, Button } from '@nutui/nutui-react'
 
 const Demo1 = () => {
+  const onDragStart = () => {
+    console.log('dragStart')
+  }
+  const onDragEnd = (state: any) => {
+    console.log('dragEnd', state)
+  }
+  const onDrag = (state: any) => {
+    console.log('dragging', state)
+  }
   return (
-    <Drag style={{ top: '120px', left: '24px' }}>
+    <Drag
+      style={{ top: '120px', left: '24px' }}
+      onDragStart={onDragStart}
+      onDragEnd={onDragEnd}
+      onDrag={onDrag}
+    >
       <Button type="primary">drag</Button>
     </Drag>
   )

diff --git a/src/packages/drag/demos/taro/demo1.tsx b/src/packages/drag/demos/taro/demo1.tsx
@@ -2,8 +2,22 @@ import React from 'react'
 import { Drag, Button } from '@nutui/nutui-react-taro'
 
 const Demo1 = () => {
+  const onDragStart = () => {
+    console.log('dragStart')
+  }
+  const onDragEnd = (state: any) => {
+    console.log('dragEnd', state)
+  }
+  const onDrag = (state: any) => {
+    console.log('dragging', state)
+  }
   return (
-    <Drag style={{ left: '8px' }} className="drag-demo1">
+    <Drag
+      style={{ top: '120px', left: '24px' }}
+      onDragStart={onDragStart}
+      onDragEnd={onDragEnd}
+      onDrag={onDrag}
+    >
       <Button type="primary">drag</Button>
     </Drag>
   )

diff --git a/src/packages/drag/doc.en-US.md b/src/packages/drag/doc.en-US.md
@@ -1,7 +1,5 @@
 # Drag
 
-
-
 Implement draggable arbitrary elements.
 
 ## Import
@@ -14,34 +12,34 @@ import { Drag } from '@nutui/nutui-react'
 
 ### Basic Usage
 
-:::demo
-
-<CodeBlock src='h5/demo1.tsx'></CodeBlock>
-
+:::demo
+
+<CodeBlock src='h5/demo1.tsx'></CodeBlock>
+
 :::
 
 ### Limit Direction
 
-:::demo
-
-<CodeBlock src='h5/demo2.tsx'></CodeBlock>
-
+:::demo
+
+<CodeBlock src='h5/demo2.tsx'></CodeBlock>
+
 :::
 
 ### Attract
 
-:::demo
-
-<CodeBlock src='h5/demo3.tsx'></CodeBlock>
-
+:::demo
+
+<CodeBlock src='h5/demo3.tsx'></CodeBlock>
+
 :::
 
 ### Limit Boundaries
 
-:::demo
-
-<CodeBlock src='h5/demo4.tsx'></CodeBlock>
-
+:::demo
+
+<CodeBlock src='h5/demo4.tsx'></CodeBlock>
+
 :::
 
 ## Drag
@@ -52,4 +50,7 @@ import { Drag } from '@nutui/nutui-react'
 | --- | --- | --- | --- |
 | attract | Whether to enable automatic edge suction | `boolean` | `false` |
 | direction | The drag direction limit of the dragged element | `x` \| `y` \| `all` | `all` |
-| boundary | The drag boundary of the dragged element | `Object` | `{top: 0, left: 0, right: 0, bottom: 0}` |
+| boundary | The drag boundary of the dragged element | `Object` | `{top: 0, left: 0, right: 0, bottom: 0}` |
+| onDragStart | Start dragging elements | `() => void` | `-` |
+| onDrag | Drag element | `(state: { offset: [x: number, y: number] }) => void` | `-` |
+| onDragEnd | Stop dragging elements | `(state: { offset: [x: number, y: number] }) => void` | `-` |
diff --git a/src/packages/drag/doc.md b/src/packages/drag/doc.md
@@ -1,6 +1,5 @@
 # Drag 拖拽
 
-
 实现可拖拽的任意元素
 
 ## 引入
@@ -13,34 +12,34 @@ import { Drag } from '@nutui/nutui-react'
 
 ### 基础用法
 
-:::demo
-
-<CodeBlock src='h5/demo1.tsx'></CodeBlock>
-
+:::demo
+
+<CodeBlock src='h5/demo1.tsx'></CodeBlock>
+
 :::
 
 ### 限制拖拽方向
 
-:::demo
-
-<CodeBlock src='h5/demo2.tsx'></CodeBlock>
-
+:::demo
+
+<CodeBlock src='h5/demo2.tsx'></CodeBlock>
+
 :::
 
 ### 自动吸边
 
-:::demo
-
-<CodeBlock src='h5/demo3.tsx'></CodeBlock>
-
+:::demo
+
+<CodeBlock src='h5/demo3.tsx'></CodeBlock>
+
 :::
 
 ### 限制拖拽边界
 
-:::demo
-
-<CodeBlock src='h5/demo4.tsx'></CodeBlock>
-
+:::demo
+
+<CodeBlock src='h5/demo4.tsx'></CodeBlock>
+
 :::
 
 ## Drag
@@ -51,4 +50,7 @@ import { Drag } from '@nutui/nutui-react'
 | --- | --- | --- | --- |
 | attract | 是否开启自动吸边 | `boolean` | `false` |
 | direction | 拖拽元素的拖拽方向限制 | `x` \| `y` \| `all` | `all` |
-| boundary | 拖拽元素的拖拽边界 | `Object` | `{top: 0, left: 0, right: 0, bottom: 0}` |
+| boundary | 拖拽元素的拖拽边界 | `Object` | `{top: 0, left: 0, right: 0, bottom: 0}` |
+| onDragStart | 开始拖拽元素| `() => void` | `-` |
+| onDrag | 拖拽元素| `(state: { offset: [x: number, y: number] }) => void` | `-` |
+| onDragEnd | 停止拖拽元素| `(state: { offset: [x: number, y: number] }) => void` | `-` |
diff --git a/src/packages/drag/doc.taro.md b/src/packages/drag/doc.taro.md
@@ -1,6 +1,5 @@
 # Drag 拖拽
 
-
 实现可拖拽的任意元素
 
 ## 引入
@@ -13,34 +12,34 @@ import { Drag } from '@nutui/nutui-react-taro'
 
 ### 基础用法
 
-:::demo
-
-<CodeBlock src='taro/demo1.tsx'></CodeBlock>
-
+:::demo
+
+<CodeBlock src='taro/demo1.tsx'></CodeBlock>
+
 :::
 
 ### 限制拖拽方向
 
-:::demo
-
-<CodeBlock src='taro/demo2.tsx'></CodeBlock>
-
+:::demo
+
+<CodeBlock src='taro/demo2.tsx'></CodeBlock>
+
 :::
 
 ### 自动吸边
 
-:::demo
-
-<CodeBlock src='taro/demo3.tsx'></CodeBlock>
-
+:::demo
+
+<CodeBlock src='taro/demo3.tsx'></CodeBlock>
+
 :::
 
 ### 限制拖拽边界
 
-:::demo
-
-<CodeBlock src='taro/demo4.tsx'></CodeBlock>
-
+:::demo
+
+<CodeBlock src='taro/demo4.tsx'></CodeBlock>
+
 :::
 
 ## Drag
@@ -51,4 +50,7 @@ import { Drag } from '@nutui/nutui-react-taro'
 | --- | --- | --- | --- |
 | attract | 是否开启自动吸边 | `boolean` | `false` |
 | direction | 拖拽元素的拖拽方向限制 | `x` \| `y` \| `all` | `all` |
-| boundary | 拖拽元素的拖拽边界 | `Object` | `{top: 0, left: 0, right: 0, bottom: 0}` |
+| boundary | 拖拽元素的拖拽边界 | `Object` | `{top: 0, left: 0, right: 0, bottom: 0}` |
+| onDragStart | 开始拖拽元素| `() => void` | `-` |
+| onDrag | 拖拽元素| `(state: { offset: [x: number, y: number] }) => void` | `-` |
+| onDragEnd | 停止拖拽元素| `(state: { offset: [x: number, y: number] }) => void` | `-` |
diff --git a/src/packages/drag/doc.zh-TW.md b/src/packages/drag/doc.zh-TW.md
@@ -1,7 +1,5 @@
 # Drag 拖拽
 
-
-
 實現可拖拽的任意元素
 
 ## 引入
@@ -14,34 +12,34 @@ import { Drag } from '@nutui/nutui-react'
 
 ### 基礎用法
 
-:::demo
-
-<CodeBlock src='h5/demo1.tsx'></CodeBlock>
-
+:::demo
+
+<CodeBlock src='h5/demo1.tsx'></CodeBlock>
+
 :::
 
 ### 限製拖拽方向
 
-:::demo
-
-<CodeBlock src='h5/demo2.tsx'></CodeBlock>
-
+:::demo
+
+<CodeBlock src='h5/demo2.tsx'></CodeBlock>
+
 :::
 
 ### 自動吸邊
 
-:::demo
-
-<CodeBlock src='h5/demo3.tsx'></CodeBlock>
-
+:::demo
+
+<CodeBlock src='h5/demo3.tsx'></CodeBlock>
+
 :::
 
 ### 限製拖拽邊界
 
-:::demo
-
-<CodeBlock src='h5/demo4.tsx'></CodeBlock>
-
+:::demo
+
+<CodeBlock src='h5/demo4.tsx'></CodeBlock>
+
 :::
 
 ## Drag
@@ -52,4 +50,7 @@ import { Drag } from '@nutui/nutui-react'
 | --- | --- | --- | --- |
 | attract | 是否開啟自動吸邊 | `boolean` | `false` |
 | direction | 拖拽元素的拖拽方向限製 | `x` \| `y` \| `all` | `all` |
-| boundary | 拖拽元素的拖拽邊界 | `Object` | `{top: 0, left: 0, right: 0, bottom: 0}` |
+| boundary | 拖拽元素的拖拽邊界 | `Object` | `{top: 0, left: 0, right: 0, bottom: 0}` |
+| onDragStart | 開始拖拽元素| `() => void` | `-` |
+| onDrag | 拖拽元素| `(state: { offset: [x: number, y: number] }) => void` | `-` |
+| onDragEnd | 停止拖拽元素| `(state: { offset: [x: number, y: number] }) => void` | `-` |
diff --git a/src/packages/drag/drag.taro.tsx b/src/packages/drag/drag.taro.tsx
@@ -2,6 +2,7 @@ import React, { FunctionComponent, useState, useEffect, useRef } from 'react'
 import { getSystemInfoSync, createSelectorQuery } from '@tarojs/taro'
 import { BasicComponent, ComponentDefaults } from '@/utils/typings'
 import { getRectByTaro } from '@/utils/get-rect-by-taro'
+import { DragState } from './drag'
 
 export interface DragProps extends BasicComponent {
   attract: boolean
@@ -12,6 +13,9 @@ export interface DragProps extends BasicComponent {
     right: number
     bottom: number
   }
+  onDragStart: () => void
+  onDragEnd: (state: DragState) => void
+  onDrag: (state: DragState) => void
 }
 const defaultProps = {
   ...ComponentDefaults,
@@ -28,11 +32,21 @@ const defaultProps = {
 export const Drag: FunctionComponent<
   Partial<DragProps> & React.HTMLAttributes<HTMLDivElement>
 > = (props) => {
-  const { attract, direction, boundary, children, className, style, ...reset } =
-    {
-      ...defaultProps,
-      ...props,
-    }
+  const {
+    attract,
+    direction,
+    boundary,
+    onDrag,
+    onDragStart,
+    onDragEnd,
+    children,
+    className,
+    style,
+    ...reset
+  } = {
+    ...defaultProps,
+    ...props,
+  }
   const classPrefix = 'nut-drag'
   const [boundaryState, setBoundaryState] = useState(boundary)
   const myDrag = useRef<HTMLDivElement>(null)
@@ -72,7 +86,7 @@ export const Drag: FunctionComponent<
   }
 
   const touchStart = (e: React.TouchEvent<HTMLDivElement>) => {
-    const target = e.currentTarget as HTMLElement
+    onDragStart?.()
     const touches = e.touches[0]
     axisCache.current = { x: touches.clientX, y: touches.clientY }
     transformCache.current = { x: translateX.current, y: translateY.current }
@@ -85,7 +99,9 @@ export const Drag: FunctionComponent<
       const y = touch.clientY - axisCache.current.y
       translateX.current = x + transformCache.current.x
       translateY.current = y + transformCache.current.y
-
+      onDrag?.({
+        offset: [translateX.current, translateY.current],
+      })
       // 边界判断
       if (translateX.current < boundaryState.left) {
         translateX.current = boundaryState.left
@@ -107,6 +123,9 @@ export const Drag: FunctionComponent<
   }
 
   const touchEnd = (e: React.TouchEvent) => {
+    onDragEnd?.({
+      offset: [translateX.current, translateY.current],
+    })
     if (direction !== 'y' && attract && dragRef.current) {
       if (translateX.current < middleLine.current) {
         translateX.current = boundaryState.left