From 93a5de8d8e725cb6fff256a54544d39cf50a16f8 Mon Sep 17 00:00:00 2001
From: Vijay Aravamudhan <vraravam@users.noreply.github.com>
Date: Mon, 7 Nov 2022 06:50:40 +0530
Subject: Revert "Remove duplicated Toggle.js component" (#742)

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

This reverts commit dd238ae7949e72e3b90235f56e14686cc5231f34.
---
 src/components/ui/Toggle.js | 72 +++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 72 insertions(+)
 create mode 100644 src/components/ui/Toggle.js

(limited to 'src/components/ui/Toggle.js')

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);
-- 
cgit v1.2.3-70-g09d2