Using the new interface for all form fields components.
parent
51ca0fab20
commit
e9001c5473
|
@ -1,5 +1,4 @@
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import ReactDOM from 'react-dom';
|
|
||||||
import Autocomplete from '../autocomplete';
|
import Autocomplete from '../autocomplete';
|
||||||
import Button from '../button';
|
import Button from '../button';
|
||||||
import Checkbox from '../checkbox';
|
import Checkbox from '../checkbox';
|
||||||
|
|
|
@ -1,39 +1,70 @@
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import Form from '../../components/form';
|
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 {
|
class FormTest extends React.Component {
|
||||||
state = {
|
state = {
|
||||||
attributes: [
|
model: {
|
||||||
{ ref: 'name', label: 'Your Name', required: true, storage: true},
|
autocomplete: countriesArray[3],
|
||||||
{ ref: 'description', multiline: true, label: 'Description', value: 'Doer'},
|
input: 'soyjavi',
|
||||||
{ ref: 'birthdate', type: 'date', label: 'Birthdate'},
|
multiline: 'Overwritten',
|
||||||
{ ref: 'years', type: 'number', label: 'Years'},
|
number: 0,
|
||||||
{ ref: 'twitter', label: 'Nickname', disabled: true},
|
checkbox: true
|
||||||
{ ref: 'nomad', type: 'checkbox', label: 'Are you a nomad?', value: true},
|
}
|
||||||
{ ref: 'cow', type: 'checkbox', label: 'Are you a cow?', value: false},
|
|
||||||
{ ref: 'girl', type: 'checkbox', label: 'Are you a girl?', value: false, disabled: true},
|
|
||||||
{ ref: 'nomad_2', type: 'radio', label: 'Are you a nomad_2?', value: true},
|
|
||||||
{ ref: 'cow_2', type: 'radio', label: 'Are you a cow_2?', value: false},
|
|
||||||
{ ref: 'girl_2', type: 'radio', label: 'Are you a girl_2?', value: false, disabled: true},
|
|
||||||
{ ref: 'type_user', type: 'dropdown', label: 'Type of user', dataSource: [{value: 1, label: 'Normal'}, {value: 2, label: 'Root'}]},
|
|
||||||
{ type: 'submit', label: 'Send', style: 'primary anchor', disabled: true}
|
|
||||||
]
|
|
||||||
};
|
};
|
||||||
|
|
||||||
handleEvent = (type, event, form) => {
|
handleEvent = (type, event, form) => {
|
||||||
console.log(`[FORM.${type}]`, form.getValue());
|
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 () {
|
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 (
|
return (
|
||||||
<section>
|
<section>
|
||||||
<h2>Form</h2>
|
<h5>Form</h5>
|
||||||
<p>lorem ipsum...</p>
|
<p>lorem ipsum...</p>
|
||||||
|
|
||||||
<Form
|
<Form
|
||||||
attributes={this.state.attributes}
|
model={FormFields}
|
||||||
storage="example-form"
|
onChange={this.handleChange}
|
||||||
onChange={this.handleEvent.bind(this, 'change')}
|
|
||||||
onError={this.handleEvent.bind(this, 'error')}
|
onError={this.handleEvent.bind(this, 'error')}
|
||||||
onValid={this.handleEvent.bind(this, 'valid')}
|
onValid={this.handleEvent.bind(this, 'valid')}
|
||||||
onSubmit={this.handleEvent.bind(this, 'submit')} />
|
onSubmit={this.handleEvent.bind(this, 'submit')} />
|
||||||
|
|
|
@ -10,6 +10,7 @@ import Checkbox from './components/checkbox';
|
||||||
import Dialog from './components/dialog';
|
import Dialog from './components/dialog';
|
||||||
import Drawer from './components/drawer';
|
import Drawer from './components/drawer';
|
||||||
import Dropdown from './components/dropdown';
|
import Dropdown from './components/dropdown';
|
||||||
|
import Form from './components/form';
|
||||||
import IconMenu from './components/icon_menu';
|
import IconMenu from './components/icon_menu';
|
||||||
import Input from './components/input';
|
import Input from './components/input';
|
||||||
import List from './components/list';
|
import List from './components/list';
|
||||||
|
@ -49,6 +50,7 @@ const Root = () => (
|
||||||
<Dialog />
|
<Dialog />
|
||||||
<Drawer />
|
<Drawer />
|
||||||
<Dropdown />
|
<Dropdown />
|
||||||
|
<Form />
|
||||||
<IconMenu />
|
<IconMenu />
|
||||||
<Input />
|
<Input />
|
||||||
<List />
|
<List />
|
||||||
|
|
Loading…
Reference in New Issue