Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(drag): add the ability to support onDrag, onDragStart, onDragEnd callbacks #2418

Merged
merged 2 commits into from
Jul 5, 2024
Merged

feat(drag): add the ability to support onDrag, onDragStart, onDragEnd callbacks #2418

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
c93a5db
feat(drag): 支持onDrag,onDragStart,onDragEnd回调
Alex-huxiyang Jul 5, 2024
262b479
chore: 简化代码
Alex-huxiyang Jul 5, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 15 additions & 1 deletion src/packages/drag/demos/h5/demo1.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
)
Expand Down
16 changes: 15 additions & 1 deletion src/packages/drag/demos/taro/demo1.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
)
Expand Down
39 changes: 20 additions & 19 deletions src/packages/drag/doc.en-US.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,5 @@
# Drag



Implement draggable arbitrary elements.

## Import
Expand All @@ -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
Expand All @@ -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` | `-` |
38 changes: 20 additions & 18 deletions src/packages/drag/doc.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
# Drag 拖拽


实现可拖拽的任意元素

## 引入
Expand All @@ -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
Expand All @@ -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` | `-` |
38 changes: 20 additions & 18 deletions src/packages/drag/doc.taro.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
# Drag 拖拽


实现可拖拽的任意元素

## 引入
Expand All @@ -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
Expand All @@ -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` | `-` |
39 changes: 20 additions & 19 deletions src/packages/drag/doc.zh-TW.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,5 @@
# Drag 拖拽



實現可拖拽的任意元素

## 引入
Expand All @@ -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
Expand All @@ -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` | `-` |
35 changes: 28 additions & 7 deletions src/packages/drag/drag.taro.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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,
Expand All @@ -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)
Expand Down Expand Up @@ -72,7 +86,7 @@ export const Drag: FunctionComponent<
}

const touchStart = (e: React.TouchEvent<HTMLDivElement>) => {
const target = e.currentTarget as HTMLElement
onDragStart && onDragStart()
const touches = e.touches[0]
axisCache.current = { x: touches.clientX, y: touches.clientY }
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

优化可选链使用

在调用 onDragStart, onDrag, 和 onDragEnd 时，建议使用可选链操作符以确保安全调用。

- onDragStart && onDragStart()
+ onDragStart?.()
Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
onDragStart && onDragStart()
const touches = e.touches[0]
axisCache.current = { x: touches.clientX, y: touches.clientY }
onDragStart?.()
const touches = e.touches[0]
axisCache.current = { x: touches.clientX, y: touches.clientY }
Tools
Biome

[error] 89-89: Change to an optional chain.

Unsafe fix: Change to an optional chain.

(lint/complexity/useOptionalChain)

transformCache.current = { x: translateX.current, y: translateY.current }
Expand All @@ -85,7 +99,10 @@ export const Drag: FunctionComponent<
const y = touch.clientY - axisCache.current.y
translateX.current = x + transformCache.current.x
translateY.current = y + transformCache.current.y

onDrag &&
onDrag({
offset: [translateX.current, translateY.current],
})
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

优化可选链使用

在调用 onDrag 时，建议使用可选链操作符以确保安全调用。

- onDrag &&
-   onDrag({
-     offset: [translateX.current, translateY.current],
-   })
+ onDrag?.({
+   offset: [translateX.current, translateY.current],
+ })
Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
onDrag &&
onDrag({
offset: [translateX.current, translateY.current],
})
onDrag?.({
offset: [translateX.current, translateY.current],
})
Tools
Biome

[error] 102-105: Change to an optional chain.

Unsafe fix: Change to an optional chain.

(lint/complexity/useOptionalChain)

// 边界判断
if (translateX.current < boundaryState.left) {
translateX.current = boundaryState.left
Expand All @@ -107,6 +124,10 @@ export const Drag: FunctionComponent<
}

const touchEnd = (e: React.TouchEvent) => {
onDragEnd &&
onDragEnd({
offset: [translateX.current, translateY.current],
})
if (direction !== 'y' && attract && dragRef.current) {
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

优化可选链使用

在调用 onDragEnd 时，建议使用可选链操作符以确保安全调用。

- onDragEnd &&
-   onDragEnd({
-     offset: [translateX.current, translateY.current],
-   })
+ onDragEnd?.({
+   offset: [translateX.current, translateY.current],
+ })
Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
onDragEnd &&
onDragEnd({
offset: [translateX.current, translateY.current],
})
if (direction !== 'y' && attract && dragRef.current) {
onDragEnd?.({
offset: [translateX.current, translateY.current],
})
if (direction !== 'y' && attract && dragRef.current) {
Tools
Biome

[error] 127-131: Change to an optional chain.

Unsafe fix: Change to an optional chain.

(lint/complexity/useOptionalChain)

if (translateX.current < middleLine.current) {
translateX.current = boundaryState.left
Expand Down
Loading
Loading