feat: add toggle callback to Ellipsis component

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 ? '展开' : '收起'}了`)
+          }}
         />
       </DemoBlock>
 

src/components/ellipsis/ellipsis.tsx

@@ -21,6 +21,10 @@ export type EllipsisProps = {
   stopPropagationForActionButtons?: PropagationEvent[]
   onContentClick?: (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void
   defaultExpanded?: boolean
+  toggle?: (
+    expanded: boolean,
+    e: React.MouseEvent<HTMLAnchorElement, MouseEvent>
+  ) => void
 } & NativeProps
 
 const defaultProps = {
@@ -199,8 +203,9 @@ export const Ellipsis: FC<EllipsisProps> = p => {
       props.stopPropagationForActionButtons,
       <a
         ref={expandElRef}
-        onClick={() => {
+        onClick={e => {
           setExpanded(true)
+          props.toggle?.(true, e)
         }}
       >
         {props.expandText}
@@ -213,8 +218,9 @@ export const Ellipsis: FC<EllipsisProps> = p => {
       props.stopPropagationForActionButtons,
       <a
         ref={collapseElRef}
-        onClick={() => {
+        onClick={e => {
           setExpanded(false)
+          props.toggle?.(false, e)
         }}
       >
         {props.collapseText}

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<HTMLAnchorElement, MouseEvent>) => void` | `''` |
 
 ## FAQ
 

src/components/ellipsis/index.zh.md

@@ -26,6 +26,7 @@
 | rows | 展示几行 | `number` | `1` |
 | stopPropagationForActionButtons | 阻止展开操作，收起操作引发的事件冒泡 | `PropagationEvent[]` | `[]` |
 | defaultExpanded | 是否默认展开 | `boolean` | `false` |
+| toggle | 展开或收起的回调 | `(expanded: boolean, e: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => void` | `''` |
 
 ## FAQ
 

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(
+      <Ellipsis
+        content={content}
+        defaultExpanded
+        expandText='expand'
+        collapseText='collapse'
+        toggle={expanded => {
+          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,