diff --git a/src/swipe-cell/SwipeCell.tsx b/src/swipe-cell/SwipeCell.tsx index da98f3517..519879615 100644 --- a/src/swipe-cell/SwipeCell.tsx +++ b/src/swipe-cell/SwipeCell.tsx @@ -6,7 +6,7 @@ import { useDrag } from '@use-gesture/react'; import parseTNode from '../_util/parseTNode'; import nearest from '../_util/nearest'; import withNativeProps from '../_util/withNativeProps'; -import { TdSwipeCellProps, SwipeActionItem, Sure } from './type'; +import { TdSwipeCellProps, SwipeActionItem, SwipeCellInstanceFunctions, SwipeSource } from './type'; import { swipeCellDefaultProps } from './defaultProps'; import { usePrefixClass } from '../hooks/useClass'; import useDefaultProps from '../hooks/useDefaultProps'; @@ -15,10 +15,10 @@ import { Styles, StyledProps, TNode } from '../common'; import './style'; -type SideType = 'left' | 'right'; -export interface SwipeCellRef { - expand: (side?: SideType, immediate?: boolean) => void; +export interface SwipeCellRef extends SwipeCellInstanceFunctions { + expand: (side?: SwipeSource, immediate?: boolean) => void; close: (immediate?: boolean) => void; + showSure: (sure: string | TNode, onClick?: SwipeActionItem['onClick']) => void; } export interface SwipeCellProps extends TdSwipeCellProps, StyledProps {} @@ -28,8 +28,8 @@ const threshold = '50%'; export const syncOpenedState = ( rootRef: React.RefObject, opened: SwipeCellProps['opened'], - getOpenedSide: (opened: SwipeCellProps['opened']) => SideType | undefined, - expand: (side: SideType) => void, + getOpenedSide: (opened: SwipeCellProps['opened']) => SwipeSource | undefined, + expand: (side: SwipeSource) => void, close: () => void, setTimer: (callback: () => void, delay: number) => void, ) => { @@ -56,11 +56,13 @@ const SwipeCell = forwardRef((originProps, ref) => const leftRef = useRef(null); const rightRef = useRef(null); const timersRef = useRef[]>([]); + const sureClearTimerRef = useRef | null>(null); const [curSure, setSure] = useState<{ - content: Sure; - width: number; + content: string | TNode; transform: string; - }>({ content: '', width: 0, transform: 'none' }); + side?: SwipeSource; + }>({ content: '', transform: 'none' }); + const sureClickHandlerRef = useRef(undefined); // Helper function to set timers that are tracked for cleanup const setTimer = (callback: () => void, delay: number) => { @@ -76,11 +78,25 @@ const SwipeCell = forwardRef((originProps, ref) => return timerId; }; + const clearSureTimer = () => { + if (sureClearTimerRef.current === null) return; + + clearTimeout(sureClearTimerRef.current); + timersRef.current = timersRef.current.filter((timerId) => timerId !== sureClearTimerRef.current); + sureClearTimerRef.current = null; + }; + + const resetSure = () => { + setSure({ content: '', transform: 'none', side: undefined }); + sureClickHandlerRef.current = undefined; + }; + // Cleanup all timers on unmount useEffect( () => () => { timersRef.current.forEach((timerId) => clearTimeout(timerId)); timersRef.current = []; + sureClearTimerRef.current = null; }, [], ); @@ -110,14 +126,14 @@ const SwipeCell = forwardRef((originProps, ref) => // eslint-disable-next-line react-hooks/exhaustive-deps const ctx = useMemo(() => ({ dragging: false, lastExpanded: '', initialExpanded: isOpened }), []); const swipeCellClass = usePrefixClass('swipe-cell'); - const onChange = (side?: SideType) => { + const onChange = (side?: SwipeSource) => { if (side !== ctx.lastExpanded) { props.onChange?.(side); } ctx.lastExpanded = side; }; - const getSideOffsetX = (side?: SideType) => { + const getSideOffsetX = (side?: SwipeSource) => { if (side === 'left' && leftRef.current) { return leftRef.current.clientWidth; } @@ -133,20 +149,51 @@ const SwipeCell = forwardRef((originProps, ref) => setX(0); onChange(); if (curSure.content) { - setTimer(() => { - setSure({ - content: '', - width: 0, - transform: 'none', - }); + clearSureTimer(); + const timerId = setTimer(() => { + resetSure(); + sureClearTimerRef.current = null; }, 300); + sureClearTimerRef.current = timerId; } }; - const expand = (side: SideType = 'right') => { + const expand = (side: SwipeSource = 'right') => { const x = getSideOffsetX(side); setX(x); onChange(side); + if (curSure.content && curSure.side !== side) { + clearSureTimer(); + resetSure(); + } + }; + + const openSure = (side: SwipeSource, sure: string | TNode, onClick?: SwipeActionItem['onClick']) => { + clearSureTimer(); + sureClickHandlerRef.current = onClick; + setSure({ + content: sure, + transform: side === 'left' ? 'translateX(-100%)' : 'translateX(100%)', + side, + }); + setTimer(() => { + setSure((current) => ({ + ...current, + transform: 'none', + })); + }, 0); + }; + + const showSure: SwipeCellRef['showSure'] = (sure, onClick) => { + let side: SwipeSource; + if (x > 0) { + side = 'left'; + } else if (x < 0) { + side = 'right'; + } else { + side = rightRef.current ? 'right' : 'left'; + } + openSure(side, sure, onClick); }; const bind = useDrag( @@ -185,6 +232,10 @@ const SwipeCell = forwardRef((originProps, ref) => ctx.dragging = false; }, 0); } else { + if (curSure.content) { + clearSureTimer(); + resetSure(); + } setX(offsetX); } }, @@ -204,6 +255,7 @@ const SwipeCell = forwardRef((originProps, ref) => useImperativeHandle(ref, () => ({ expand, close, + showSure, })); useLayoutEffect(() => { @@ -222,19 +274,16 @@ const SwipeCell = forwardRef((originProps, ref) => ['touchstart'], ); - const onActionClick = (action: SwipeActionItem, side: SideType) => { + const onActionClick = (action: SwipeActionItem, side: SwipeSource) => { if (action.sure) { - setSure({ - content: action.sure, - width: getSideOffsetX(side), - transform: side === 'left' ? 'translateX(-100%)' : 'translateX(100%)', + openSure(side, action.sure, () => { + close(); + if (action.onClick) { + action.onClick(); + } else { + props.onClick?.(action, side); + } }); - setTimer(() => { - setSure((current) => ({ - ...current, - transform: 'none', - })); - }, 0); return; } @@ -242,7 +291,7 @@ const SwipeCell = forwardRef((originProps, ref) => if (props.onClick) props.onClick(action, side); }; - const renderActions = (actions: SwipeActionItem[] | TNode, side: SideType) => { + const renderActions = (actions: SwipeActionItem[] | TNode, side: SwipeSource) => { if (isArray(actions)) { return actions.map((action: SwipeActionItem, index: number) => { const btnClass = classNames([`${swipeCellClass}__content`, action.className || '']); @@ -266,10 +315,9 @@ const SwipeCell = forwardRef((originProps, ref) => return parseTNode(actions); }; - const renderSureContent = () => { - if (curSure.content) { + const renderSureContent = (side: SwipeSource) => { + if (curSure.content && curSure.side === side) { const style: Styles = { - width: Math.abs(curSure.width), transition: 'all .3s ease-in-out', transform: curSure.transform, position: 'absolute', @@ -278,7 +326,11 @@ const SwipeCell = forwardRef((originProps, ref) => left: 0, right: 0, }; - return
{parseTNode(curSure.content)}
; + return ( +
sureClickHandlerRef.current?.()}> + {parseTNode(curSure.content)} +
+ ); } return null; }; @@ -300,14 +352,14 @@ const SwipeCell = forwardRef((originProps, ref) =>
{left && (
- {renderSureContent()} + {renderSureContent('left')} {renderActions(left, 'left')}
)} {parseTNode(content)} {right && (
- {renderSureContent()} + {renderSureContent('right')} {renderActions(right, 'right')}
)} diff --git a/src/swipe-cell/__tests__/swipe-cell.test.tsx b/src/swipe-cell/__tests__/swipe-cell.test.tsx index 573782a5e..48dfbbb5d 100644 --- a/src/swipe-cell/__tests__/swipe-cell.test.tsx +++ b/src/swipe-cell/__tests__/swipe-cell.test.tsx @@ -257,6 +257,174 @@ describe('SwipeCell', () => { vi.useRealTimers(); }); + it('ref showSure renders sure content on expanded side and fires onClick on confirm', () => { + vi.useFakeTimers(); + const ref = React.createRef(); + const onSureClick = vi.fn(); + const { container, getByText } = render(内容
} />); + const rightEl = container.querySelector('.t-swipe-cell__right') as HTMLElement; + Object.defineProperty(rightEl, 'clientWidth', { value: 100, configurable: true }); + act(() => { + ref.current.expand('right'); + }); + act(() => { + ref.current.showSure('确认删除？', onSureClick); + }); + const overlay = getByText('确认删除？') as HTMLElement; + expect(overlay.style.transform).toContain('100%'); + act(() => { + vi.advanceTimersByTime(1); + }); + expect(overlay.style.transform).toBe('none'); + fireEvent.click(overlay); + expect(onSureClick).toHaveBeenCalledTimes(1); + vi.runOnlyPendingTimers(); + vi.useRealTimers(); + }); + + it('ref showSure picks left side when expanded to left', () => { + vi.useFakeTimers(); + const ref = React.createRef(); + const { container, getByText } = render(内容} />); + const leftEl = container.querySelector('.t-swipe-cell__left') as HTMLElement; + Object.defineProperty(leftEl, 'clientWidth', { value: 80, configurable: true }); + act(() => { + ref.current.expand('left'); + }); + act(() => { + ref.current.showSure('确认左侧删除？'); + }); + const overlay = getByText('确认左侧删除？') as HTMLElement; + expect(overlay.style.transform).toContain('-100%'); + vi.runOnlyPendingTimers(); + vi.useRealTimers(); + }); + + it('ref showSure renders confirmation content only on the active side', () => { + vi.useFakeTimers(); + const ref = React.createRef(); + const { container, queryAllByText } = render( + 内容} />, + ); + const rightEl = container.querySelector('.t-swipe-cell__right') as HTMLElement; + Object.defineProperty(rightEl, 'clientWidth', { value: 100, configurable: true }); + act(() => { + ref.current.expand('right'); + ref.current.showSure('确认删除？'); + }); + + expect(queryAllByText('确认删除？')).toHaveLength(1); + vi.runOnlyPendingTimers(); + vi.useRealTimers(); + }); + + it('ref showSure falls back to left side when closed and only left actions exist', () => { + vi.useFakeTimers(); + const ref = React.createRef(); + const { getByText } = render(内容} />); + act(() => { + ref.current.showSure('确认左侧删除？'); + }); + expect(getByText('确认左侧删除？')).toBeInTheDocument(); + act(() => { + vi.advanceTimersByTime(1); + }); + vi.useRealTimers(); + }); + + it('expand to a different side clears visible sure content', () => { + vi.useFakeTimers(); + const ref = React.createRef(); + const { container, getByText, queryByText } = render( + 内容} />, + ); + const leftEl = container.querySelector('.t-swipe-cell__left') as HTMLElement; + const rightEl = container.querySelector('.t-swipe-cell__right') as HTMLElement; + Object.defineProperty(leftEl, 'clientWidth', { value: 80, configurable: true }); + Object.defineProperty(rightEl, 'clientWidth', { value: 100, configurable: true }); + act(() => { + ref.current.expand('right'); + ref.current.showSure('确认删除？'); + }); + expect(getByText('确认删除？')).toBeInTheDocument(); + act(() => { + ref.current.expand('left'); + }); + expect(queryByText('确认删除？')).not.toBeInTheDocument(); + act(() => { + vi.runOnlyPendingTimers(); + }); + vi.useRealTimers(); + }); + + it('keeps newly opened sure content after close and reopen', () => { + vi.useFakeTimers(); + const ref = React.createRef(); + const { container, getByText, queryByText } = render( + 内容} />, + ); + const rightEl = container.querySelector('.t-swipe-cell__right') as HTMLElement; + Object.defineProperty(rightEl, 'clientWidth', { value: 100, configurable: true }); + + act(() => { + ref.current.expand('right'); + ref.current.showSure('第一次确认'); + }); + expect(getByText('第一次确认')).toBeInTheDocument(); + + act(() => { + ref.current.close(); + ref.current.showSure('第二次确认'); + vi.advanceTimersByTime(300); + }); + + expect(queryByText('第一次确认')).not.toBeInTheDocument(); + expect(getByText('第二次确认')).toBeInTheDocument(); + vi.runOnlyPendingTimers(); + vi.useRealTimers(); + }); + + it('clicking sure content from action closes and fires action.onClick', () => { + vi.useFakeTimers(); + const actionOnClick = vi.fn(); + const action = { text: '删除', sure: '确认删除？', onClick: actionOnClick }; + const { getByText } = render(内容} opened />); + fireEvent.click(getByText('删除')); + expect(actionOnClick).not.toHaveBeenCalled(); + fireEvent.click(getByText('确认删除？')); + expect(actionOnClick).toHaveBeenCalledTimes(1); + vi.runOnlyPendingTimers(); + vi.useRealTimers(); + }); + + it('sure confirm falls back to props.onClick when action.onClick missing', () => { + vi.useFakeTimers(); + const propOnClick = vi.fn(); + const action = { text: '删除', sure: '确认删除？' }; + const { getByText } = render(内容} opened onClick={propOnClick} />); + fireEvent.click(getByText('删除')); + fireEvent.click(getByText('确认删除？')); + expect(propOnClick).toHaveBeenCalledWith(action, 'right'); + vi.runOnlyPendingTimers(); + vi.useRealTimers(); + }); + + it('dragging clears visible sure content', () => { + vi.useFakeTimers(); + const { getByText, queryByText } = render( + 内容} opened />, + ); + fireEvent.click(getByText('删除')); + expect(getByText('确认删除？')).toBeInTheDocument(); + const latest = dragStore[dragStore.length - 1]; + act(() => { + latest.handler({ last: false, offset: [10, 0], lastOffset: [-10, 0], velocity: [0, 0], direction: [1, 0] }); + }); + expect(queryByText('确认删除？')).not.toBeInTheDocument(); + vi.runOnlyPendingTimers(); + vi.useRealTimers(); + }); + it('click away closes cell', () => { const { getByText, container } = render(
diff --git a/src/swipe-cell/_example/event.tsx b/src/swipe-cell/_example/event.tsx index fac971a64..86373dbae 100644 --- a/src/swipe-cell/_example/event.tsx +++ b/src/swipe-cell/_example/event.tsx @@ -12,38 +12,40 @@ const DemoBlock = ({ summary, children }: { summary?: string; children?: React.R export default function Demo() { const ref = useRef(null); - const handleClick = (message = 'click') => { - Toast({ - message, - }); - }; + const handleSureConfirm = () => { Toast.success({ message: '删除成功', }); - ref.current.close(); + ref.current?.close(); }; - const handleEdit = () => handleClick('编辑'); - const handleDelete = () => handleClick('删除'); + const handleEdit = () => + Toast({ + message: '编辑', + }); + + const handleDelete = () => { + ref.current?.showSure(
确认删除？
, handleSureConfirm); + }; - const sure = ( -
- 确认删除？ -
+ const renderActions = () => ( + <> +
+ 编辑 +
+
+ 删除 +
+ ); - const actions = [ - { text: '编辑', className: 'btn edit-btn', onClick: handleEdit }, - { text: '删除', className: 'btn delete-btn', onClick: handleDelete, sure }, - ]; - return ( } opened /> diff --git a/src/swipe-cell/swipe-cell.en-US.md b/src/swipe-cell/swipe-cell.en-US.md index 928bff413..036d169fa 100644 --- a/src/swipe-cell/swipe-cell.en-US.md +++ b/src/swipe-cell/swipe-cell.en-US.md @@ -12,8 +12,16 @@ content | TNode | - | Typescript: `string \| TNode`。[see more ts definition](h 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?: 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 +right | TNode | - | Typescript: `Array \| TNode` `interface SwipeActionItem {text: string; className?: string; style?: Styles; 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 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 + +### SwipeCellInstanceFunctions 组件实例方法 + +name | params | return | description +-- | -- | -- | -- +className | String | - | className of component | N +style | Object | - | CSS(Cascading Style Sheets)，Typescript: `React.CSSProperties` | N +showSure | `(sure: string \| TNode, onClick?: SwipeActionItem['onClick'])` | `void` | Typescript: `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/blob/develop/src/common.ts) diff --git a/src/swipe-cell/swipe-cell.md b/src/swipe-cell/swipe-cell.md index 581744cf5..b35413c5e 100644 --- a/src/swipe-cell/swipe-cell.md +++ b/src/swipe-cell/swipe-cell.md @@ -12,8 +12,16 @@ 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?: 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 +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?: 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 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 +onDragend | Function | | TS 类型：`() => void`
滑动结束事件 | N +onDragstart | Function | | TS 类型：`() => void`
滑动开始事件 | N + +### SwipeCellInstanceFunctions 组件实例方法 + +名称 | 参数 | 返回值 | 描述 +-- | -- | -- | -- +className | String | - | 类名 | N +style | Object | - | 样式，TS 类型：`React.CSSProperties` | N +showSure | `(sure: string \| TNode, onClick?: SwipeActionItem['onClick'])` | `void` | 显示二次确认内容的函数。参数: `sure` 表示二次确认的具体内容，同 content; `onClick` 表示点击二次确认内容时执行的回调。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts)。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) diff --git a/src/swipe-cell/type.ts b/src/swipe-cell/type.ts index a3334f006..830d4512c 100644 --- a/src/swipe-cell/type.ts +++ b/src/swipe-cell/type.ts @@ -46,15 +46,21 @@ export interface TdSwipeCellProps { onDragstart?: () => void; } +/** 组件实例方法 */ +export interface SwipeCellInstanceFunctions { + /** + * 显示二次确认内容的函数。参数: `sure` 表示二次确认的具体内容，同 content; `onClick` 表示点击二次确认内容时执行的回调 + */ + showSure?: (sure: string | TNode, onClick?: SwipeActionItem['onClick']) => void; +} + export interface SwipeActionItem { text: string; className?: string; style?: Styles; - sure?: Sure; + sure?: string | TNode; onClick?: () => void; [key: string]: any; } -export type Sure = string | TNode; - export type SwipeSource = 'left' | 'right'; diff --git a/test/snap/__snapshots__/csr.test.jsx.snap b/test/snap/__snapshots__/csr.test.jsx.snap index d68eedede..b4af96562 100644 --- a/test/snap/__snapshots__/csr.test.jsx.snap +++ b/test/snap/__snapshots__/csr.test.jsx.snap @@ -127767,24 +127767,13 @@ exports[`csr snapshot test > csr test src/swipe-cell/_example/event.tsx 1`] = ` >
- - 编辑 - + 编辑
- - 删除 - + 删除
csr test src/swipe-cell/_example/event.tsx 1`] = ` >
- - 编辑 - + 编辑
- - 删除 - + 删除
@@ -129603,24 +129581,13 @@ exports[`csr snapshot test > csr test src/swipe-cell/_example/index.tsx 1`] = ` >
- - 编辑 - + 编辑
- - 删除 - + 删除
csr test src/swipe-cell/_example/index.tsx 1`] = ` >
- - 编辑 - + 编辑
- - 删除 - + 删除
@@ -167886,11 +167842,11 @@ exports[`ssr snapshot test > ssr test src/sticky/_example/offset.tsx 1`] = `" ssr test src/swipe-cell/_example/double.tsx 1`] = `"

左右滑操作

删除
左右滑操作
辅助信息
收藏
删除
"`; -exports[`ssr snapshot test > ssr test src/swipe-cell/_example/event.tsx 1`] = `"

带二次确认的操作

编辑
删除
带二次确认的操作
辅助信息
编辑
删除
"`; +exports[`ssr snapshot test > ssr test src/swipe-cell/_example/event.tsx 1`] = `"

带二次确认的操作

编辑
删除
带二次确认的操作
辅助信息
编辑
删除
"`; exports[`ssr snapshot test > ssr test src/swipe-cell/_example/icon.tsx 1`] = `"

带图标的滑动操作

图标加文字横排
辅助信息
编辑
删除
纯图标
辅助信息
图标加文字竖排
一段很长很长的内容文字
辅助信息
编辑
删除
"`; -exports[`ssr snapshot test > ssr test src/swipe-cell/_example/index.tsx 1`] = `"

SwipeCell 滑动操作

用于承载列表中的更多操作，通过左右滑动来展示，按钮的宽度固定高度根据列表高度而变化。

01 组件类型

左滑单操作

左滑单操作
辅助信息
删除
左滑单操作
一段很长很长的内容文字
辅助信息
删除
左滑双操作
辅助信息
收藏
编辑
左滑三操作
辅助信息
收藏
编辑
删除

右滑单操作

选择
右滑单操作
辅助信息

左右滑操作

删除
左右滑操作
辅助信息
收藏
删除

带图标的滑动操作

图标加文字横排
辅助信息
编辑
删除
纯图标
辅助信息
图标加文字竖排
一段很长很长的内容文字
辅助信息
编辑
删除

带二次确认的操作

编辑
删除
带二次确认的操作
辅助信息
编辑
删除
"`; +exports[`ssr snapshot test > ssr test src/swipe-cell/_example/index.tsx 1`] = `"

SwipeCell 滑动操作

用于承载列表中的更多操作，通过左右滑动来展示，按钮的宽度固定高度根据列表高度而变化。

01 组件类型

左滑单操作

左滑单操作
辅助信息
删除
左滑单操作
一段很长很长的内容文字
辅助信息
删除
左滑双操作
辅助信息
收藏
编辑
左滑三操作
辅助信息
收藏
编辑
删除

右滑单操作

选择
右滑单操作
辅助信息

左右滑操作

删除
左右滑操作
辅助信息
收藏
删除

带图标的滑动操作

图标加文字横排
辅助信息
编辑
删除
纯图标
辅助信息
图标加文字竖排
一段很长很长的内容文字
辅助信息
编辑
删除

带二次确认的操作

编辑
删除
带二次确认的操作
辅助信息
编辑
删除
"`; exports[`ssr snapshot test > ssr test src/swipe-cell/_example/left.tsx 1`] = `"

左滑单操作

左滑单操作
辅助信息
删除
左滑单操作
一段很长很长的内容文字
辅助信息
删除
左滑双操作
辅助信息
收藏
编辑
左滑三操作
辅助信息
收藏
编辑
删除
"`; diff --git a/test/snap/__snapshots__/ssr.test.jsx.snap b/test/snap/__snapshots__/ssr.test.jsx.snap index d2fc8fba8..62b3bde13 100644 --- a/test/snap/__snapshots__/ssr.test.jsx.snap +++ b/test/snap/__snapshots__/ssr.test.jsx.snap @@ -654,11 +654,11 @@ exports[`ssr snapshot test > ssr test src/sticky/_example/offset.tsx 1`] = `" ssr test src/swipe-cell/_example/double.tsx 1`] = `"

左右滑操作

删除
左右滑操作
辅助信息
收藏
删除
"`; -exports[`ssr snapshot test > ssr test src/swipe-cell/_example/event.tsx 1`] = `"

带二次确认的操作

编辑
删除
带二次确认的操作
辅助信息
编辑
删除
"`; +exports[`ssr snapshot test > ssr test src/swipe-cell/_example/event.tsx 1`] = `"

带二次确认的操作

编辑
删除
带二次确认的操作
辅助信息
编辑
删除
"`; exports[`ssr snapshot test > ssr test src/swipe-cell/_example/icon.tsx 1`] = `"

带图标的滑动操作

图标加文字横排
辅助信息
编辑
删除
纯图标
辅助信息
图标加文字竖排
一段很长很长的内容文字
辅助信息
编辑
删除
"`; -exports[`ssr snapshot test > ssr test src/swipe-cell/_example/index.tsx 1`] = `"

SwipeCell 滑动操作

用于承载列表中的更多操作，通过左右滑动来展示，按钮的宽度固定高度根据列表高度而变化。

01 组件类型

左滑单操作

左滑单操作
辅助信息
删除
左滑单操作
一段很长很长的内容文字
辅助信息
删除
左滑双操作
辅助信息
收藏
编辑
左滑三操作
辅助信息
收藏
编辑
删除

右滑单操作

选择
右滑单操作
辅助信息

左右滑操作

删除
左右滑操作
辅助信息
收藏
删除

带图标的滑动操作

图标加文字横排
辅助信息
编辑
删除
纯图标
辅助信息
图标加文字竖排
一段很长很长的内容文字
辅助信息
编辑
删除

带二次确认的操作

编辑
删除
带二次确认的操作
辅助信息
编辑
删除
"`; +exports[`ssr snapshot test > ssr test src/swipe-cell/_example/index.tsx 1`] = `"

SwipeCell 滑动操作

用于承载列表中的更多操作，通过左右滑动来展示，按钮的宽度固定高度根据列表高度而变化。

01 组件类型

左滑单操作

左滑单操作
辅助信息
删除
左滑单操作
一段很长很长的内容文字
辅助信息
删除
左滑双操作
辅助信息
收藏
编辑
左滑三操作
辅助信息
收藏
编辑
删除

右滑单操作

选择
右滑单操作
辅助信息

左右滑操作

删除
左右滑操作
辅助信息
收藏
删除

带图标的滑动操作

图标加文字横排
辅助信息
编辑
删除
纯图标
辅助信息
图标加文字竖排
一段很长很长的内容文字
辅助信息
编辑
删除

带二次确认的操作

编辑
删除
带二次确认的操作
辅助信息
编辑
删除
"`; exports[`ssr snapshot test > ssr test src/swipe-cell/_example/left.tsx 1`] = `"

左滑单操作

左滑单操作
辅助信息
删除
左滑单操作
一段很长很长的内容文字
辅助信息
删除
左滑双操作
辅助信息
收藏
编辑
左滑三操作
辅助信息
收藏
编辑
删除
"`;