@mikezimm/fps-library-v2/lib/components/atoms/PersonaCard/PersonaRow.js

Library of reusable typescript/javascript functions, interfaces and constants

import * as React from 'react';
import { Log, Environment, EnvironmentType, } from '@microsoft/sp-core-library';
import { SPComponentLoader } from '@microsoft/sp-loader';
import { DocumentCard, DocumentCardType, } from '@fluentui/react/lib/DocumentCard';
import { getAdminIcon, getGuestIcon, getPrincipalTypeIcon } from './PersonaIcons';
require('@mikezimm/fps-styles/dist/PersonaRow.css');
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 PersonaRow extends React.Component {
    constructor(props) {
        super(props);
        this.state = { livePersonaCard: undefined, pictureUrl: undefined };
    }
    /**
     *
     *
     * @memberof PersonaRow
     */
    async componentDidMount() {
        if (Environment.type !== EnvironmentType.Local) {
            const sharedLibrary = await this._loadSPComponentById(LIVE_PERSONA_COMPONENT_ID);
            // eslint-disable-next-line @typescript-eslint/no-explicit-any
            const livePersonaCard = sharedLibrary.LivePersonaCard;
            this.setState({ livePersonaCard: livePersonaCard });
        }
    }
    /**
     *
     *
     * @param {IPersonaCardProps} prevProps
     * @param {IPersonaCardState} prevState
     * @memberof PersonaRow
     */
    componentDidUpdate(prevProps, prevState) {
        //
    }
    /**
     *
     *
     * @private
     * @returns
     * @memberof PersonaRow
     */
    // 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._PersonaRow());
    }
    /**
     *
     *
     * @private
     * @returns {JSX.Element}
     * @memberof PersonaCard
     */
    _PersonaRow() {
        const { iconSize, iconTextSize, profileProperties } = this.props;
        const { isSiteAdmin, isGuest, } = profileProperties;
        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 personaContent = React.createElement("div", { className: 'inlineFlexSpaceBetween' },
            profileProperties.DisplayName,
            "  ",
            AdminIcon,
            " ",
            GuestIcon,
            " ",
            TypeIcon);
        const personaClass = ['persona'].join(' ');
        return (React.createElement(DocumentCard, { className: 'docCardRow', type: DocumentCardType.normal, style: {} },
            React.createElement("div", { className: personaClass, style: {} }, 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 personaContainer = 'personaContainerSmall';
        return (
        //2020-11-24:  Added for adjusting card size
        React.createElement("div", { className: personaContainer, style: {} }, this.state.livePersonaCard
            ? this._LivePersonaCard()
            : this._PersonaRow()));
    }
}
//# sourceMappingURL=PersonaRow.js.map