office-ui-fabric-react
Version:
Reusable React components for building experiences for Office 365.
85 lines • 5.82 kB
JavaScript
define(["require", "exports", "tslib", "react", "../../Utilities", "../../Image", "./PersonaPresence", "./Persona.types", "./PersonaConsts", "../../Icon", "./Persona.scss", "../../Styling", "./PersonaInitialsColor"], function (require, exports, tslib_1, React, Utilities_1, Image_1, PersonaPresence_1, Persona_types_1, PersonaConsts_1, Icon_1, stylesImport, Styling_1, PersonaInitialsColor_1) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var styles = stylesImport;
var SIZE_TO_PIXELS = (_a = {},
_a[Persona_types_1.PersonaSize.tiny] = 20,
_a[Persona_types_1.PersonaSize.extraExtraSmall] = 24,
_a[Persona_types_1.PersonaSize.extraSmall] = 28,
_a[Persona_types_1.PersonaSize.small] = 40,
_a[Persona_types_1.PersonaSize.regular] = 48,
_a[Persona_types_1.PersonaSize.large] = 72,
_a[Persona_types_1.PersonaSize.extraLarge] = 100,
_a[Persona_types_1.PersonaSize.size24] = 24,
_a[Persona_types_1.PersonaSize.size28] = 28,
_a[Persona_types_1.PersonaSize.size10] = 20,
_a[Persona_types_1.PersonaSize.size32] = 32,
_a[Persona_types_1.PersonaSize.size40] = 40,
_a[Persona_types_1.PersonaSize.size48] = 48,
_a[Persona_types_1.PersonaSize.size72] = 72,
_a[Persona_types_1.PersonaSize.size100] = 100,
_a);
var PersonaCoin = /** @class */ (function (_super) {
tslib_1.__extends(PersonaCoin, _super);
function PersonaCoin(props) {
var _this = _super.call(this, props) || this;
_this.state = {
isImageLoaded: false,
isImageError: false
};
return _this;
}
PersonaCoin.prototype.render = function () {
var _a = this.props, coinProps = _a.coinProps, coinSize = _a.coinSize, imageUrl = _a.imageUrl, imageAlt = _a.imageAlt, initialsColor = _a.initialsColor, primaryText = _a.primaryText, imageShouldFadeIn = _a.imageShouldFadeIn, _b = _a.onRenderInitials, onRenderInitials = _b === void 0 ? this._onRenderInitials : _b, imageShouldStartVisible = _a.imageShouldStartVisible;
var size = this.props.size;
var divProps = Utilities_1.getNativeProps(this.props, Utilities_1.divProperties);
var coinSizeStyle = coinSize ? { width: coinSize, height: coinSize } : undefined;
return (React.createElement("div", tslib_1.__assign({}, divProps, { className: Utilities_1.css('ms-Persona-coin', PersonaConsts_1.PERSONA_SIZE[size], coinProps && coinProps.className) }),
(size !== Persona_types_1.PersonaSize.size10 && size !== Persona_types_1.PersonaSize.tiny) ? (React.createElement("div", tslib_1.__assign({}, coinProps, { className: Utilities_1.css('ms-Persona-imageArea', styles.imageArea), style: coinSizeStyle }),
!this.state.isImageLoaded &&
(!imageUrl || this.state.isImageError) &&
(React.createElement("div", { className: Utilities_1.css('ms-Persona-initials', styles.initials, Styling_1.mergeStyles({
backgroundColor: PersonaInitialsColor_1.initialsColorPropToColorCode(this.props)
})), style: coinSizeStyle, "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: coinSize || SIZE_TO_PIXELS[size], height: coinSize || SIZE_TO_PIXELS[size], alt: imageAlt, shouldFadeIn: imageShouldFadeIn, shouldStartVisible: imageShouldStartVisible, onLoadingStateChange: this._onPhotoLoadingStateChange }),
React.createElement(PersonaPresence_1.PersonaPresence, tslib_1.__assign({}, this.props)))) :
(this.props.presence ?
React.createElement(PersonaPresence_1.PersonaPresence, tslib_1.__assign({}, this.props)) :
React.createElement(Icon_1.Icon, { iconName: 'Contact', className: styles.size10NoPresenceIcon })),
this.props.children));
};
PersonaCoin.prototype._onRenderInitials = function (props) {
var imageInitials = props.imageInitials, primaryText = props.primaryText;
var isRTL = Utilities_1.getRTL();
imageInitials = imageInitials || Utilities_1.getInitials(primaryText, isRTL);
return (imageInitials !== '' ?
React.createElement("span", null, imageInitials) :
React.createElement(Icon_1.Icon, { iconName: 'Contact' }));
};
PersonaCoin.prototype._onPhotoLoadingStateChange = function (loadState) {
this.setState({
isImageLoaded: loadState === Image_1.ImageLoadState.loaded,
isImageError: loadState === Image_1.ImageLoadState.error
});
if (this.props.onPhotoLoadingStateChange) {
this.props.onPhotoLoadingStateChange(loadState);
}
};
PersonaCoin.defaultProps = {
primaryText: '',
size: Persona_types_1.PersonaSize.size48,
presence: Persona_types_1.PersonaPresence.none,
imageAlt: ''
};
tslib_1.__decorate([
Utilities_1.autobind
], PersonaCoin.prototype, "_onRenderInitials", null);
tslib_1.__decorate([
Utilities_1.autobind
], PersonaCoin.prototype, "_onPhotoLoadingStateChange", null);
return PersonaCoin;
}(React.Component));
exports.PersonaCoin = PersonaCoin;
var _a;
});
//# sourceMappingURL=PersonaCoin.js.map