-
Notifications
You must be signed in to change notification settings - Fork 969
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Inject dependencies for Form component
- Loading branch information
1 parent
fbdceed
commit 27962e8
Showing
3 changed files
with
93 additions
and
76 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
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,71 +1,86 @@ | ||
import React, { Component, PropTypes } from 'react'; | ||
import Autocomplete from '../autocomplete'; | ||
import Button from '../button'; | ||
import Checkbox from '../checkbox'; | ||
import DatePicker from '../date_picker'; | ||
import Dropdown from '../dropdown'; | ||
import Input from '../input'; | ||
import RadioGroup from '../radio/RadioGroup'; | ||
import Slider from '../slider'; | ||
import Switch from '../switch'; | ||
import TimePicker from '../time_picker'; | ||
import InjectAutocomplete from '../autocomplete/Autocomplete.js'; | ||
import InjectButton from '../button/Button.js'; | ||
import InjectCheckbox from '../checkbox/Checkbox.js'; | ||
import InjectDatePicker from '../date_picker/DatePicker.js'; | ||
import InjectDropdown from '../dropdown/Dropdown.js'; | ||
import InjectInput from '../input/Input.js'; | ||
import InjectRadioGroup from '../radio/RadioGroup.js'; | ||
import InjectSlider from '../slider/Slider.js'; | ||
import InjectSwitch from '../switch/Switch.js'; | ||
import InjectTimePicker from '../time_picker/TimePicker.js'; | ||
|
||
const COMPONENTS = { | ||
'autocomplete': Autocomplete, | ||
'button': Button, | ||
'checkbox': Checkbox, | ||
'datepicker': DatePicker, | ||
'dropdown': Dropdown, | ||
'input': Input, | ||
'radioGroup': RadioGroup, | ||
'slider': Slider, | ||
'switch': Switch, | ||
'timepicker': TimePicker | ||
}; | ||
const factory = ( | ||
Autocomplete, Button, Checkbox, DatePicker, Dropdown, | ||
Input, RadioGroup, Slider, Switch, TimePicker | ||
) => { | ||
|
||
class Form extends Component { | ||
static propTypes = { | ||
attributes: PropTypes.array, | ||
children: PropTypes.node, | ||
className: PropTypes.string, | ||
model: PropTypes.object, | ||
onChange: PropTypes.func, | ||
onError: PropTypes.func, | ||
onSubmit: PropTypes.func, | ||
onValid: PropTypes.func, | ||
storage: PropTypes.string | ||
const COMPONENTS = { | ||
'autocomplete': Autocomplete, | ||
'button': Button, | ||
'checkbox': Checkbox, | ||
'datepicker': DatePicker, | ||
'dropdown': Dropdown, | ||
'input': Input, | ||
'radioGroup': RadioGroup, | ||
'slider': Slider, | ||
'switch': Switch, | ||
'timepicker': TimePicker | ||
}; | ||
|
||
static defaultProps = { | ||
attributes: [], | ||
className: '' | ||
}; | ||
class Form extends Component { | ||
static propTypes = { | ||
attributes: PropTypes.array, | ||
children: PropTypes.node, | ||
className: PropTypes.string, | ||
model: PropTypes.object, | ||
onChange: PropTypes.func, | ||
onError: PropTypes.func, | ||
onSubmit: PropTypes.func, | ||
onValid: PropTypes.func, | ||
storage: PropTypes.string | ||
}; | ||
|
||
onSubmit = (event) => { | ||
event.preventDefault(); | ||
if (this.props.onSubmit) this.props.onSubmit(event); | ||
}; | ||
static defaultProps = { | ||
attributes: [], | ||
className: '' | ||
}; | ||
|
||
onChange = (field, value, event) => { | ||
if (this.props.onChange) this.props.onChange(field, value, event); | ||
}; | ||
onSubmit = (event) => { | ||
event.preventDefault(); | ||
if (this.props.onSubmit) this.props.onSubmit(event); | ||
}; | ||
|
||
renderFields () { | ||
return Object.keys(this.props.model).map((field, index) => { | ||
const properties = this.props.model[field]; | ||
const Field = COMPONENTS[properties.kind.toLowerCase()]; | ||
return <Field key={index} {...properties} onChange={this.onChange.bind(this, field)} />; | ||
}); | ||
} | ||
onChange = (field, value, event) => { | ||
if (this.props.onChange) this.props.onChange(field, value, event); | ||
}; | ||
|
||
render () { | ||
return ( | ||
<form data-react-toolbox='form' className={this.props.className} onSubmit={this.onSubmit}> | ||
{this.renderFields()} | ||
{this.props.children} | ||
</form> | ||
); | ||
renderFields () { | ||
return Object.keys(this.props.model).map((field, index) => { | ||
const properties = this.props.model[field]; | ||
const Field = COMPONENTS[properties.kind.toLowerCase()]; | ||
return <Field key={index} {...properties} onChange={this.onChange.bind(this, field)} />; | ||
}); | ||
} | ||
|
||
render () { | ||
return ( | ||
<form data-react-toolbox='form' className={this.props.className} onSubmit={this.onSubmit}> | ||
{this.renderFields()} | ||
{this.props.children} | ||
</form> | ||
); | ||
} | ||
} | ||
} | ||
|
||
return Form; | ||
}; | ||
|
||
const Form = factory( | ||
InjectAutocomplete, InjectButton, InjectCheckbox, InjectDatePicker, InjectDropdown, | ||
InjectInput, InjectRadioGroup, InjectSlider, InjectSwitch, InjectTimePicker | ||
); | ||
|
||
export default Form; | ||
export { factory as formFactory }; | ||
export { Form }; |
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 |
---|---|---|
@@ -1 +1,19 @@ | ||
export default from './Form'; | ||
import { formFactory } from './Form.js'; | ||
import Autocomplete from '../autocomplete'; | ||
import Button from '../button'; | ||
import Checkbox from '../checkbox'; | ||
import DatePicker from '../date_picker'; | ||
import Dropdown from '../dropdown'; | ||
import Input from '../input'; | ||
import RadioGroup from '../radio'; | ||
import Slider from '../slider'; | ||
import Switch from '../switch'; | ||
import TimePicker from '../time_picker'; | ||
|
||
const ThemedForm = formFactory( | ||
Autocomplete, Button, Checkbox, DatePicker, Dropdown, | ||
Input, RadioGroup, Slider, Switch, TimePicker | ||
); | ||
|
||
export default ThemedForm; | ||
export { ThemedForm as Form }; |
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