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 `MenuItem`s) 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 `RadioButton`s) 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

akuzko/react-form-material-ui

material-ui Inputs for React Form Base

Installation

Usage

Example

DialogForm Example

Dialog function

Component Props

Dialog Form

Input Components

TextField

DatePicker

SelectField

AutoComplete

RadioButtonGroup

Checkbox

Toggle

Slider