Form/Input: use CopyToClipboard

This commit is contained in:
Jannis R 2016-11-10 17:27:04 +01:00
parent acbaed59c0
commit 87c39f066c
No known key found for this signature in database
GPG Key ID: 0FE83946296A88A5
2 changed files with 5 additions and 61 deletions

View File

@ -24,8 +24,4 @@
.copy {
margin-right: 0.5em;
svg {
transition: all .5s ease-in-out;
}
}

View File

@ -15,11 +15,9 @@
// along with Parity. If not, see <http://www.gnu.org/licenses/>.
import React, { Component, PropTypes } from 'react';
import { TextField } from 'material-ui';
import CopyToClipboard from 'react-copy-to-clipboard';
import CopyIcon from 'material-ui/svg-icons/content/content-copy';
import { TextField, IconButton } from 'material-ui';
import { lightWhite, fullWhite } from 'material-ui/styles/colors';
import CopyToClipboard from '../../CopyToClipboard';
import styles from './input.css';
@ -77,9 +75,7 @@ export default class Input extends Component {
}
state = {
value: this.props.value || '',
timeoutId: null,
copied: false
value: this.props.value || ''
}
componentWillReceiveProps (newProps) {
@ -88,14 +84,6 @@ export default class Input extends Component {
}
}
componentWillUnmount () {
const { timeoutId } = this.state;
if (timeoutId) {
window.clearTimeout(timeoutId);
}
}
render () {
const { value } = this.state;
const { children, className, hideUnderline, disabled, error, label, hint, multiLine, rows, type } = this.props;
@ -151,7 +139,7 @@ export default class Input extends Component {
renderCopyButton () {
const { allowCopy, hideUnderline, label, hint, floatCopy } = this.props;
const { copied, value } = this.state;
const { value } = this.state;
if (!allowCopy) {
return null;
@ -165,8 +153,6 @@ export default class Input extends Component {
? allowCopy
: value;
const scale = copied ? 'scale(1.15)' : 'scale(1)';
if (hideUnderline && !label) {
style.marginBottom = 2;
} else if (label && !hint) {
@ -184,49 +170,11 @@ export default class Input extends Component {
return (
<div className={ styles.copy } style={ style }>
<CopyToClipboard
onCopy={ this.handleCopy }
text={ text } >
<IconButton
tooltip={ `${copied ? 'Copied' : 'Copy'} to clipboard` }
tooltipPosition='bottom-right'
style={ {
width: 16,
height: 16,
padding: 0
} }
iconStyle={ {
width: 16,
height: 16,
transform: scale
} }
tooltipStyles={ {
top: 16
} }
>
<CopyIcon
color={ copied ? lightWhite : fullWhite }
/>
</IconButton>
</CopyToClipboard>
<CopyToClipboard data={ text } />
</div>
);
}
handleCopy = () => {
if (this.state.timeoutId) {
window.clearTimeout(this.state.timeoutId);
}
this.setState({ copied: true }, () => {
const timeoutId = window.setTimeout(() => {
this.setState({ copied: false });
}, 500);
this.setState({ timeoutId });
});
}
onChange = (event, value) => {
this.setValue(value);