resources/js/components/common/ToggleSwitch.js

   1 import PropTypes from 'prop-types';
   2 import React from 'react';
   3
   4 import Icon from './Icon';
   5
   6 const ToggleSwitch = ({
   7         isInvalid,
   8         isValid,
   9         name,
  10         offLabel,
  11         onBlur,
  12         onChange,
  13         onLabel,
  14         readonly,
  15         value,
  16 }) => {
  17         const toggle = () => {
  18                 if (readonly) return;
  19                 if (onChange) onChange({ target: { name, value: !value } });
  20         };
  21
  22         const handleClick = event => {
  23                 event.stopPropagation();
  24                 toggle();
  25         };
  26
  27         const handleKey = event => {
  28                 if ([13, 32].includes(event.which)) {
  29                         toggle();
  30                         event.preventDefault();
  31                         event.stopPropagation();
  32                 }
  33         };
  34
  35         const classNames = ['form-control', 'custom-toggle'];
  36         if (value) classNames.push('is-toggled');
  37         if (isInvalid) classNames.push('is-invalid');
  38         if (isValid) classNames.push('is-valid');
  39         if (readonly) classNames.push('readonly');
  40
  41         return <div
  42                         className={classNames.join(' ')}
  43                         role="button"
  44                         aria-pressed={value}
  45                         tabIndex="0"
  46                         onBlur={onBlur ? () => onBlur({ target: { name, value } }) : null}
  47                         onClick={handleClick}
  48                         onKeyDown={handleKey}
  49                 >
  50                         <div className="handle">
  51                                 <span className="handle-label">
  52                                         {value
  53                                                 ? onLabel || <Icon name="check" />
  54                                                 : offLabel || <Icon name="times" />
  55                                         }
  56                                 </span>
  57                         </div>
  58                 </div>;
  59 };
  60
  61 ToggleSwitch.propTypes = {
  62         id: PropTypes.string,
  63         isInvalid: PropTypes.bool,
  64         isValid: PropTypes.bool,
  65         name: PropTypes.string,
  66         offLabel: PropTypes.string,
  67         onBlur: PropTypes.func,
  68         onChange: PropTypes.func,
  69         onLabel: PropTypes.string,
  70         readonly: PropTypes.bool,
  71         value: PropTypes.bool,
  72 };
  73
  74 ToggleSwitch.defaultProps = {
  75         id: '',
  76         isInvalid: false,
  77         isValid: false,
  78         name: '',
  79         offLabel: '',
  80         onBlur: null,
  81         onChange: null,
  82         onLabel: '',
  83         readonly: false,
  84         value: false,
  85 };
  86
  87 export default ToggleSwitch;