feat: customize Typography.Paragraph copyable (#25274)

* ✨ customize copyable with tooltip and icon * 💄 fix copyable icon margin * 📝 custom icon and tooltips demos * 📸 updating sanpshots * 📝 updating copyable api * fix snapshot * fix tooltips type * fix tooltips type again * update documentation Co-authored-by: Israel kusayev <israel.kusayev@gmail.com>
ant-design · Jun 29, 2020 · 3e3d1ee · 3e3d1ee
1 parent 1f2e50d
commit 3e3d1ee
Show file tree

Hide file tree

Showing 7 changed files with 104 additions and 20 deletions.
diff --git 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<InternalBlockProps, BaseState> {
 
     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 (
       <Tooltip key="copy" title={title}>
         <TransButton
           className={classNames(`${prefixCls}-copy`, copied && `${prefixCls}-copy-success`)}
           onClick={this.onCopyClick}
-          aria-label={title}
+          aria-label={ariaLabel}
         >
-          {copied ? <CheckOutlined /> : <CopyOutlined />}
+          {copied ? <CheckOutlined /> : (copyable as CopyConfig).icon || <CopyOutlined />}
         </TransButton>
       </Tooltip>
     );

diff --git 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 [
-  <div
+  <span
     class="ant-typography"
   >
     This is an editable text.
@@ -358,8 +358,9 @@ Array [
         </svg>
       </span>
     </div>
-  </div>,
-  <div
+  </span>,
+  <br />,
+  <span
     class="ant-typography"
   >
     This is a copyable text.
@@ -391,8 +392,9 @@ Array [
         </svg>
       </span>
     </div>
-  </div>,
-  <div
+  </span>,
+  <br />,
+  <span
     class="ant-typography"
   >
     Replace copy text.
@@ -424,6 +426,73 @@ Array [
         </svg>
       </span>
     </div>
+  </span>,
+  <br />,
+  <span
+    class="ant-typography"
+  >
+    Custom icon.
+    <div
+      aria-label="Copy"
+      class="ant-typography-copy"
+      role="button"
+      style="border:0;background:transparent;padding:0;line-height:inherit;display:inline-block"
+      tabindex="0"
+    >
+      <span
+        aria-label="smile"
+        class="anticon anticon-smile"
+        role="img"
+      >
+        <svg
+          aria-hidden="true"
+          class=""
+          data-icon="smile"
+          fill="currentColor"
+          focusable="false"
+          height="1em"
+          viewBox="64 64 896 896"
+          width="1em"
+        >
+          <path
+            d="M288 421a48 48 0 1096 0 48 48 0 10-96 0zm352 0a48 48 0 1096 0 48 48 0 10-96 0zM512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm263 711c-34.2 34.2-74 61-118.3 79.8C611 874.2 562.3 884 512 884c-50.3 0-99-9.8-144.8-29.2A370.4 370.4 0 01248.9 775c-34.2-34.2-61-74-79.8-118.3C149.8 611 140 562.3 140 512s9.8-99 29.2-144.8A370.4 370.4 0 01249 248.9c34.2-34.2 74-61 118.3-79.8C413 149.8 461.7 140 512 140c50.3 0 99 9.8 144.8 29.2A370.4 370.4 0 01775.1 249c34.2 34.2 61 74 79.8 118.3C874.2 413 884 461.7 884 512s-9.8 99-29.2 144.8A368.89 368.89 0 01775 775zM664 533h-48.1c-4.2 0-7.8 3.2-8.1 7.4C604 589.9 562.5 629 512 629s-92.1-39.1-95.8-88.6c-.3-4.2-3.9-7.4-8.1-7.4H360a8 8 0 00-8 8.4c4.4 84.3 74.5 151.6 160 151.6s155.6-67.3 160-151.6a8 8 0 00-8-8.4z"
+          />
+        </svg>
+      </span>
+    </div>
+  </span>,
+  <div
+    class="ant-typography"
+  >
+    Replace tooltips text.
+    <div
+      aria-label="click here"
+      class="ant-typography-copy"
+      role="button"
+      style="border:0;background:transparent;padding:0;line-height:inherit;display:inline-block"
+      tabindex="0"
+    >
+      <span
+        aria-label="copy"
+        class="anticon anticon-copy"
+        role="img"
+      >
+        <svg
+          aria-hidden="true"
+          class=""
+          data-icon="copy"
+          fill="currentColor"
+          focusable="false"
+          height="1em"
+          viewBox="64 64 896 896"
+          width="1em"
+        >
+          <path
+            d="M832 64H296c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h496v688c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8V96c0-17.7-14.3-32-32-32zM704 192H192c-17.7 0-32 14.3-32 32v530.7c0 8.5 3.4 16.6 9.4 22.6l173.3 173.3c2.2 2.2 4.7 4 7.4 5.5v1.9h4.2c3.5 1.3 7.2 2 11 2H704c17.7 0 32-14.3 32-32V224c0-17.7-14.3-32-32-32zM350 856.2L263.9 770H350v86.2zM664 888H414V746c0-22.1-17.9-40-40-40H232V264h432v624z"
+          />
+        </svg>
+      </span>
+    </div>
   </div>,
 ]
 `;

diff --git 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 (
       <>
-        <Paragraph editable={{ onChange: this.onChange }}>{this.state.str}</Paragraph>
-        <Paragraph copyable>This is a copyable text.</Paragraph>
-        <Paragraph copyable={{ text: 'Hello, Ant Design!' }}>Replace copy text.</Paragraph>
+        <Text editable={{ onChange: this.onChange }}>{this.state.str}</Text>
+        <br />
+        <Text copyable>This is a copyable text.</Text>
+        <br />
+        <Text copyable={{ text: 'Hello, Ant Design!' }}>Replace copy text.</Text>
+        <br />
+        <Text copyable={{ icon: <SmileOutlined /> }}>Custom icon.</Text>
+        <Paragraph copyable={{ tooltips: ['click here', 'you clicked!!'] }}>
+          Replace tooltips text.
+        </Paragraph>
       </>
     );
   }

diff --git 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
@@ -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
@@ -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
@@ -13,7 +13,7 @@
   &-edit,
   &-copy {
     .@{typography-prefix-cls}-rtl & {
-      margin-right: 8px;
+      margin-right: 4px;
       margin-left: 0;
     }
   }