93 lines
2.4 KiB
JavaScript
93 lines
2.4 KiB
JavaScript
import PropTypes from 'prop-types';
|
|
import React from 'react';
|
|
import Clipboard from 'clipboard';
|
|
import InlineSVG from 'react-inlinesvg';
|
|
import classNames from 'classnames';
|
|
|
|
import shareUrl from '../../../images/share.svg';
|
|
|
|
class CopyableInput extends React.Component {
|
|
constructor(props) {
|
|
super(props);
|
|
this.onMouseLeaveHandler = this.onMouseLeaveHandler.bind(this);
|
|
}
|
|
|
|
componentDidMount() {
|
|
this.clipboard = new Clipboard(this.input, {
|
|
target: () => this.input
|
|
});
|
|
|
|
this.clipboard.on('success', (e) => {
|
|
this.tooltip.classList.add('tooltipped');
|
|
this.tooltip.classList.add('tooltipped-n');
|
|
});
|
|
}
|
|
|
|
componentWillUnmount() {
|
|
this.clipboard.destroy();
|
|
}
|
|
|
|
onMouseLeaveHandler() {
|
|
this.tooltip.classList.remove('tooltipped');
|
|
this.tooltip.classList.remove('tooltipped-n');
|
|
}
|
|
|
|
render() {
|
|
const {
|
|
label,
|
|
value,
|
|
hasPreviewLink
|
|
} = this.props;
|
|
const copyableInputClass = classNames({
|
|
'copyable-input': true,
|
|
'copyable-input--with-preview': hasPreviewLink
|
|
});
|
|
return (
|
|
<div className={copyableInputClass}>
|
|
<div
|
|
className="copyable-input__value-container tooltipped-no-delay"
|
|
aria-label="Copied to Clipboard!"
|
|
ref={(element) => { this.tooltip = element; }}
|
|
onMouseLeave={this.onMouseLeaveHandler}
|
|
>
|
|
<label className="copyable-input__label" htmlFor={`copyable-input__value-${label}`}>
|
|
<div className="copyable-input__label-container">
|
|
{label}
|
|
</div>
|
|
<input
|
|
type="text"
|
|
className="copyable-input__value"
|
|
id={`copyable-input__value-${label}`}
|
|
value={value}
|
|
ref={(element) => { this.input = element; }}
|
|
readOnly
|
|
/>
|
|
</label>
|
|
</div>
|
|
{hasPreviewLink &&
|
|
<a
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
href={value}
|
|
className="copyable-input__preview"
|
|
title={`open ${label.toLowerCase()} view in new tab`}
|
|
>
|
|
<InlineSVG src={shareUrl} alt={`open ${label} view in new tab`} />
|
|
</a>
|
|
}
|
|
</div>
|
|
);
|
|
}
|
|
}
|
|
|
|
CopyableInput.propTypes = {
|
|
label: PropTypes.string.isRequired,
|
|
value: PropTypes.string.isRequired,
|
|
hasPreviewLink: PropTypes.bool
|
|
};
|
|
|
|
CopyableInput.defaultProps = {
|
|
hasPreviewLink: false
|
|
};
|
|
|
|
export default CopyableInput;
|