office-ui-fabric-react
Version:
Reusable React components for building experiences for Office 365.
64 lines • 3.43 kB
JavaScript
define(["require", "exports", "tslib", "react", "./Icon.types", "../Image/Image", "../Image/Image.types", "../../Utilities", "../../Styling"], function (require, exports, tslib_1, React, Icon_types_1, Image_1, Image_types_1, Utilities_1, Styling_1) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var getClassNames = Utilities_1.classNamesFunction();
var IconBase = /** @class */ (function (_super) {
tslib_1.__extends(IconBase, _super);
function IconBase(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;
}
IconBase.prototype.render = function () {
var _a = this.props, ariaLabel = _a.ariaLabel, className = _a.className, styles = _a.styles, iconName = _a.iconName, imageErrorAs = _a.imageErrorAs;
var isPlaceholder = typeof iconName === 'string' && iconName.length === 0;
var isImage = this.props.iconType === Icon_types_1.IconType.image || this.props.iconType === Icon_types_1.IconType.Image;
var _b = this._getIconContent(iconName), iconClassName = _b.iconClassName, children = _b.children;
var classNames = getClassNames(styles, {
className: className,
iconClassName: iconClassName,
isImage: isImage,
isPlaceholder: isPlaceholder
});
var containerProps = ariaLabel
? {
'aria-label': ariaLabel
}
: {
role: 'presentation',
'aria-hidden': true
};
var RootType = isImage ? 'div' : 'i';
var nativeProps = Utilities_1.getNativeProps(this.props, Utilities_1.htmlElementProperties);
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(RootType, tslib_1.__assign({ "data-icon-name": iconName }, nativeProps, containerProps, { className: classNames.root }), isImage ? React.createElement(ImageType, tslib_1.__assign({}, imageProps)) : children));
};
IconBase.prototype._getIconContent = function (name) {
var iconDefinition = Styling_1.getIcon(name) || {
subset: {
className: undefined
},
code: undefined
};
return {
children: iconDefinition.code,
iconClassName: iconDefinition.subset.className
};
};
return IconBase;
}(Utilities_1.BaseComponent));
exports.IconBase = IconBase;
});
//# sourceMappingURL=Icon.base.js.map