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.

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

PropTypes.arrayOf(
  PropTypes.oneOfType([
    PropTypes.number,
    PropTypes.string,
    PropTypes.shape({
      value: PropTypes.oneOfType([
        PropTypes.string,
        PropTypes.number
      ]),
      text: PropTypes.string
    })
  ])
)

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

PropTypes.arrayOf(
  PropTypes.oneOfType([
    PropTypes.number,
    PropTypes.string,
    PropTypes.bool,
    PropTypes.shape({
      value: PropTypes.oneOfType([
        PropTypes.string,
        PropTypes.number,
        PropTypes.bool
      ]),
      label: PropTypes.string
    })
  ])
)

Checkbox

Toggle

Slider

Credits

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

License

MIT