]> git.localhorst.tv Git - alttp.git/blob - resources/js/components/common/ToggleSwitch.js
compact keysanity tracker
[alttp.git] / 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         title,
16         value,
17 }) => {
18         const toggle = () => {
19                 if (readonly) return;
20                 if (onChange) onChange({ target: { name, value: !value } });
21         };
22
23         const handleClick = event => {
24                 event.stopPropagation();
25                 toggle();
26         };
27
28         const handleKey = event => {
29                 if ([13, 32].includes(event.which)) {
30                         toggle();
31                         event.preventDefault();
32                         event.stopPropagation();
33                 }
34         };
35
36         const classNames = ['form-control', 'custom-toggle'];
37         if (value) classNames.push('is-toggled');
38         if (isInvalid) classNames.push('is-invalid');
39         if (isValid) classNames.push('is-valid');
40         if (readonly) classNames.push('readonly');
41
42         return <div
43                         className={classNames.join(' ')}
44                         role="button"
45                         aria-pressed={value}
46                         tabIndex="0"
47                         title={title}
48                         onBlur={onBlur ? () => onBlur({ target: { name, value } }) : null}
49                         onClick={handleClick}
50                         onKeyDown={handleKey}
51                 >
52                         <div className="handle">
53                                 <span className="handle-label">
54                                         {value
55                                                 ? onLabel || <Icon name="check" />
56                                                 : offLabel || <Icon name="times" />
57                                         }
58                                 </span>
59                         </div>
60                 </div>;
61 };
62
63 ToggleSwitch.propTypes = {
64         id: PropTypes.string,
65         isInvalid: PropTypes.bool,
66         isValid: PropTypes.bool,
67         name: PropTypes.string,
68         offLabel: PropTypes.string,
69         onBlur: PropTypes.func,
70         onChange: PropTypes.func,
71         onLabel: PropTypes.string,
72         readonly: PropTypes.bool,
73         title: PropTypes.string,
74         value: PropTypes.bool,
75 };
76
77 ToggleSwitch.defaultProps = {
78         id: '',
79         isInvalid: false,
80         isValid: false,
81         name: '',
82         offLabel: '',
83         onBlur: null,
84         onChange: null,
85         onLabel: '',
86         readonly: false,
87         title: null,
88         value: false,
89 };
90
91 export default ToggleSwitch;