Revert "Remove duplicated Toggle.js component" (#742)

Revert "Remove duplicated Toggle.js component (#741)"

This reverts commit dd238ae7949e72e3b90235f56e14686cc5231f34.

2 files changed, 104 insertions, 24 deletions

diff --git a/src/components/ui/Toggle.js b/src/components/ui/Toggle.js
new file mode 100644
index 000000000..c1d86a7f6
--- /dev/null
+++ b/src/components/ui/Toggle.js
@@ -0,0 +1,72 @@
+import { Component } from 'react';
+import PropTypes from 'prop-types';
+import { observer } from 'mobx-react';
+import classnames from 'classnames';
+import { Field } from 'mobx-react-form';
+
+// Can this file be merged into the './toggle/index.tsx' file?
+class Toggle extends Component {
+  static propTypes = {
+    field: PropTypes.instanceOf(Field).isRequired,
+    className: PropTypes.string,
+    showLabel: PropTypes.bool,
+    disabled: PropTypes.bool,
+  };
+
+  static defaultProps = {
+    className: '',
+    showLabel: true,
+    disabled: false,
+  };
+
+  onChange(e) {
+    const { field } = this.props;
+
+    field.onChange(e);
+  }
+
+  render() {
+    const { field, className, showLabel, disabled } = this.props;
+
+    if (field.value === '' && field.default !== '') {
+      field.value = field.default;
+    }
+
+    return (
+      <div
+        className={classnames([
+          'franz-form__field',
+          'franz-form__toggle-wrapper',
+          'franz-form__toggle-disabled',
+          className,
+        ])}
+      >
+        <label
+          htmlFor={field.id}
+          className={classnames({
+            'franz-form__toggle': true,
+            'is-active': field.value,
+          })}
+        >
+          <div className="franz-form__toggle-button" />
+          <input
+            type="checkbox"
+            id={field.id}
+            name={field.name}
+            value={field.name}
+            checked={field.value}
+            onChange={e => (!disabled ? this.onChange(e) : null)}
+          />
+        </label>
+        {field.error && <div className={field.error}>{field.error}</div>}
+        {field.label && showLabel && (
+          <label className="franz-form__label" htmlFor={field.id}>
+            {field.label}
+          </label>
+        )}
+      </div>
+    );
+  }
+}
+
+export default observer(Toggle);
diff --git a/src/components/ui/toggle/index.tsx b/src/components/ui/toggle/index.tsx
index fee8adbc7..d478cbba5 100644
--- a/src/components/ui/toggle/index.tsx
+++ b/src/components/ui/toggle/index.tsx
@@ -1,26 +1,27 @@
 import classnames from 'classnames';
 import { Property } from 'csstype';
-import { noop } from 'lodash';
 import { Component, InputHTMLAttributes } from 'react';
-import withStyles, { WithStylesProps } from 'react-jss';
+import injectStyle, { WithStylesProps } from 'react-jss';
+
 import { Theme } from '../../../themes';
+import { IFormField } from '../typings/generic';
+
 import Error from '../error';
 import Label from '../label';
-import { IFormField } from '../typings/generic';
 import Wrapper from '../wrapper';
 
 interface IProps
-  extends Omit<InputHTMLAttributes<HTMLInputElement>, 'value'>,
+  extends InputHTMLAttributes<HTMLInputElement>,
     IFormField,
     WithStylesProps<typeof styles> {
   className?: string;
-  value: boolean | undefined; // due to type capability between InputHTMLAttributes and mobx-react-form
 }
 
-const buttonTransition: string =
-  window && window.matchMedia('(prefers-reduced-motion: no-preference)')
-    ? 'all .5s'
-    : 'none';
+let buttonTransition: string = 'none';
+
+if (window && window.matchMedia('(prefers-reduced-motion: no-preference)')) {
+  buttonTransition = 'all .5s';
+}
 
 const styles = (theme: Theme) => ({
   toggle: {
@@ -63,18 +64,25 @@ const styles = (theme: Theme) => ({
 });
 
 class ToggleComponent extends Component<IProps> {
+  public static defaultProps = {
+    onChange: () => {},
+    showLabel: true,
+    disabled: false,
+    error: '',
+  };
+
   render() {
     const {
       classes,
       className,
-      id = '',
-      name = '',
-      label = '',
-      error = '',
-      value = false,
-      showLabel = true,
-      disabled = false,
-      onChange = noop,
+      disabled,
+      error,
+      id,
+      label,
+      showLabel,
+      checked,
+      value,
+      onChange,
     } = this.props;
 
     return (
@@ -94,24 +102,24 @@ class ToggleComponent extends Component<IProps> {
             <div
               className={classnames({
                 [`${classes.button}`]: true,
-                [`${classes.buttonActive}`]: value,
+                [`${classes.buttonActive}`]: checked,
               })}
             />
             <input
-              type="checkbox"
-              id={id}
-              name={name}
-              checked={value as boolean | undefined}
               className={classes.input}
+              id={id}
+              type="checkbox"
+              checked={checked}
+              value={value}
               onChange={onChange}
               disabled={disabled}
             />
           </div>
         </Label>
-        {error ? <Error message={error as string} /> : null}
+        {error && <Error message={error} />}
       </Wrapper>
     );
   }
 }
 
-export default withStyles(styles, { injectTheme: true })(ToggleComponent);
+export default injectStyle(styles, { injectTheme: true })(ToggleComponent);