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

React UI for Healthy Church

"use strict";

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

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

var _momentTimezone = _interopRequireDefault(require("moment-timezone"));

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 = {
  baptismDate: _constants2.BAPTISM_DATE_PROP_TYPE,
  classes: _propTypes["default"].shape({
    icon: _propTypes["default"].string,
    root: _propTypes["default"].string
  }).isRequired,
  disablePopover: _constants2.DISABLE_POPOVER_PROP_TYPE,
  isBaptised: _constants2.IS_BAPTISED_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,
  removeBaptismColumn: _constants2.REMOVE_BAPTISM_COLUMN_PROP_TYPE
};
var defaultProps = {
  baptismDate: null,
  disablePopover: _constants2.DISABLE_POPOVER_DEFAULT_PROP,
  isBaptised: 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,
  removeBaptismColumn: _constants2.REMOVE_BAPTISM_COLUMN_DEFAULT_PROP
};
var useStyles = (0, _makeStyles["default"])(function (theme) {
  return {
    root: {
      '& $isBaptised': {
        '&$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: {},
    isBaptised: {
      '&.icon': {
        opacity: 1
      }
    },
    isAdult: {},
    isChild: {},
    isStudent: {}
  };
});

function GridColumnBaptised(props) {
  var _ClassNames;

  var baptismDate = props.baptismDate,
      disablePopover = props.disablePopover,
      isBaptised = props.isBaptised,
      iconSize = props.iconSize,
      inverse = props.inverse,
      isFemale = props.isFemale,
      isMale = props.isMale,
      recordType = props.recordType,
      removeBaptismColumn = props.removeBaptismColumn;
  var classes = useStyles(props);

  if (removeBaptismColumn) {
    return null;
  }

  var baptisedIcon = /*#__PURE__*/_react["default"].createElement(_icon["default"], {
    className: (0, _classnames["default"])(classes.icon, (_ClassNames = {}, _defineProperty(_ClassNames, classes.genderFemale, isFemale), _defineProperty(_ClassNames, classes.genderMale, isMale), _defineProperty(_ClassNames, classes.genderUndefined, !isFemale && !isMale), _defineProperty(_ClassNames, classes.isBaptised, isBaptised), _defineProperty(_ClassNames, classes.isAdult, recordType === 'adult'), _defineProperty(_ClassNames, classes.isChild, recordType === 'child'), _defineProperty(_ClassNames, classes.isStudent, recordType === 'student'), _ClassNames)),
    compact: true,
    inverse: inverse,
    size: iconSize,
    title: isBaptised ? false : 'Not Baptized',
    type: "droplet"
  });

  var popoverNode = !disablePopover && isBaptised && baptismDate ? /*#__PURE__*/_react["default"].createElement(_popover["default"], {
    content: /*#__PURE__*/_react["default"].createElement(_milestonePopoverContent["default"], {
      title: "Baptized",
      milestonesDates: [{
        label: 'On',
        date: baptismDate
      }]
    }),
    mouseEvent: "onMouseEnter"
  }, baptisedIcon) : null;
  return /*#__PURE__*/_react["default"].createElement(_grid["default"].Column, {
    className: (0, _classnames["default"])("".concat(_constants.BEM_PERSON_CORE_MILESTONES, "--baptism_column"), classes.root)
  }, popoverNode || baptisedIcon);
}

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