-
Notifications
You must be signed in to change notification settings - Fork 8
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge branch 'feature/improve-form-type' into dev
- Loading branch information
Showing
17 changed files
with
1,096 additions
and
8 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,240 @@ | ||
| import React, { Component } from 'react'; | ||
| import { connect } from 'react-redux'; | ||
| import { Link } from 'react-router'; | ||
| import { Field, reduxForm } from 'redux-form'; | ||
| import Alert from 'react-bootstrap/lib/Alert'; | ||
| import Button from 'react-bootstrap/lib/Button'; | ||
| import FormNames from '../../constants/FormNames'; | ||
| import { Form, FormField, FormFooter } from '../utils/BsForm'; | ||
| import Head from '../widgets/Head'; | ||
|
|
||
| class DemoForm extends Component { | ||
| constructor() { | ||
| super(); | ||
| this.handleSubmit = this._handleSubmit.bind(this); | ||
| } | ||
|
|
||
| _handleSubmit(formData) { | ||
| console.log('formData', formData); | ||
| // let { dispatch, apiEngine } = this.props; | ||
| // | ||
| // return someAPI(apiEngine) | ||
| // .doSomething(formData) | ||
| // .catch((err) => { | ||
| // dispatch(pushErrors(err)); | ||
| // throw err; | ||
| // }) | ||
| // .then((json) => { | ||
| // console.log('json', json); | ||
| // }); | ||
| } | ||
|
|
||
| render() { | ||
| let { | ||
| handleSubmit, | ||
| submitFailed, | ||
| error, | ||
| pristine, | ||
| submitting, | ||
| invalid, | ||
| demoForm: { values }, | ||
| } = this.props; | ||
|
|
||
| return ( | ||
| <Form horizontal onSubmit={handleSubmit(this.handleSubmit)}> | ||
| <Head | ||
| links={[ | ||
| '/css/react-dates.css', | ||
| ]} | ||
| /> | ||
| {submitFailed && error && (<Alert bsStyle="danger">{error}</Alert>)} | ||
| <Alert bsStyle="info"> | ||
| File object is not going to show here. | ||
| Please submit the form and check the console. | ||
| </Alert> | ||
| <pre>{JSON.stringify(values, null, 2)}</pre> | ||
| <Field | ||
| label="Text" | ||
| name="someText" | ||
| component={FormField} | ||
| type="text" | ||
| placeholder="Text" | ||
| /> | ||
| <Field | ||
| label="Password" | ||
| name="somePassword" | ||
| component={FormField} | ||
| type="password" | ||
| placeholder="Password" | ||
| /> | ||
| <Field | ||
| label="Number" | ||
| name="someNumber" | ||
| component={FormField} | ||
| type="number" | ||
| placeholder="Number" | ||
| /> | ||
| <Field | ||
| label="Date" | ||
| name="someDate" | ||
| component={FormField} | ||
| type="date" | ||
| placeholder="Date" | ||
| /> | ||
| <Field | ||
| label="Time" | ||
| name="someTime" | ||
| component={FormField} | ||
| type="time" | ||
| placeholder="Time" | ||
| /> | ||
| <Field | ||
| label="File" | ||
| name="someFile" | ||
| component={FormField} | ||
| type="file" | ||
| /> | ||
| <Field | ||
| label="Textarea" | ||
| name="someTextarea" | ||
| component={FormField} | ||
| type="textarea" | ||
| rows="6" | ||
| /> | ||
| <Field | ||
| label=" " | ||
| name="somePlainText" | ||
| component={FormField} | ||
| type="plaintext" | ||
| text="Plain Text" | ||
| /> | ||
| <Field | ||
| label="Range Slider" | ||
| name="someRangeSlider" | ||
| component={FormField} | ||
| type="rangeSlider" | ||
| min={0} | ||
| max={100} | ||
| step={5} | ||
| /> | ||
| <Field | ||
| label=" " | ||
| name="_" | ||
| component={FormField} | ||
| type="plaintext" | ||
| text={ | ||
| 'range slider value is ' + | ||
| `${values.someRangeSlider.min} ~ ${values.someRangeSlider.max}` | ||
| } | ||
| /> | ||
| <Field | ||
| label="Airbnb Single Date" | ||
| name="someAirSingleDate" | ||
| component={FormField} | ||
| type="airSingleDate" | ||
| displayFormat="YYYY/MM/DD" | ||
| showClearDate | ||
| /> | ||
| <Field | ||
| label="Airbnb Date Range" | ||
| name="someAirDateRange" | ||
| component={FormField} | ||
| type="airDateRange" | ||
| displayFormat="YYYY/MM/DD" | ||
| showClearDates | ||
| /> | ||
| <Field | ||
| label="Select" | ||
| name="someSelect" | ||
| component={FormField} | ||
| type="select" | ||
| options={[{ | ||
| label: 'Taiwan', | ||
| value: 'TW', | ||
| }, { | ||
| label: 'Japan', | ||
| value: 'JP', | ||
| }, { | ||
| label: 'United States', | ||
| value: 'US', | ||
| }]} | ||
| /> | ||
| <Field | ||
| label="Checkbox" | ||
| name="someCheckbox" | ||
| component={FormField} | ||
| type="checkbox" | ||
| text="This is a checkbox" | ||
| /> | ||
| <Field | ||
| label="Checkboxes" | ||
| name="someInlineCheckboxes" | ||
| component={FormField} | ||
| type="checkboxes" | ||
| style={{float: 'left', paddingRight: 20}} | ||
| options={[{ | ||
| label: 'There', | ||
| value: 'VALUE1', | ||
| }, { | ||
| label: 'are', | ||
| value: 'VALUE2', | ||
| }, { | ||
| label: 'many', | ||
| value: 'VALUE3', | ||
| }, { | ||
| label: 'inline', | ||
| value: 'VALUE4', | ||
| }, { | ||
| label: 'checkboxes', | ||
| value: 'VALUE5', | ||
| }]} | ||
| /> | ||
| <Field | ||
| label="Radio Button" | ||
| name="someRadiobutton" | ||
| component={FormField} | ||
| type="radiobutton" | ||
| options={[{ | ||
| label: 'some', | ||
| value: 'VALUE1', | ||
| }, { | ||
| label: 'radio', | ||
| value: 'VALUE2', | ||
| disabled: true, | ||
| }, { | ||
| label: 'buttons', | ||
| value: 'VALUE3', | ||
| }]} | ||
| /> | ||
| <Field | ||
| label="Recaptcha" | ||
| name="someRecaptcha" | ||
| component={FormField} | ||
| type="recaptcha" | ||
| /> | ||
| <FormFooter> | ||
| <Button type="submit" disabled={pristine || submitting || invalid}> | ||
| Submit | ||
| </Button> | ||
| <Link to="#"> | ||
| <Button bsStyle="link">Some link</Button> | ||
| </Link> | ||
| </FormFooter> | ||
| </Form> | ||
| ); | ||
| } | ||
| }; | ||
|
|
||
| export default reduxForm({ | ||
| form: FormNames.DEMO, | ||
| initialValues: { | ||
| somePassword: 'xxxxxxxxxx', | ||
| someRangeSlider: { | ||
| min: 10, | ||
| max: 30, | ||
| }, | ||
| }, | ||
| })(connect(state => ({ | ||
| apiEngine: state.apiEngine, | ||
| demoForm: state.form[FormNames.DEMO], | ||
| }))(DemoForm)); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,17 @@ | ||
| import React from 'react'; | ||
| import PageHeader from 'react-bootstrap/lib/PageHeader'; | ||
| import PageLayout from '../../layouts/PageLayout'; | ||
| import DemoForm from '../../forms/DemoForm'; | ||
|
|
||
| let FormElementPage = (props) => ( | ||
| <PageLayout> | ||
| <PageHeader>Form Elements</PageHeader> | ||
| <p> | ||
| There are a rich amount of field types built inside the boilerplate. | ||
| You can reuse them to prototype your custom form. | ||
| </p> | ||
| <DemoForm /> | ||
| </PageLayout> | ||
| ); | ||
|
|
||
| export default FormElementPage; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.