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 pass actions in props without overloading this method.

Prop Name	Spec	Description
saveLabel	PropTypes.string. Defaults to 'Save'	label for 'save' primary action button that is one of 2 buttons that DialogForm generates by default.
cancelLabel	PropTypes.string. Defaults to 'Cancel'	label for 'cancel' action button that is one of 2 buttons that DialogForm generates by default.
...rest		the rest of props are delegated to internal Dialog component.

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.

Prop Name	Spec	Description
...rest		the rest of props are delegated to internal TextField component.

DatePicker

Prop Name	Spec	Description
wrapperClassName	PropTypes.string	className for the root component element (div), which wraps DatePicker component and error's div, which is rendered if input has validation errors.
errorClassName	PropTypes.string. Defaults to 'error'	className for internal error element (div), which is rendered if error is present.
...rest		the rest of props are delegated to internal DatePicker component.

SelectField

Prop Name	Spec	Description
options	PropTypes.arrayOf( PropTypes.oneOfType([ PropTypes.number, PropTypes.string, PropTypes.shape({ value: PropTypes.oneOfType([ PropTypes.string, PropTypes.number ]), text: PropTypes.string }) ]) )	options to be rendered (as MenuItems) within internal SelectField component. If array of strings or integers is passed, it's values are used as options' texts and values. If array of objects is passed, each object should have value and text properties.
children	PropTypes.node	Can be used to render options manually. Overrides options prop.
includeBlank	PropTypes.oneOf([ 'floatingLabelText', 'hintText' ])	When this property is set and input has non-empty value, additional option will be rendered within the input. It will have a blank value and text that corresponds to the value of prop itself. This behavior can be used to "drop" the value of input after some option has been selected.
...rest		the rest of props are delegated to the internal SelectField component.

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).

Prop Name	Spec	Description
...rest		the rest of props are delegated to internal AutoComplete component.

RadioButtonGroup

Prop Name	Spec	Description
options	PropTypes.arrayOf( PropTypes.oneOfType([ PropTypes.number, PropTypes.string, PropTypes.bool, PropTypes.shape({ value: PropTypes.oneOfType([ PropTypes.string, PropTypes.number, PropTypes.bool ]), label: PropTypes.string }) ]) )	options to be rendered (as RadioButtons) within internal RadioButton component. If array of strings or integers is passed, it's values are used as options' values and labels. If array of objects is passed, each object should have value and label properties.
children	PropTypes.node	Can be used to render options manually. Overrides options prop.
wrapperClassName	PropTypes.string	className for the root component element (div), which wraps RadioButtonGroup component and error's div, which is rendered if input has validation errors.
errorClassName	PropTypes.string. Defaults to 'error'	className for internal error element (div), which is rendered if error is present.
...rest		the rest of props are delegated to the internal RadioButtonGroup component.

Checkbox

Prop Name	Spec	Description
wrapperClassName	PropTypes.string	className for the root component element (div), which wraps Checkbox component and error's div, which is rendered if input has validation errors.
errorClassName	PropTypes.string. Defaults to 'error'	className for internal error element (div), which is rendered if error is present.
...rest		the rest of props are delegated to internal Checkbox component.

Toggle

Prop Name	Spec	Description
wrapperClassName	PropTypes.string	className for the root component element (div), which wraps Toggle component and error's div, which is rendered if input has validation errors.
errorClassName	PropTypes.string. Defaults to 'error'	className for internal error element (div), which is rendered if error is present.
...rest		the rest of props are delegated to internal Toggle component.

Slider

Prop Name	Spec	Description
wrapperClassName	PropTypes.string	className for the root component element (div), which wraps Slider component and error's div, which is rendered if input has validation errors.
errorClassName	PropTypes.string. Defaults to 'error'	className for internal error element (div), which is rendered if error is present.
...rest		the rest of props are delegated to internal Slider component.

Credits

Hugs and thanks to ogrechishkina for her support and building all of the CSS for demo application.

License

MIT