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

React UI for Healthy Church

"use strict";

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

var _lodash = require("lodash");

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

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

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

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

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

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

var _typography = _interopRequireDefault(require("../typography"));

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

var DATE_FORMAT = 'MM-DD-YY';
var propTypes = {
  title: _propTypes["default"].string.isRequired,
  milestonesDates: _propTypes["default"].arrayOf(_propTypes["default"].shape({
    label: _propTypes["default"].string,
    date: _propTypes["default"].string
  }))
};
var defaultProps = {
  milestonesDates: []
};
var useStyles = (0, _makeStyles["default"])(function (theme) {
  return {
    root: {
      '& .grid-col': {
        padding: 0
      },
      '& .grid-row:not(:first-child)': {
        padding: '5px 0 0 0'
      }
    },
    milestoneLabel: {
      fontWeight: (0, _lodash.get)(theme, 'typography.fontWeightMedium')
    },
    milestoneColumn: {
      padding: '0',
      whiteSpace: 'nowrap',
      fontSize: 16
    },
    title: {
      fontWeight: "".concat((0, _lodash.get)(theme, 'typography.fontWeightBold'), " !important"),
      fontSize: '20px !important',
      paddingBottom: '10px !important'
    }
  };
});

function MilestonesPopoverContent(props) {
  var title = props.title,
      milestonesDates = props.milestonesDates;
  var classes = useStyles();
  var labelColumnClasses = (0, _classnames["default"])(classes.milestoneColumn, classes.milestoneLabel);
  var milestonesDatesJsx = milestonesDates.map(function (milestoneDate, index) {
    var date = milestoneDate.date,
        label = milestoneDate.label;
    return /*#__PURE__*/_react["default"].createElement(_grid["default"], {
      className: index >= 1 ? classes.dateGrid : undefined,
      key: "person_core_milestone-".concat((0, _lodash.snakeCase)(label))
    }, /*#__PURE__*/_react["default"].createElement(_grid["default"].Column, {
      className: labelColumnClasses,
      sm: true
    }, label), /*#__PURE__*/_react["default"].createElement(_grid["default"].Column, {
      sm: "auto"
    }, date && (0, _momentTimezone["default"])(date).format(DATE_FORMAT)));
  });
  return /*#__PURE__*/_react["default"].createElement(_grid["default"], {
    className: classes.root
  }, /*#__PURE__*/_react["default"].createElement(_grid["default"].Column, {
    sm: 12
  }, /*#__PURE__*/_react["default"].createElement(_typography["default"], {
    className: classes.title
  }, title)), milestonesDatesJsx);
}

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