This commit is contained in:
Timothy Warren 2018-04-03 22:27:41 -04:00
parent 02d20edce4
commit de5586d074
4 changed files with 66 additions and 18 deletions

View File

@ -0,0 +1,27 @@
import {
Col,
FormGroup,
Input,
Label,
} from './Bootstrap';
export const FormBlock = ({
children,
label,
name,
type='text',
...props
}) => {
const formElement = (children !== undefined)
? children
: <Input id={name} name={name} type={type} {...props} />
return (
<Col xs={12} sm={6} md={3}>
<FormGroup>
<Label for={name}>{label}</Label>
{formElement}
</FormGroup>
</Col>
);
};

View File

@ -1 +1,2 @@
export * from './Bootstrap';
export * from './FormBlock';

View File

@ -10,6 +10,8 @@ import {
Row,
} from '../../components/Bootstrap'
import { FormBlock } from '../../components';
export class FilmAddView extends Component {
constructor (props) {
super (props);
@ -23,24 +25,42 @@ export class FilmAddView extends Component {
return (
<Form>
<Row>
<Col md={12}>
<FormGroup>
<Label tag="label" for="brand">Brand</Label>
<Input type="text" id="brand" name="brand" />
</FormGroup>
<FormGroup>
<Label for="filmFormat">Film Format</Label>
<select className="custom-select" id="filmFormat" name="filmFormat">
<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>
</FormGroup>
</Col>
</FormBlock>
</Row>
<Row>
<Col md={12}>
<Col xs={12}>
<Button color="primary" type="submit">Save</Button>
</Col>
</Row>

View File

@ -24,12 +24,12 @@ export const HomeView = (props) => {
<Container className="App">
<Row>
<header className="App-header">
<h1>Welcome to Inferno</h1>
<h1>Welcome to Film Exif</h1>
</header>
</Row>
<Row>
<p className="App-intro">
To get started, edit <code>src/App.js</code> and save to reload.
Drop files here.
</p>
</Row>
</Container>