react-cm-ui
Version:
React UI for Healthy Church
577 lines (502 loc) • 21.5 kB
JavaScript
"use strict";
function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
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 = _interopRequireWildcard(require("react"));
var _personPanelConstants = require("./personPanelConstants");
var _keyCode = _interopRequireDefault(require("../../global/keyCode"));
var _constants = require("../../global/constants");
var _index = _interopRequireDefault(require("../../layout/grid/index"));
var _index2 = _interopRequireDefault(require("../image/index"));
var _makeStyles = _interopRequireDefault(require("../../styles/makeStyles"));
var _personContactInfo = _interopRequireDefault(require("../personContactInfo/personContactInfo"));
var _typography = _interopRequireDefault(require("../typography/typography"));
function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
function _iterableToArrayLimit(arr, i) { if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return; var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
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 = {
/**
* Override or extend the styles applied to PersonPanelSummary.
*/
classes: _propTypes["default"].shape({
root: _propTypes["default"].string,
avatar: _propTypes["default"].string,
avatarColumn: _propTypes["default"].string,
contactInfoColumn: _propTypes["default"].string,
expanded: _propTypes["default"].string,
grid: _propTypes["default"].string,
gridRow: _propTypes["default"].string,
metaInfo: _propTypes["default"].string,
nameColumn: _propTypes["default"].string,
personIdColumn: _propTypes["default"].string,
personId: _propTypes["default"].string
}),
/**
* Assign additional class names to PersonPanelSummary.
*/
className: _propTypes["default"].string,
/**
* The data that the PersonPanelSummary uses to build the UI.
*/
data: _propTypes["default"].shape({
avatar: _propTypes["default"].string,
birthdate: _propTypes["default"].number,
campus: _propTypes["default"].string,
emails: _propTypes["default"].arrayOf(_propTypes["default"].shape({
value: _propTypes["default"].string,
isPrimary: _propTypes["default"].bool
})),
emergencyContactEmail: _propTypes["default"].string,
emergencyContactPhone: _propTypes["default"].string,
emergencyContactPreferredMethod: _propTypes["default"].string,
emergencyContactRelationshipName: _propTypes["default"].string,
firstName: _propTypes["default"].string,
gender: _personPanelConstants.GENDER_PROP_TYPE,
gradeLevel: _propTypes["default"].oneOf(['none', 'preK', 'kindergarten', 'first', 'second', 'third', 'fourth', 'fifth', 'sixth', 'seventh', 'eighth', 'ninth', 'tenth', 'eleventh', 'twelfth', null]),
isDoNotContact: _propTypes["default"].bool,
isDoNotEmail: _propTypes["default"].bool,
isDoNotMail: _propTypes["default"].bool,
isDoNotPhone: _propTypes["default"].bool,
isDoNotText: _propTypes["default"].bool,
lastName: _propTypes["default"].string,
maritalStatus: _propTypes["default"].string,
nickName: _propTypes["default"].string,
personId: _propTypes["default"].number,
phones: _propTypes["default"].arrayOf(_propTypes["default"].shape({
value: _propTypes["default"].string,
isPrimary: _propTypes["default"].bool
})),
preferredMethod: _propTypes["default"].string,
prefix: _propTypes["default"].string,
recordType: _personPanelConstants.RECORD_TYPE_PROP_TYPE,
suffix: _propTypes["default"].string
}),
/**
* The `id` of the PersonPanelSummary.
*/
id: _propTypes["default"].string,
/**
* If `true`, expand PersonPanelSummary, otherwise collapse it.
*/
isExpanded: _propTypes["default"].bool,
/**
* Event handler when clicking on the PersonPanelSummary container.
*/
onClick: _propTypes["default"].func,
/**
* Indicates whether or not the PersonPanelSummary can be focused.
*/
tabIndex: _propTypes["default"].number
};
var defaultProps = {
classes: null,
className: null,
data: {},
id: null,
isExpanded: false,
onClick: function onClick() {},
tabIndex: -1
};
var ageText = function ageText(_ref) {
var birthdate = _ref.birthdate;
if (!(0, _lodash.isEmpty)(birthdate)) {
return '';
}
return "".concat((0, _momentTimezone["default"])().diff(_momentTimezone["default"].unix(birthdate).utc(), 'years'), "yr");
};
var birthdateText = function birthdateText(_ref2) {
var birthdate = _ref2.birthdate;
if (!(0, _lodash.isEmpty)(birthdate)) {
return '';
}
return _momentTimezone["default"].unix(birthdate).utc().format('MM/DD/YY');
};
var genderText = function genderText(_ref3) {
var gender = _ref3.gender;
switch (gender) {
case 'f':
case 'F':
return 'Female';
case 'm':
case 'M':
return 'Male';
default:
return '';
}
};
var gradeLevelText = function gradeLevelText(_ref4) {
var gradeLevel = _ref4.gradeLevel;
switch (gradeLevel) {
case 'PreK':
return 'PK';
case 'Kindergarten':
return 'K';
case 'First':
return '1';
case 'Second':
return '2';
case 'Third':
return '3';
case 'Fourth':
return '4';
case 'Fifth':
return '5';
case 'Sixth':
return '6';
case 'Seventh':
return '7';
case 'Eighth':
return '8';
case 'Ninth':
return '9';
case 'Tenth':
return '10';
case 'Eleventh':
return '11';
case 'Twelfth':
return '12';
default:
return gradeLevel;
}
};
var BEM_CLASS_NAME = "".concat(_personPanelConstants.BEM_BLOCK_NAME, "--summary");
var useStyles = (0, _makeStyles["default"])(function (theme) {
var _$isExpanded, _root;
var palette = theme.palette,
borderRadius = theme.shape.borderRadius;
var transitionDuration = '200ms';
var colorTransition = "color ".concat(transitionDuration, " ease-out");
return {
root: (_root = {
alignItems: 'center',
backgroundColor: palette.background.light,
borderRadius: borderRadius,
color: palette.text.primary,
cursor: 'pointer',
display: 'flex',
flexGrow: 1,
minHeight: 70,
outline: 'none',
position: 'relative',
transition: colorTransition,
userSelect: 'none',
width: '100%',
'&::before, &::after': {
bottom: 0,
content: '""',
left: 0,
position: 'absolute',
top: 0,
transition: "opacity ".concat(transitionDuration, " ease-in-out"),
zIndex: 1
},
'&::before': {
borderRadius: "".concat(borderRadius, "px 0 0 ").concat(borderRadius, "px"),
opacity: 1,
width: '5px',
transition: "width ".concat(transitionDuration, " ease-in-out")
}
}, _defineProperty(_root, "& a.".concat(_constants.UI_CLASS_NAME), {
transition: colorTransition
}), _defineProperty(_root, '&$isAdult', {
'&$genderFemale::before': {
backgroundColor: "".concat((0, _personPanelConstants.RECORD_TYPE_COLOR)({
gender: 'f',
recordType: 'adult',
theme: theme
}), " !important")
},
'&$genderMale::before': {
backgroundColor: "".concat((0, _personPanelConstants.RECORD_TYPE_COLOR)({
gender: 'm',
recordType: 'adult',
theme: theme
}), " !important")
},
'&$genderUndefined::before': {
backgroundColor: "".concat((0, _personPanelConstants.RECORD_TYPE_COLOR)({
recordType: 'adult',
theme: theme
}), " !important")
}
}), _defineProperty(_root, '&$isChild::before', {
backgroundColor: "".concat((0, _personPanelConstants.RECORD_TYPE_COLOR)({
recordType: 'child',
theme: theme
}), " !important")
}), _defineProperty(_root, '&$isStudent::before', {
backgroundColor: "".concat((0, _personPanelConstants.RECORD_TYPE_COLOR)({
recordType: 'student',
theme: theme
}), " !important")
}), _defineProperty(_root, '&$isExpanded', (_$isExpanded = {
color: palette.text.contrastText,
borderRadius: "".concat(borderRadius, "px ").concat(borderRadius, "px 0 0"),
'&::before': {
borderRadius: "".concat(borderRadius, "px ").concat(borderRadius, "px 0 0"),
width: '100%'
}
}, _defineProperty(_$isExpanded, "& a.".concat(_constants.UI_CLASS_NAME, ", h5"), {
color: palette.text.contrastText
}), _defineProperty(_$isExpanded, '&$isAdult', {
'&$genderFemale::before': {
backgroundImage: "".concat((0, _personPanelConstants.RECORD_TYPE_COLOR)({
gender: 'f',
isGradient: true,
recordType: 'adult',
theme: theme
}), " !important")
},
'&$genderMale::before': {
backgroundImage: "".concat((0, _personPanelConstants.RECORD_TYPE_COLOR)({
gender: 'm',
isGradient: true,
recordType: 'adult',
theme: theme
}), " !important")
},
'&$genderUndefined::before': {
backgroundImage: "".concat((0, _personPanelConstants.RECORD_TYPE_COLOR)({
isGradient: true,
recordType: 'adult',
theme: theme
}), " !important")
}
}), _defineProperty(_$isExpanded, '&$isChild::before', {
backgroundImage: "".concat((0, _personPanelConstants.RECORD_TYPE_COLOR)({
isGradient: true,
recordType: 'child',
theme: theme
}), " !important")
}), _defineProperty(_$isExpanded, '&$isStudent::before', {
backgroundImage: "".concat((0, _personPanelConstants.RECORD_TYPE_COLOR)({
isGradient: true,
recordType: 'student',
theme: theme
}), " !important")
}), _$isExpanded)), _root),
avatar: {
boxShadow: "inset 0 0 0 1px ".concat(palette.border.primary, " !important")
},
avatarColumn: {
maxWidth: 55,
minWidth: 55,
padding: [[theme.spacing(1), 0, theme.spacing(1), theme.spacing(1)]],
width: 'auto !important'
},
contactInfoColumn: _defineProperty({
display: 'none',
padding: theme.spacing(1),
textAlign: 'right',
width: 'auto !important',
'&$hasContactInfo': {
marginLeft: 'auto'
}
}, theme.breakpoints.up(900), {
display: 'block'
}),
isExpanded: {},
hasContactInfo: {},
grid: {
position: 'relative',
zIndex: 2
},
gridRow: {
alignItems: 'center !important',
flexWrap: 'nowrap !important',
margin: '-11px 0 !important'
},
metaInfo: {},
nameColumn: {
marginRight: 'auto',
padding: theme.spacing(1),
width: 'auto !important'
},
noContactInfo: {},
personIdColumn: {
padding: theme.spacing(1),
textAlign: 'right',
width: 'auto !important',
'&$noContactInfo': {
marginLeft: 'auto'
}
},
personId: {
color: function color(props) {
return props.isExpanded ? palette.text.contrastText : palette.text.secondary;
},
transitionDelay: function transitionDelay(props) {
return props.isExpanded ? '100ms' : null;
}
},
genderFemale: {},
genderMale: {},
genderUndefined: {},
isAdult: {},
isChild: {},
isStudent: {}
};
});
function PersonPanelSummary(props) {
var _ClassNames;
var className = props.className,
data = props.data,
id = props.id,
isExpanded = props.isExpanded,
onClickProp = props.onClick,
tabIndex = props.tabIndex;
var classes = useStyles(props);
var _useState = (0, _react.useState)(''),
_useState2 = _slicedToArray(_useState, 2),
metaInfoText = _useState2[0],
setMetaInfoText = _useState2[1];
var _useState3 = (0, _react.useState)(null),
_useState4 = _slicedToArray(_useState3, 2),
renderContactInfo = _useState4[0],
setRenderContactInfo = _useState4[1];
var avatar = data.avatar,
birthdate = data.birthdate,
campus = data.campus,
emails = data.emails,
emergencyContactEmail = data.emergencyContactEmail,
emergencyContactPhone = data.emergencyContactPhone,
emergencyContactPreferredMethod = data.emergencyContactPreferredMethod,
emergencyContactRelationshipName = data.emergencyContactRelationshipName,
firstName = data.firstName,
gender = data.gender,
gradeLevel = data.gradeLevel,
isDoNotContact = data.isDoNotContact,
isDoNotEmail = data.isDoNotEmail,
isDoNotMail = data.isDoNotMail,
isDoNotPhone = data.isDoNotPhone,
isDoNotText = data.isDoNotText,
lastName = data.lastName,
maritalStatus = data.maritalStatus,
nickName = data.nickName,
personId = data.personId,
phones = data.phones,
prefix = data.prefix,
preferredMethod = data.preferredMethod,
recordType = data.recordType,
suffix = data.suffix;
var primaryPhone = (0, _lodash.find)(phones, 'isPrimary');
var primaryEmail = (0, _lodash.find)(emails, 'isPrimary');
var phone = primaryPhone && primaryPhone.value || 'N/A';
var email = primaryEmail && primaryEmail.value || 'N/A';
var isAdult = (0, _lodash.isNil)(recordType) || recordType === 'adult';
var isChild = recordType === 'child';
var isStudent = recordType === 'student';
(0, _react.useEffect)(function () {
var text = '';
if (gender) {
text += genderText({
gender: gender
});
}
if (isAdult && maritalStatus) {
text += " | ".concat(maritalStatus);
}
if ((isChild || isStudent) && birthdate) {
text += " | ".concat(ageText({
birthdate: birthdate
}), " ").concat(birthdateText({
birthdate: birthdate
}));
}
if ((isChild || isStudent) && gradeLevel) {
text += " | gr ".concat(gradeLevelText({
gradeLevel: gradeLevel
}));
}
if (campus) {
text += " | ".concat(campus);
}
text = (0, _lodash.trimStart)(text, '| ');
setMetaInfoText(text); // eslint-disable-next-line react-hooks/exhaustive-deps
}, [birthdate, campus, gender, gradeLevel, maritalStatus, recordType]);
(0, _react.useEffect)(function () {
setRenderContactInfo( /*#__PURE__*/_react["default"].createElement(_personContactInfo["default"], {
emergencyContactEmail: emergencyContactEmail,
emergencyContactPhone: emergencyContactPhone,
emergencyContactPreferredMethod: emergencyContactPreferredMethod,
emergencyContactRelationshipName: emergencyContactRelationshipName,
isDoNotContact: isDoNotContact,
isDoNotEmail: isDoNotEmail,
isDoNotMail: isDoNotMail,
isDoNotPhone: isDoNotPhone,
isDoNotText: isDoNotText,
isExpanded: isExpanded,
preferredMethod: preferredMethod,
email: email,
phone: phone,
recordType: recordType
}));
}, [email, emergencyContactEmail, emergencyContactPhone, emergencyContactPreferredMethod, emergencyContactRelationshipName, isDoNotContact, isDoNotEmail, isDoNotMail, isDoNotPhone, isDoNotText, isExpanded, phone, preferredMethod, recordType]);
var onClick = function onClick(event) {
onClickProp(event);
};
var onKeyDown = function onKeyDown(event) {
if (event.keyCode === _keyCode["default"].Enter) {
onClickProp(event);
}
};
var rootClasses = (0, _classnames["default"])(classes.root, _constants.UI_CLASS_NAME, ["".concat(BEM_CLASS_NAME)], className, (_ClassNames = {}, _defineProperty(_ClassNames, classes.isExpanded, isExpanded), _defineProperty(_ClassNames, classes.genderFemale, (0, _lodash.includes)(['f', 'F'], gender)), _defineProperty(_ClassNames, classes.genderMale, (0, _lodash.includes)(['m', 'M'], gender)), _defineProperty(_ClassNames, classes.genderUndefined, !(0, _lodash.includes)(['f', 'F', 'm', 'M'], gender)), _defineProperty(_ClassNames, classes.isAdult, isAdult), _defineProperty(_ClassNames, classes.isChild, isChild), _defineProperty(_ClassNames, classes.isStudent, isStudent), _ClassNames));
var metaInfoClasses = (0, _classnames["default"])(classes.metaInfo);
var contactInfoColumnClasses = (0, _classnames["default"])(classes.contactInfoColumn, _defineProperty({}, classes.hasContactInfo, !!renderContactInfo));
var personIdColumnClasses = (0, _classnames["default"])(classes.personIdColumn, _defineProperty({}, classes.noContactInfo, !renderContactInfo));
return /*#__PURE__*/_react["default"].createElement("div", {
className: rootClasses,
id: id,
onClick: onClick,
onKeyDown: onKeyDown,
tabIndex: tabIndex,
role: "button"
}, /*#__PURE__*/_react["default"].createElement(_index["default"], {
alignItems: "center",
className: classes.grid,
spacing: 0,
wrap: "nowrap"
}, /*#__PURE__*/_react["default"].createElement(_index["default"].Column, {
className: classes.avatarColumn
}, /*#__PURE__*/_react["default"].createElement(_index2["default"], {
className: classes.avatar,
name: firstName && lastName ? "".concat(firstName, " ").concat(lastName) : null,
size: 44,
src: avatar,
type: "person"
})), /*#__PURE__*/_react["default"].createElement(_index["default"].Column, {
className: classes.nameColumn
}, /*#__PURE__*/_react["default"].createElement(_typography["default"], {
variant: "h4"
}, "".concat(prefix || '', " ").concat(firstName, " ").concat(nickName && "(".concat(nickName, ")") || '', " ").concat(lastName, " ").concat(suffix || '')), /*#__PURE__*/_react["default"].createElement(_typography["default"], {
className: metaInfoClasses,
color: isExpanded ? 'inherit' : 'textSecondary',
variant: "caption"
}, metaInfoText)), renderContactInfo && /*#__PURE__*/_react["default"].createElement(_index["default"].Column, {
className: contactInfoColumnClasses,
textAlign: "right"
}, renderContactInfo), personId && /*#__PURE__*/_react["default"].createElement(_index["default"].Column, {
className: personIdColumnClasses,
textAlign: "right"
}, /*#__PURE__*/_react["default"].createElement(_typography["default"], {
className: classes.personId,
variant: "caption"
}, "Id: ".concat(personId)))));
}
PersonPanelSummary.propTypes = propTypes;
PersonPanelSummary.defaultProps = defaultProps;
var _default = PersonPanelSummary;
exports["default"] = _default;