scripts/core/ui/components/Toggle/index.tsx
import React from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import {KEYCODES} from '../constants';
import {onEventCapture} from '../utils';
import './style.scss';
/**
* @ngdoc react
* @name Toggle
* @description Toggle component used to togle check/uncheck status
*/
const Toggle: React.StatelessComponent<any> = ({value, onChange, readOnly, onFocus, className}) => {
const handleKeyDown = (event) => {
if (event.keyCode === KEYCODES.ENTER) {
onEventCapture(event);
onChange({target: {value: !value}});
}
};
const onClick = () => onChange({target: {value: !value}});
const classes = classNames(
'sd-toggle',
'sd-line-input__input',
{
checked: value,
disabled: readOnly,
'sd-toggle--checked': value,
'sd-toggle--disabled': readOnly,
},
className,
);
return (
<button
type="button"
tabIndex={0}
className={classes}
onClick={!readOnly && onChange ? onClick : null}
onFocus={onFocus}
onKeyDown= {!readOnly ? handleKeyDown : null}
>
<span className="inner" />
</button>
);
};
Toggle.propTypes = {
value: PropTypes.bool,
onChange: PropTypes.func,
onFocus: PropTypes.func,
readOnly: PropTypes.bool,
className: PropTypes.string,
};
Toggle.defaultProps = {
value: false,
readOnly: false,
};
export default Toggle;