datalovelace/src/views/CreateTable/CreateTableForm.js
2020-07-30 22:03:01 -05:00

56 lines
1.5 KiB
JavaScript

import React, { Component } from 'react'
import { Button, Input, Header } from 'semantic-ui-react'
import './CreateTableForm.css'
import CreateTableController from '../../Controllers/CreateTableController'
class CreateTableForm extends Component {
constructor () {
super()
this.controller = new CreateTableController()
this.tableLabelInput = React.createRef()
this.tableFileInput = React.createRef()
}
handleSubmit = async e => {
e.preventDefault()
const label = this.tableLabelInput.current.inputRef.current.value
const file = this.tableFileInput.current.inputRef.current.files[0]
this.controller.submitLocalFile({ label, file })
this.tableLabelInput.current.inputRef.current.value = ''
}
render = () => {
return (
<div className='CreateTableForm'>
<Header as='h3'>Create Table From File</Header>
<div>
<Input
placeholder='Table Label'
ref={this.tableLabelInput}
icon='tags'
style={{ width: '300px' }}
/>
<br />
<Input
type='file'
ref={this.tableFileInput}
icon='file'
style={{ width: '300px' }}
/>
<div className='creatTableFormSubmitButtons'>
<Button content='Cancel' secondary />
<Button content='Confirm' primary onClick={this.handleSubmit} />
</div>
</div>
</div>
)
}
}
export default CreateTableForm