@eureca/eureca-ui/src/components/Switch/switch.js

UI component library of Eureca's user and admin apps

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

import { makeStyles } from '@material-ui/core/styles';
import MaterialSwitch from '@material-ui/core/Switch';
import FormControlLabel from '@material-ui/core/FormControlLabel';

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

const useStyles = makeStyles({
  switchBase: {
    color: colors.gray3,
    '&:hover': {
      backgroundColor: 'transparent',
    },
    '&$checked': {
      '& + $track': {
        backgroundColor: colors.green4,
      },
      '&:hover': {
        backgroundColor: 'transparent',
      },
    },
  },
  track: {
    backgroundColor: colors.gray4,
    opacity: 1,
  },
  label: {
    color: colors['color-1.1'],
    fontSize: 14,

    '&$disabled': {
      color: colors.gray3,
    },
  },
  checked: {},
  disabled: {},
});

function Switch({ checked, value, label, onChange, color = 'primary', name = '', ...props }) {
  const classes = useStyles();

  return (
    <FormControlLabel
      control={
        <MaterialSwitch
          color={color}
          classes={{
            switchBase: classes.switchBase,
            track: classes.track,
            checked: classes.checked,
          }}
          disableRipple
          {...props}
        />
      }
      name={name}
      classes={{ label: classes.label, disabled: classes.disabled }}
      label={label}
      checked={checked}
      value={value}
      onChange={onChange}
    />
  );
}

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

export { Switch };