office-ui-fabric-react
Version:
Reusable React components for building experiences for Office 365.
138 lines • 8.01 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var React = require("react");
var Utilities_1 = require("../../Utilities");
var Icon_1 = require("../../Icon");
var Image_1 = require("../../Image");
var Persona_Props_1 = require("./Persona.Props");
var PersonaConsts_1 = require("./PersonaConsts");
var stylesImport = require("./Persona.scss");
var styles = stylesImport;
var SIZE_TO_PIXELS = (_a = {},
_a[Persona_Props_1.PersonaSize.extraExtraSmall] = 24,
_a[Persona_Props_1.PersonaSize.size28] = 28,
_a[Persona_Props_1.PersonaSize.tiny] = 30,
_a[Persona_Props_1.PersonaSize.extraSmall] = 32,
_a[Persona_Props_1.PersonaSize.small] = 40,
_a[Persona_Props_1.PersonaSize.regular] = 48,
_a[Persona_Props_1.PersonaSize.large] = 72,
_a[Persona_Props_1.PersonaSize.extraLarge] = 100,
_a);
// The RGB color swatches
var COLOR_SWATCHES_LOOKUP = [
Persona_Props_1.PersonaInitialsColor.lightGreen,
Persona_Props_1.PersonaInitialsColor.lightBlue,
Persona_Props_1.PersonaInitialsColor.lightPink,
Persona_Props_1.PersonaInitialsColor.green,
Persona_Props_1.PersonaInitialsColor.darkGreen,
Persona_Props_1.PersonaInitialsColor.pink,
Persona_Props_1.PersonaInitialsColor.magenta,
Persona_Props_1.PersonaInitialsColor.purple,
Persona_Props_1.PersonaInitialsColor.black,
Persona_Props_1.PersonaInitialsColor.teal,
Persona_Props_1.PersonaInitialsColor.blue,
Persona_Props_1.PersonaInitialsColor.darkBlue,
Persona_Props_1.PersonaInitialsColor.orange,
Persona_Props_1.PersonaInitialsColor.darkRed,
Persona_Props_1.PersonaInitialsColor.red
];
var COLOR_SWATCHES_NUM_ENTRIES = COLOR_SWATCHES_LOOKUP.length;
var Persona = (function (_super) {
tslib_1.__extends(Persona, _super);
function Persona(props) {
var _this = _super.call(this, props) || this;
_this.state = {
isImageLoaded: false,
};
return _this;
}
Persona.prototype.render = function () {
var _a = this.props, className = _a.className, imageUrl = _a.imageUrl, imageAlt = _a.imageAlt, initialsColor = _a.initialsColor, presence = _a.presence, primaryText = _a.primaryText, hidePersonaDetails = _a.hidePersonaDetails, imageShouldFadeIn = _a.imageShouldFadeIn, _b = _a.onRenderInitials, onRenderInitials = _b === void 0 ? this._onRenderInitials : _b, onRenderPrimaryText = _a.onRenderPrimaryText, onRenderSecondaryText = _a.onRenderSecondaryText, onRenderTertiaryText = _a.onRenderTertiaryText, onRenderOptionalText = _a.onRenderOptionalText, imageShouldStartVisible = _a.imageShouldStartVisible;
var size = this.props.size;
initialsColor = initialsColor !== undefined && initialsColor !== null ? initialsColor : this._getColorFromName(primaryText);
var presenceElement = null;
if (presence !== Persona_Props_1.PersonaPresence.none) {
var userPresence = Persona_Props_1.PersonaPresence[presence], statusIcon = null;
switch (userPresence) {
case 'online':
userPresence = 'SkypeCheck';
break;
case 'away':
userPresence = 'SkypeClock';
break;
case 'dnd':
userPresence = 'SkypeMinus';
break;
default:
userPresence = '';
}
if (userPresence) {
statusIcon = (React.createElement(Icon_1.Icon, { className: Utilities_1.css('ms-Persona-presenceIcon', styles.presenceIcon), iconName: userPresence }));
}
presenceElement = React.createElement("div", { className: Utilities_1.css('ms-Persona-presence', styles.presence) }, statusIcon);
}
var divProps = Utilities_1.getNativeProps(this.props, Utilities_1.divProperties);
var personaDetails = React.createElement("div", { className: Utilities_1.css('ms-Persona-details', styles.details) },
this._renderElement(this.props.primaryText, Utilities_1.css('ms-Persona-primaryText', styles.primaryText), onRenderPrimaryText),
this._renderElement(this.props.secondaryText, Utilities_1.css('ms-Persona-secondaryText', styles.secondaryText), onRenderSecondaryText),
this._renderElement(this.props.tertiaryText, Utilities_1.css('ms-Persona-tertiaryText', styles.tertiaryText), onRenderTertiaryText),
this._renderElement(this.props.optionalText, Utilities_1.css('ms-Persona-optionalText', styles.optionalText), onRenderOptionalText),
this.props.children);
return (React.createElement("div", tslib_1.__assign({}, divProps, { className: Utilities_1.css('ms-Persona', styles.root, className, PersonaConsts_1.PERSONA_SIZE[size], PersonaConsts_1.PERSONA_PRESENCE[presence], this.props.showSecondaryText ? styles.showSecondaryText : '') }),
size !== Persona_Props_1.PersonaSize.tiny && (React.createElement("div", { className: Utilities_1.css('ms-Persona-imageArea', styles.imageArea) },
!this.state.isImageLoaded &&
(React.createElement("div", { className: Utilities_1.css('ms-Persona-initials', styles.initials, PersonaConsts_1.PERSONA_INITIALS_COLOR[initialsColor]), "aria-hidden": 'true' }, onRenderInitials(this.props, this._onRenderInitials))),
React.createElement(Image_1.Image, { className: Utilities_1.css('ms-Persona-image', styles.image), imageFit: Image_1.ImageFit.cover, src: imageUrl, width: SIZE_TO_PIXELS[size], height: SIZE_TO_PIXELS[size], alt: imageAlt, shouldFadeIn: imageShouldFadeIn, shouldStartVisible: imageShouldStartVisible, onLoadingStateChange: this._onPhotoLoadingStateChange }))),
presenceElement,
(!hidePersonaDetails || (size === Persona_Props_1.PersonaSize.tiny)) && personaDetails));
};
Persona.prototype._renderElement = function (text, className, render) {
return (React.createElement("div", { className: className }, render ? render(this.props) : text));
};
Persona.prototype._onRenderInitials = function (props) {
var imageInitials = props.imageInitials, primaryText = props.primaryText;
var isRTL = Utilities_1.getRTL();
imageInitials = imageInitials || Utilities_1.getInitials(primaryText, isRTL);
return (React.createElement("span", null, imageInitials));
};
Persona.prototype._getColorFromName = function (displayName) {
var color = Persona_Props_1.PersonaInitialsColor.blue;
if (!displayName) {
return color;
}
var hashCode = 0;
for (var iLen = displayName.length - 1; iLen >= 0; iLen--) {
var ch = displayName.charCodeAt(iLen);
var shift = iLen % 8;
// tslint:disable-next-line:no-bitwise
hashCode ^= (ch << shift) + (ch >> (8 - shift));
}
color = COLOR_SWATCHES_LOOKUP[hashCode % COLOR_SWATCHES_NUM_ENTRIES];
return color;
};
Persona.prototype._onPhotoLoadingStateChange = function (loadState) {
this.setState({
isImageLoaded: loadState === Image_1.ImageLoadState.loaded
});
};
Persona.defaultProps = {
primaryText: '',
size: Persona_Props_1.PersonaSize.regular,
presence: Persona_Props_1.PersonaPresence.none,
imageAlt: ''
};
tslib_1.__decorate([
Utilities_1.autobind
], Persona.prototype, "_renderElement", null);
tslib_1.__decorate([
Utilities_1.autobind
], Persona.prototype, "_onRenderInitials", null);
tslib_1.__decorate([
Utilities_1.autobind
], Persona.prototype, "_onPhotoLoadingStateChange", null);
return Persona;
}(Utilities_1.BaseComponent));
exports.Persona = Persona;
var _a;
//# sourceMappingURL=Persona.js.map