diff --git a/src/components/ellipsis/demos/demo1.tsx b/src/components/ellipsis/demos/demo1.tsx index 3a2889e1b7..7c4089a788 100644 --- a/src/components/ellipsis/demos/demo1.tsx +++ b/src/components/ellipsis/demos/demo1.tsx @@ -1,5 +1,5 @@ import React from 'react' -import { Ellipsis, Space } from 'antd-mobile' +import { Ellipsis, Space, Toast } from 'antd-mobile' import { DemoBlock } from 'demos' import { DownOutline, UpOutline } from 'antd-mobile-icons' @@ -31,6 +31,9 @@ export default () => { content={content} expandText='展开' collapseText='收起' + toggle={expanded => { + Toast.show(`${expanded ? '展开' : '收起'}了`) + }} /> diff --git a/src/components/ellipsis/ellipsis.tsx b/src/components/ellipsis/ellipsis.tsx index 08d966035c..96650763e5 100644 --- a/src/components/ellipsis/ellipsis.tsx +++ b/src/components/ellipsis/ellipsis.tsx @@ -21,6 +21,10 @@ export type EllipsisProps = { stopPropagationForActionButtons?: PropagationEvent[] onContentClick?: (e: React.MouseEvent) => void defaultExpanded?: boolean + toggle?: ( + expanded: boolean, + e: React.MouseEvent + ) => void } & NativeProps const defaultProps = { @@ -199,8 +203,9 @@ export const Ellipsis: FC = p => { props.stopPropagationForActionButtons, { + onClick={e => { setExpanded(true) + props.toggle?.(true, e) }} > {props.expandText} @@ -213,8 +218,9 @@ export const Ellipsis: FC = p => { props.stopPropagationForActionButtons, { + onClick={e => { setExpanded(false) + props.toggle?.(false, e) }} > {props.collapseText} diff --git a/src/components/ellipsis/index.en.md b/src/components/ellipsis/index.en.md index e954e63b93..78847f55da 100644 --- a/src/components/ellipsis/index.en.md +++ b/src/components/ellipsis/index.en.md @@ -26,6 +26,7 @@ When the display space is not enough, hide some content and replace it with "... | rows | The number to display lines | `number` | `1` | | stopPropagationForActionButtons | Prevent the event bubbling caused by the expand operation and the collapse operation | `PropagationEvent[]` | `[]` | | defaultExpanded | Whether to expand by default | `boolean` | `false` | +| toggle | Callback when expand or collapse | `(expanded: boolean, e: React.MouseEvent) => void` | `''` | ## FAQ diff --git a/src/components/ellipsis/index.zh.md b/src/components/ellipsis/index.zh.md index 301d71f079..bf46f6cf81 100644 --- a/src/components/ellipsis/index.zh.md +++ b/src/components/ellipsis/index.zh.md @@ -26,6 +26,7 @@ | rows | 展示几行 | `number` | `1` | | stopPropagationForActionButtons | 阻止展开操作,收起操作引发的事件冒泡 | `PropagationEvent[]` | `[]` | | defaultExpanded | 是否默认展开 | `boolean` | `false` | +| toggle | 展开或收起的回调 | `(expanded: boolean, e: React.MouseEvent) => void` | `''` | ## FAQ diff --git a/src/components/ellipsis/tests/ellipsis.test.tsx b/src/components/ellipsis/tests/ellipsis.test.tsx index fdb89ed8bd..cb35e99ba7 100644 --- a/src/components/ellipsis/tests/ellipsis.test.tsx +++ b/src/components/ellipsis/tests/ellipsis.test.tsx @@ -118,6 +118,26 @@ describe('Ellipsis', () => { expect(ellipsis).toHaveTextContent('...') }) + test('toggle should be work', () => { + const toggle = jest.fn() + const { getByText } = render( + { + toggle(expanded) + }} + /> + ) + fireEvent.click(getByText('collapse')) + expect(toggle).toBeCalledWith(false) + + fireEvent.click(getByText('expand')) + expect(toggle).toBeCalledWith(true) + }) + test('content not exceeded', () => { Object.defineProperty(HTMLElement.prototype, 'offsetHeight', { value: lineHeight,