diff options
Diffstat (limited to 'frontend/src/components/MessageAction.js')
| -rw-r--r-- | frontend/src/components/MessageAction.js | 31 |
1 files changed, 19 insertions, 12 deletions
diff --git a/frontend/src/components/MessageAction.js b/frontend/src/components/MessageAction.js index 66350c6..2c85d84 100644 --- a/frontend/src/components/MessageAction.js +++ b/frontend/src/components/MessageAction.js @@ -4,7 +4,21 @@ import {Button, FormControl, InputGroup, Modal} from "react-bootstrap"; class MessageAction extends Component { + constructor(props) { + super(props); + this.state = { + copyButtonText: "copy" + }; + this.actionValue = React.createRef(); + this.copyActionValue = this.copyActionValue.bind(this); + } + copyActionValue() { + this.actionValue.current.select(); + document.execCommand('copy'); + this.setState({copyButtonText: "copied!"}); + setTimeout(() => this.setState({copyButtonText: "copy"}), 3000); + } render() { return ( @@ -21,20 +35,13 @@ class MessageAction extends Component { </Modal.Title> </Modal.Header> <Modal.Body> - <div className="message-action-value"> - <pre> - {this.props.actionValue} - </pre> - </div> - - {/*<InputGroup>*/} - {/* <FormControl as="textarea" className="message-action-value" readOnly={true}*/} - {/* style={{"height": "300px"}}*/} - {/* value={this.props.actionValue}/>*/} - {/*</InputGroup>*/} + <InputGroup> + <FormControl as="textarea" className="message-action-value" readOnly={true} + style={{"height": "300px"}} value={this.props.actionValue} ref={this.actionValue} /> + </InputGroup> </Modal.Body> <Modal.Footer className="dialog-footer"> - <Button variant="green" onClick={this.copyActionValue}>copy</Button> + <Button variant="green" onClick={this.copyActionValue}>{this.state.copyButtonText}</Button> <Button variant="red" onClick={this.props.onHide}>close</Button> </Modal.Footer> </Modal> |