diff options
Diffstat (limited to 'vnext/src/ui/UploadButton.js')
-rw-r--r-- | vnext/src/ui/UploadButton.js | 42 |
1 files changed, 42 insertions, 0 deletions
diff --git a/vnext/src/ui/UploadButton.js b/vnext/src/ui/UploadButton.js new file mode 100644 index 00000000..73cbbfcf --- /dev/null +++ b/vnext/src/ui/UploadButton.js @@ -0,0 +1,42 @@ +import React from 'react'; +import PropTypes from 'prop-types'; + +import Icon from './Icon'; + +export default function UploadButton(props) { + let openfile = () => { + const input = props.inputRef.current; + if (props.value) { + props.onChange(''); + } else { + input.click(); + } + }; + let attachmentChanged = (event) => { + props.onChange(event.target.value); + }; + return ( + <div style={props.value ? activeStyle : inactiveStyle} + onClick={openfile}> + <Icon name="ei-camera" size="s" /> + <input type="file" accept="image/jpeg,image/png" onClick={e => e.stopPropagation()} + style={{ display: 'none' }} ref={props.inputRef} value={props.value} + onChange={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' +}; |