diff options
author | 2018-12-12 11:37:52 +0300 | |
---|---|---|
committer | 2023-01-13 10:37:54 +0300 | |
commit | 24a4dcbd81e9f4defc8fee30fbeb0967a3db9b32 (patch) | |
tree | c27a132a0ab2c4fcac63f6988cfdb19a94b8fc62 /vnext/src | |
parent | 03800f2679162f1f7749cfaf8bdf3e40383ac261 (diff) |
UploadButton
Diffstat (limited to 'vnext/src')
-rw-r--r-- | vnext/src/components/MessageInput.js | 33 | ||||
-rw-r--r-- | vnext/src/components/UploadButton.js | 47 |
2 files changed, 52 insertions, 28 deletions
diff --git a/vnext/src/components/MessageInput.js b/vnext/src/components/MessageInput.js index 83b9f466..66e6ca02 100644 --- a/vnext/src/components/MessageInput.js +++ b/vnext/src/components/MessageInput.js @@ -6,6 +6,8 @@ import { MessageType } from './Types'; import Icon from './Icon'; import Button from './Button'; +import UploadButton from './UploadButton'; + export default class MessageInput extends React.Component { constructor(props) { super(props); @@ -61,21 +63,11 @@ export default class MessageInput extends React.Component { const height = el.scrollHeight + offset; el.style.height = `${height + offset}px`; } - attachmentChanged = (event) => { + uploadValueChanged = (attach) => { this.setState({ - attach: event.target.value + attach: attach }); } - openfile = () => { - const input = this.fileinput.current; - if (this.state.attach) { - this.setState({ - attach: '' - }); - } else { - input.click(); - } - } render() { return ( <form className="msg-comment-target"> @@ -84,13 +76,7 @@ export default class MessageInput extends React.Component { ref={this.textarea} style={textInputStyle} value={this.state.body} rows={this.props.rows || '1'} placeholder={this.props.children} /> <div style={inputBarStyle}> - <div style={this.state.attach ? activeStyle : inactiveStyle} - onClick={this.openfile}> - <Icon name="ei-camera" size="s" /> - <input type="file" accept="image/jpeg,image/png" onClick={e => e.stopPropagation()} - style={{ display: 'none' }} ref={this.fileinput} value={this.state.attach} - onChange={this.attachmentChanged} /> - </div> + <UploadButton inputRef={this.fileinput} value={this.state.attach} onChange={this.uploadValueChanged} /> <Button onClick={this.onSubmit}><Icon name="ei-envelope" size="s" />Send</Button> </div> </div> @@ -106,15 +92,6 @@ const commentStyle = { marginTop: '10px' }; -const inactiveStyle = { - cursor: 'pointer', - color: '#888' -}; -const activeStyle = { - cursor: 'pointer', - color: 'green' -}; - const inputBarStyle = { display: 'flex', borderTop: '1px #eee solid', diff --git a/vnext/src/components/UploadButton.js b/vnext/src/components/UploadButton.js new file mode 100644 index 00000000..5dfa7a1d --- /dev/null +++ b/vnext/src/components/UploadButton.js @@ -0,0 +1,47 @@ +import React from 'react'; +import PropTypes from 'prop-types'; + +import Icon from './Icon'; + +export default class UploadButton extends React.Component { + constructor(props) { + super(props); + } + openfile = () => { + const input = this.props.inputRef.current; + if (this.props.value) { + this.props.onChange(''); + } else { + input.click(); + } + } + attachmentChanged = (event) => { + this.props.onChange(event.target.value); + } + render() { + return ( + <div style={this.props.value ? activeStyle : inactiveStyle} + onClick={this.openfile}> + <Icon name="ei-camera" size="s" /> + <input type="file" accept="image/jpeg,image/png" onClick={e => e.stopPropagation()} + style={{ display: 'none' }} ref={this.props.inputRef} value={this.props.value} + onChange={this.attachmentChanged} /> + </div> + ); + } +} + +UploadButton.propTypes = { + value: PropTypes.string.isRequired, + onChange: PropTypes.func.isRequired, + inputRef: PropTypes.shape({ current: PropTypes.instanceOf(Element) }) +}; + +const inactiveStyle = { + cursor: 'pointer', + color: '#888' +}; +const activeStyle = { + cursor: 'pointer', + color: 'green' +}; |