How to use simple-react-form - 10 common examples

import React from 'react'
import AutoComplete from 'material-ui/AutoComplete'
import MenuItem from 'material-ui/MenuItem'
import _ from 'underscore'
import {FieldType, registerType} from 'simple-react-form'
import Chip from 'material-ui/Chip'
import * as Colors from 'material-ui/styles/colors'
import Avatar from 'material-ui/Avatar'
import FontIcon from 'material-ui/FontIcon'

const propTypes = {
  ...FieldType.propTypes,
  /**
   * Allow to select multiple items.
   */
  multi: React.PropTypes.bool,
  /**
   * Meteor method that recieves the search string and returns an array of items
   * with 'label' and 'value' attributes.
   */
  methodName: React.PropTypes.string.isRequired,
  /**
   * Meteor method that recieves the value and must return the label. If
   * ```multi``` is set to true, it will recieve an array and it must return an
   * with the labels in the same order.
   */
  labelMethodName: React.PropTypes.string.isRequired,
  /**

import React from 'react'
import RadioButton from 'material-ui/RadioButton'
import * as Colors from 'material-ui/styles/colors'
import {FieldType, registerType} from 'simple-react-form'
import styles from './styles'

const propTypes = {
  ...FieldType.propTypes,
  /**
   * The options for the select input. Each item must have label and value.
   */
  options: React.PropTypes.arrayOf(React.PropTypes.shape({
    label: React.PropTypes.string.isRequired,
    value: React.PropTypes.oneOfType([
      React.PropTypes.string,
      React.PropTypes.number
    ]).isRequired,
    description: React.PropTypes.string
  })).isRequired
}

const defaultProps = {

}

import React from 'react'
import Checkbox from 'material-ui/Checkbox'
import * as Colors from 'material-ui/styles/colors'
import {FieldType, registerType} from 'simple-react-form'

const propTypes = {
  ...FieldType.propTypes
}

const defaultProps = {

}

export default class CheckboxComponent extends React.Component {

  render () {
    return (
      <div style="{{">
         this.props.onChange(!this.props.value)}</div>

import React from 'react'
import TextField from 'material-ui/TextField'
import {FieldType, registerType} from 'simple-react-form'
import styles from './styles'
import _ from 'underscore'

const propTypes = {
  ...FieldType.propTypes
}

const defaultProps = {

}

export default class StringArrayComponent extends React.Component {

  constructor (props) {
    super(props)
    this.state = {}
  }

  onKeyDown (event) {
    if (event.keyCode === 13) {
      this.addItem()

import React from 'react'
import SelectField from 'material-ui/SelectField'
import MenuItem from 'material-ui/MenuItem'
import {FieldType, registerType} from 'simple-react-form'
import _ from 'underscore'

const propTypes = {
  ...FieldType.propTypes,
  /**
   * Optional default value.
   */
  defaultValue: React.PropTypes.string,
  /**
   * The options for the select input. Each item must have label and value.
   */
  options: React.PropTypes.arrayOf(React.PropTypes.shape({
    label: React.PropTypes.string.isRequired,
    value: React.PropTypes.oneOfType([
      React.PropTypes.string,
      React.PropTypes.number
    ]).isRequired
  }))
}

import React from 'react'
import Toggle from 'material-ui/Toggle'
import {FieldType, registerType} from 'simple-react-form'
import styles from './styles'

const propTypes = {
  ...FieldType.propTypes
}

const defaultProps = {

}

export default class ToggleComponent extends React.Component {

  render () {
    return (
      <div>
         this.props.onChange(!this.props.value)}</div>

import React from 'react'
import Checkbox from 'material-ui/Checkbox'
import * as Colors from 'material-ui/styles/colors'
import {FieldType, registerType} from 'simple-react-form'
import styles from './styles'
import _ from 'underscore'

const propTypes = {
  ...FieldType.propTypes,
  /**
   * The options for the checkbox.
   */
  options: React.PropTypes.arrayOf(React.PropTypes.shape({
    label: React.PropTypes.string.isRequired,
    disabled: React.PropTypes.bool,
    value: React.PropTypes.oneOfType([
      React.PropTypes.string,
      React.PropTypes.number
    ]).isRequired,
    description: React.PropTypes.string
  })).isRequired
}

const defaultProps = {

import React from 'react'
import TextField from 'material-ui/TextField'
import {FieldType, registerType} from 'simple-react-form'

const propTypes = {
  changeOnKeyDown: React.PropTypes.bool,
  ...FieldType.propTypes
}

const defaultProps = {
  changeOnKeyDown: false
}

export default class TextareaComponent extends React.Component {
  constructor (props) {
    super(props)
    this.state = { value: props.value }
  }

  componentWillReceiveProps (nextProps) {
    this.setState({ value: nextProps.value })
  }

import React from 'react'
import {FieldType, registerType} from 'simple-react-form'
import _ from 'underscore'

import UploadButton from './upload-button'
import Preview from './preview'
import styles from '../styles'

const propTypes = {
  ...FieldType.propTypes,
  /**
   * A function that recieves { file, onProgress, onReady, onError }.
   * onProgress input is progress, a number from 0 to 1.
   * onReady inputs are { url, meta },
   *    url is the url of the file, meta is a object with whatever you want.
   * onError input is message.
   */
  upload: React.PropTypes.func.isRequired,

  /**
   * A function that recieves { file, onReady, onError }.
   * file is the information of the file (includes the meta from before).
   * onReady is a function with no input.
   * onError input is message.
   */
  delete: React.PropTypes.func,

import React from 'react'
import DatePicker from 'material-ui/DatePicker'
import {FieldType, registerType} from 'simple-react-form'

const propTypes = {
  ...FieldType.propTypes
}

const defaultProps = {

}

export default class DatePickerComponent extends React.Component {

  openDialog () {
    if (this.props.disabled) return
    this.refs.input.openDialog()
  }

  render () {
    return (
      <div></div>