starface-outlook-sync-addin/node_modules/@fluentui/react/lib/components/Persona/Persona.base.js

import { __assign } from "tslib";
import * as React from 'react';
import { classNamesFunction, divProperties, getNativeProps, getPropsWithDefaults } from '../../Utilities';
import { TooltipHost, TooltipOverflowMode } from '../../Tooltip';
import { PersonaCoin } from './PersonaCoin/PersonaCoin';
import { PersonaPresence as PersonaPresenceEnum, PersonaSize } from './Persona.types';
import { useWarnings, useMergedRefs } from '@fluentui/react-hooks';
import { DirectionalHint } from '../../common/DirectionalHint';
var getClassNames = classNamesFunction();
var DEFAULT_PROPS = {
    size: PersonaSize.size48,
    presence: PersonaPresenceEnum.none,
    imageAlt: '',
    showOverflowTooltip: true,
};
function useDebugWarnings(props) {
    if (process.env.NODE_ENV !== 'production') {
        // eslint-disable-next-line react-hooks/rules-of-hooks -- build-time conditional
        useWarnings({
            name: 'Persona',
            props: props,
            deprecations: { primaryText: 'text' },
        });
    }
}
/**
 * Persona with no default styles.
 * [Use the `styles` API to add your own styles.](https://github.com/microsoft/fluentui/wiki/Styling)
 */
