File tree Expand file tree Collapse file tree 5 files changed +37
-7
lines changed Expand file tree Collapse file tree 5 files changed +37
-7
lines changed Original file line number Diff line number Diff line change @@ -8,11 +8,11 @@ export default () => {
8
8
return (
9
9
< >
10
10
< div >
11
- < Copy text = { text } button = { < a > 复制文本</ a > } />
11
+ < Copy text = { text } button = " 复制文本" />
12
12
< p > { text } </ p >
13
13
</ div >
14
14
< div >
15
- < Copy text = { text } button = { < a > 复制文本</ a > } tooltip = { false } />
15
+ < Copy text = { text } button = " 复制文本" tooltip = { false } />
16
16
< p > { text } </ p >
17
17
</ div >
18
18
</ >
Original file line number Diff line number Diff line change
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
+ } ;
Original file line number Diff line number Diff line change @@ -16,14 +16,16 @@ demo:
16
16
17
17
<code src =' ./demos/basic.tsx ' title =" 点击按钮,进行复制 " description =' 不同方式给 Tooltip 赋值 ' ></code >
18
18
<code src =' ./demos/custom.tsx ' title =" 自定义按钮 " description =' tooltip 设置假值不展示,默认展示复制 ' ></code >
19
+ <code src =' ./demos/disabled.tsx ' title =" 禁用复制按钮 " description =' disabled 设置禁用复制按钮 ' ></code >
19
20
20
21
### API
21
22
22
23
| 参数 | 说明 | 类型 | 默认值 |
23
24
| --------- | ---------------- | --------------------------------------- | ----------------------------------- |
24
- | text | 需要复制的文本 | ` string ` | - |
25
- | tooltip | 配置提示信息 | ` TooltipProps['title'] \| TooltipProps ` | ` 复制 ` |
26
25
| button | 自定义按钮 | ` React.ReactNode ` | ` <CopyOutlined /> ` |
27
- | style | 样式 | ` React.CSSProperties ` | -- |
28
26
| className | 样式 | ` string ` | -- |
27
+ | disabled | 是否禁用 | ` boolean ` | false |
28
+ | style | 样式 | ` React.CSSProperties ` | -- |
29
+ | text | 需要复制的文本 | ` string ` | -- |
30
+ | tooltip | 配置提示信息 | ` TooltipProps['title'] \| TooltipProps ` | ` 复制 ` |
29
31
| onCopy | 复制后的回调函数 | ` (text: string) => void ` | ` () => message.success('复制成功') ` |
Original file line number Diff line number Diff line change @@ -12,6 +12,7 @@ export interface ICopyProps {
12
12
style ?: CSSProperties ;
13
13
className ?: string ;
14
14
tooltip ?: LabelTooltipType ;
15
+ disabled ?: boolean ;
15
16
onCopy ?: ( text : string ) => void ;
16
17
}
17
18
@@ -38,16 +39,18 @@ const Copy: React.FC<ICopyProps> = (props) => {
38
39
tooltip = '复制' ,
39
40
style,
40
41
className,
42
+ disabled = false ,
41
43
onCopy = ( ) => message . success ( '复制成功' ) ,
42
44
} = props ;
43
45
44
46
const handleCopy = ( ) => {
47
+ if ( disabled ) return ;
45
48
new CopyUtils ( ) . copy ( text , ( ) => onCopy ( text ) ) ;
46
49
} ;
47
50
48
51
const renderCopyButton = ( ) => (
49
52
< span
50
- className = { classNames ( [ 'dtc-copy' , className ] ) }
53
+ className = { classNames ( [ 'dtc-copy' , { 'dtc-copy--disabled' : disabled } , className ] ) }
51
54
style = { style }
52
55
onClick = { ( ) => handleCopy ( ) }
53
56
>
Original file line number Diff line number Diff line change 1
1
.dtc-copy {
2
2
display : inline-block ;
3
+ color : #1D78FF ;
3
4
cursor : pointer ;
5
+ & --disabled {
6
+ cursor : not-allowed ;
7
+ color : #B1B4C5 ;
8
+ }
4
9
& __default-icon {
5
- color : #1D78FF ;
10
+ font-size : 16 px ;
6
11
}
7
12
}
You can’t perform that action at this time.
0 commit comments