office-ui-fabric-react
Version:
Reusable React components for building experiences for Office 365.
54 lines • 3.5 kB
JavaScript
define(["require", "exports", "tslib", "react", "./Icon.types", "../Image/Image", "../Image/Image.types", "../../Utilities", "../../Styling", "./Icon.classNames"], function (require, exports, tslib_1, React, Icon_types_1, Image_1, Image_types_1, Utilities_1, Styling_1, Icon_classNames_1) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var Icon = /** @class */ (function (_super) {
tslib_1.__extends(Icon, _super);
function Icon(props) {
var _this = _super.call(this, props) || this;
_this.onImageLoadingStateChange = function (state) {
if (_this.props.imageProps && _this.props.imageProps.onLoadingStateChange) {
_this.props.imageProps.onLoadingStateChange(state);
}
if (state === Image_types_1.ImageLoadState.error) {
_this.setState({ imageLoadError: true });
}
};
_this.state = {
imageLoadError: false,
};
return _this;
}
Icon.prototype.render = function () {
var _a = this.props, ariaLabel = _a.ariaLabel, className = _a.className, styles = _a.styles, iconName = _a.iconName, imageErrorAs = _a.imageErrorAs;
var classNames = Icon_classNames_1.getClassNames(styles);
var containerProps = ariaLabel ? { 'aria-label': ariaLabel, 'data-icon-name': iconName, } : {
role: 'presentation',
'aria-hidden': true,
'data-icon-name': iconName,
};
if (this.props.iconType === Icon_types_1.IconType.image || this.props.iconType === Icon_types_1.IconType.Image) {
var containerClassName = Utilities_1.css('ms-Icon-imageContainer', classNames.root, classNames.imageContainer, className);
var imageLoadError = this.state.imageLoadError;
var imageProps = tslib_1.__assign({}, this.props.imageProps, { onLoadingStateChange: this.onImageLoadingStateChange });
var ImageType = imageLoadError && imageErrorAs || Image_1.Image;
return (React.createElement("div", tslib_1.__assign({}, containerProps, { className: Utilities_1.css(containerClassName, classNames.root) }),
React.createElement(ImageType, tslib_1.__assign({}, imageProps))));
}
else if (typeof iconName === 'string' && iconName.length === 0) {
return (React.createElement("i", tslib_1.__assign({}, containerProps, Utilities_1.getNativeProps(this.props, Utilities_1.htmlElementProperties), { className: Utilities_1.css('ms-Icon-placeHolder', classNames.rootHasPlaceHolder, this.props.className) })));
}
else {
var iconDefinition = Styling_1.getIcon(iconName) || {
subset: {
className: undefined
},
code: undefined
};
return (React.createElement("i", tslib_1.__assign({}, containerProps, Utilities_1.getNativeProps(this.props, Utilities_1.htmlElementProperties), { className: Utilities_1.css(iconDefinition.subset.className, classNames.root, this.props.className) }), iconDefinition.code));
}
};
return Icon;
}(Utilities_1.BaseComponent));
exports.Icon = Icon;
});
//# sourceMappingURL=Icon.js.map