75 lines
1.9 KiB
JavaScript
75 lines
1.9 KiB
JavaScript
import React 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 style from './style';
|
|
|
|
const Component = {
|
|
'autocomplete': Autocomplete,
|
|
'button': Button,
|
|
'checkbox': Checkbox,
|
|
'datepicker': DatePicker,
|
|
'dropdown': Dropdown,
|
|
'input': Input,
|
|
'radioGroup': RadioGroup,
|
|
'slider': Slider,
|
|
'switch': Switch,
|
|
'timepicker': TimePicker
|
|
};
|
|
|
|
class Form extends React.Component {
|
|
static propTypes = {
|
|
attributes: React.PropTypes.array,
|
|
children: React.PropTypes.node,
|
|
className: React.PropTypes.string,
|
|
model: React.PropTypes.object,
|
|
onChange: React.PropTypes.func,
|
|
onError: React.PropTypes.func,
|
|
onSubmit: React.PropTypes.func,
|
|
onValid: React.PropTypes.func,
|
|
storage: React.PropTypes.string
|
|
};
|
|
|
|
static defaultProps = {
|
|
attributes: [],
|
|
className: ''
|
|
};
|
|
|
|
onSubmit = (event) => {
|
|
event.preventDefault();
|
|
if (this.props.onSubmit) this.props.onSubmit(event);
|
|
};
|
|
|
|
onChange = (field, value, event) => {
|
|
if (this.props.onChange) this.props.onChange(field, value, event);
|
|
};
|
|
|
|
renderFields () {
|
|
return Object.keys(this.props.model).map((field, index) => {
|
|
const properties = this.props.model[field];
|
|
const Field = Component[properties.kind.toLowerCase()];
|
|
return <Field key={index} {...properties} onChange={this.onChange.bind(this, field)} />;
|
|
});
|
|
}
|
|
|
|
render () {
|
|
const className = `${style.root} ${this.props.className}`;
|
|
|
|
return (
|
|
<form data-react-toolbox='form' className={className} onSubmit={this.onSubmit}>
|
|
{this.renderFields()}
|
|
{this.props.children}
|
|
</form>
|
|
);
|
|
}
|
|
}
|
|
|
|
export default Form;
|