film-exif/src/views/Film/FilmAddView.js

93 lines
1.9 KiB
JavaScript

import { linkEvent, Component } from 'inferno';
import {
Button,
Card,
CardBody,
CardHeader,
CardFooter,
CardTitle,
Col,
Form,
Row,
} from 'components/Bootstrap'
import { FormBlock } from 'components/Form';
export class FilmAddView extends Component {
constructor (props) {
super (props);
this.state = {
form: {
valid: {},
values: {},
}
};
}
handleFormChange (e) {
console.log(e);
}
render () {
return (
<Row className="full-height">
<Col sm={12} md={8} lg={4} className="abs-center">
<Form onChange={ linkEvent(this, this.handleFormChange) }>
<Card>
<CardHeader>
<CardTitle>Add a Film</CardTitle>
</CardHeader>
<CardBody>
<Row className="align-items-baseline">
<FormBlock
label="Brand"
name="brand"
required
/>
<FormBlock
label="Film Name"
name="film-name"
required
/>
<FormBlock
label="Film Speed (ISO)"
max="6400"
name="film-speed-asa"
required
type="number"
/>
<FormBlock
label="Film Speed (DIN)"
name="film-speed-din"
type="number"
/>
<FormBlock
label="Film Format"
name="film-format"
>
<select className="custom-select" id="film-format" name="film-format">
<option value="110">110</option>
<option value="120">120</option>
<option value="127">127</option>
<option value="135">135</option>
</select>
</FormBlock>
</Row>
</CardBody>
<CardFooter>
<Row>
<Col xs={12}>
<Button color="primary" type="submit">Save</Button>
</Col>
</Row>
</CardFooter>
</Card>
</Form>
</Col>
</Row>
)
}
}