import * as React from 'react' ; import styled from 'styled-components' ; import { SecondaryButton } from '../buttons' ; const ImageBase = styled ( SecondaryButton ) `
  width: auto;
  height: 48px;
  padding: 0 35px;
  ${ ( { theme } ) => theme . fonts . bodyBoldStyle };
  align-items: center;
  display: inline-flex;
  border: 0;
  justify-content: space-between;
  cursor: pointer;
` ; const HiddenInput = styled . input `
  display: none;
` ; const Icon = styled . div `
  display: flex;
  justify-content: center;
  margin-left: 2em;
` ; interface IImagePickerProps { id : string ; title : string ; icon ? : ( ) => React . ReactNode ; handleFileChange : ( file : File ) => void ; onClick ? : ( event : React . MouseEvent < HTMLElement > ) => void ; disabled ? : boolean ; } export class ImageUploader extends React . Component < IImagePickerProps , { } > { fileUploader : React . RefObject < HTMLInputElement > = React . createRef ( ) ; handleFileChange = ( event ) => { const { files } = event . target ; return files && this . props . handleFileChange ( files [ 0 ] ) ; } ; render ( ) { const { icon , title , disabled = false , ... otherProps } = this . props ; return ( < ImageBase { ... otherProps } onClick = { event => { if ( this . props . onClick ) { this . props . onClick ( event ) ; } this . fileUploader . current ! . click ( ) ; } } disabled = { disabled } > { title } { icon && < Icon > { icon ( ) } < /Icon>} < HiddenInput ref = { this . fileUploader } id = "image_file_uploader_field" type = "file" accept = "image/*" onChange = { this . handleFileChange } / > < /ImageBase>); } }