From 3e3d1eedcfe8d4ffe6311638a3b4b78fa2baded0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=81=8F=E5=8F=B3?= Date: Mon, 29 Jun 2020 12:25:48 +0800 Subject: [PATCH] feat: customize Typography.Paragraph copyable (#25274) * :sparkles: customize copyable with tooltip and icon * :lipstick: fix copyable icon margin * :pencil: custom icon and tooltips demos * :camera_flash: updating sanpshots * :pencil: updating copyable api * fix snapshot * fix tooltips type * fix tooltips type again * update documentation Co-authored-by: Israel kusayev --- components/typography/Base.tsx | 13 ++- .../__tests__/__snapshots__/demo.test.js.snap | 79 +++++++++++++++++-- components/typography/demo/interactive.md | 16 +++- components/typography/index.en-US.md | 6 +- components/typography/index.zh-CN.md | 6 +- components/typography/style/index.less | 2 +- components/typography/style/rtl.less | 2 +- 7 files changed, 104 insertions(+), 20 deletions(-) diff --git a/components/typography/Base.tsx b/components/typography/Base.tsx index 650fd569ed..3c40b512a4 100644 --- a/components/typography/Base.tsx +++ b/components/typography/Base.tsx @@ -27,6 +27,8 @@ const isTextOverflowSupport = isStyleSupport('textOverflow'); interface CopyConfig { text?: string; onCopy?: () => void; + icon?: React.ReactNode; + tooltips?: [React.ReactNode, React.ReactNode]; } interface EditConfig { @@ -378,15 +380,20 @@ class Base extends React.Component { const prefixCls = this.getPrefixCls(); - const title = copied ? this.copiedStr : this.copyStr; + const title = copied + ? (copyable as CopyConfig).tooltips?.[1] || this.copiedStr + : (copyable as CopyConfig).tooltips?.[0] || this.copyStr; + + const ariaLabel = typeof title === 'string' ? title : ''; + return ( - {copied ? : } + {copied ? : (copyable as CopyConfig).icon || } ); diff --git a/components/typography/__tests__/__snapshots__/demo.test.js.snap b/components/typography/__tests__/__snapshots__/demo.test.js.snap index a5751ce95b..a53221b631 100644 --- a/components/typography/__tests__/__snapshots__/demo.test.js.snap +++ b/components/typography/__tests__/__snapshots__/demo.test.js.snap @@ -326,7 +326,7 @@ Array [ exports[`renders ./components/typography/demo/interactive.md correctly 1`] = ` Array [ -
This is an editable text. @@ -358,8 +358,9 @@ Array [
- , -
, +
, + This is a copyable text. @@ -391,8 +392,9 @@ Array [
- , -
, +
, + Replace copy text. @@ -424,6 +426,73 @@ Array [
+ , +
, + + Custom icon. +
+ + + +
+ , +
+ Replace tooltips text. +
+ + + +
, ] `; diff --git a/components/typography/demo/interactive.md b/components/typography/demo/interactive.md index e5b5f804e7..790ec9a644 100644 --- a/components/typography/demo/interactive.md +++ b/components/typography/demo/interactive.md @@ -15,8 +15,9 @@ Provide additional interactive capacity of editable and copyable. ```jsx import { Typography } from 'antd'; +import { SmileOutlined } from '@ant-design/icons'; -const { Paragraph } = Typography; +const { Text, Paragraph } = Typography; class Demo extends React.Component { state = { @@ -31,9 +32,16 @@ class Demo extends React.Component { render() { return ( <> - {this.state.str} - This is a copyable text. - Replace copy text. + {this.state.str} +
+ This is a copyable text. +
+ Replace copy text. +
+ }}>Custom icon. + + Replace tooltips text. + ); } diff --git a/components/typography/index.en-US.md b/components/typography/index.en-US.md index 63bdc8b153..5b4d728fdc 100644 --- a/components/typography/index.en-US.md +++ b/components/typography/index.en-US.md @@ -20,7 +20,7 @@ Basic text writing, including headings, body text, lists, and more. | Property | Description | Type | Default | Version | | --- | --- | --- | --- | --- | | code | Code style | boolean | false | | -| copyable | Config copy. Can set copy text and callback when is an object | boolean \| { text: string, onCopy: Function } | false | | +| copyable | whether to be copyable, customize it via setting an object | boolean \| { text: string, onCopy: Function, icon: ReactNode, tooltips: \[ReactNode, ReactNode\] } | false | icon and tooltips: 4.4.0 | | 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 | | @@ -37,7 +37,7 @@ Basic text writing, including headings, body text, lists, and more. | Property | Description | Type | Default | Version | | --- | --- | --- | --- | --- | | code | Code style | boolean | false | | -| copyable | Config copy. Can set copy text and callback when is an object | boolean \| { text: string, onCopy: Function } | false | | +| copyable | whether to be copyable, customize it via setting an object | boolean \| { text: string, onCopy: Function, icon: ReactNode, tooltips: \[ReactNode, ReactNode\] } | false | icon and tooltips: 4.4.0 | | 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 | | @@ -53,7 +53,7 @@ Basic text writing, including headings, body text, lists, and more. | Property | Description | Type | Default | Version | | --- | --- | --- | --- | --- | | code | Code style | boolean | false | | -| copyable | Config copy. Can set copy text and callback when is an object | boolean \| { text: string, onCopy: Function } | false | | +| copyable | whether to be copyable, customize it via setting an object | boolean \| { text: string, onCopy: Function, icon: ReactNode, tooltips: \[ReactNode, ReactNode\] } | false | icon and tooltips: 4.4.0 | | 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 | | diff --git a/components/typography/index.zh-CN.md b/components/typography/index.zh-CN.md index fc8eb131b2..4ab7b6a98a 100644 --- a/components/typography/index.zh-CN.md +++ b/components/typography/index.zh-CN.md @@ -21,7 +21,7 @@ cover: https://gw.alipayobjects.com/zos/alicdn/GOM1KQ24O/Typography.svg | 参数 | 说明 | 类型 | 默认值 | 版本 | | --- | --- | --- | --- | --- | | code | 添加代码样式 | boolean | false | | -| copyable | 是否可拷贝，为对象时可设置复制文本以回调函数 | boolean \| { text: string, onCopy: Function } | false | | +| copyable | 是否可拷贝，为对象时可进行各种自定义 | boolean \| { text: string, onCopy: Function, icon: ReactNode, tooltips: \[ReactNode, ReactNode\] } | false | `icon` 和 `tooltips` 在 `4.4.0` 支持 | | delete | 添加删除线样式 | boolean | false | | | disabled | 禁用文本 | boolean | false | | | editable | 是否可编辑，为对象时可对编辑进行控制 | boolean \| { editing: boolean, onStart: Function, onChange: Function(string) } | false | | @@ -36,7 +36,7 @@ cover: https://gw.alipayobjects.com/zos/alicdn/GOM1KQ24O/Typography.svg | 参数 | 说明 | 类型 | 默认值 | 版本 | | --- | --- | --- | --- | --- | -| copyable | 是否可拷贝，为对象时可设置复制文本以回调函数 | boolean \| { text: string, onCopy: Function } | false | | +| copyable | 是否可拷贝，为对象时可进行各种自定义 | boolean \| { text: string, onCopy: Function, icon: ReactNode, tooltips: \[ReactNode, ReactNode\] } | false | `icon` 和 `tooltips` 在 `4.4.0` 支持 | | delete | 添加删除线样式 | boolean | false | | | disabled | 禁用文本 | boolean | false | | | editable | 是否可编辑，为对象时可对编辑进行控制 | boolean \| { editing: boolean, onStart: Function, onChange: Function(string) } | false | | @@ -51,7 +51,7 @@ cover: https://gw.alipayobjects.com/zos/alicdn/GOM1KQ24O/Typography.svg | 参数 | 说明 | 类型 | 默认值 | 版本 | | --- | --- | --- | --- | --- | -| copyable | 是否可拷贝，为对象时可设置复制文本以回调函数 | boolean \| { text: string, onCopy: Function } | false | | +| | copyable | 是否可拷贝，为对象时可进行各种自定义 | boolean \| { text: string, onCopy: Function, icon: ReactNode, tooltips: \[ReactNode, ReactNode\] } | false | `icon` 和 `tooltips` 在 `4.4.0` 支持 | | delete | 添加删除线样式 | boolean | false | | | disabled | 禁用文本 | boolean | false | | | editable | 是否可编辑，为对象时可对编辑进行控制 | boolean \| { editing: boolean, onStart: Function, onChange: Function(string) } | false | | diff --git a/components/typography/style/index.less b/components/typography/style/index.less index 86b41a487a..1b2d258f89 100644 --- a/components/typography/style/index.less +++ b/components/typography/style/index.less @@ -139,7 +139,7 @@ &-copy { .operation-unit(); - margin-left: 8px; + margin-left: 4px; } &-copy-success { diff --git a/components/typography/style/rtl.less b/components/typography/style/rtl.less index fcc0fb9084..f2866ad08a 100644 --- a/components/typography/style/rtl.less +++ b/components/typography/style/rtl.less @@ -13,7 +13,7 @@ &-edit, &-copy { .@{typography-prefix-cls}-rtl & { - margin-right: 8px; + margin-right: 4px; margin-left: 0; } }