From d2f818c1ea7e244d7e9cf80a344e1d06543bb60b Mon Sep 17 00:00:00 2001
From: Alejandro Celaya <alejandrocelaya@gmail.com>
Date: Tue, 14 Jul 2020 16:12:14 +0200
Subject: [PATCH] Moved common code between Checkbox and ToggleSwitch to child
 component

---
 src/utils/BooleanControl.js | 36 ++++++++++++++++++++++++++++++++++++
 src/utils/Checkbox.js       | 25 +++----------------------
 src/utils/ToggleSwitch.js   | 25 +++----------------------
 3 files changed, 42 insertions(+), 44 deletions(-)
 create mode 100644 src/utils/BooleanControl.js

diff --git a/src/utils/BooleanControl.js b/src/utils/BooleanControl.js
new file mode 100644
index 00000000..3daa7d9f
--- /dev/null
+++ b/src/utils/BooleanControl.js
@@ -0,0 +1,36 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import { v4 as uuid } from 'uuid';
+
+export const basePropTypes = {
+  checked: PropTypes.bool.isRequired,
+  onChange: PropTypes.func.isRequired,
+  children: PropTypes.oneOfType([ PropTypes.string, PropTypes.node ]),
+  className: PropTypes.string,
+};
+
+const propTypes = {
+  ...basePropTypes,
+  type: PropTypes.oneOf([ 'switch', 'checkbox' ]).isRequired,
+};
+
+const BooleanControl = ({ checked, onChange, className, children, type }) => {
+  const id = uuid();
+  const onChecked = (e) => onChange(e.target.checked, e);
+  const typeClasses = {
+    'custom-switch': type === 'switch',
+    'custom-checkbox': type === 'checkbox',
+  };
+
+  return (
+    <span className={classNames('custom-control', typeClasses, className)} style={{ display: 'inline' }}>
+      <input type="checkbox" className="custom-control-input" id={id} checked={checked} onChange={onChecked} />
+      <label className="custom-control-label" htmlFor={id}>{children}</label>
+    </span>
+  );
+};
+
+BooleanControl.propTypes = propTypes;
+
+export default BooleanControl;
diff --git a/src/utils/Checkbox.js b/src/utils/Checkbox.js
index 0c39e5e4..b253bdfc 100644
--- a/src/utils/Checkbox.js
+++ b/src/utils/Checkbox.js
@@ -1,27 +1,8 @@
 import React from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-import { v4 as uuid } from 'uuid';
+import BooleanControl, { basePropTypes } from './BooleanControl';
 
-const propTypes = {
-  checked: PropTypes.bool.isRequired,
-  onChange: PropTypes.func.isRequired,
-  children: PropTypes.oneOfType([ PropTypes.string, PropTypes.node ]),
-  className: PropTypes.string,
-};
+const Checkbox = (props) => <BooleanControl type="checkbox" {...props} />;
 
-const Checkbox = ({ checked, onChange, className, children }) => {
-  const id = uuid();
-  const onChecked = (e) => onChange(e.target.checked, e);
-
-  return (
-    <span className={classNames('custom-control custom-checkbox', className)} style={{ display: 'inline' }}>
-      <input type="checkbox" className="custom-control-input" id={id} checked={checked} onChange={onChecked} />
-      <label className="custom-control-label" htmlFor={id}>{children}</label>
-    </span>
-  );
-};
-
-Checkbox.propTypes = propTypes;
+Checkbox.propTypes = basePropTypes;
 
 export default Checkbox;
diff --git a/src/utils/ToggleSwitch.js b/src/utils/ToggleSwitch.js
index b64407e1..8f45e96f 100644
--- a/src/utils/ToggleSwitch.js
+++ b/src/utils/ToggleSwitch.js
@@ -1,27 +1,8 @@
 import React from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-import { v4 as uuid } from 'uuid';
+import BooleanControl, { basePropTypes } from './BooleanControl';
 
-const propTypes = {
-  checked: PropTypes.bool.isRequired,
-  onChange: PropTypes.func.isRequired,
-  children: PropTypes.oneOfType([ PropTypes.string, PropTypes.node ]),
-  className: PropTypes.string,
-};
+const ToggleSwitch = (props) => <BooleanControl type="switch" {...props} />;
 
-const ToggleSwitch = ({ checked, onChange, className, children }) => {
-  const id = uuid();
-  const onChecked = (e) => onChange(e.target.checked, e);
-
-  return (
-    <span className={classNames('custom-control custom-switch', className)} style={{ display: 'inline' }}>
-      <input type="checkbox" className="custom-control-input" id={id} checked={checked} onChange={onChecked} />
-      <label className="custom-control-label" htmlFor={id}>{children}</label>
-    </span>
-  );
-};
-
-ToggleSwitch.propTypes = propTypes;
+ToggleSwitch.propTypes = basePropTypes;
 
 export default ToggleSwitch;