Forms!
This commit is contained in:
parent
02d20edce4
commit
de5586d074
27
src/components/FormBlock.js
Normal file
27
src/components/FormBlock.js
Normal 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>
|
||||
);
|
||||
};
|
@ -1 +1,2 @@
|
||||
export * from './Bootstrap';
|
||||
export * from './FormBlock';
|
||||
|
@ -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">
|
||||
<option value="110">110</option>
|
||||
<option value="120">120</option>
|
||||
<option value="127">127</option>
|
||||
<option value="135">135</option>
|
||||
</select>
|
||||
</FormGroup>
|
||||
</Col>
|
||||
<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>
|
||||
<Row>
|
||||
<Col md={12}>
|
||||
<Col xs={12}>
|
||||
<Button color="primary" type="submit">Save</Button>
|
||||
</Col>
|
||||
</Row>
|
||||
|
@ -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>
|
||||
|
Loading…
Reference in New Issue
Block a user