Skip to content

Instantly share code, notes, and snippets.

@thomas-jeepe
Last active October 12, 2015 18:46
Show Gist options
  • Star 3 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save thomas-jeepe/903cdd4cfe840c842ddc to your computer and use it in GitHub Desktop.
Save thomas-jeepe/903cdd4cfe840c842ddc to your computer and use it in GitHub Desktop.
FormGenerator, not for use so copy off of it
import React from 'react'
import { TextField, RaisedButton, FlatButton, Paper, Toggle, RadioButton, RadioButtonGroup, DropDownMenu } from 'material-ui'
//This is a HOC which adds required material-ui themes to the component
//You should be able to not use material-ui at all or add childContextTypes with the theme
import MuiComponent from '../containers/MuiComponent'
/*
You dont have to use these components so I recommened you change styles to you liking.
*/
let FormValues;
let Mode;
let makeTextField = (obj) => {
return <TextField
style={{marginTop: '16px', marginLeft: '16px', width: '75%'}}
multiLine={true}
floatingLabelText={obj.label}
defaultValue={Mode === 'update' ? FormValues[obj.name] : null}
onChange={e => FormValues[obj.name] = e.target.value} />
}
let makeToggle = (obj) => {
return <Toggle
style={{width: '50%', marginTop: '16px', marginLeft: '16px'}}
label={obj.label}
defaultToggled={Mode === 'update' ? FormValues[obj.name] : false}
onToggle={(e, toggled) => FormValues[value] = toggled}/>
}
let makeRadioGroup = (obj) => {
let RadioButtons = obj.buttons.map(v => <RadioButton
value={v.value}
label={v.label} />)
return <RadioButtonGroup
style={{marginTop: '16px', marginRight: 'auto', marginLeft: 'auto'}}
defaultSelected={Mode === 'update' ? FormValues[obj.name] : null}
name={obj.name}
onChange={(e, selected) => FormValues[obj.name] = selected}>{RadioButtons}</RadioButtonGroup>
}
let makeDropdown = (obj) => {
return <DropDownMenu
style={{marginTop: '16px', marginLeft: 'auto', marginRight: 'auto'}}
menuItems={obj.dropdowns}
selectedIndex={Mode === 'update' ? FormValues[obj.name].payload : 1}
onChange={(e, selected, menuItem) => FormValues[obj.name] = menuItem} />
}
export default class FormGenerator extends MuiComponent {
componentWillMount = () => {
FormValues = this.props.formValues,
Mode = this.props.mode
}
static propTypes = {
schema: React.PropTypes.array.isRequired,
onSubmit: React.PropTypes.func.isRequired,
mode: React.PropTypes.oneOf(['insert', 'update']).isRequired,
formValues: React.PropTypes.object
}
onFullSubmit = () => {
let formValues = FormValues
return this.props.onSubmit(formValues)
}
render() {
let { schema, onSubmit } = this.props
let MainForm = schema.map((value) => {
switch (value.type) {
case 'field':
return makeTextField(value)
break
case 'toggle':
return makeToggle(value)
break
case 'radio':
return makeRadioGroup(value)
break
case 'dropdown':
return makeDropdown(value)
break
case 'submit':
return <RaisedButton
style={{marginTop: '32px', marginRight: 'auto', marginLeft: 'auto'}}
label={value.label}
onClick={this.onFullSubmit} />
break
default: console.error(obj.type, ' is not a form type')
}
})
return <Paper style={{flexFlow: 'column', marginLeft: 'auto', marginRight: 'auto', width: '50%', height: '75%', display: 'flex', alignItems: 'flex-start'}}>
{MainForm}
</Paper>
}
}
// use like this
// In mode input make all text fields and values default value, update is for updating a record
<FormGenerator
mode='update'
formValues={{
user: 'Bill',
thruster: true,
choice: 'sleep',
days: {
payload: 2,
text: 'Weeknights'
}
}}
schema={
[
{
type: 'field',
label: 'user',
name: 'user'
},
{
type: 'toggle',
label: 'Thrusters',
name: 'thruster'
},
{
type: 'radio',
buttons: [
{
value: 'sleep',
label: 'Sleep'
},
{
value: 'work',
label: 'Work'
},
{
value: 'social',
label: 'Social'
}
],
name: 'choice'
},
{
type: 'dropdown',
name: 'days',
dropdowns: [
{ payload: '1', text: 'Never' },
{ payload: '2', text: 'Every Night' },
{ payload: '3', text: 'Weeknights' },
{ payload: '4', text: 'Weekends' },
{ payload: '5', text: 'Weekly' }
]
},
{
type: 'submit',
label: 'Submit'
}
]}
onSubmit={v => console.log(v)} />
// On submit will log this,
{
user: 'Bill',
choice: 'sleep',
thruster: true,
days: {
payload: 2,
text: 'Weeknights'
}
}
// if you use redux all you need
onSubmit={v => this.props.dispatch(action(v))}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment