@fluentui/react
Version:
Reusable React components for building web experiences.
111 lines • 7.47 kB
JavaScript
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 deprecation/deprecation
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 deprecation/deprecation
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, 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 deprecation/deprecation */
(!hidePersonaDetails ||
size === PersonaSize.size8 ||
size === PersonaSize.size10 ||
size === PersonaSize.tiny) &&
personaDetails
/* eslint-enable deprecation/deprecation */
));
});
PersonaBase.displayName = 'PersonaBase';
//# sourceMappingURL=Persona.base.js.map