+import PropTypes from 'prop-types';
+import React from 'react';
+
+import Icon from './Icon';
+
+const LargeCheck = ({
+ className,
+ id,
+ name,
+ onBlur,
+ onChange,
+ value,
+}) => {
+ let clsn = className ? `${className} custom-check` : 'custom-check';
+ if (value) {
+ clsn += ' checked';
+ }
+ return <span
+ className={clsn}
+ id={id}
+ onBlur={onBlur ? () => onBlur({ target: { name, value } }) : null}
+ onClick={onChange ? () => onChange({ target: { name, value: !value } }) : null}
+ onKeyPress={onChange ? e => {
+ if (e.key == 'Enter' || e.key == ' ') {
+ e.preventDefault();
+ e.stopPropagation();
+ onChange({ target: { name, value: !value } });
+ }
+ } : null}
+ tabIndex="0"
+ >
+ <Icon name="check" />
+ </span>;
+};
+
+LargeCheck.propTypes = {
+ className: PropTypes.string,
+ id: PropTypes.string,
+ name: PropTypes.string,
+ onBlur: PropTypes.func,
+ onChange: PropTypes.func,
+ value: PropTypes.bool,
+};
+
+LargeCheck.defaultProps = {
+ className: '',
+ id: '',
+ name: '',
+ onBlur: null,
+ onChange: null,
+ value: false,
+};
+
+export default LargeCheck;