react-cm-ui
Version:
React UI for Healthy Church
614 lines (583 loc) • 23 kB
JSX
import ClassNames from 'classnames';
import PropTypes from 'prop-types';
import React from 'react';
import {
RECORD_TYPE_COLOR,
RECORD_TYPE_DEFAULT_PROP,
RECORD_TYPE_PROP_TYPE,
} from '../personPanel/personPanelConstants';
import {
BEM_PERSON_CORE_MILESTONES,
} from '../../global/constants';
import {
ATTENDED_CLASS101_DATE_PROP_TYPE,
ATTENDED_CLASS201_DATE_PROP_TYPE,
ATTENDED_CLASS301_DATE_PROP_TYPE,
ATTENDED_CLASS401_DATE_PROP_TYPE,
DISABLE_POPOVER_DEFAULT_PROP,
DISABLE_POPOVER_PROP_TYPE,
HAS_SIGNED_MATURITY_COVENANT_PROP_TYPE,
HAS_SIGNED_MEMBERSHIP_AGREEMENT_PROP_TYPE,
HAS_SIGNED_MINISTRY_COVENANT_PROP_TYPE,
HAS_SIGNED_MISSION_COVENANT_PROP_TYPE,
HAS_TAKEN_CLASS101_PROP_TYPE,
HAS_TAKEN_CLASS201_PROP_TYPE,
HAS_TAKEN_CLASS301_PROP_TYPE,
HAS_TAKEN_CLASS401_PROP_TYPE,
ICON_COLOR_DEFAULT_PROP,
ICON_COLOR_PROP_TYPE,
ICON_SIZE_DEFAULT_PROP,
ICON_SIZE_PROP_TYPE,
INVERSE_DEFAULT_PROP,
INVERSE_PROP_TYPE,
REMOVE_CLASS_COLUMN_DEFAULT_PROP,
REMOVE_CLASS_COLUMN_PROP_TYPE,
SIGNED_MATURITY_COVENANT_DATE_PROP_TYPE,
SIGNED_MEMBERSHIP_AGREEMENT_DATE_PROP_TYPE,
SIGNED_MINISTRY_COVENANT_DATE_PROP_TYPE,
SIGNED_MISSION_COVENANT_DATE_PROP_TYPE,
} from './constants';
import { getIconSize } from './utils';
import Grid from '../../layout/grid';
import makeStyles from '../../styles/makeStyles';
import MilestonePopoverContent from './milestonePopoverContent';
import Popover from '../popover';
const propTypes = {
attendedClass101Date: ATTENDED_CLASS101_DATE_PROP_TYPE,
attendedClass201Date: ATTENDED_CLASS201_DATE_PROP_TYPE,
attendedClass301Date: ATTENDED_CLASS301_DATE_PROP_TYPE,
attendedClass401Date: ATTENDED_CLASS401_DATE_PROP_TYPE,
classes: PropTypes.shape({
root: PropTypes.string,
}),
disablePopover: DISABLE_POPOVER_PROP_TYPE,
hasSignedMaturityCovenant: HAS_SIGNED_MATURITY_COVENANT_PROP_TYPE,
hasSignedMembershipAgreement: HAS_SIGNED_MEMBERSHIP_AGREEMENT_PROP_TYPE,
hasSignedMinistryCovenant: HAS_SIGNED_MINISTRY_COVENANT_PROP_TYPE,
hasSignedMissionCovenant: HAS_SIGNED_MISSION_COVENANT_PROP_TYPE,
hasTakenClass101: HAS_TAKEN_CLASS101_PROP_TYPE,
hasTakenClass201: HAS_TAKEN_CLASS201_PROP_TYPE,
hasTakenClass301: HAS_TAKEN_CLASS301_PROP_TYPE,
hasTakenClass401: HAS_TAKEN_CLASS401_PROP_TYPE,
iconColor: ICON_COLOR_PROP_TYPE,
/* eslint-disable react/no-unused-prop-types */
iconSize: ICON_SIZE_PROP_TYPE,
inverse: INVERSE_PROP_TYPE,
/* eslint-enable react/no-unused-prop-types */
isAdult: PropTypes.bool.isRequired,
isFemale: PropTypes.bool,
isMale: PropTypes.bool,
recordType: RECORD_TYPE_PROP_TYPE,
removeClassColumn: REMOVE_CLASS_COLUMN_PROP_TYPE,
signedMaturityCovenantDate: SIGNED_MATURITY_COVENANT_DATE_PROP_TYPE,
signedMinistryCovenantDate: SIGNED_MINISTRY_COVENANT_DATE_PROP_TYPE,
signedMissionCovenantDate: SIGNED_MISSION_COVENANT_DATE_PROP_TYPE,
};
const defaultProps = {
attendedClass101Date: null,
attendedClass201Date: null,
attendedClass301Date: null,
attendedClass401Date: null,
classes: null,
disablePopover: DISABLE_POPOVER_DEFAULT_PROP,
hasSignedMaturityCovenant: null,
hasSignedMembershipAgreement: null,
hasSignedMinistryCovenant: null,
hasSignedMissionCovenant: null,
hasTakenClass101: null,
hasTakenClass201: null,
hasTakenClass301: null,
hasTakenClass401: null,
iconColor: ICON_COLOR_DEFAULT_PROP,
iconSize: ICON_SIZE_DEFAULT_PROP,
inverse: INVERSE_DEFAULT_PROP,
isFemale: null,
isMale: null,
recordType: RECORD_TYPE_DEFAULT_PROP,
removeClassColumn: REMOVE_CLASS_COLUMN_DEFAULT_PROP,
signedMaturityCovenantDate: null,
signedMinistryCovenantDate: null,
signedMissionCovenantDate: null,
};
const useStyles = makeStyles((theme) => {
const {
palette,
shape: {
borderRadius,
},
} = theme;
const hasTakenStyles = (boxShadowColor) => ({
backgroundColor: 'transparent',
boxShadow: `inset 0 0 0 2px ${boxShadowColor}`,
});
const hasSignedStyles = (backgroundColor) => ({
backgroundColor,
boxShadow: 'none',
});
/**
* This is the base icon size for the
* C.L.A.S.S. icon (which isn't an SVG), so that the
* size can be scaled proportionally based on the given `size` from props.
*/
const basesClassIconSize = 24;
return {
root: {},
iconBase: {
height: '10.42px',
position: 'absolute',
width: '11.07px',
backgroundColor: ({ iconColor }) => `${iconColor || palette.static.main}`,
opacity: ({ iconColor }) => iconColor && 0.25,
},
iconBaseClass101: {
borderRadius: `0 ${borderRadius}px 0 0`,
right: 0,
},
iconBaseColorClass101: {
'&$hasSignedMembershipAgreement': {
'&$isAdult': {
'&$genderFemale': {
...hasSignedStyles(`${RECORD_TYPE_COLOR({ gender: 'f', recordType: 'adult', theme })}`),
},
'&$genderMale': {
...hasSignedStyles(`${RECORD_TYPE_COLOR({ gender: 'm', recordType: 'adult', theme })}`),
},
'&$genderUndefined': {
...hasSignedStyles(`${RECORD_TYPE_COLOR({ recordType: 'adult', theme })}`),
},
},
'&$isChild': {
...hasSignedStyles(`${RECORD_TYPE_COLOR({ recordType: 'child', theme })}`),
},
'&$isStudent': {
...hasSignedStyles(`${RECORD_TYPE_COLOR({ recordType: 'student', theme })}`),
},
},
'&$hasTakenClass101': {
'&$isAdult': {
'&$genderFemale': {
...hasTakenStyles(`${RECORD_TYPE_COLOR({ gender: 'f', recordType: 'adult', theme })}`),
},
'&$genderMale': {
...hasTakenStyles(`${RECORD_TYPE_COLOR({ gender: 'm', recordType: 'adult', theme })}`),
},
'&$genderUndefined': {
...hasTakenStyles(`${RECORD_TYPE_COLOR({ recordType: 'adult', theme })}`),
},
},
'&$isChild': {
...hasTakenStyles(`${RECORD_TYPE_COLOR({ recordType: 'child', theme })}`),
},
'&$isStudent': {
...hasTakenStyles(`${RECORD_TYPE_COLOR({ recordType: 'student', theme })}`),
},
},
},
iconBaseClass201: {
borderRadius: `${borderRadius}px 0 0`,
top: 0,
},
iconBaseColorClass201: {
'&$hasSignedMaturityCovenant': {
'&$isAdult': {
'&$genderFemale': {
...hasSignedStyles(`${RECORD_TYPE_COLOR({ gender: 'f', recordType: 'adult', theme })}`),
},
'&$genderMale': {
...hasSignedStyles(`${RECORD_TYPE_COLOR({ gender: 'm', recordType: 'adult', theme })}`),
},
'&$genderUndefined': {
...hasSignedStyles(`${RECORD_TYPE_COLOR({ recordType: 'adult', theme })}`),
},
},
'&$isChild': {
...hasSignedStyles(`${RECORD_TYPE_COLOR({ recordType: 'child', theme })}`),
},
'&$isStudent': {
...hasSignedStyles(`${RECORD_TYPE_COLOR({ recordType: 'student', theme })}`),
},
},
'&$hasTakenClass201': {
'&$isAdult': {
'&$genderFemale': {
...hasTakenStyles(`${RECORD_TYPE_COLOR({ gender: 'f', recordType: 'adult', theme })}`),
},
'&$genderMale': {
...hasTakenStyles(`${RECORD_TYPE_COLOR({ gender: 'm', recordType: 'adult', theme })}`),
},
'&$genderUndefined': {
...hasTakenStyles(`${RECORD_TYPE_COLOR({ recordType: 'adult', theme })}`),
},
},
'&$isChild': {
...hasTakenStyles(`${RECORD_TYPE_COLOR({ recordType: 'child', theme })}`),
},
'&$isStudent': {
...hasTakenStyles(`${RECORD_TYPE_COLOR({ recordType: 'student', theme })}`),
},
},
},
iconBaseClass301: {
borderRadius: `0 0 0 ${borderRadius}px`,
bottom: 0,
},
iconBaseColorClass301: {
'&$hasSignedMinistryCovenant': {
'&$isAdult': {
'&$genderFemale': {
...hasSignedStyles(`${RECORD_TYPE_COLOR({ gender: 'f', recordType: 'adult', theme })}`),
},
'&$genderMale': {
...hasSignedStyles(`${RECORD_TYPE_COLOR({ gender: 'm', recordType: 'adult', theme })}`),
},
'&$genderUndefined': {
...hasSignedStyles(`${RECORD_TYPE_COLOR({ recordType: 'adult', theme })}`),
},
},
'&$isChild': {
...hasSignedStyles(`${RECORD_TYPE_COLOR({ recordType: 'child', theme })}`),
},
'&$isStudent': {
...hasSignedStyles(`${RECORD_TYPE_COLOR({ recordType: 'student', theme })}`),
},
},
'&$hasTakenClass301': {
'&$isAdult': {
'&$genderFemale': {
...hasTakenStyles(`${RECORD_TYPE_COLOR({ gender: 'f', recordType: 'adult', theme })}`),
},
'&$genderMale': {
...hasTakenStyles(`${RECORD_TYPE_COLOR({ gender: 'm', recordType: 'adult', theme })}`),
},
'&$genderUndefined': {
...hasTakenStyles(`${RECORD_TYPE_COLOR({ recordType: 'adult', theme })}`),
},
},
'&$isChild': {
...hasTakenStyles(`${RECORD_TYPE_COLOR({ recordType: 'child', theme })}`),
},
'&$isStudent': {
...hasTakenStyles(`${RECORD_TYPE_COLOR({ recordType: 'student', theme })}`),
},
},
},
iconBaseClass401: {
borderRadius: `0 0 ${borderRadius}px`,
bottom: 0,
right: 0,
},
iconBaseColorClass401: {
'&$hasSignedMissionCovenant': {
'&$isAdult': {
'&$genderFemale': {
...hasSignedStyles(`${RECORD_TYPE_COLOR({ gender: 'f', recordType: 'adult', theme })}`),
},
'&$genderMale': {
...hasSignedStyles(`${RECORD_TYPE_COLOR({ gender: 'm', recordType: 'adult', theme })}`),
},
'&$genderUndefined': {
...hasSignedStyles(`${RECORD_TYPE_COLOR({ recordType: 'adult', theme })}`),
},
},
'&$isChild': {
...hasSignedStyles(`${RECORD_TYPE_COLOR({ recordType: 'child', theme })}`),
},
'&$isStudent': {
...hasSignedStyles(`${RECORD_TYPE_COLOR({ recordType: 'student', theme })}`),
},
},
'&$hasTakenClass401': {
'&$isAdult': {
'&$genderFemale': {
...hasTakenStyles(`${RECORD_TYPE_COLOR({ gender: 'f', recordType: 'adult', theme })}`),
},
'&$genderMale': {
...hasTakenStyles(`${RECORD_TYPE_COLOR({ gender: 'm', recordType: 'adult', theme })}`),
},
'&$genderUndefined': {
...hasTakenStyles(`${RECORD_TYPE_COLOR({ recordType: 'adult', theme })}`),
},
},
'&$isChild': {
...hasTakenStyles(`${RECORD_TYPE_COLOR({ recordType: 'child', theme })}`),
},
'&$isStudent': {
...hasTakenStyles(`${RECORD_TYPE_COLOR({ recordType: 'student', theme })}`),
},
},
},
iconClassContainer: {
height: basesClassIconSize,
position: 'relative',
transform: (props) => {
const iconSize = getIconSize({
isMobile: props.isMobile,
iconSize: props.iconSize,
});
return `scale(${(props.isMobile || iconSize === 16) ? 16 / basesClassIconSize : 1})`;
},
transformOrigin: `0 ${borderRadius}px`,
width: basesClassIconSize,
},
iconClassInnerContainer: {
height: basesClassIconSize,
transform: 'rotate(45deg) scale(0.707106)',
width: basesClassIconSize,
},
hasTakenClass101: ({ iconColor }) => ({
backgroundColor: 'transparent !important',
boxShadow: `inset 0 0 0 2px ${iconColor} !important`,
opacity: '1 !important',
}),
hasSignedMembershipAgreement: {
opacity: '1 !important',
},
hasTakenClass201: ({ iconColor }) => ({
backgroundColor: 'transparent !important',
boxShadow: `inset 0 0 0 2px ${iconColor} !important`,
opacity: '1 !important',
}),
hasSignedMaturityCovenant: {
opacity: '1 !important',
},
hasTakenClass301: ({ iconColor }) => ({
backgroundColor: 'transparent !important',
boxShadow: `inset 0 0 0 2px ${iconColor} !important`,
opacity: '1 !important',
}),
hasSignedMinistryCovenant: {
opacity: '1 !important',
},
hasTakenClass401: ({ iconColor }) => ({
backgroundColor: 'transparent !important',
boxShadow: `inset 0 0 0 2px ${iconColor} !important`,
opacity: '1 !important',
}),
hasSignedMissionCovenant: {
opacity: '1 !important',
},
genderFemale: {},
genderMale: {},
genderUndefined: {},
isBaptised: {},
isAdult: {},
isChild: {},
isStudent: {},
};
});
function GridColumnClassBaseballDiamond(props) {
const {
attendedClass101Date,
attendedClass201Date,
attendedClass301Date,
attendedClass401Date,
congregationDate,
disablePopover,
hasSignedMaturityCovenant,
hasSignedMembershipAgreement,
hasSignedMinistryCovenant,
hasSignedMissionCovenant,
hasTakenClass101,
hasTakenClass201,
hasTakenClass301,
hasTakenClass401,
iconColor,
isAdult,
isFemale,
isMale,
recordType,
removeClassColumn,
signedMaturityCovenantDate,
signedMinistryCovenantDate,
signedMissionCovenantDate,
} = props;
const classes = useStyles(props);
if (removeClassColumn) {
return null;
}
const iconBaseClass101Classes = ClassNames(
classes.iconBaseClass101,
classes.iconBase,
{
[classes.iconBaseColorClass101]: !iconColor,
[classes.genderFemale]: isFemale,
[classes.genderMale]: isMale,
[classes.genderUndefined]: !isFemale && !isMale,
[classes.hasSignedMembershipAgreement]: hasSignedMembershipAgreement,
[classes.hasTakenClass101]: hasTakenClass101 && !hasSignedMembershipAgreement,
[classes.isAdult]: recordType === 'adult',
[classes.isChild]: recordType === 'child',
[classes.isStudent]: recordType === 'student',
},
);
const iconBaseClass201Classes = ClassNames(
classes.iconBaseClass201,
classes.iconBase,
{
[classes.iconBaseColorClass201]: !iconColor,
[classes.genderFemale]: isFemale,
[classes.genderMale]: isMale,
[classes.genderUndefined]: !isFemale && !isMale,
[classes.hasSignedMaturityCovenant]: hasSignedMaturityCovenant,
[classes.hasTakenClass201]: hasTakenClass201 && !hasSignedMaturityCovenant,
[classes.isAdult]: recordType === 'adult',
[classes.isChild]: recordType === 'child',
[classes.isStudent]: recordType === 'student',
},
);
const iconBaseClass301Classes = ClassNames(
classes.iconBaseClass301,
classes.iconBase,
{
[classes.iconBaseColorClass301]: !iconColor,
[classes.genderFemale]: isFemale,
[classes.genderMale]: isMale,
[classes.genderUndefined]: !isFemale && !isMale,
[classes.hasSignedMinistryCovenant]: hasSignedMinistryCovenant,
[classes.hasTakenClass301]: hasTakenClass301 && !hasSignedMinistryCovenant,
[classes.isAdult]: recordType === 'adult',
[classes.isChild]: recordType === 'child',
[classes.isStudent]: recordType === 'student',
},
);
const iconBaseClass401Classes = ClassNames(
classes.iconBaseClass401,
classes.iconBase,
{
[classes.iconBaseColorClass401]: !iconColor,
[classes.genderFemale]: isFemale,
[classes.genderMale]: isMale,
[classes.genderUndefined]: !isFemale && !isMale,
[classes.hasSignedMissionCovenant]: hasSignedMissionCovenant,
[classes.hasTakenClass401]: hasTakenClass401 && !hasSignedMissionCovenant,
[classes.isAdult]: recordType === 'adult',
[classes.isChild]: recordType === 'child',
[classes.isStudent]: recordType === 'student',
},
);
const milestonesClassesDates = [
...(attendedClass101Date ? [{ label: '101', date: attendedClass101Date }] : []),
...(congregationDate ? [{ label: 'Became Member', date: congregationDate }] : []),
...(attendedClass201Date ? [{ label: '201', date: attendedClass201Date }] : []),
...(signedMaturityCovenantDate ? [{ label: 'Maturity Covenant Card', date: signedMaturityCovenantDate }] : []),
...(attendedClass301Date ? [{ label: '301', date: attendedClass301Date }] : []),
...(signedMinistryCovenantDate ? [{ label: 'Ministry Covenant', date: signedMinistryCovenantDate }] : []),
...(attendedClass401Date ? [{ label: '401', date: attendedClass401Date }] : []),
...(signedMissionCovenantDate ? [{ label: 'Mission Commitment', date: signedMissionCovenantDate }] : []),
];
let class101Title;
let class201Title;
let class301Title;
let class401Title;
if (!hasTakenClass101) {
class101Title = 'Has not taken CLASS 101';
}
if (!hasSignedMembershipAgreement) {
if (class101Title) {
class101Title += ' and has not Signed Membership Covenant';
} else {
class101Title = 'Has not Signed Membership Covenant';
}
}
if (!hasTakenClass201) {
class201Title = 'Has not taken CLASS 201';
}
if (!hasSignedMaturityCovenant) {
if (class201Title) {
class201Title += ' and has not Signed Maturity Covenant';
} else {
class201Title = 'Has not Signed Maturity Covenant';
}
}
if (!hasTakenClass301) {
class301Title = 'Has not taken CLASS 301';
}
if (!hasSignedMinistryCovenant) {
if (class301Title) {
class301Title += ' and has not Signed Ministry Covenant';
} else {
class301Title = 'Has not Signed Ministry Covenant';
}
}
if (!hasTakenClass401) {
class401Title = 'Has not taken CLASS 401';
}
if (!hasSignedMissionCovenant) {
if (class401Title) {
class401Title += ' and has not Signed Mission Covenant';
} else {
class401Title = 'Has not Signed Mission Covenant';
}
}
const baseClassIcon = (
<div
className={classes.iconClassContainer}
role="presentation"
style={{
outline: 'none',
cursor: 'pointer',
}}
// eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
tabIndex={0}
>
<div
className={classes.iconClassInnerContainer}
>
<div
className={ClassNames(
`${BEM_PERSON_CORE_MILESTONES}--icon_base_class_101`,
iconBaseClass101Classes,
)}
title={class101Title}
/>
<div
className={ClassNames(
`${BEM_PERSON_CORE_MILESTONES}--icon_base_class_201`,
iconBaseClass201Classes,
)}
title={class201Title}
/>
<div
className={ClassNames(
`${BEM_PERSON_CORE_MILESTONES}--icon_base_class_301`,
iconBaseClass301Classes,
)}
title={class301Title}
/>
<div
className={ClassNames(
`${BEM_PERSON_CORE_MILESTONES}--icon_base_class_401`,
iconBaseClass401Classes,
)}
title={class401Title}
/>
</div>
</div>
);
const popoverNode = !disablePopover && isAdult && milestonesClassesDates.length > 0 ? (
<Popover
content={(
<MilestonePopoverContent
title="C.L.A.S.S."
milestonesDates={milestonesClassesDates}
/>
)}
mouseEvent="onMouseEnter"
>
{baseClassIcon}
</Popover>
) : null;
return (
<Grid.Column
className={ClassNames(
`${BEM_PERSON_CORE_MILESTONES}--class_column`,
classes.root,
)}
>
{popoverNode || baseClassIcon}
</Grid.Column>
);
}
GridColumnClassBaseballDiamond.propTypes = propTypes;
GridColumnClassBaseballDiamond.defaultProps = defaultProps;
export default GridColumnClassBaseballDiamond;