Merge pull request #291 from acelaya-forks/feature/toggle-switch

Feature/toggle switch

src/settings/RealTimeUpdates.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Card, CardBody, CardHeader } from 'reactstrap';
 import PropTypes from 'prop-types';
-import Checkbox from '../utils/Checkbox';
+import ToggleSwitch from '../utils/ToggleSwitch';
 import { SettingsType } from './reducers/settings';
 
 const propTypes = {
@@ -13,9 +13,9 @@ const RealTimeUpdates = ({ settings: { realTimeUpdates }, setRealTimeUpdates })
   <Card>
     <CardHeader>Real-time updates</CardHeader>
     <CardBody>
-      <Checkbox checked={realTimeUpdates.enabled} onChange={setRealTimeUpdates}>
+      <ToggleSwitch checked={realTimeUpdates.enabled} onChange={setRealTimeUpdates}>
         Enable or disable real-time updates, when using Shlink v2.2.0 or newer.
-      </Checkbox>
+      </ToggleSwitch>
     </CardBody>
   </Card>
 );

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;

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;

src/utils/ToggleSwitch.js

@@ -0,0 +1,8 @@
+import React from 'react';
+import BooleanControl, { basePropTypes } from './BooleanControl';
+
+const ToggleSwitch = (props) => <BooleanControl type="switch" {...props} />;
+
+ToggleSwitch.propTypes = basePropTypes;
+
+export default ToggleSwitch;

src/visits/helpers/LineChartCard.js

@@ -17,7 +17,7 @@ import { fillTheGaps } from '../../utils/helpers/visits';
 import './LineChartCard.scss';
 import { useToggle } from '../../utils/helpers/hooks';
 import { rangeOf } from '../../utils/utils';
-import Checkbox from '../../utils/Checkbox';
+import ToggleSwitch from '../../utils/ToggleSwitch';
 
 const propTypes = {
   title: PropTypes.string,
@@ -167,9 +167,9 @@ const LineChartCard = ({ title, visits, highlightedVisits, highlightedLabel = 'S
           </UncontrolledDropdown>
         </div>
         <div className="float-right mr-2">
-          <Checkbox checked={skipNoVisits} onChange={toggleSkipNoVisits}>
+          <ToggleSwitch checked={skipNoVisits} onChange={toggleSkipNoVisits}>
             <small>Skip dates with no visits</small>
-          </Checkbox>
+          </ToggleSwitch>
         </div>
       </CardHeader>
       <CardBody className="line-chart-card__body">

test/visits/helpers/LineChartCard.test.js

@@ -4,7 +4,7 @@ import { CardHeader, DropdownItem } from 'reactstrap';
 import { Line } from 'react-chartjs-2';
 import moment from 'moment';
 import LineChartCard from '../../../src/visits/helpers/LineChartCard';
-import Checkbox from '../../../src/utils/Checkbox';
+import ToggleSwitch from '../../../src/utils/ToggleSwitch';
 
 describe('<LineChartCard />', () => {
   let wrapper;
@@ -90,7 +90,7 @@ describe('<LineChartCard />', () => {
     ]);
 
     expect(wrapper.find(Line).prop('data').labels).toHaveLength(2);
-    wrapper.find(Checkbox).simulate('change');
+    wrapper.find(ToggleSwitch).simulate('change');
     expect(wrapper.find(Line).prop('data').labels).toHaveLength(4);
   });
 });