export var PersonaBase = React.forwardRef(function (propsWithoutDefaults, forwardedRef) {
    var props = getPropsWithDefaults(DEFAULT_PROPS, propsWithoutDefaults);
    useDebugWarnings(props);
    var rootRef = React.useRef(null);
    var mergedRootRef = useMergedRefs(forwardedRef, rootRef);
    /**
     * Deprecation helper for getting text.
     */
    var getText = function () {
        // eslint-disable-next-line @typescript-eslint/no-deprecated
        return props.text || props.primaryText || '';
    };
    /**
     * Renders various types of Text (primaryText, secondaryText, etc)
     * based on the classNames passed
     * @param elementClassNames - element className
     * @param renderFunction - render function
     * @param defaultRenderFunction - default render function
     */
    var renderElement = function (elementClassNames, renderFunction, defaultRenderFunction) {
        var content = renderFunction && renderFunction(props, defaultRenderFunction);
        return content ? (React.createElement("div", { dir: "auto", className: elementClassNames }, content)) : undefined;
    };
    /**
     * using closure to wrap the default render behavior
     * to make it independent of the type of text passed
     * @param text - text to render
     */
    var onRenderText = function (text, tooltip) {
        if (tooltip === void 0) { tooltip = true; }
        // return default render behavior for valid text or undefined
        return text
            ? tooltip
                ? function () {
                    // default onRender behavior
                    return (React.createElement(TooltipHost, { content: text, overflowMode: TooltipOverflowMode.Parent, directionalHint: DirectionalHint.topLeftEdge }, text));
                }
                : function () { return React.createElement(React.Fragment, null, text); }
            : undefined;
    };
    var onInternalRenderPersonaCoin = function (providedCoinProps) {
        return React.createElement(PersonaCoin, __assign({}, providedCoinProps));
    };
    // wrapping default render behavior based on various props properties
    var onInternalRenderPrimaryText = onRenderText(getText(), props.showOverflowTooltip);
    var onInternalRenderSecondaryText = onRenderText(props.secondaryText, props.showOverflowTooltip);
    var onInternalRenderTertiaryText = onRenderText(props.tertiaryText, props.showOverflowTooltip);
    var onInternalRenderOptionalText = onRenderText(props.optionalText, props.showOverflowTooltip);
    var hidePersonaDetails = props.hidePersonaDetails, _a = props.onRenderOptionalText, onRenderOptionalText = _a === void 0 ? onInternalRenderOptionalText : _a, _b = props.onRenderPrimaryText, onRenderPrimaryText = _b === void 0 ? onInternalRenderPrimaryText : _b, _c = props.onRenderSecondaryText, onRenderSecondaryText = _c === void 0 ? onInternalRenderSecondaryText : _c, _d = props.onRenderTertiaryText, onRenderTertiaryText = _d === void 0 ? onInternalRenderTertiaryText : _d, _e = props.onRenderPersonaCoin, onRenderPersonaCoin = _e === void 0 ? onInternalRenderPersonaCoin : _e;
    var size = props.size;
    // These properties are to be explicitly passed into PersonaCoin because they are the only props directly used
    var allowPhoneInitials = props.allowPhoneInitials, className = props.className, coinProps = props.coinProps, showUnknownPersonaCoin = props.showUnknownPersonaCoin, coinSize = props.coinSize, styles = props.styles, imageAlt = props.imageAlt, imageInitials = props.imageInitials, imageShouldFadeIn = props.imageShouldFadeIn, imageShouldStartVisible = props.imageShouldStartVisible, imageUrl = props.imageUrl, initialsColor = props.initialsColor, initialsTextColor = props.initialsTextColor, isOutOfOffice = props.isOutOfOffice, onPhotoLoadingStateChange = props.onPhotoLoadingStateChange, 
    // eslint-disable-next-line @typescript-eslint/no-deprecated
    onRenderCoin = props.onRenderCoin, onRenderInitials = props.onRenderInitials, presence = props.presence, presenceTitle = props.presenceTitle, presenceColors = props.presenceColors, showInitialsUntilImageLoads = props.showInitialsUntilImageLoads, showSecondaryText = props.showSecondaryText, theme = props.theme;
    var personaCoinProps = __assign({ allowPhoneInitials: allowPhoneInitials, showUnknownPersonaCoin: showUnknownPersonaCoin, coinSize: coinSize, imageAlt: imageAlt, imageInitials: imageInitials, imageShouldFadeIn: imageShouldFadeIn, imageShouldStartVisible: imageShouldStartVisible, imageUrl: imageUrl, initialsColor: initialsColor, initialsTextColor: initialsTextColor, onPhotoLoadingStateChange: onPhotoLoadingStateChange, 
        // eslint-disable-next-line @typescript-eslint/no-deprecated
        onRenderCoin: onRenderCoin, onRenderInitials: onRenderInitials, presence: presence, presenceTitle: presenceTitle, showInitialsUntilImageLoads: showInitialsUntilImageLoads, size: size, text: getText(), isOutOfOffice: isOutOfOffice, presenceColors: presenceColors }, coinProps);
    var classNames = getClassNames(styles, {
        theme: theme,
        className: className,
        showSecondaryText: showSecondaryText,
        presence: presence,
        size: size,
    });
    var divProps = getNativeProps(props, divProperties);
    var personaDetails = (React.createElement("div", { className: classNames.details },
        renderElement(classNames.primaryText, onRenderPrimaryText, onInternalRenderPrimaryText),
        renderElement(classNames.secondaryText, onRenderSecondaryText, onInternalRenderSecondaryText),
        renderElement(classNames.tertiaryText, onRenderTertiaryText, onInternalRenderTertiaryText),
        renderElement(classNames.optionalText, onRenderOptionalText, onInternalRenderOptionalText),
        props.children));
    return (React.createElement("div", __assign({}, divProps, { ref: mergedRootRef, className: classNames.root, style: coinSize ? { height: coinSize, minWidth: coinSize } : undefined }),
        onRenderPersonaCoin(personaCoinProps, onRenderPersonaCoin),
        /* eslint-disable @typescript-eslint/no-deprecated */
        (!hidePersonaDetails ||
            size === PersonaSize.size8 ||
            size === PersonaSize.size10 ||
            size === PersonaSize.tiny) &&
            personaDetails
    /* eslint-enable @typescript-eslint/no-deprecated */
    ));
});
PersonaBase.displayName = 'PersonaBase';
//# sourceMappingURL=Persona.base.js.map