office-ui-fabric-react
Version:
Reusable React components for building experiences for Office 365.
146 lines (144 loc) • 8.57 kB
JavaScript
var __extends = (this && this.__extends) || function (d, b) {
for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
var __assign = (this && this.__assign) || Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
define(["require", "exports", "react", "../../utilities/css", "../../utilities/rtl", "../../Image", "./Persona.Props", "./PersonaConsts", "../../utilities/properties", "./Persona.scss"], function (require, exports, React, css_1, rtl_1, Image_1, Persona_Props_1, PersonaConsts_1, properties_1) {
"use strict";
/** Regex to detect words within paraenthesis in a string where gi implies global and case-insensitive. */
var CHARS_WITHIN_PARENTHESIS_REGEX = new RegExp('\\(([^)]*)\\)', 'gi');
/**
* Matches any non-word characters with respect to the Unicode codepoints; generated by
* https://mothereff.in/regexpu for regex /\W /u where u stands for Unicode support (ES6 feature).
* More info here: http://stackoverflow.com/questions/280712/javascript-unicode-regexes.
* gi implies global and case-insensitive.
*/
var UNICODE_ALPHANUMERIC_CHARS_REGEX = new RegExp('(?:[\0-/:-@\[-\^`\{-\uD7FF\uE000-\uFFFF]|[\uD800-\uDBFF][\uDC00-\uDFFF]|[\uD800-\uDBFF](?![\uDC00-\uDFFF])|(?:[^\uD800-\uDBFF]|^)[\uDC00-\uDFFF]) ', 'gi');
/** Regex to detect multiple spaces in a string where gi implies global and case-insensitive. */
var MULTIPLE_WHITESPACES_REGEX_TOKEN = new RegExp('\\s+', 'gi');
// 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.lightPink,
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) {
__extends(Persona, _super);
function Persona() {
return _super !== null && _super.apply(this, arguments) || this;
}
Persona.prototype.render = function () {
var _a = this.props, className = _a.className, size = _a.size, imageUrl = _a.imageUrl, imageInitials = _a.imageInitials, initialsColor = _a.initialsColor, presence = _a.presence, primaryText = _a.primaryText, secondaryText = _a.secondaryText, tertiaryText = _a.tertiaryText, optionalText = _a.optionalText, hidePersonaDetails = _a.hidePersonaDetails, imageShouldFadeIn = _a.imageShouldFadeIn;
var isRTL = rtl_1.getRTL();
imageInitials = imageInitials || this._getInitials(primaryText, isRTL);
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) {
var iconClass = "ms-Persona-presenceIcon ms-Icon ms-Icon--" + userPresence;
statusIcon = React.createElement("i", { className: iconClass });
}
presenceElement = React.createElement("div", { className: 'ms-Persona-presence' }, statusIcon);
}
var divProps = properties_1.getNativeProps(this.props, properties_1.divProperties);
var personaDetails = React.createElement("div", { className: 'ms-Persona-details' },
React.createElement("div", { className: 'ms-Persona-primaryText' }, primaryText),
secondaryText ? (React.createElement("div", { className: 'ms-Persona-secondaryText' }, secondaryText)) : (null),
React.createElement("div", { className: 'ms-Persona-tertiaryText' }, tertiaryText),
React.createElement("div", { className: 'ms-Persona-optionalText' }, optionalText),
this.props.children);
return (React.createElement("div", __assign({}, divProps, { className: css_1.css('ms-Persona', className, PersonaConsts_1.PERSONA_SIZE[size], PersonaConsts_1.PERSONA_PRESENCE[presence]) }),
size !== Persona_Props_1.PersonaSize.tiny && (React.createElement("div", { className: 'ms-Persona-imageArea' },
React.createElement("div", { className: css_1.css('ms-Persona-initials', PersonaConsts_1.PERSONA_INITIALS_COLOR[initialsColor]) }, imageInitials),
React.createElement(Image_1.Image, { className: 'ms-Persona-image', imageFit: Image_1.ImageFit.cover, src: imageUrl, shouldFadeIn: imageShouldFadeIn }))),
presenceElement,
(!hidePersonaDetails || (size === Persona_Props_1.PersonaSize.tiny)) && personaDetails));
};
/** Get (up to 2 characters) initials based on display name of the persona. */
Persona.prototype._getInitials = function (displayName, isRtl) {
var initials = '';
if (displayName != null) {
// Do not consider the suffixes within parenthesis while computing the initials.
var personaName = displayName.replace(CHARS_WITHIN_PARENTHESIS_REGEX, '');
personaName = personaName.replace(UNICODE_ALPHANUMERIC_CHARS_REGEX, '');
personaName = personaName.replace(MULTIPLE_WHITESPACES_REGEX_TOKEN, ' ');
// Trim leading and trailing spaces if any.
personaName = personaName.trim();
var splits = personaName.split(' ');
if (splits.length === 2) {
initials += splits[0].charAt(0).toUpperCase();
initials += splits[1].charAt(0).toUpperCase();
}
else if (splits.length === 3) {
initials += splits[0].charAt(0).toUpperCase();
initials += splits[2].charAt(0).toUpperCase();
}
else if (splits.length !== 0) {
initials += splits[0].charAt(0).toUpperCase();
}
}
if (isRtl && initials.length > 1) {
return initials.charAt(1) + initials.charAt(0);
}
return initials;
};
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;
};
return Persona;
}(React.Component));
Persona.defaultProps = {
primaryText: '',
size: Persona_Props_1.PersonaSize.regular,
presence: Persona_Props_1.PersonaPresence.none
};
exports.Persona = Persona;
});
//# sourceMappingURL=Persona.js.map