Repository: ant-design/ant-design-mobile
Pull request #6893 (2025-06-24 15:19:18)

feat(Ellipsis): add onEllipsis callback to Ellipsis component
- 解决该 issue 的问题 https://github.com/ant-design/ant-design-mobile/issues/6570
- fork to https://github.com/ant-design/ant-design-mobile/pull/6576
- change api use onEllipsis

<!-- This is an auto-generated comment: release notes by coderabbit.ai -->
## Summary by CodeRabbit

- **新功能**
  - Ellipsis 组件新增 onExpand 回调属性，支持在内容展开或收起时触发回调，并返回当前状态和事件对象。
  - 在示例中新增 onExpand 回调，触发时显示对应的展开或收起提示。
- **文档**
  - 更新中英文文档，增加 onExpand 属性说明及用法示例，文档中新增版本信息列。
- **测试**
  - 新增 onExpand 回调相关的单元测试，验证其在展开和收起时能正确触发。
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

github-actions[bot]: [<img width="500" alt="Prepare preview" src="https://user-images.githubusercontent.com/5378891/72351368-2c979e00-371b-11ea-9652-eb4e825d745e.gif">](https://preview-6893-ant-design-mobile.surge.sh)
<!-- AUTO_PREVIEW_HOOK -->
<!-- AUTO_PREVIEW_HOOK -->
pkg-pr-new[bot]: 



```
npm i https://pkg.pr.new/ant-design/ant-design-mobile/antd-mobile@6893
```


_commit: <a href="https://github.com/ant-design/ant-design-mobile/runs/44698366082"><code>370eb5c</code></a>_

codecov[bot]: ## [Codecov](https://app.codecov.io/gh/ant-design/ant-design-mobile/pull/6893?dropdown=coverage&src=pr&el=h1&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=ant-design) Report
All modified and coverable lines are covered by tests :white_check_mark:
> Project coverage is 92.80%. Comparing base [(`38b028f`)](https://app.codecov.io/gh/ant-design/ant-design-mobile/commit/38b028f2bd1e9c59325accef7f665e826e917dca?dropdown=coverage&el=desc&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=ant-design) to head [(`13219d1`)](https://app.codecov.io/gh/ant-design/ant-design-mobile/commit/13219d178953836007a0ca3c71dd0b5df055a063?dropdown=coverage&el=desc&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=ant-design).

<details><summary>Additional details and impacted files</summary>


```diff
@@           Coverage Diff           @@
##           master    #6893   +/-   ##
=======================================
  Coverage   92.79%   92.80%           
=======================================
  Files         336      336           
  Lines        7235     7237    +2     
  Branches     1818     1782   -36     
=======================================
+ Hits         6714     6716    +2     
- Misses        485      513   +28     
+ Partials       36        8   -28     
```

</details>

[:umbrella: View full report in Codecov by Sentry](https://app.codecov.io/gh/ant-design/ant-design-mobile/pull/6893?dropdown=coverage&src=pr&el=continue&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=ant-design).   
:loudspeaker: Have feedback on the report? [Share it here](https://about.codecov.io/codecov-pr-comment-feedback/?utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=ant-design).

<details><summary> :rocket: New features to boost your workflow: </summary>

- :snowflake: [Test Analytics](https://docs.codecov.com/docs/test-analytics): Detect flaky tests, report on failures, and find test suite problems.
- :package: [JS Bundle Analysis](https://docs.codecov.com/docs/javascript-bundle-analysis): Save yourself from yourself by tracking and limiting bundle sizes in JS merges.
</details>
Meet-student: @zombieJ  done

Patch:
diff --git a/src/components/ellipsis/demos/demo1.tsx b/src/components/ellipsis/demos/demo1.tsx
index 79db2fd2f..6ebf0bf5c 100644
--- a/src/components/ellipsis/demos/demo1.tsx
+++ b/src/components/ellipsis/demos/demo1.tsx
@@ -1,4 +1,4 @@
-import { Ellipsis, Space } from 'antd-mobile'
+import { Ellipsis, Space, Toast } from 'antd-mobile'
 import { DownOutline, UpOutline } from 'antd-mobile-icons'
 import { DemoBlock } from 'demos'
 import React from 'react'
@@ -31,6 +31,9 @@ export default () => {
           content={content}
           expandText='展开'
           collapseText='收起'
+          onExpand={ellipsis => {
+            Toast.show(`${ellipsis ? '展开' : '收起'}了`)
+          }}
         />
       </DemoBlock>
 
diff --git a/src/components/ellipsis/ellipsis.tsx b/src/components/ellipsis/ellipsis.tsx
index 55d6fc2b3..39e7d0c55 100644
--- a/src/components/ellipsis/ellipsis.tsx
+++ b/src/components/ellipsis/ellipsis.tsx
@@ -20,6 +20,12 @@ export type EllipsisProps = {
   stopPropagationForActionButtons?: PropagationEvent[]
   onContentClick?: (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void
   defaultExpanded?: boolean
+  onExpand?: (
+    expanded: boolean,
+    info: {
+      event: React.MouseEvent<HTMLAnchorElement, MouseEvent>
+    }
+  ) => void
 } & NativeProps
 
 const defaultProps = {
@@ -57,8 +63,11 @@ export const Ellipsis: FC<EllipsisProps> = p => {
     ? withStopPropagation(
         stopPropagationForActionButtons,
         <a
-          onClick={() => {
+          onClick={e => {
             setExpanded(true)
+            props.onExpand?.(true, {
+              event: e,
+            })
           }}
         >
           {expandText}
@@ -70,8 +79,11 @@ export const Ellipsis: FC<EllipsisProps> = p => {
     ? withStopPropagation(
         stopPropagationForActionButtons,
         <a
-          onClick={() => {
+          onClick={e => {
             setExpanded(false)
+            props.onExpand?.(false, {
+              event: e,
+            })
           }}
         >
           {collapseText}
diff --git a/src/components/ellipsis/index.en.md b/src/components/ellipsis/index.en.md
index e954e63b9..58a7082e3 100644
--- a/src/components/ellipsis/index.en.md
+++ b/src/components/ellipsis/index.en.md
@@ -16,16 +16,17 @@ When the display space is not enough, hide some content and replace it with "...
 
 ### Props
 
-| Name | Description | Type | Default |
-| --- | --- | --- | --- |
-| collapseText | Collapse operation text | `React.ReactNode` | `''` |
-| content | The text content | `string` | - |
-| direction | Position omitted | `'start' \| 'end' \| 'middle'` | `'end'` |
-| expandText | Expand operation text | `React.ReactNode` | `''` |
-| onContentClick | Trigger when clicked text content | `(e: React.MouseEvent) => void` | - |
-| 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` |
+| Name | Description | Type | Default | Version |
+| --- | --- | --- | --- | --- |
+| collapseText | Collapse operation text | `React.ReactNode` | `''` |  |
+| content | The text content | `string` | - |  |
+| direction | Position omitted | `'start' \| 'end' \| 'middle'` | `'end'` |  |
+| expandText | Expand operation text | `React.ReactNode` | `''` |  |
+| onContentClick | Trigger when clicked text content | `(e: React.MouseEvent) => void` | - |  |
+| 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` |  |
+| onExpand | Callback when expand or collapse | `(expanded: boolean, info: { event: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => void}` | - | 5.41.0 |
 
 ## FAQ
 
diff --git a/src/components/ellipsis/index.zh.md b/src/components/ellipsis/index.zh.md
index 301d71f07..f7004547a 100644
--- a/src/components/ellipsis/index.zh.md
+++ b/src/components/ellipsis/index.zh.md
@@ -16,16 +16,17 @@
 
 ### 属性
 
-| 属性 | 说明 | 类型 | 默认值 |
-| --- | --- | --- | --- |
-| collapseText | 收起操作的文案 | `React.ReactNode` | `''` |
-| content | 文本内容 | `string` | - |
-| direction | 省略位置 | `'start' \| 'end' \| 'middle'` | `'end'` |
-| expandText | 展开操作的文案 | `React.ReactNode` | `''` |
-| onContentClick | 点击文本内容时触发 | `(e: React.MouseEvent) => void` | - |
-| rows | 展示几行 | `number` | `1` |
-| stopPropagationForActionButtons | 阻止展开操作，收起操作引发的事件冒泡 | `PropagationEvent[]` | `[]` |
-| defaultExpanded | 是否默认展开 | `boolean` | `false` |
+| 属性 | 说明 | 类型 | 默认值 | 版本 |
+| --- | --- | --- | --- | --- |
+| collapseText | 收起操作的文案 | `React.ReactNode` | `''` |  |
+| content | 文本内容 | `string` | - |  |
+| direction | 省略位置 | `'start' \| 'end' \| 'middle'` | `'end'` |  |
+| expandText | 展开操作的文案 | `React.ReactNode` | `''` |  |
+| onContentClick | 点击文本内容时触发 | `(e: React.MouseEvent) => void` | - |  |
+| rows | 展示几行 | `number` | `1` |  |
+| stopPropagationForActionButtons | 阻止展开操作，收起操作引发的事件冒泡 | `PropagationEvent[]` | `[]` |  |
+| defaultExpanded | 是否默认展开 | `boolean` | `false` |  |
+| onExpand | 展开或收起的回调 | `(expanded: boolean, info: { event: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => void` | - | 5.41.0 |
 
 ## FAQ
 
diff --git a/src/components/popup/index.en.md b/src/components/popup/index.en.md
index 35fc73e69..2e249582f 100644
--- a/src/components/popup/index.en.md
+++ b/src/components/popup/index.en.md
@@ -26,6 +26,7 @@ It is suitable for displaying pop-up windows, information prompts, selection inp
 | closeOnMaskClick | Whether to close after clicking the mask layer | `boolean` | `false` |
 | closeIcon | Custom close button icon | `ReactNode` | `<CloseOutline/>` |
 | destroyOnClose | Destroy `dom` when not visible | `boolean` | `false` |
+| disableBodyScroll | Mask Whether to disable body scrolling | `boolean` | `true` |
 | forceRender | Render content forcely | `boolean` | `false` |
 | getContainer | To get the specified mounted `HTML` node, the default is `body`, if `null` returned, it would be rendered to the current node | `HTMLElement \| () => HTMLElement \| null` | `() => document.body` |
 | mask | Whether to display Mask | `boolean` | `true` |
diff --git a/src/components/popup/index.zh.md b/src/components/popup/index.zh.md
index 88f9f7ad5..75551fd0f 100644
--- a/src/components/popup/index.zh.md
+++ b/src/components/popup/index.zh.md
@@ -26,6 +26,7 @@
 | closeOnMaskClick | 点击背景蒙层后是否关闭 | `boolean` | `false` |
 | closeIcon | 自定义关闭按钮图标 | `ReactNode` | `<CloseOutline/>` |
 | destroyOnClose | 不可见时是否销毁 `DOM` 结构 | `boolean` | `false` |
+| disableBodyScroll | 背景蒙层是否禁用 body 滚动 | `boolean` | `true` |
 | forceRender | 强制渲染内容 | `boolean` | `false` |
 | getContainer | 指定挂载的 `HTML` 节点，默认为 `body`，如果为 `null` 的话，会渲染到当前节点 | `HTMLElement \| () => HTMLElement \| null` | `() => document.body` |
 | mask | 是否展示蒙层 | `boolean` | `true` |


Test patch:
diff --git a/src/components/ellipsis/tests/ellipsis.test.tsx b/src/components/ellipsis/tests/ellipsis.test.tsx
index 2e8414e91..fafae137f 100644
--- a/src/components/ellipsis/tests/ellipsis.test.tsx
+++ b/src/components/ellipsis/tests/ellipsis.test.tsx
@@ -103,6 +103,26 @@ describe('Ellipsis', () => {
     expect(ellipsis).toHaveTextContent('...')
   })
 
+  test('check onEllipsis should be work', () => {
+    const toggle = jest.fn()
+    const { getByText } = render(
+      <Ellipsis
+        content={content}
+        defaultExpanded
+        expandText='expand'
+        collapseText='collapse'
+        onExpand={ellipsis => {
+          toggle(ellipsis)
+        }}
+      />
+    )
+    fireEvent.click(getByText('collapse'))
+    expect(toggle).toBeCalledWith(false)
+
+    fireEvent.click(getByText('expand'))
+    expect(toggle).toBeCalledWith(true)
+  })
+
   test('content not exceeded', () => {
     const { getByTestId } = render(
       <Ellipsis content='abc' data-testid='ellipsis' />