react-cm-ui/core/dataDisplay/personCoreMilestones/gridColumnSmallGroup.js

React UI for Healthy Church

"use strict";

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

var _classnames = _interopRequireDefault(require("classnames"));

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

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

var _personPanelConstants = require("../personPanel/personPanelConstants");

var _constants = require("../../global/constants");

var _constants2 = require("./constants");

var _grid = _interopRequireDefault(require("../../layout/grid"));

var _icon = _interopRequireDefault(require("../icon"));

var _makeStyles = _interopRequireDefault(require("../../styles/makeStyles"));

var _milestonePopoverContent = _interopRequireDefault(require("./milestonePopoverContent"));

var _popover = _interopRequireDefault(require("../popover"));

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

var propTypes = {
  firstSmallGroupJoinDate: _constants2.FIRST_MINISTRY_JOIN_DATE_PROP_TYPE,
  classes: _propTypes["default"].shape({
    icon: _propTypes["default"].string,
    root: _propTypes["default"].string
  }).isRequired,
  disablePopover: _constants2.DISABLE_POPOVER_PROP_TYPE,
  isInSmallGroup: _constants2.IS_IN_SMALL_GROUP_PROP_TYPE,
  iconSize: _constants2.ICON_SIZE_PROP_TYPE,
  inverse: _constants2.INVERSE_PROP_TYPE,
  isFemale: _propTypes["default"].bool,
  isMale: _propTypes["default"].bool,
  recordType: _personPanelConstants.RECORD_TYPE_PROP_TYPE,
  removeSmallGroupColumn: _constants2.REMOVE_SMALL_GROUP_COLUMN_PROP_TYPE
};
var defaultProps = {
  disablePopover: _constants2.DISABLE_POPOVER_DEFAULT_PROP,
  firstSmallGroupJoinDate: null,
  isInSmallGroup: null,
  iconSize: _constants2.ICON_SIZE_DEFAULT_PROP,
  inverse: _constants2.INVERSE_DEFAULT_PROP,
  isFemale: _propTypes["default"].bool,
  isMale: _propTypes["default"].bool,
  recordType: _personPanelConstants.RECORD_TYPE_DEFAULT_PROP,
  removeSmallGroupColumn: _constants2.REMOVE_SMALL_GROUP_COLUMN_DEFAULT_PROP
};
var useStyles = (0, _makeStyles["default"])(function (theme) {
  return {
    root: {
      '& $isInSmallGroup': {
        '&$isAdult': {
          '&$genderFemale .icon-use-path': {
            fill: "".concat((0, _personPanelConstants.RECORD_TYPE_COLOR)({
              gender: 'f',
              recordType: 'adult',
              theme: theme
            }))
          },
          '&$genderMale .icon-use-path': {
            fill: "".concat((0, _personPanelConstants.RECORD_TYPE_COLOR)({
              gender: 'm',
              recordType: 'adult',
              theme: theme
            }))
          },
          '&$genderUndefined .icon-use-path': {
            fill: "".concat((0, _personPanelConstants.RECORD_TYPE_COLOR)({
              recordType: 'adult',
              theme: theme
            }))
          }
        },
        '&$isChild .icon-use-path': {
          fill: "".concat((0, _personPanelConstants.RECORD_TYPE_COLOR)({
            recordType: 'child',
            theme: theme
          }), " !important")
        },
        '&$isStudent .icon-use-path': {
          fill: "".concat((0, _personPanelConstants.RECORD_TYPE_COLOR)({
            recordType: 'student',
            theme: theme
          }), " !important")
        }
      }
    },
    genderFemale: {},
    genderMale: {},
    genderUndefined: {},
    icon: {},
    isInSmallGroup: {
      '&.icon': {
        opacity: 1
      }
    },
    isAdult: {},
    isChild: {},
    isStudent: {}
  };
});

function GridColumnSmallGroup(props) {
  var _ClassNames;

  var disablePopover = props.disablePopover,
      firstSmallGroupJoinDate = props.firstSmallGroupJoinDate,
      iconSize = props.iconSize,
      inverse = props.inverse,
      isFemale = props.isFemale,
      isInSmallGroup = props.isInSmallGroup,
      isMale = props.isMale,
      recordType = props.recordType,
      removeSmallGroupColumn = props.removeSmallGroupColumn;
  var classes = useStyles(props);

  if (removeSmallGroupColumn) {
    return null;
  }

  var smallGroupIcon = /*#__PURE__*/_react["default"].createElement(_icon["default"], {
    className: (0, _classnames["default"])(classes.iconSmallGroup, classes.icon, (_ClassNames = {}, _defineProperty(_ClassNames, classes.genderFemale, isFemale), _defineProperty(_ClassNames, classes.genderMale, isMale), _defineProperty(_ClassNames, classes.genderUndefined, !isFemale && !isMale), _defineProperty(_ClassNames, classes.isAdult, recordType === 'adult'), _defineProperty(_ClassNames, classes.isChild, recordType === 'child'), _defineProperty(_ClassNames, classes.isInSmallGroup, isInSmallGroup), _defineProperty(_ClassNames, classes.isStudent, recordType === 'student'), _ClassNames)),
    compact: true,
    inverse: inverse,
    size: iconSize,
    title: !isInSmallGroup && 'Not active in Small Group',
    type: "users"
  });

  var popoverNode = !disablePopover && isInSmallGroup && firstSmallGroupJoinDate ? /*#__PURE__*/_react["default"].createElement(_popover["default"], {
    content: /*#__PURE__*/_react["default"].createElement(_milestonePopoverContent["default"], {
      title: "Active in Small Groups",
      milestonesDates: [{
        label: 'Since',
        date: firstSmallGroupJoinDate
      }]
    }),
    mouseEvent: "onMouseEnter"
  }, smallGroupIcon) : null;
  return /*#__PURE__*/_react["default"].createElement(_grid["default"].Column, {
    className: (0, _classnames["default"])("".concat(_constants.BEM_PERSON_CORE_MILESTONES, "--small_group_column"), classes.root)
  }, popoverNode || smallGroupIcon);
}

GridColumnSmallGroup.propTypes = propTypes;
GridColumnSmallGroup.defaultProps = defaultProps;
var _default = GridColumnSmallGroup;
exports["default"] = _default;