feat(copy): add disabled for copy (#582)

Author: LuckyFBB

src/copy/demos/custom.tsx

@@ -8,11 +8,11 @@ export default () => {
     return (
         <>
             <div>
-                <Copy text={text} button={<a>复制文本</a>} />
+                <Copy text={text} button="复制文本" />
                 <p>{text}</p>
             </div>
             <div>
-                <Copy text={text} button={<a>复制文本</a>} tooltip={false} />
+                <Copy text={text} button="复制文本" tooltip={false} />
                 <p>{text}</p>
             </div>
         </>

src/copy/demos/disabled.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import { Copy } from 'dt-react-component';
+
+const text =
+    '基于 ant-design 的 React UI 组件库。 主要用于中，后台产品。我们的目标是满足更具体的业务场景组件。 当然，我们也有基于原生 javascript 实现的业务组件，例如ContextMenu，KeyEventListener等.';
+
+export default () => {
+    return (
+        <>
+            <div>
+                <Copy text={text} disabled button="复制文本" />
+                <p>{text}</p>
+            </div>
+            <div>
+                <Copy text={text} disabled tooltip={false} />
+                <p>{text}</p>
+            </div>
+        </>
+    );
+};

src/copy/index.md

@@ -16,14 +16,16 @@ demo:
 
 <code src='./demos/basic.tsx' title="点击按钮，进行复制" description='不同方式给 Tooltip 赋值'></code>
 <code src='./demos/custom.tsx' title="自定义按钮" description='tooltip 设置假值不展示，默认展示复制'></code>
+<code src='./demos/disabled.tsx' title="禁用复制按钮" description='disabled 设置禁用复制按钮'></code>
 
 ### API
 
 | 参数      | 说明             | 类型                                    | 默认值                              |
 | --------- | ---------------- | --------------------------------------- | ----------------------------------- |
-| text      | 需要复制的文本   | `string`                                | -                                   |
-| tooltip   | 配置提示信息     | `TooltipProps['title'] \| TooltipProps` | `复制`                              |
 | button    | 自定义按钮       | `React.ReactNode`                       | `<CopyOutlined />`                  |
-| style     | 样式             | `React.CSSProperties`                   | --                                  |
 | className | 样式             | `string`                                | --                                  |
+| disabled  | 是否禁用         | `boolean`                               | false                               |
+| style     | 样式             | `React.CSSProperties`                   | --                                  |
+| text      | 需要复制的文本   | `string`                                | --                                  |
+| tooltip   | 配置提示信息     | `TooltipProps['title'] \| TooltipProps` | `复制`                              |
 | onCopy    | 复制后的回调函数 | `(text: string) => void`                | `() => message.success('复制成功')` |

src/copy/index.tsx

@@ -12,6 +12,7 @@ export interface ICopyProps {
     style?: CSSProperties;
     className?: string;
     tooltip?: LabelTooltipType;
+    disabled?: boolean;
     onCopy?: (text: string) => void;
 }
 
@@ -38,16 +39,18 @@ const Copy: React.FC<ICopyProps> = (props) => {
         tooltip = '复制',
         style,
         className,
+        disabled = false,
         onCopy = () => message.success('复制成功'),
     } = props;
 
     const handleCopy = () => {
+        if (disabled) return;
         new CopyUtils().copy(text, () => onCopy(text));
     };
 
     const renderCopyButton = () => (
         <span
-            className={classNames(['dtc-copy', className])}
+            className={classNames(['dtc-copy', { 'dtc-copy--disabled': disabled }, className])}
             style={style}
             onClick={() => handleCopy()}
         >

src/copy/style.scss

@@ -1,7 +1,12 @@
 .dtc-copy {
     display: inline-block;
+    color: #1D78FF;
     cursor: pointer;
+    &--disabled {
+        cursor: not-allowed;
+        color: #B1B4C5;
+    }
     &__default-icon {
-        color: #1D78FF;
+        font-size: 16px;
     }
 }