@eureca/eureca-ui/src/components/Checkbox/index.js

UI component library of Eureca's user and admin apps

import React from 'react';
import PropTypes from 'prop-types';

import { makeStyles, useTheme } from '@material-ui/core/styles';
import MaterialCheckbox from '@material-ui/core/Checkbox';
import FormControlLabel from '@material-ui/core/FormControlLabel';

import { colors } from '../../theme/colors';

const useStyles = makeStyles({
  root: {
    color: colors.gray3,
    padding: 0,
    '&:hover': {
      backgroundColor: 'transparent',
    },
    '&$checked': {
      '&:hover': {
        backgroundColor: 'transparent',
      },
    },
    '&$disabled': {
      color: colors.gray3,
    },
    '&& svg': {
      width: props => props.spacing(3),
      height: props => props.spacing(3),
    },
  },
  label: {
    color: colors.gray2,
    fontSize: '.875rem',
    lineHeight: 20 / 14,
    paddingLeft: 6,
    '&$disabled': {
      color: colors.gray3,
    },
  },
  labelRoot: {
    margin: 0,
  },
  checked: {},
  disabled: {},
});

function Checkbox({
  checked = false,
  value,
  name,
  label = '',
  color = 'primary',
  onChange = () => {},
  ...props
}) {
  const theme = useTheme();
  const classes = useStyles({ ...theme, label });
  const handleChange = event => {
    onChange(event.target.checked, value, label, event);
  };
  return (
    <FormControlLabel
      control={
        <MaterialCheckbox
          color={color}
          classes={{
            root: classes.root,
            checked: classes.checked,
            disabled: classes.disabled,
          }}
          disableRipple
          {...props}
        />
      }
      checked={checked}
      name={name}
      value={value}
      onChange={handleChange}
      classes={{
        root: classes.labelRoot,
        label: classes.label,
        disabled: classes.disabled,
      }}
      label={label}
    />
  );
}

Checkbox.propTypes = {
  checked: PropTypes.bool,
  value: PropTypes.any.isRequired,
  name: PropTypes.string.isRequired,
  label: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
  color: PropTypes.oneOf(['default', 'primary', 'secondary']),
  onChange: PropTypes.func,
};

export { Checkbox };