akuzko / react-form-material-ui

material-ui input bindings for react-form-base
MIT License
7 stars 2 forks source link
components form material-components material-ui react reactjs

material-ui Inputs for React Form Base

material-ui input bindings for react-form-base.

build status npm version

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:

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