@mikezimm/fps-library-v2
Version:
Library of reusable typescript/javascript functions, interfaces and constants
229 lines • 9.85 kB
JavaScript
import * as React from 'react';
import { Log, Environment, EnvironmentType, } from '@microsoft/sp-core-library';
import { SPComponentLoader } from '@microsoft/sp-loader';
import { Persona, PersonaSize } from '@fluentui/react/lib/Persona';
import { DocumentCard, DocumentCardType } from '@fluentui/react/lib/DocumentCard';
import { Icon } from '@fluentui/react/lib/Icon';
require('@mikezimm/fps-styles/dist/PersonaCard.css');
import { getAdminIcon, getGuestIcon, getPrincipalTypeIcon } from './PersonaIcons';
const EXP_SOURCE = 'SPFxDirectory';
const LIVE_PERSONA_COMPONENT_ID = '914330ee-2df2-4f6e-a858-30c23a812408';
/**
* 2023-03-28
* VERIFY STYLES BEFORE USING IN PRODUCTION
* Migrated scss back to css from Complaince/PivotTiles
*/
export class PersonaCard extends React.Component {
constructor(props) {
super(props);
this.state = { livePersonaCard: undefined, pictureUrl: undefined };
}
/**
*
*
* @memberof PersonaCard
*/
async componentDidMount() {
if (Environment.type !== EnvironmentType.Local) {
const sharedLibrary = await this._loadSPComponentById(LIVE_PERSONA_COMPONENT_ID);
const livePersonaCard = sharedLibrary.LivePersonaCard;
this.setState({ livePersonaCard: livePersonaCard });
}
}
/**
*
*
* @param {IPersonaCardProps} prevProps
* @param {IPersonaCardState} prevState
* @memberof PersonaCard
*/
componentDidUpdate(prevProps, prevState) {
}
/**
*
*
* @private
* @returns
* @memberof PersonaCard
*/
// eslint-disable-next-line @typescript-eslint/explicit-function-return-type
_LivePersonaCard() {
return React.createElement(this.state.livePersonaCard, {
serviceScope: this.props.context.serviceScope,
upn: this.props.profileProperties.Email,
onCardOpen: () => {
console.log('LivePersonaCard Open');
},
onCardClose: () => {
console.log('LivePersonaCard Close');
},
}, this._PersonaCard());
}
//2020-11-24: Added for adjusting card size
getCardHeight() {
const size = this.props.size;
if (size === PersonaSize.size72) {
return '120px';
}
else if (size === PersonaSize.size48) {
return '80px';
}
else if (size === PersonaSize.size32) {
return '60px';
}
else if (size === PersonaSize.size24 || size === PersonaSize.size28) {
return '45px';
}
else if (size === PersonaSize.size16) {
return '30px';
}
else if (size === PersonaSize.size10) {
return '20px';
}
}
//2021-04-13: Added for adjusting card size
getCardPadding() {
const size = this.props.size;
if (size === PersonaSize.size72) {
return '15px';
}
else if (size === PersonaSize.size48) {
return '11px';
}
else if (size === PersonaSize.size32) {
return '8px';
}
else if (size === PersonaSize.size24 || size === PersonaSize.size28) {
return '7px';
}
else if (size === PersonaSize.size16) {
return '0px';
}
else if (size === PersonaSize.size10) {
return '0px';
}
}
//2020-11-24: Added for adjusting card size
getCardWidth() {
const size = this.props.size;
let width = this.props.profileProperties.isSiteAdmin === true || this.props.profileProperties.isGuest === true ? 60 : 0;
if (size === PersonaSize.size72) {
width += 250;
}
else if (size === PersonaSize.size48) {
width += 210;
}
else if (size === PersonaSize.size32) {
width += 170;
}
else if (size === PersonaSize.size24 || size === PersonaSize.size28) {
width += 140;
}
else if (size === PersonaSize.size16) {
width += 120;
}
else if (size === PersonaSize.size10) {
width += 100;
}
return width + 'px';
}
/**
*
*
* @private
* @returns {JSX.Element}
* @memberof PersonaCard
*/
_PersonaCard() {
const { iconSize, iconTextSize, profileProperties } = this.props;
const { isSiteAdmin, isGuest, PrincipalType, DisplayName, Title, Department, PictureUrl } = profileProperties;
const sizeBracket = this.props.size === PersonaSize.size16 || this.props.size === PersonaSize.size10 ? 'small' : 'large';
let docCardClass = `documentCardDefault${this.props.borderColorMsColorThemeDarkClass ? ` ${this.props.borderColorMsColorThemeDarkClass}` : ''}`;
if (isSiteAdmin === true) {
docCardClass = 'documentCardAdmin';
}
else if (isGuest === true) {
docCardClass = 'documentCardGuest';
}
const docCardClassFinal = [docCardClass, sizeBracket === 'large' ? 'documentCardBorder' : 'documentCardNoBorder',].join(' ');
const iconLeftPad = sizeBracket === 'large' ? '0px' : '20px';
const AdminIcon = isSiteAdmin !== true ? false : getAdminIcon(iconSize, '', iconTextSize);
const GuestIcon = isGuest !== true ? false : getGuestIcon(iconSize, '', iconTextSize);
const TypeIcon = !profileProperties.PrincipalType ? undefined : getPrincipalTypeIcon(profileProperties, iconSize, '', iconTextSize);
const cardHeight = this.getCardHeight();
let personaStyles = 'inlineFlex';
if (cardHeight !== '120px' && (AdminIcon !== false || GuestIcon !== false || TypeIcon)) {
personaStyles = 'inlineFlexWBPadding';
}
const personaClass = ['persona', sizeBracket === 'small' ? 'flexDirRow' : null].join(' ');
let personaContent = null;
if (sizeBracket === 'small') {
personaContent = React.createElement("div", { className: 'inlineFlexSpaceBetween' },
DisplayName,
" ",
AdminIcon,
" ",
GuestIcon,
" ");
}
else {
personaContent = React.createElement(Persona, { text: DisplayName, secondaryText: Title, tertiaryText: Department, imageUrl: PictureUrl, size: this.props.size, imageShouldFadeIn: true, imageShouldStartVisible: true },
" ",
React.createElement("div", { className: personaStyles },
" ",
AdminIcon,
" ",
GuestIcon,
" ",
TypeIcon),
this.props.profileProperties.WorkPhone ? (React.createElement("div", null,
React.createElement(Icon, { iconName: "Phone", style: { fontSize: '12px' } }),
React.createElement("span", { style: { marginLeft: 5, fontSize: '12px' } },
' ',
this.props.profileProperties.WorkPhone))) : (''),
this.props.profileProperties.Location ? (React.createElement("div", { className: 'textOverflow' },
React.createElement(Icon, { iconName: "Poi", style: { fontSize: '12px' } }),
React.createElement("span", { style: { marginLeft: 5, fontSize: '12px' } },
' ',
this.props.profileProperties.Location))) : (''));
}
return (React.createElement(DocumentCard, { className: docCardClassFinal, type: DocumentCardType.normal,
//2020-11-24: Added for adjusting card size
style: { height: this.getCardHeight(), minWidth: this.getCardWidth(), maxWidth: this.getCardWidth() + 200 } },
React.createElement("div", { className: personaClass, style: { paddingTop: this.getCardPadding(), paddingBottom: this.getCardPadding(), minWidth: this.getCardWidth(), maxWidth: this.getCardWidth() + 200 } }, personaContent)));
}
/**
* Load SPFx component by id, SPComponentLoader is used to load the SPFx components
* @param componentId - componentId, guid of the component library
*/
// eslint-disable-next-line @typescript-eslint/no-explicit-any
async _loadSPComponentById(componentId) {
try {
// eslint-disable-next-line @typescript-eslint/no-explicit-any
const component = await SPComponentLoader.loadComponentById(componentId);
return component;
}
catch (error) {
// eslint-disable-next-line no-void
void Promise.reject(error);
// 2023-03-28: To migrate casting serviceScope as any to pass linting
Log.error(EXP_SOURCE, error, this.props.context.serviceScope);
}
}
/**
*
*
* @returns {React.ReactElement<IPersonaCardProps>}
* @memberof PersonaCard
*/
render() {
const sizeBracket = this.props.size === PersonaSize.size16 || this.props.size === PersonaSize.size10 ? 'small' : 'large';
const personaContainer = sizeBracket === 'large' ? 'personaContainerNormal' : 'personaContainerSmall';
return (
//2020-11-24: Added for adjusting card size
React.createElement("div", { className: personaContainer, style: { minWidth: this.getCardWidth(), maxWidth: this.getCardWidth() + 200 } }, this.state.livePersonaCard
? this._LivePersonaCard()
: this._PersonaCard()));
}
}
//# sourceMappingURL=PersonaCard.js.map