react-form-material-ui v1.2.0
material-ui Inputs for React Form Base
material-ui input bindings for react-form-base.
Installation
npm install --save react-form-material-ui
Usage
For a more detailed information on core functionality of react-form-base
, take a
look at react-form-base demo. To see
a sample usage of this package components, you may want to look at
react-form-material-ui components demo.
Example
import Form, {
TextField,
DatePicker,
SelectField,
Checkbox,
Toggle,
Slider,
RadioButtonGroup,
RadioButton
} from 'react-form-material-ui';
const colors = [
'Red', 'Orange', 'Yellow', 'Green', 'Blue', 'Purple', 'Black', 'White'
];
export default class MyForm extends Form {
render() {
return (
<div>
<TextField {...this.$('fullName')} floatingLabelText="Full Name" />
<DatePicker {...this.$('birthDate')} hintText="Birth Date" />
<SelectField {...this.$('hairColor')} options={colors} floatingLabelText="Hair Color" />
<AutoComplete
hintText="Eye Color"
dataSource={colors}
filter={(value, key) => (key.indexOf(value) !== -1)}
openOnFocus
/>
<RadioButtonGroup {...this.$('sex')}>
<RadioButton value="male" label="Male" />
<RadioButton value="female" label="Female" />
</RadioButtonGroup>
<Slider {...this.$('tanLevel')} />
<Checkbox {...this.$('admin')} label="Admin" />
<Toggle {...this.$('extraFeatures')} label="Extra Features" />
</div>
);
}
}
DialogForm Example
import Form, { Dialog, TextField } from 'react-form-material-ui';
import FlatButton from 'material-ui/FlatButton';
export default class MyDialogForm extends Dialog(Form) {
// title may be passed in props, or can be rendered dynamically (based on
// form's attrs, for example) via getTitle method:
getTitle() {
return this.get('id') ? this.get('name') : 'New Item';
}
// actions may be passed in props, or they can be set dynamically. Bellow is
// what DialogForm uses for actions by default if they are not passed in props.
// You don't need to overload it if 2 buttons is what your DialogForm needs to have.
getActions() {
return [
<FlatButton label={closeLabel} onTouchTap={this.props.onRequestClose} />,
<FlatButton label={saveLabel} primary onTouchTap={() => this.save()} />
];
}
// NOTE: in DialogForm you have to use form's $render helper method for rendering
// form content. Generally, this is optional (yet recommended) way of rendering,
// but is mandatory in case of DialogForm.
$render($) {
<div>
<div><TextField {...$('email')} floatingLabelText="Email" /></div>
<div><TextField {...$('firstName')} floatingLabelText="First Name" /></div>
<div><TextField {...$('lastName')} floatingLabelText="Last Name" /></div>
</div>
}
}
Dialog
function
Note that in the example above MyDialogForm
is extended from a class generated
by a Dialog(Form)
function call. The reason of such implementation is that
you most likely will have base form class in your application, where all your
validations and custom behavior will be defined. And to be able to reuse all
this functionality, any dialog form has to be inherited from this base form of
yours. Thus, in real-life situations you probably will have something like that:
import { Dialog } from 'react-form-material-ui';
import Form from 'your-base-form';
export default class ItemForm extends Dialog(Form) {
// form definitions...
}
NOTE: the full signature of Dialog
function is following:
function Dialog(Form, { Component = MaterialDialog } = {})
where MaterialDialog
stands for material-ui
's Dialog
component. This means
that in special cases you can use your own dialog containers to render form's body.
Component Props
Dialog Form
Dialog
form component renders it's content within material-ui
's Dialog
component (by default). In addition to react-form-base
's Form API methods
there are 2 additional methods available for Dialog
forms:
getTitle()
: overload it to set form's dialog title on rendering, if you don't want to pass it in props.getActions()
: overload it if you want your dialog form to have something different from 'Cancel'-'Save' actions. Or you can passactions
in props without overloading this method.
Input Components
All input components receive value, onChange, error and name
properties from react-form-base
API (this props generated via form's $
method).
Bellow are the specs for other properties that components work with.
TextField
This component is a simple wrapper around material-ui
's TextField
component.
DatePicker
SelectField
AutoComplete
This component is a simple wrapper around material-ui
's AutoComplete
component.
It's main purpose is to map form's props into AutoComplete's analogs: value
is passed as searchText, error as errorText,
and appropriate onUpdateInput prop is generated to match form's
onChange API requirements (new value should be passed as first argument).
RadioButtonGroup
Checkbox
Toggle
Slider
Credits
Hugs and thanks to ogrechishkina for her support and building all of the CSS for demo application.
License
MIT