Display validation errors on toggles

Author: allenwq

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

@@ -0,0 +1,43 @@
+import React, { PropTypes } from 'react';
+import MaterialToggle from 'material-ui/Toggle';
+import { red500 } from 'material-ui/styles/colors';
+import createComponent from './createComponent';
+import mapError from './mapError';
+
+const errorStyle = {
+  color: red500,
+};
+
+// 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 out 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/Toggle.jsx

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

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

@@ -0,0 +1,36 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<Toggle /> renders a toggle with an error 1`] = `
+<div>
+  <Toggle
+    defaultToggled={false}
+    disabled={false}
+    labelPosition="left"
+    name="Not very awesome toggle"
+    onToggle={[Function]}
+    toggled={false}
+  />
+  <div
+    style={
+      Object {
+        "color": "#f44336",
+      }
+    }
+  >
+    Ooops
+  </div>
+</div>
+`;
+
+exports[`<Toggle /> renders a toggled toggle 1`] = `
+<div>
+  <Toggle
+    defaultToggled={false}
+    disabled={false}
+    labelPosition="left"
+    name="Awesome toggle"
+    onToggle={[Function]}
+    toggled={true}
+  />
+</div>
+`;

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

@@ -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 {