1 import PropTypes from 'prop-types';
2 import React from 'react';
4 import Icon from './Icon';
6 const ToggleSwitch = ({
17 const toggle = () => {
19 if (onChange) onChange({ target: { name, value: !value } });
22 const handleClick = event => {
23 event.stopPropagation();
27 const handleKey = event => {
28 if ([13, 32].includes(event.which)) {
30 event.preventDefault();
31 event.stopPropagation();
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');
42 className={classNames.join(' ')}
46 onBlur={onBlur ? () => onBlur({ target: { name, value } }) : null}
50 <div className="handle">
51 <span className="handle-label">
53 ? onLabel || <Icon name="check" />
54 : offLabel || <Icon name="times" />
61 ToggleSwitch.propTypes = {
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,
74 ToggleSwitch.defaultProps = {
87 export default ToggleSwitch;