Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat: add toggle callback to Ellipsis component #6576

Closed
wants to merge 1 commit into from
Closed

feat: add toggle callback to Ellipsis component #6576

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
5 changes: 4 additions & 1 deletion src/components/ellipsis/demos/demo1.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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'

Expand Down Expand Up @@ -31,6 +31,9 @@ export default () => {
content={content}
expandText='展开'
collapseText='收起'
toggle={expanded => {
Toast.show(`${expanded ? '展开' : '收起'}了`)
}}
/>
</DemoBlock>

Expand Down
10 changes: 8 additions & 2 deletions src/components/ellipsis/ellipsis.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,10 @@ export type EllipsisProps = {
stopPropagationForActionButtons?: PropagationEvent[]
onContentClick?: (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void
defaultExpanded?: boolean
toggle?: (
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Could we use onEllipsis instead. It's same as the antd API:
https://ant.design/components/typography-cn#api

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Indeed, the design of onEllipsis in antd is more reasonable. The correct logic is to trigger onEllipsis based on whether the text is ellipsized or not. I'll continue working on it.

expanded: boolean,
e: React.MouseEvent<HTMLAnchorElement, MouseEvent>
) => void
} & NativeProps

const defaultProps = {
Expand Down Expand Up @@ -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}
Expand All @@ -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}
Expand Down
1 change: 1 addition & 0 deletions src/components/ellipsis/index.en.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down
1 change: 1 addition & 0 deletions src/components/ellipsis/index.zh.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,7 @@
| rows | 展示几行 | `number` | `1` |
| stopPropagationForActionButtons | 阻止展开操作，收起操作引发的事件冒泡 | `PropagationEvent[]` | `[]` |
| defaultExpanded | 是否默认展开 | `boolean` | `false` |
| toggle | 展开或收起的回调 | `(expanded: boolean, e: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => void` | `''` |

## FAQ

Expand Down
20 changes: 20 additions & 0 deletions src/components/ellipsis/tests/ellipsis.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down