Display validation errors on toggles

client/app/lib/components/redux-form/Toggle.jsx

@@ -0,0 +1,42 @@
+import React, { PropTypes } from 'react';
+import MaterialToggle from 'material-ui/Toggle';
+import createComponent from './createComponent';
+import mapError from './mapError';
+
+const errorStyle = {
+  color: 'red',
+};
+
+// Toggle implementation with an error displayed at the bottom.
+const Toggle = function ({ errorText, ...props }) {
+  return (
+    <div>
+      <MaterialToggle {...props} />
+      {
+        errorText &&
+        <div style={errorStyle}>{errorText}</div>
+      }
+    </div>
+  );
+};
+
+Toggle.propTypes = {
+  errorText: PropTypes.string,
+};
+
+export default createComponent(
+  Toggle,
+  ({
+    input: {
+      onChange,
+      value,
+      ...inputProps
+    },
+    ...props
+  }) => ({
+    // Take our the required fields and send the rest of the props to mapError().
+    ...mapError({ ...props, input: inputProps }),
+    toggled: !!value,
+    onToggle: onChange,
+  })
+);

client/app/lib/components/redux-form/__test__/Toggle.test.js

@@ -0,0 +1,46 @@
+import { shallow } from 'enzyme';
+import React from 'react';
+import Toggle from '../Toggle';
+
+describe('<Toggle />', () => {
+  it('renders a toggled toggle', () => {
+    const ToggleInput = shallow(
+      <Toggle
+        input={{
+          name: 'Awesome toggle',
+          value: true,
+          onChange: jest.fn(),
+        }}
+      />,
+      {
+        context: { intl },
+        childContextTypes: { intl: intlShape },
+      }
+    ).first().shallow();
+
+    expect(ToggleInput).toMatchSnapshot();
+  });
+
+
+  it('renders a toggle with an error', () => {
+    const ToggleInput = shallow(
+      <Toggle
+        input={{
+          name: 'Not very awesome toggle',
+          value: false,
+          onChange: jest.fn(),
+        }}
+        meta={{
+          error: 'Ooops',
+          touched: true,
+        }}
+      />,
+      {
+        context: { intl },
+        childContextTypes: { intl: intlShape },
+      }
+    ).first().shallow();
+
+    expect(ToggleInput).toMatchSnapshot();
+  });
+});

client/app/lib/components/redux-form/__test__/__snapshots__/Toggle.test.js.snap

@@ -0,0 +1,18 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<Toggle /> renders a toggle with an error 1`] = `
+<Toggle
+  errorText="Ooops"
+  name="Not very awesome toggle"
+  onToggle={[Function]}
+  toggled={false}
+/>
+`;
+
+exports[`<Toggle /> renders a toggled toggle 1`] = `
+<Toggle
+  name="Awesome toggle"
+  onToggle={[Function]}
+  toggled={true}
+/>
+`;

client/app/lib/components/redux-form/createComponent.js

@@ -3,9 +3,16 @@ import { injectIntl } from 'react-intl';
 /**
  * Creates a component class that renders the given Material UI component
  *
- * @param MaterialUIComponent The material ui component to render
- * @param mapProps A mapping of props provided by redux-form to the props the Material UI
- * component needs
+ * @param {React.Component} MaterialUIComponent The material ui component to render
+ * @param {function} mapProps A function that maps props provided by redux-form to the props the
+ * Material UI component needs.
+ * Format of the redux-from props (input of the mapProps function):
+ * {
+ *   input: {name: stirng, value: any, onChange: function, ...},
+ *   meta: {touched: boolean, pristine: boolean, error: string, ...}
+ *   otherProps: {}  // Other props that passed to the <Field /> input: label, intl, etc...
+ * }
+ * See http://redux-form.com/6.5.0/docs/api/Field.md/ for the detailed props.
  */
 export default function createComponent(MaterialUIComponent, mapProps) {
   class InputComponent extends Component {