resources/js/components/common/LargeCheck.js

   1 import PropTypes from 'prop-types';
   2 import React from 'react';
   3
   4 import Icon from './Icon';
   5
   6 const LargeCheck = ({
   7         className,
   8         id,
   9         name,
  10         onBlur,
  11         onChange,
  12         value,
  13 }) => {
  14         let clsn = className ? `${className} custom-check` : 'custom-check';
  15         if (value) {
  16                 clsn += ' checked';
  17         }
  18         return <span
  19                 className={clsn}
  20                 id={id}
  21                 onBlur={onBlur ? () => onBlur({ target: { name, value } }) : null}
  22                 onClick={onChange ? () => onChange({ target: { name, value: !value } }) : null}
  23                 onKeyPress={onChange ? e => {
  24                         if (e.key == 'Enter' || e.key == ' ') {
  25                                 e.preventDefault();
  26                                 e.stopPropagation();
  27                                 onChange({ target: { name, value: !value } });
  28                         }
  29                 } : null}
  30                 tabIndex="0"
  31         >
  32                 <Icon name="check" />
  33         </span>;
  34 };
  35
  36 LargeCheck.propTypes = {
  37         className: PropTypes.string,
  38         id: PropTypes.string,
  39         name: PropTypes.string,
  40         onBlur: PropTypes.func,
  41         onChange: PropTypes.func,
  42         value: PropTypes.bool,
  43 };
  44
  45 LargeCheck.defaultProps = {
  46         className: '',
  47         id: '',
  48         name: '',
  49         onBlur: null,
  50         onChange: null,
  51         value: false,
  52 };
  53
  54 export default LargeCheck;