Skip to content

Commit 0413776

Browse files
committed
feat(copy): add disabled for copy
1 parent e777034 commit 0413776

File tree

5 files changed

+37
-7
lines changed

5 files changed

+37
-7
lines changed

src/copy/demos/custom.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,11 +8,11 @@ export default () => {
88
return (
99
<>
1010
<div>
11-
<Copy text={text} button={<a>复制文本</a>} />
11+
<Copy text={text} button="复制文本" />
1212
<p>{text}</p>
1313
</div>
1414
<div>
15-
<Copy text={text} button={<a>复制文本</a>} tooltip={false} />
15+
<Copy text={text} button="复制文本" tooltip={false} />
1616
<p>{text}</p>
1717
</div>
1818
</>

src/copy/demos/disabled.tsx

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
import React from 'react';
2+
import { Copy } from 'dt-react-component';
3+
4+
const text =
5+
'基于 ant-design 的 React UI 组件库。 主要用于中,后台产品。我们的目标是满足更具体的业务场景组件。 当然,我们也有基于原生 javascript 实现的业务组件,例如ContextMenu,KeyEventListener等.';
6+
7+
export default () => {
8+
return (
9+
<>
10+
<div>
11+
<Copy text={text} disabled button="复制文本" />
12+
<p>{text}</p>
13+
</div>
14+
<div>
15+
<Copy text={text} disabled tooltip={false} />
16+
<p>{text}</p>
17+
</div>
18+
</>
19+
);
20+
};

src/copy/index.md

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -16,14 +16,16 @@ demo:
1616

1717
<code src='./demos/basic.tsx' title="点击按钮,进行复制" description='不同方式给 Tooltip 赋值'></code>
1818
<code src='./demos/custom.tsx' title="自定义按钮" description='tooltip 设置假值不展示,默认展示复制'></code>
19+
<code src='./demos/disabled.tsx' title="禁用复制按钮" description='disabled 设置禁用复制按钮'></code>
1920

2021
### API
2122

2223
| 参数 | 说明 | 类型 | 默认值 |
2324
| --------- | ---------------- | --------------------------------------- | ----------------------------------- |
24-
| text | 需要复制的文本 | `string` | - |
25-
| tooltip | 配置提示信息 | `TooltipProps['title'] \| TooltipProps` | `复制` |
2625
| button | 自定义按钮 | `React.ReactNode` | `<CopyOutlined />` |
27-
| style | 样式 | `React.CSSProperties` | -- |
2826
| className | 样式 | `string` | -- |
27+
| disabled | 是否禁用 | `boolean` | false |
28+
| style | 样式 | `React.CSSProperties` | -- |
29+
| text | 需要复制的文本 | `string` | -- |
30+
| tooltip | 配置提示信息 | `TooltipProps['title'] \| TooltipProps` | `复制` |
2931
| onCopy | 复制后的回调函数 | `(text: string) => void` | `() => message.success('复制成功')` |

src/copy/index.tsx

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ export interface ICopyProps {
1212
style?: CSSProperties;
1313
className?: string;
1414
tooltip?: LabelTooltipType;
15+
disabled?: boolean;
1516
onCopy?: (text: string) => void;
1617
}
1718

@@ -38,16 +39,18 @@ const Copy: React.FC<ICopyProps> = (props) => {
3839
tooltip = '复制',
3940
style,
4041
className,
42+
disabled = false,
4143
onCopy = () => message.success('复制成功'),
4244
} = props;
4345

4446
const handleCopy = () => {
47+
if (disabled) return;
4548
new CopyUtils().copy(text, () => onCopy(text));
4649
};
4750

4851
const renderCopyButton = () => (
4952
<span
50-
className={classNames(['dtc-copy', className])}
53+
className={classNames(['dtc-copy', { 'dtc-copy--disabled': disabled }, className])}
5154
style={style}
5255
onClick={() => handleCopy()}
5356
>

src/copy/style.scss

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,12 @@
11
.dtc-copy {
22
display: inline-block;
3+
color: #1D78FF;
34
cursor: pointer;
5+
&--disabled {
6+
cursor: not-allowed;
7+
color: #B1B4C5;
8+
}
49
&__default-icon {
5-
color: #1D78FF;
10+
font-size: 16px;
611
}
712
}

0 commit comments

Comments
 (0)