diff --git a/src/swipe-cell/SwipeCell.tsx b/src/swipe-cell/SwipeCell.tsx index c84c40b56..9ce0e76fa 100644 --- a/src/swipe-cell/SwipeCell.tsx +++ b/src/swipe-cell/SwipeCell.tsx @@ -106,6 +106,9 @@ const SwipeCell = forwardRef((originProps, ref) => (state) => { ctx.dragging = true; const [offsetX] = state.offset; + if (state.first) { + props.onDragstart?.(); + } if (state.last) { let position = offsetX + state.velocity[0] * state.direction[0] * 50; if (offsetX > 0) { @@ -130,6 +133,7 @@ const SwipeCell = forwardRef((originProps, ref) => } else { close(); } + props.onDragend?.(); window.setTimeout(() => { ctx.dragging = false; }); diff --git a/src/swipe-cell/swipe-cell.en-US.md b/src/swipe-cell/swipe-cell.en-US.md index 11115cd6f..b27422b6b 100644 --- a/src/swipe-cell/swipe-cell.en-US.md +++ b/src/swipe-cell/swipe-cell.en-US.md @@ -2,7 +2,6 @@ ## API - ### SwipeCell Props name | type | default | description | required @@ -13,6 +12,8 @@ content | TNode | - | Typescript:`string \| TNode`。[see more ts definition]( disabled | Boolean | - | \- | N left | TNode | - | Typescript:`Array \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N opened | Boolean / Array | false | Typescript:`boolean \| Array` | N -right | TNode | - | Typescript:`Array \| TNode` `interface SwipeActionItem {text: string; className?: string; style?: string; sure?: string \| TNode; onClick?: () => void; [key: string]: any }`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts)。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/swipe-cell/type.ts) | N +right | TNode | - | Typescript:`Array \| TNode` `interface SwipeActionItem {text: string; className?: string; style?: Styles; sure?: Sure; onClick?: () => void; [key: string]: any }` `type Sure = string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts)。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/swipe-cell/type.ts) | N onChange | Function | | Typescript:`(value: string) => void`
| N onClick | Function | | Typescript:`(action: SwipeActionItem, source: SwipeSource) => void`
[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/swipe-cell/type.ts)。
`type SwipeSource = 'left' \| 'right'`
| N +onDragend | Function | | Typescript:`() => void`
| N +onDragstart | Function | | Typescript:`() => void`
| N diff --git a/src/swipe-cell/swipe-cell.md b/src/swipe-cell/swipe-cell.md index da71882c7..8da2ba1aa 100644 --- a/src/swipe-cell/swipe-cell.md +++ b/src/swipe-cell/swipe-cell.md @@ -12,6 +12,8 @@ content | TNode | - | 操作项以外的内容。TS 类型:`string \| TNode` disabled | Boolean | - | 是否禁用滑动 | N left | TNode | - | 左侧滑动操作项。所有行为同 `right`。TS 类型:`Array \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N opened | Boolean / Array | false | 操作项是否呈现为打开态,值为数组时表示分别控制左右滑动的展开和收起状态。TS 类型:`boolean \| Array` | N -right | TNode | - | 右侧滑动操作项。有两种定义方式,一种是使用数组,二种是使用插槽。`right.text` 表示操作文本,`right.className` 表示操作项类名,`right.style` 表示操作项样式,`right.onClick` 表示点击操作项后执行的回调函数。示例:`[{ text: '删除', style: 'background-color: red', onClick: () => {} }]`。TS 类型:`Array \| TNode` `interface SwipeActionItem {text: string; className?: string; style?: string; sure?: string \| TNode; onClick?: () => void; [key: string]: any }`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts)。[详细类型定义](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/swipe-cell/type.ts) | N -onChange | Function | | TS 类型:`(value: string) => void`
菜单展开或者收回后将菜单的状态传递给父组件,值为数组时表示分别控制左右滑动的展开和收起状态。 | N +right | TNode | - | 右侧滑动操作项。有两种定义方式,一种是使用数组,二种是使用插槽。`right.text` 表示操作文本,`right.className` 表示操作项类名,`right.style` 表示操作项样式,`right.onClick` 表示点击操作项后执行的回调函数。示例:`[{ text: '删除', style: 'background-color: red', onClick: () => {} }]`。TS 类型:`Array \| TNode` `interface SwipeActionItem {text: string; className?: string; style?: Styles; sure?: Sure; onClick?: () => void; [key: string]: any }` `type Sure = string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts)。[详细类型定义](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/swipe-cell/type.ts) | N +onChange | Function | | TS 类型:`(value: string) => void`
菜单展开或者收回后将菜单的状态传递给父组件,值为数组时表示分别控制左右滑动的展开和收起状态 | N onClick | Function | | TS 类型:`(action: SwipeActionItem, source: SwipeSource) => void`
操作项点击时触发(插槽写法组件不触发,业务侧自定义内容和事件)。[详细类型定义](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/swipe-cell/type.ts)。
`type SwipeSource = 'left' \| 'right'`
| N +onDragend | Function | | TS 类型:`() => void`
滑动结束事件 | N +onDragstart | Function | | TS 类型:`() => void`
滑动开始事件 | N diff --git a/src/swipe-cell/type.ts b/src/swipe-cell/type.ts index 4d6b14d90..002ef0d77 100644 --- a/src/swipe-cell/type.ts +++ b/src/swipe-cell/type.ts @@ -4,7 +4,7 @@ * 该文件为脚本自动生成文件,请勿随意修改。如需修改请联系 PMC * */ -import { TNode } from '../common'; +import { TNode, Styles } from '../common'; export interface TdSwipeCellProps { /** @@ -29,35 +29,32 @@ export interface TdSwipeCellProps { */ right?: Array | TNode; /** - * 菜单展开或者收回后将菜单的状态传递给父组件,值为数组时表示分别控制左右滑动的展开和收起状态。 + * 菜单展开或者收回后将菜单的状态传递给父组件,值为数组时表示分别控制左右滑动的展开和收起状态 */ onChange?: (value: string) => void; /** * 操作项点击时触发(插槽写法组件不触发,业务侧自定义内容和事件) */ onClick?: (action: SwipeActionItem, source: SwipeSource) => void; + /** + * 滑动结束事件 + */ + onDragend?: () => void; + /** + * 滑动开始事件 + */ + onDragstart?: () => void; } export interface SwipeActionItem { text: string; className?: string; - style?: string; + style?: Styles; sure?: Sure; onClick?: () => void; [key: string]: any; } -export type SwipeSource = 'left' | 'right'; - -export interface SwipeCellInstanceFunctions { - /** - * 显示二次确认内容的函数。
【关于参数】`sure` 表示二次确认的具体内容,同content - */ - showSure?: (sure: Sure, onClick?: SwipeActionItem['onClick']) => void; - /** - * 关闭 - */ - close?: () => void; -} - export type Sure = string | TNode; + +export type SwipeSource = 'left' | 'right';