diff --git a/components/typography/Base.tsx b/components/typography/Base.tsx index 255a5d32f6..ffb5597dfb 100644 --- a/components/typography/Base.tsx +++ b/components/typography/Base.tsx @@ -39,6 +39,7 @@ interface EllipsisConfig { rows?: number; expandable?: boolean; suffix?: string; + symbol?: React.ReactNode; onExpand?: React.MouseEventHandler; onEllipsis?: (ellipsis: boolean) => void; } @@ -325,7 +326,7 @@ class Base extends React.Component { } renderExpand(forceRender?: boolean) { - const { expandable } = this.getEllipsis(); + const { expandable, symbol } = this.getEllipsis(); const { expanded, isEllipsis } = this.state; if (!expandable) return null; @@ -333,6 +334,13 @@ class Base extends React.Component { // force render expand icon for measure usage or it will cause dead loop if (!forceRender && (expanded || !isEllipsis)) return null; + let expandContent: React.ReactNode; + if (symbol) { + expandContent = symbol; + } else { + expandContent = this.expandStr; + } + return ( { onClick={this.onExpandClick} aria-label={this.expandStr} > - {this.expandStr} + {expandContent} ); } diff --git a/components/typography/__tests__/index.test.js b/components/typography/__tests__/index.test.js index d4ee54a790..6275f38369 100644 --- a/components/typography/__tests__/index.test.js +++ b/components/typography/__tests__/index.test.js @@ -182,6 +182,20 @@ describe('Typography', () => { expect(wrapper.find('p').text()).toEqual(fullStr); }); + it('should have custom expand style', async () => { + const symbol = 'more'; + const wrapper = mount( + + {fullStr} + , + ); + + await sleep(20); + wrapper.update(); + + expect(wrapper.find('.ant-typography-expand').text()).toEqual('more'); + }); + it('can use css ellipsis', () => { const wrapper = mount(); expect(wrapper.find('.ant-typography-ellipsis-single-line').length).toBeTruthy(); diff --git a/components/typography/demo/ellipsis.md b/components/typography/demo/ellipsis.md index d8e1e6e56a..2551b07f02 100644 --- a/components/typography/demo/ellipsis.md +++ b/components/typography/demo/ellipsis.md @@ -29,7 +29,7 @@ ReactDOM.render( language for background applications, is refined by Ant UED Team. - + Ant Design, a design language for background applications, is refined by Ant UED Team. Ant Design, a design language for background applications, is refined by Ant UED Team. Ant Design, a design language for background applications, is refined by Ant UED Team. Ant Design, a diff --git a/components/typography/index.en-US.md b/components/typography/index.en-US.md index 8258349ec4..1f0727aa88 100644 --- a/components/typography/index.en-US.md +++ b/components/typography/index.en-US.md @@ -56,7 +56,7 @@ Basic text writing, including headings, body text, lists, and more. | delete | Deleted line style | boolean | false | | | disabled | Disabled content | boolean | false | | | editable | Editable. Can control edit state when is object | boolean \| { editing: boolean, onStart: Function, onChange: Function(string) } | false | | -| ellipsis | Display ellipsis when text overflows. Can configure rows expandable and suffix by using object | boolean \| { rows: number, expandable: boolean suffix: string, onExpand: Function(event), onEllipsis: Function(ellipsis) } | false | onEllipsis: 4.2.0 | +| ellipsis | Display ellipsis when text overflows. Can configure rows expandable and suffix by using object | boolean \| { rows: number, expandable: boolean, suffix: string, symbol: React.ReactNode, onExpand: Function(event), onEllipsis: Function(ellipsis) } | false | onEllipsis: 4.2.0 | | mark | Marked style | boolean | false | | | underline | Underlined style | boolean | false | | | onChange | Trigger when user edits the content | Function(string) | - | | diff --git a/components/typography/index.zh-CN.md b/components/typography/index.zh-CN.md index 0dd187b929..a28dfa44f5 100644 --- a/components/typography/index.zh-CN.md +++ b/components/typography/index.zh-CN.md @@ -54,7 +54,7 @@ cols: 1 | delete | 添加删除线样式 | boolean | false | | | disabled | 禁用文本 | boolean | false | | | editable | 是否可编辑,为对象时可对编辑进行控制 | boolean \| { editing: boolean, onStart: Function, onChange: Function(string) } | false | | -| ellipsis | 自动溢出省略,为对象时可设置省略行数、是否可展开、添加后缀等 | boolean \| { rows: number, expandable: boolean, suffix: string, onExpand: Function(event), onEllipsis: Function(ellipsis) } | false | onEllipsis: 4.2.0 | +| ellipsis | 自动溢出省略,为对象时可设置省略行数、是否可展开、添加后缀等 | boolean \| { rows: number, expandable: boolean, suffix: string, symbol: React.ReactNode, onExpand: Function(event), onEllipsis: Function(ellipsis) } | false | onEllipsis: 4.2.0 | | mark | 添加标记样式 | boolean | false | | | underline | 添加下划线样式 | boolean | false | | | onChange | 当用户提交编辑内容时触发 | Function(string) | - | |