77 lines
2.4 KiB
JavaScript
77 lines
2.4 KiB
JavaScript
import React from 'react';
|
|
import Form from '../../components/form';
|
|
|
|
const countriesArray = ['Spain', 'England', 'USA', 'Thailand', 'France'];
|
|
|
|
const countries = [
|
|
{ value: 'EN-gb', label: 'England', img: 'http://' },
|
|
{ value: 'ES-es', label: 'Spain', img: 'http://' },
|
|
{ value: 'TH-th', label: 'Thailand', img: 'http://' },
|
|
{ value: 'EN-en', label: 'USA', img: 'http://' },
|
|
{ value: 'FR-fr', label: 'France', img: 'http://' }
|
|
];
|
|
|
|
const FormFields = {
|
|
autocomplete: {kind: 'Autocomplete', label: 'Autocomplete', source: countriesArray, value: ''},
|
|
input: {kind: 'Input', type: 'text', label: 'Input', value: '@soyjavi', required: true},
|
|
multiline: {kind: 'Input', type: 'text', label: 'Input (multiline)', multiline: true},
|
|
number: {kind: 'Input', type: 'number', label: 'Input (number)'},
|
|
checkbox: {kind: 'Checkbox', label: 'Checkbox'},
|
|
date: {kind: 'DatePicker', label: 'DatePicker', value: undefined},
|
|
dropdown: {kind: 'Dropdown', label: 'Dropdown', source: countries, value: countries[2].value},
|
|
time: {kind: 'TimePicker', label: 'TimePicker', value: undefined},
|
|
switch: {kind: 'Switch', label: 'Switch'},
|
|
slider: {kind: 'Slider', label: 'Slider', min: 0, max: 10, value: 4, pinned: true},
|
|
submit: {kind: 'Button', type: 'submit', label: 'Button () you a nomad?'}
|
|
};
|
|
|
|
class FormTest extends React.Component {
|
|
state = {
|
|
model: {
|
|
autocomplete: countriesArray[3],
|
|
input: 'soyjavi',
|
|
multiline: 'Overwritten',
|
|
number: 0,
|
|
checkbox: true
|
|
}
|
|
};
|
|
|
|
handleEvent = (type, event, form) => {
|
|
console.log(`[FORM.${type}]`, event, form);
|
|
};
|
|
|
|
handleChange = (field, value) => {
|
|
console.log('FORM.change', field, value);
|
|
const model = {
|
|
...this.state.model,
|
|
[field]: value
|
|
};
|
|
this.setState({ model });
|
|
};
|
|
|
|
render () {
|
|
Object.keys(this.state.model).map((field) => {
|
|
const formField = FormFields[field];
|
|
formField[formField.hasOwnProperty('value') ? 'value' : 'checked'] = this.state.model[field];
|
|
});
|
|
|
|
console.log(FormFields);
|
|
|
|
return (
|
|
<section>
|
|
<h5>Form</h5>
|
|
<p>lorem ipsum...</p>
|
|
|
|
<Form
|
|
model={FormFields}
|
|
onChange={this.handleChange}
|
|
onError={this.handleEvent.bind(this, 'error')}
|
|
onValid={this.handleEvent.bind(this, 'valid')}
|
|
onSubmit={this.handleEvent.bind(this, 'submit')} />
|
|
</section>
|
|
);
|
|
}
|
|
}
|
|
|
|
export default FormTest;
|