Repository: ant-design/ant-design-mobile
Pull request #5955 (2023-02-03 08:23:36)

feat(Ellipsis): support default expand
#5947 支持默认展开

github-actions[bot]: PR preview has been successfully built and deployed to https://antd-mobile-preview-pr-5955.surge.sh
codecov[bot]: # [Codecov](https://codecov.io/gh/ant-design/ant-design-mobile/pull/5955?src=pr&el=h1&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=ant-design) Report
Base: **90.38**% // Head: **90.39**% // Increases project coverage by **`+0.00%`** :tada:
> Coverage data is based on head [(`706cf05`)](https://codecov.io/gh/ant-design/ant-design-mobile/pull/5955?src=pr&el=desc&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=ant-design) compared to base [(`e215fc3`)](https://codecov.io/gh/ant-design/ant-design-mobile/commit/e215fc3ec6ebbe016455deab58cf744fd4592a20?el=desc&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=ant-design).
> Patch coverage: 100.00% of modified lines in pull request are covered.

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


```diff
@@           Coverage Diff           @@
##           master    #5955   +/-   ##
=======================================
  Coverage   90.38%   90.39%           
=======================================
  Files         300      300           
  Lines        6513     6515    +2     
  Branches     1616     1616           
=======================================
+ Hits         5887     5889    +2     
  Misses        575      575           
  Partials       51       51           
```


| [Impacted Files](https://codecov.io/gh/ant-design/ant-design-mobile/pull/5955?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=ant-design) | Coverage Δ | |
|---|---|---|
| [src/components/ellipsis/ellipsis.tsx](https://codecov.io/gh/ant-design/ant-design-mobile/pull/5955?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=ant-design#diff-c3JjL2NvbXBvbmVudHMvZWxsaXBzaXMvZWxsaXBzaXMudHN4) | `99.13% <100.00%> (ø)` | |
| [src/locales/base.ts](https://codecov.io/gh/ant-design/ant-design-mobile/pull/5955?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=ant-design#diff-c3JjL2xvY2FsZXMvYmFzZS50cw==) | `100.00% <0.00%> (ø)` | |
| [src/locales/zh-CN.ts](https://codecov.io/gh/ant-design/ant-design-mobile/pull/5955?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=ant-design#diff-c3JjL2xvY2FsZXMvemgtQ04udHM=) | `100.00% <0.00%> (ø)` | |
| [src/locales/zh-HK.ts](https://codecov.io/gh/ant-design/ant-design-mobile/pull/5955?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=ant-design#diff-c3JjL2xvY2FsZXMvemgtSEsudHM=) | `100.00% <0.00%> (ø)` | |
| [src/locales/zh-TW.ts](https://codecov.io/gh/ant-design/ant-design-mobile/pull/5955?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=ant-design#diff-c3JjL2xvY2FsZXMvemgtVFcudHM=) | `100.00% <0.00%> (ø)` | |
| [src/components/popup/popup.tsx](https://codecov.io/gh/ant-design/ant-design-mobile/pull/5955?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=ant-design#diff-c3JjL2NvbXBvbmVudHMvcG9wdXAvcG9wdXAudHN4) | `85.24% <0.00%> (+0.50%)` | :arrow_up: |

Help us with your feedback. Take ten seconds to tell us [how you rate us](https://about.codecov.io/nps?utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=ant-design). Have a feature suggestion? [Share it here.](https://app.codecov.io/gh/feedback/?utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=ant-design)

</details>

[:umbrella: View full report at Codecov](https://codecov.io/gh/ant-design/ant-design-mobile/pull/5955?src=pr&el=continue&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=ant-design).   
:loudspeaker: Do you have feedback about the report comment? [Let us know in this issue](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).


Patch:
diff --git a/src/components/ellipsis/demos/demo1.tsx b/src/components/ellipsis/demos/demo1.tsx
index 8bad17e3a..d170bd2d6 100644
--- a/src/components/ellipsis/demos/demo1.tsx
+++ b/src/components/ellipsis/demos/demo1.tsx
@@ -41,6 +41,15 @@ export default () => {
         </Space>
       </DemoBlock>
 
+      <DemoBlock title='默认展开'>
+        <Ellipsis
+          content={content}
+          defaultExpanded={true}
+          expandText='展开'
+          collapseText='收起'
+        />
+      </DemoBlock>
+
       <DemoBlock title='emoji'>
         <Ellipsis
           direction='end'
diff --git a/src/components/ellipsis/ellipsis.tsx b/src/components/ellipsis/ellipsis.tsx
index a9efa9706..d124efdf2 100644
--- a/src/components/ellipsis/ellipsis.tsx
+++ b/src/components/ellipsis/ellipsis.tsx
@@ -19,6 +19,7 @@ export type EllipsisProps = {
   collapseText?: string
   stopPropagationForActionButtons?: PropagationEvent[]
   onContentClick?: (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void
+  defaultExpanded?: boolean
 } & NativeProps
 
 const defaultProps = {
@@ -29,6 +30,7 @@ const defaultProps = {
   collapseText: '',
   stopPropagationForActionButtons: [],
   onContentClick: () => {},
+  defaultExpanded: false,
 }
 
 type EllipsisedValue = {
@@ -41,7 +43,7 @@ export const Ellipsis: FC<EllipsisProps> = p => {
   const rootRef = useRef<HTMLDivElement>(null)
 
   const [ellipsised, setEllipsised] = useState<EllipsisedValue>({})
-  const [expanded, setExpanded] = useState(false)
+  const [expanded, setExpanded] = useState(props.defaultExpanded)
   const [exceeded, setExceeded] = useState(false)
 
   const chars = useMemo(() => runes(props.content), [props.content])


Test patch:
diff --git a/src/components/ellipsis/tests/ellipsis.test.tsx b/src/components/ellipsis/tests/ellipsis.test.tsx
index e8d4eca0a..3d683e849 100644
--- a/src/components/ellipsis/tests/ellipsis.test.tsx
+++ b/src/components/ellipsis/tests/ellipsis.test.tsx
@@ -2,6 +2,7 @@ import React from 'react'
 import { render, testA11y, fireEvent } from 'testing'
 import Ellipsis from '..'
 
+const classPrefix = `adm-ellipsis`
 const content =
   '蚂蚁的企业级产品是一个庞大且复杂的体系。这类产品不仅量级巨大且功能复杂，而且变动和并发频繁，常常需要设计与开发能够快速的做出响应。同时这类产品中有存在很多类似的页面以及组件，可以通过抽象得到一些稳定且高复用性的内容。'
 
@@ -102,6 +103,23 @@ describe('Ellipsis', () => {
     expect(onClick).toBeCalled()
   })
 
+  test('default expand should be work', async () => {
+    const { getByText } = render(
+      <Ellipsis
+        content={content}
+        defaultExpanded
+        expandText='expand'
+        collapseText='collapse'
+      />
+    )
+
+    const ellipsis = document.querySelector(`.${classPrefix}`)
+    expect(ellipsis).not.toHaveTextContent('...')
+    expect(ellipsis).toHaveTextContent('collapse')
+    fireEvent.click(getByText('collapse'))
+    expect(ellipsis).toHaveTextContent('...')
+  })
+
   test('content not exceeded', async () => {
     Object.defineProperty(HTMLElement.prototype, 'offsetHeight', {
       value: lineHeight,