-
Notifications
You must be signed in to change notification settings - Fork 295
/
PublicKeyFieldSkin.tsx
90 lines (87 loc) · 2.46 KB
/
PublicKeyFieldSkin.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
// @flow
import React from 'react';
import type { ElementRef } from 'react';
import classnames from 'classnames';
import CopyToClipboard from 'react-copy-to-clipboard';
import SVGInline from 'react-svg-inline';
import { Button } from 'react-polymorph/lib/components/Button';
import { PopOver } from 'react-polymorph/lib/components/PopOver';
import { FormField } from 'react-polymorph/lib/components/FormField';
import type { InputProps } from 'react-polymorph/lib/components/Input';
import { pickDOMProps } from 'react-polymorph/lib/utils/props';
import copyImage from '../../../assets/images/copy.inline.svg';
import styles from './PublicKeyField.scss';
type Props = InputProps & {
inputRef: ElementRef<'input'>,
theme: Object,
themeId: string,
tooltip: Node,
valueVisible: boolean,
onCopyValue: Function,
};
export default (props: Props) => {
const renderInput = () => (
<input
ref={props.inputRef}
{...pickDOMProps(props)}
className={classnames([
props.theme[props.themeId].input,
props.disabled ? props.theme[props.themeId].disabled : null,
props.error || props.showErrorState
? props.theme[props.themeId].errored
: null,
])}
readOnly={props.readOnly}
onFocus={() => {
if (props.onFocus) {
props.onFocus();
}
if (props.inputRef && props.inputRef.current) {
props.inputRef.current.select();
}
props.onCopyValue();
}}
/>
);
const render = () =>
props.valueVisible ? (
<PopOver content={props.tooltip}>
<div>
{renderInput()}
<CopyToClipboard
text={props.value}
onCopy={() => {
if (props.inputRef && props.inputRef.current) {
props.inputRef.current.select();
}
props.onCopyValue();
}}
>
<Button
className={classnames([
styles.imageButton,
styles.copyButton,
'flat',
])}
label={<SVGInline svg={copyImage} />}
/>
</CopyToClipboard>
</div>
</PopOver>
) : (
<span>
<div>{renderInput()}</div>
</span>
);
return (
<FormField
className={props.className}
disabled={props.disabled}
label={props.label}
error={props.error}
inputRef={props.inputRef}
theme={props.theme}
render={render}
/>
);
};