react-cm-ui
Version:
React UI for Healthy Church
469 lines (430 loc) • 19.1 kB
JavaScript
"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 _personPanelConstants = require("../personPanel/personPanelConstants");
var _constants = require("../../global/constants");
var _constants2 = require("./constants");
var _utils = require("./utils");
var _dateUtils = _interopRequireDefault(require("../../utils/dateUtils"));
var _grid = _interopRequireDefault(require("../../layout/grid"));
var _gridColumnAcceptedChrist = _interopRequireDefault(require("./gridColumnAcceptedChrist"));
var _gridColumnBaptised = _interopRequireDefault(require("./gridColumnBaptised"));
var _gridColumnClassBaseballDiamond = _interopRequireDefault(require("./gridColumnClassBaseballDiamond"));
var _gridColumnMinistry = _interopRequireDefault(require("./gridColumnMinistry"));
var _gridColumnSmallGroup = _interopRequireDefault(require("./gridColumnSmallGroup"));
var _gridColumnMissions = _interopRequireDefault(require("./gridColumnMissions"));
var _makeStyles = _interopRequireDefault(require("../../styles/makeStyles"));
var _timeFromNow = _interopRequireDefault(require("../timeFromNow"));
var _typography = _interopRequireDefault(require("../typography"));
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 = {
data: _propTypes["default"].shape({
acceptedChristDate: _constants2.ACCEPTED_CHRIST_DATE_PROP_TYPE,
activeInMissionsDate: _constants2.ACTIVE_IN_MISSIONS_DATE_PROP_TYPE,
attendedClass101Date: _constants2.ATTENDED_CLASS101_DATE_PROP_TYPE,
attendedClass201Date: _constants2.ATTENDED_CLASS201_DATE_PROP_TYPE,
attendedClass301Date: _constants2.ATTENDED_CLASS301_DATE_PROP_TYPE,
attendedClass401Date: _constants2.ATTENDED_CLASS401_DATE_PROP_TYPE,
baptismDate: _constants2.BAPTISM_DATE_PROP_TYPE,
congregationDate: _constants2.CONGREGATION_DATE_PROP_TYPE,
firstContactDate: _constants2.FIRST_CONTACT_DATE_PROP_TYPE,
firstMinistryJoinDate: _constants2.FIRST_MINISTRY_JOIN_DATE_PROP_TYPE,
firstSmallGroupJoinDate: _constants2.FIRST_SMALL_GROUP_JOIN_DATE_PROP_TYPE,
gender: _personPanelConstants.GENDER_PROP_TYPE,
hasAcceptedChrist: _constants2.HAS_ACCEPTED_CHRIST_PROP_TYPE,
hasSignedMaturityCovenant: _constants2.HAS_SIGNED_MATURITY_COVENANT_PROP_TYPE,
hasSignedMembershipAgreement: _constants2.HAS_SIGNED_MEMBERSHIP_AGREEMENT_PROP_TYPE,
hasSignedMinistryCovenant: _constants2.HAS_SIGNED_MINISTRY_COVENANT_PROP_TYPE,
hasSignedMissionCovenant: _constants2.HAS_SIGNED_MISSION_COVENANT_PROP_TYPE,
hasTakenClass101: _constants2.HAS_TAKEN_CLASS101_PROP_TYPE,
hasTakenClass201: _constants2.HAS_TAKEN_CLASS201_PROP_TYPE,
hasTakenClass301: _constants2.HAS_TAKEN_CLASS301_PROP_TYPE,
hasTakenClass401: _constants2.HAS_TAKEN_CLASS401_PROP_TYPE,
isActiveInMissions: _constants2.IS_ACTIVE_IN_MISSIONS_PROP_TYPE,
isBaptised: _constants2.IS_BAPTISED_PROP_TYPE,
isInMinistry: _constants2.IS_IN_MINISTRY_PROP_TYPE,
isInSmallGroup: _constants2.IS_IN_SMALL_GROUP_PROP_TYPE,
recordType: _personPanelConstants.RECORD_TYPE_PROP_TYPE,
signedMaturityCovenantDate: _constants2.SIGNED_MATURITY_COVENANT_DATE_PROP_TYPE,
signedMinistryCovenantDate: _constants2.SIGNED_MINISTRY_COVENANT_DATE_PROP_TYPE,
signedMissionCovenantDate: _constants2.SIGNED_MISSION_COVENANT_DATE_PROP_TYPE
}),
className: _propTypes["default"].string,
disablePopover: _constants2.DISABLE_POPOVER_PROP_TYPE,
iconColor: _constants2.ICON_COLOR_PROP_TYPE,
iconSize: _constants2.ICON_SIZE_PROP_TYPE,
id: _propTypes["default"].string,
inverse: _constants2.INVERSE_PROP_TYPE,
isMobile: _propTypes["default"].bool,
// eslint-disable-next-line react/no-unused-prop-types
parentConsumer: _propTypes["default"].string,
removeAcceptedChristColumn: _constants2.REMOVE_ACCEPTED_CHRIST_COLUMN_PROP_TYPE,
removeBaptismColumn: _constants2.REMOVE_BAPTISM_COLUMN_PROP_TYPE,
removeClassColumn: _constants2.REMOVE_CLASS_COLUMN_PROP_TYPE,
removeCongregationDateColumn: _constants2.REMOVE_CONGREGATION_DATE_COLUMN_PROP_TYPE,
removeFirstContactDateColumn: _constants2.REMOVE_FIRST_CONTACT_DATE_COLUMN_PROP_TYPE,
removeInMinistryColumn: _constants2.REMOVE_IN_MINISTRY_COLUMN_PROP_TYPE,
removeInTripsColumn: _constants2.REMOVE_IN_TRIPS_COLUMN_PROP_TYPE,
removeSmallGroupColumn: _constants2.REMOVE_SMALL_GROUP_COLUMN_PROP_TYPE
};
var defaultProps = {
data: null,
className: undefined,
disablePopover: _constants2.DISABLE_POPOVER_DEFAULT_PROP,
iconColor: _constants2.ICON_COLOR_DEFAULT_PROP,
iconSize: _constants2.ICON_SIZE_DEFAULT_PROP,
id: null,
inverse: _constants2.INVERSE_DEFAULT_PROP,
isMobile: false,
parentConsumer: undefined,
removeAcceptedChristColumn: _constants2.REMOVE_ACCEPTED_CHRIST_COLUMN_DEFAULT_PROP,
removeBaptismColumn: _constants2.REMOVE_BAPTISM_COLUMN_DEFAULT_PROP,
removeClassColumn: _constants2.REMOVE_CLASS_COLUMN_DEFAULT_PROP,
removeCongregationDateColumn: _constants2.REMOVE_CONGREGATION_DATE_COLUMN_DEFAULT_PROP,
removeFirstContactDateColumn: _constants2.REMOVE_FIRST_CONTACT_DATE_COLUMN_DEFAULT_PROP,
removeInMinistryColumn: _constants2.REMOVE_IN_MINISTRY_COLUMN_DEFAULT_PROP,
removeInTripsColumn: _constants2.REMOVE_IN_TRIPS_COLUMN_DEFAULT_PROP,
removeSmallGroupColumn: _constants2.REMOVE_SMALL_GROUP_COLUMN_DEFAULT_PROP
};
var useStyles = (0, _makeStyles["default"])(function (theme) {
var palette = theme.palette;
var columnHorizontalPadding = 5.5;
return {
root: {
backgroundColor: function backgroundColor(_ref) {
var backgroundTransparent = _ref.backgroundTransparent,
isMobile = _ref.isMobile;
var backgroundColorValue;
if (backgroundTransparent && !isMobile) {
backgroundColorValue = 'transparent';
} else if (backgroundTransparent && isMobile) {
backgroundColorValue = 'rgb(255, 255, 255, 0.16)';
}
if (!backgroundTransparent) {
backgroundColorValue = palette.background.primary;
}
return backgroundColorValue;
}
},
column: {
height: function height(props) {
return (0, _utils.getIconSize)({
isMobile: props.isMobile,
iconSize: props.iconSize
});
},
padding: "0 ".concat(columnHorizontalPadding, "px"),
width: function width(props) {
return "".concat((0, _utils.getIconSize)({
isMobile: props.isMobile,
iconSize: props.iconSize
}) + columnHorizontalPadding * 2, "px !important");
}
},
congregationDateColummn: {
padding: "0 ".concat(columnHorizontalPadding, "px"),
width: 'auto !important'
},
congregationDateLabelTypography: {
color: function color(_ref2) {
var backgroundTransparent = _ref2.backgroundTransparent;
return backgroundTransparent ? palette.text.contrastText : palette.text.secondary;
}
},
congregationDateTypography: {
color: function color(_ref3) {
var backgroundTransparent = _ref3.backgroundTransparent;
return backgroundTransparent && palette.text.contrastText;
}
},
firstContactDateColumn: function firstContactDateColumn(_ref4) {
var parentConsumer = _ref4.parentConsumer,
isMobile = _ref4.isMobile;
if (parentConsumer === 'personRecord') {
return {
padding: isMobile ? '0px 5px 0px 15px !important' : '10px 15px 10px 5px !important',
width: 'auto !important'
};
}
return {
flexGrow: 1,
padding: "0 ".concat(columnHorizontalPadding, "px"),
textAlign: 'right',
width: 'auto !important'
};
},
firstContactDateLabelTypography: {
color: function color(_ref5) {
var backgroundTransparent = _ref5.backgroundTransparent;
return backgroundTransparent ? palette.text.contrastText : palette.text.secondary;
}
},
firstContactDateTypography: {
color: function color(_ref6) {
var backgroundTransparent = _ref6.backgroundTransparent;
return backgroundTransparent && palette.text.contrastText;
}
},
dateContainers: {
display: 'inline-block',
textAlign: 'left'
},
genderFemale: {},
genderMale: {},
genderUndefined: {},
grid: {
margin: "0 -".concat(columnHorizontalPadding, "px !important"),
width: 'auto'
},
icon: function icon(_ref7) {
var iconColor = _ref7.iconColor;
return {
opacity: iconColor ? 0.25 : 1,
display: 'flex !important',
'&.ui.icon .icon-use-path': {
fill: iconColor ? "".concat(iconColor, " !important") : palette["static"].main
}
};
},
inverse: {},
isAdult: {},
isChild: {},
isStudent: {}
};
});
function PersonCoreMilestones(props) {
var _ClassNames;
var data = props.data,
className = props.className,
disablePopover = props.disablePopover,
iconColor = props.iconColor,
iconSizeProp = props.iconSize,
id = props.id,
inverse = props.inverse,
isMobile = props.isMobile,
removeAcceptedChristColumn = props.removeAcceptedChristColumn,
removeBaptismColumn = props.removeBaptismColumn,
removeClassColumn = props.removeClassColumn,
removeCongregationDateColumn = props.removeCongregationDateColumn,
removeFirstContactDateColumn = props.removeFirstContactDateColumn,
removeInMinistryColumn = props.removeInMinistryColumn,
removeInTripsColumn = props.removeInTripsColumn,
removeSmallGroupColumn = props.removeSmallGroupColumn;
var acceptedChristDate = data.acceptedChristDate,
activeInMissionsDate = data.activeInMissionsDate,
attendedClass101Date = data.attendedClass101Date,
attendedClass201Date = data.attendedClass201Date,
attendedClass301Date = data.attendedClass301Date,
attendedClass401Date = data.attendedClass401Date,
baptismDate = data.baptismDate,
congregationDateProp = data.congregationDate,
firstContactDateProp = data.firstContactDate,
firstMinistryJoinDate = data.firstMinistryJoinDate,
firstSmallGroupJoinDate = data.firstSmallGroupJoinDate,
gender = data.gender,
hasAcceptedChrist = data.hasAcceptedChrist,
hasTakenClass101 = data.hasTakenClass101,
hasTakenClass201 = data.hasTakenClass201,
hasTakenClass301 = data.hasTakenClass301,
hasTakenClass401 = data.hasTakenClass401,
hasSignedMembershipAgreement = data.hasSignedMembershipAgreement,
hasSignedMaturityCovenant = data.hasSignedMaturityCovenant,
hasSignedMinistryCovenant = data.hasSignedMinistryCovenant,
hasSignedMissionCovenant = data.hasSignedMissionCovenant,
isActiveInMissions = data.isActiveInMissions,
isBaptised = data.isBaptised,
isInMinistry = data.isInMinistry,
isInSmallGroup = data.isInSmallGroup,
recordType = data.recordType,
signedMaturityCovenantDate = data.signedMaturityCovenantDate,
signedMinistryCovenantDate = data.signedMinistryCovenantDate,
signedMissionCovenantDate = data.signedMissionCovenantDate;
var classes = useStyles(props);
if ((0, _lodash.isEmpty)(data)) {
return null;
}
var isAdult = recordType === 'adult';
var isFemale = (0, _lodash.includes)(['f', 'F'], gender);
var isMale = (0, _lodash.includes)(['m', 'M'], gender);
var rootClasses = (0, _classnames["default"])(_constants.PERSON_CORE_MILESTONES_CLASSES, classes.root, className, (_ClassNames = {}, _defineProperty(_ClassNames, classes.genderFemale, isFemale), _defineProperty(_ClassNames, classes.genderMale, isMale), _defineProperty(_ClassNames, classes.genderUndefined, !isFemale && !isMale), _defineProperty(_ClassNames, classes.inverse, inverse), _defineProperty(_ClassNames, classes.isAdult, recordType === 'adult'), _defineProperty(_ClassNames, classes.isChild, recordType === 'child'), _defineProperty(_ClassNames, classes.isStudent, recordType === 'student'), _ClassNames));
var iconSize = (0, _utils.getIconSize)({
isMobile: isMobile,
iconSize: iconSizeProp
});
var relativeTime = {
s: '1 day',
ss: '1 day',
m: '1 day',
mm: '1 day',
h: '1 day',
hh: '1 day',
d: '1 day',
dd: '%d days',
M: '1 month',
MM: '%d months',
y: '1 year',
yy: '%d years'
};
var relativeTimeThreshold = {
s: 60,
m: 60,
h: 24,
d: 31,
M: 12
};
var relativeTimeRounding = Math.floor;
var userTimeZone = _dateUtils["default"].getDetectedTimeZone();
var atSaddlebackDate;
var memberForDate;
if (firstContactDateProp) {
atSaddlebackDate = _momentTimezone["default"].utc(firstContactDateProp).tz(userTimeZone);
}
if (congregationDateProp) {
memberForDate = _momentTimezone["default"].utc(congregationDateProp).tz(userTimeZone);
}
return /*#__PURE__*/_react["default"].createElement("div", {
className: rootClasses,
id: id
}, /*#__PURE__*/_react["default"].createElement(_grid["default"], {
alignItems: "center",
className: classes.grid,
spacing: 0
}, /*#__PURE__*/_react["default"].createElement(_gridColumnAcceptedChrist["default"], {
acceptedChristDate: acceptedChristDate,
classes: {
root: classes.column,
icon: classes.icon
},
disablePopover: disablePopover,
hasAcceptedChrist: hasAcceptedChrist,
iconSize: iconSize,
inverse: inverse,
isFemale: isFemale,
isMale: isMale,
recordType: recordType,
removeAcceptedChristColumn: removeAcceptedChristColumn
}), /*#__PURE__*/_react["default"].createElement(_gridColumnBaptised["default"], {
baptismDate: baptismDate,
classes: {
root: classes.column,
icon: classes.icon
},
disablePopover: disablePopover,
isBaptised: isBaptised,
iconSize: iconSize,
inverse: inverse,
isFemale: isFemale,
isMale: isMale,
recordType: recordType,
removeBaptismColumn: removeBaptismColumn
}), /*#__PURE__*/_react["default"].createElement(_gridColumnClassBaseballDiamond["default"], {
attendedClass101Date: attendedClass101Date,
attendedClass201Date: attendedClass201Date,
attendedClass301Date: attendedClass301Date,
attendedClass401Date: attendedClass401Date,
classes: {
root: classes.column
},
congregationDate: congregationDateProp,
disablePopover: disablePopover,
hasSignedMaturityCovenant: hasSignedMaturityCovenant,
hasSignedMembershipAgreement: hasSignedMembershipAgreement,
hasSignedMinistryCovenant: hasSignedMinistryCovenant,
hasSignedMissionCovenant: hasSignedMissionCovenant,
hasTakenClass101: hasTakenClass101,
hasTakenClass201: hasTakenClass201,
hasTakenClass301: hasTakenClass301,
hasTakenClass401: hasTakenClass401,
iconColor: iconColor,
iconSize: iconSize,
inverse: inverse,
isAdult: isAdult,
isFemale: isFemale,
isMale: isMale,
recordType: recordType,
removeClassColumn: removeClassColumn,
signedMaturityCovenantDate: signedMaturityCovenantDate,
signedMinistryCovenantDate: signedMinistryCovenantDate,
signedMissionCovenantDate: signedMissionCovenantDate
}), /*#__PURE__*/_react["default"].createElement(_gridColumnSmallGroup["default"], {
classes: {
root: classes.column,
icon: classes.icon
},
disablePopover: disablePopover,
firstSmallGroupJoinDate: firstSmallGroupJoinDate,
iconSize: iconSize,
inverse: inverse,
isFemale: isFemale,
isInSmallGroup: isInSmallGroup,
isMale: isMale,
recordType: recordType,
removeSmallGroupColumn: removeSmallGroupColumn
}), /*#__PURE__*/_react["default"].createElement(_gridColumnMinistry["default"], {
classes: {
root: classes.column,
icon: classes.icon
},
disablePopover: disablePopover,
firstMinistryJoinDate: firstMinistryJoinDate,
iconSize: iconSize,
inverse: inverse,
isFemale: isFemale,
isInMinistry: isInMinistry,
isMale: isMale,
recordType: recordType,
removeInMinistryColumn: removeInMinistryColumn
}), /*#__PURE__*/_react["default"].createElement(_gridColumnMissions["default"], {
activeInMissionsDate: activeInMissionsDate,
classes: {
root: classes.column,
icon: classes.icon
},
disablePopover: disablePopover,
iconSize: iconSize,
inverse: inverse,
isActiveInMissions: isActiveInMissions,
isFemale: isFemale,
isMale: isMale,
recordType: recordType,
removeInTripsColumn: removeInTripsColumn
}), atSaddlebackDate && !removeFirstContactDateColumn && isAdult && /*#__PURE__*/_react["default"].createElement(_grid["default"].Column, {
className: (0, _classnames["default"])("".concat(_constants.BEM_PERSON_CORE_MILESTONES, "--first_contact_date_column"), classes.firstContactDateColumn)
}, /*#__PURE__*/_react["default"].createElement(_typography["default"], {
className: classes.firstContactDateLabelTypography,
variant: "h6"
}, "At Saddleback"), /*#__PURE__*/_react["default"].createElement("span", {
className: "".concat(_constants.BEM_PERSON_CORE_MILESTONES, "--at_saddleback_date font-size-xsmall font-weight-bold")
}, /*#__PURE__*/_react["default"].createElement(_timeFromNow["default"], {
className: classes.firstContactDateTypography,
date: atSaddlebackDate,
relativeTime: relativeTime,
relativeTimeThreshold: relativeTimeThreshold,
relativeTimeRounding: relativeTimeRounding
}))), memberForDate && !removeCongregationDateColumn && isAdult && /*#__PURE__*/_react["default"].createElement(_grid["default"].Column, {
className: (0, _classnames["default"])("".concat(_constants.BEM_PERSON_CORE_MILESTONES, "--congregation_date_column"), classes.congregationDateColummn)
}, /*#__PURE__*/_react["default"].createElement(_typography["default"], {
className: classes.congregationDateLabelTypography,
variant: "h6"
}, "Member For"), /*#__PURE__*/_react["default"].createElement("span", {
className: "".concat(_constants.BEM_PERSON_CORE_MILESTONES, "--member_for_date font-size-xsmall font-weight-bold")
}, /*#__PURE__*/_react["default"].createElement(_timeFromNow["default"], {
className: classes.congregationDateTypography,
date: memberForDate,
relativeTime: relativeTime,
relativeTimeThreshold: relativeTimeThreshold,
relativeTimeRounding: relativeTimeRounding
})))));
}
PersonCoreMilestones.propTypes = propTypes;
PersonCoreMilestones.defaultProps = defaultProps;
var _default = PersonCoreMilestones;
exports["default"] = _default;