]> git.localhorst.tv Git - alttp.git/blob - resources/js/components/common/LargeCheck.js
svg dungeon tracker
[alttp.git] / 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;