import React from 'react' ; import * as Elements from './../Elements' ; import { Flex } from 'design' ; export default class FileDownloadSelector extends React . Component < { onDownload : ( path : string ) => void ; } > { inputRef = React . createRef ( ) ; state = { path : '~/' , } ; onChangePath = e => { this . setState ( { path : e . target . value , } ) ; } ; isValidPath ( path ) { return path && path [ path . length - 1 ] !== '/' ; } onDownload = ( ) => { if ( this . isValidPath ( this . state . path ) ) { this . props . onDownload ( this . state . path ) ; } } ; onKeyDown = ( event ) => { if ( event . key === 'Enter' ) { event . preventDefault ( ) ; event . stopPropagation ( ) ; this . onDownload ( ) ; } } ; moveCaretAtEnd ( e ) { const tmp = e . target . value ; e . target . value = '' ; e . target . value = tmp ; } render ( ) { const { path } = this . state ; const isBtnDisabled = ! this . isValidPath ( path ) ; return ( < Elements . Form > < Elements . Header > ( SCP ) Download Files < /Elements.Header> < Elements . Label > File Path < /Elements.Label> < Flex > < Elements . Input onChange = { this . onChangePath } ref = { e => ( this . inputRef = e ) } value = { path } mb = { 0 } autoFocus onFocus = { this . moveCaretAtEnd } onKeyDown = { this . onKeyDown } / > < Elements . Button disabled = { isBtnDisabled } onClick = { this . onDownload } > Download < /Elements.Button> < /Flex> < /Elements.Form>); } }