Redux Form - React Widgets Example

README.md

Redux Form - React Widgets Example

The original example: Redux Form - React Widgets Example

App.js

import React from 'react';
import ReactWidgetsForm from './ReactWidgetsForm';
import { createStore } from 'redux';
import { Provider } from 'react-redux';
import reducer from './reducer';
import getMuiTheme from 'material-ui/styles/getMuiTheme';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';

const store = createStore(reducer);

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {debug: ''};
  }

  handleSubmit(values) {
    const self = this;
    self.setState({debug: JSON.stringify(values)});
  }

  render() {
    const onSubmit = this.handleSubmit.bind(this);
    return (
      <Provider store={store}>
        <MuiThemeProvider muiTheme={getMuiTheme()}>
          <div>
            <ReactWidgetsForm onSubmit={onSubmit} />
            <div>
              <pre>{this.state.debug}</pre>
            </div>
          </div>
        </MuiThemeProvider>
      </Provider>
    );
  }
}

export default App;

asyncValidate.js

const sleep = ms => new Promise(resolve => setTimeout(resolve, ms))

const asyncValidate = (values /*, dispatch */) => {
  return sleep(1000).then(() => {
    // simulate server latency
    if (['[email protected]', '[email protected]'].includes(values.email)) {
      // eslint-disable-next-line no-throw-literal
      throw { email: 'Email already Exists' }
    }
  })
}

export default asyncValidate

cra-script.sh

#!/bin/bash

NAME=redux-form-react-widgets

echo -n "This script runs create-react-app $NAME. Proceed? (Y/N) "
read YN
if [ x$YN != xY ]
then
  echo "Bye."
  exit
fi

# Delete this line only if you are sure what is done from this line on.
exit

create-react-app $NAME
cd $NAME
cp -v ../package.json .
cd src
rm -f App.* logo.svg
cp -v ../../*.js .
cd ..
yarn install

echo 'To launch the dev server, run `yarn run start`.'

package.json

{
  "name": "redux-form-selecting-form-values",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "bootstrap": "^3.3.7",
    "immutable": "^3.8.2",
    "material-ui": "^0.19.4",
    "moment": "^2.19.1",
    "react": "^16.0.0",
    "react-bootstrap": "^0.31.5",
    "react-dom": "^16.0.0",
    "react-redux": "^5.0.6",
    "react-widgets": "^4.1.0",
    "react-widgets-moment": "^4.0.4",
    "react-widgets-moment-localizer": "^1.0.2",
    "redux": "^3.7.2",
    "redux-form": "^7.1.2",
    "redux-immutablejs": "^0.0.8"
  },
  "devDependencies": {
    "react-scripts": "1.0.14"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  }
}

ReactWidgetsForm.js

import React from 'react'
import { Field, reduxForm } from 'redux-form'
import DropdownList from 'react-widgets/lib/DropdownList'
import SelectList from 'react-widgets/lib/SelectList'
import Multiselect from 'react-widgets/lib/Multiselect'
import DateTimePicker from 'react-widgets/lib/DateTimePicker'
import Moment from 'moment'
// import momentLocalizer from 'react-widgets/lib/localizers/moment'
import momentLocalizer from 'react-widgets-moment'

import 'react-widgets/dist/css/react-widgets.css'

Moment.locale('en')
momentLocalizer()

const colors = [
  { color: 'Red', value: 'ff0000' },
  { color: 'Green', value: '00ff00' },
  { color: 'Blue', value: '0000ff' }
]

const renderDropdownList = ({ input, data, valueField, textField }) => (
  <DropdownList
    {...input}
    data={data}
    valueField={valueField}
    textField={textField}
    onChange={input.onChange}
  />
)

const renderMultiselect = ({ input, data, valueField, textField }) => (
  <Multiselect
    {...input}
    onBlur={() => input.onBlur()}
    value={input.value || []} // requires value to be an array
    data={data}
    valueField={valueField}
    textField={textField}
  />
)

const renderSelectList = ({ input, data }) => (
  <SelectList {...input} onBlur={() => input.onBlur()} data={data} />
)

const renderDateTimePicker = ({ input: { onChange, value }, showTime }) => (
  <DateTimePicker
    onChange={onChange}
    format="DD MMM YYYY"
    time={showTime}
    value={!value ? null : new Date(value)}
  />
)

let ReactWidgetsForm = props => {
  const { handleSubmit, pristine, reset, submitting } = props
  return (
    <form onSubmit={handleSubmit}>
      <div>
        <label>Favorite Color</label>
        <Field
          name="favoriteColor"
          component={renderDropdownList}
          data={colors}
          valueField="value"
          textField="color"
        />
      </div>
      <div>
        <label>Hobbies</label>
        <Field
          name="hobbies"
          component={renderMultiselect}
          data={['Guitar', 'Cycling', 'Hiking']}
        />
      </div>
      <div>
        <label>Sex</label>
        <Field
          name="sex"
          component={renderSelectList}
          data={['male', 'female']}
        />
      </div>
      <div>
        <label>DOB</label>
        <Field name="dob" showTime={false} component={renderDateTimePicker} />
      </div>
      <div>
        <button type="submit" disabled={pristine || submitting}>
          Submit
        </button>
        <button type="button" disabled={pristine || submitting} onClick={reset}>
          Reset Values
        </button>
      </div>
    </form>
  )
}

ReactWidgetsForm = reduxForm({
  form: 'reactWidgets' // a unique identifier for this form
})(ReactWidgetsForm)

export default ReactWidgetsForm

reducer.js

import { combineReducers } from 'redux';
import { reducer as formReducer } from 'redux-form';

const rootReducer = combineReducers({
  form: formReducer
});

export default rootReducer;