@krowdy-ui/views/CardCandidate/CardCandidate.js

React components that implement Google's Material Design.

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = exports.styles = void 0;

var _react = _interopRequireDefault(require("react"));

var _propTypes = _interopRequireDefault(require("prop-types"));

var _styles = require("@krowdy-ui/styles");

var _core = require("@krowdy-ui/core");

var _clsx = _interopRequireDefault(require("clsx"));

var styles = function styles(theme) {
  return {
    avatar: {
      backgroundColor: theme.palette.primary['contrastText'],
      border: "1px solid ".concat(theme.palette.grey[300]),
      color: theme.palette.grey[600],
      fontSize: 10,
      fontStyle: 'normal',
      fontWeight: 'normal',
      height: 28,
      lineHeight: '100%',
      textAlign: 'center',
      width: 28
    },
    checkbox: {
      '&:hover': {
        backgroundColor: 'transparent',
        boxShadow: 'none'
      }
    },
    checkboxHover: {
      height: 28,
      width: 28
    },
    checked: {
      '& $avatar': {
        display: 'none'
      },
      '& $checkboxHover': {
        display: 'inline-flex',
        marginLeft: theme.spacing(1)
      }
    },
    labelCandidate: {
      marginLeft: theme.spacing(1)
    },
    name: {
      color: theme.palette.grey[700],
      fontSize: 12,
      fontStyle: 'normal',
      fontWeight: 'normal'
    },
    paper: {
      '&:active': {
        border: "1px solid ".concat(theme.palette.grey[500])
      },
      '&:focus': {
        border: "1px solid ".concat(theme.palette.primary[600])
      },
      '&:hover': {
        border: "1px solid ".concat(theme.palette.primary[400])
      },
      alignItems: 'center',
      border: "1px solid ".concat(theme.palette.grey[400]),
      borderRadius: 8,
      boxShadow: 'none',
      boxSizing: 'border-box',
      display: 'flex',
      height: 40,
      marginBottom: theme.spacing(1),
      width: '100%'
    },
    root: {
      '& $checkboxHover': {
        display: 'none'
      },
      '&:hover': {
        '& $avatar': {
          display: 'none'
        },
        '& $checkboxHover': {
          display: 'inline-flex'
        }
      },
      marginLeft: theme.spacing(1)
    }
  };
};

exports.styles = styles;

var CardCandidate = function CardCandidate(_ref) {
  var checked = _ref.checked,
      _id = _ref._id,
      _ref$firstName = _ref.firstName,
      firstName = _ref$firstName === void 0 ? '' : _ref$firstName,
      _ref$lastName = _ref.lastName,
      lastName = _ref$lastName === void 0 ? '' : _ref$lastName,
      _ref$colorCheckbox = _ref.colorCheckbox,
      colorCheckbox = _ref$colorCheckbox === void 0 ? 'primary' : _ref$colorCheckbox,
      _ref$onChangeCheckbox = _ref.onChangeCheckbox,
      onChangeCheckbox = _ref$onChangeCheckbox === void 0 ? function () {} : _ref$onChangeCheckbox,
      src = _ref.src,
      classes = _ref.classes;
  return /*#__PURE__*/_react["default"].createElement(_core.Paper, {
    className: classes.paper,
    key: _id
  }, /*#__PURE__*/_react["default"].createElement("div", {
    className: (0, _clsx["default"])(checked ? classes.checked : classes.root)
  }, /*#__PURE__*/_react["default"].createElement(_core.Checkbox, {
    checked: checked,
    className: classes.checkboxHover,
    color: colorCheckbox,
    onChange: function onChange(_ref2) {
      var checked = _ref2.target.checked;
      return onChangeCheckbox(_id, checked);
    }
  }), /*#__PURE__*/_react["default"].createElement(_core.Avatar, {
    className: classes.avatar,
    src: src
  }, "".concat(firstName.charAt(0).toUpperCase()).concat(lastName.charAt(0).toUpperCase()))), /*#__PURE__*/_react["default"].createElement("div", {
    className: classes.labelCandidate
  }, /*#__PURE__*/_react["default"].createElement(_core.Typography, {
    className: classes.name
  }, firstName, " ", lastName)));
};

process.env.NODE_ENV !== "production" ? CardCandidate.propTypes = {
  _id: _propTypes["default"].number,
  checked: _propTypes["default"].bool,
  classes: _propTypes["default"].object,
  colorCheckbox: _propTypes["default"].string,
  firstName: _propTypes["default"].string,
  lastName: _propTypes["default"].string,
  onChangeCheckbox: _propTypes["default"].func,
  src: _propTypes["default"].string
} : void 0;
CardCandidate.muiName = 'CardCandidate';

var _default = (0, _styles.withStyles)(styles, {
  name: 'KrowdyCardCandidate'
})(CardCandidate);

exports["default"] = _default;