office-ui-fabric-react
Version:
Reusable React components for building experiences for Office 365.
62 lines • 4.16 kB
JavaScript
import * as tslib_1 from "tslib";
import * as React from 'react';
import { BaseComponent, autobind, css, divProperties, getNativeProps } from '../../Utilities';
import { TooltipHost, TooltipOverflowMode } from '../../Tooltip';
import { PersonaCoin } from './PersonaCoin';
import { PersonaPresence as PersonaPresenceEnum, PersonaSize } from './Persona.types';
import { PERSONA_PRESENCE, PERSONA_SIZE } from './PersonaConsts';
import * as stylesImport from './Persona.scss';
var styles = stylesImport;
var Persona = /** @class */ (function (_super) {
tslib_1.__extends(Persona, _super);
function Persona(props) {
return _super.call(this, props) || this;
}
Persona.prototype.render = function () {
var _a = this.props, hidePersonaDetails = _a.hidePersonaDetails, onRenderPrimaryText = _a.onRenderPrimaryText, onRenderSecondaryText = _a.onRenderSecondaryText, onRenderTertiaryText = _a.onRenderTertiaryText, onRenderOptionalText = _a.onRenderOptionalText;
var size = this.props.size;
// These properties are to be explicitly passed into PersonaCoin because they are the only props directly used
var _b = this.props, className = _b.className, coinProps = _b.coinProps, coinSize = _b.coinSize, imageUrl = _b.imageUrl, imageAlt = _b.imageAlt, imageInitials = _b.imageInitials, initialsColor = _b.initialsColor, presence = _b.presence, primaryText = _b.primaryText, imageShouldFadeIn = _b.imageShouldFadeIn, imageShouldStartVisible = _b.imageShouldStartVisible, showSecondaryText = _b.showSecondaryText, onPhotoLoadingStateChange = _b.onPhotoLoadingStateChange;
var personaCoinProps = {
coinProps: coinProps,
coinSize: coinSize,
imageUrl: imageUrl,
imageAlt: imageAlt,
imageInitials: imageInitials,
initialsColor: initialsColor,
presence: presence,
primaryText: primaryText,
imageShouldFadeIn: imageShouldFadeIn,
imageShouldStartVisible: imageShouldStartVisible,
size: size,
onPhotoLoadingStateChange: onPhotoLoadingStateChange
};
var divProps = getNativeProps(this.props, divProperties);
var personaDetails = (React.createElement("div", { className: css('ms-Persona-details', styles.details) },
this._renderElement(this.props.primaryText, css('ms-Persona-primaryText', styles.primaryText), onRenderPrimaryText),
this._renderElement(this.props.secondaryText, css('ms-Persona-secondaryText', styles.secondaryText), onRenderSecondaryText),
this._renderElement(this.props.tertiaryText, css('ms-Persona-tertiaryText', styles.tertiaryText), onRenderTertiaryText),
this._renderElement(this.props.optionalText, css('ms-Persona-optionalText', styles.optionalText), onRenderOptionalText),
this.props.children));
return (React.createElement("div", tslib_1.__assign({}, divProps, { className: css('ms-Persona', styles.root, className, PERSONA_SIZE[size], PERSONA_PRESENCE[presence], showSecondaryText && styles.showSecondaryText), style: coinSize ? { height: coinSize, minWidth: coinSize } : undefined }),
React.createElement(PersonaCoin, tslib_1.__assign({}, personaCoinProps)),
(!hidePersonaDetails || (size === PersonaSize.size10 || size === PersonaSize.tiny)) && personaDetails));
};
Persona.prototype._renderElement = function (text, className, render) {
return (React.createElement("div", { className: className }, render
? render(this.props)
: text && (React.createElement(TooltipHost, { content: text, overflowMode: TooltipOverflowMode.Parent, directionalHint: 0 /* topLeftEdge */ }, text))));
};
Persona.defaultProps = {
primaryText: '',
size: PersonaSize.size48,
presence: PersonaPresenceEnum.none,
imageAlt: ''
};
tslib_1.__decorate([
autobind
], Persona.prototype, "_renderElement", null);
return Persona;
}(BaseComponent));
export { Persona };
//# sourceMappingURL=Persona.js.map