Stefan Hacker
82 lines
4.5 KiB
JavaScript
82 lines
4.5 KiB
JavaScript
define(["require", "exports", "tslib", "react", "./Icon.types", "../Image/Image", "../Image/Image.types", "../../Utilities", "./FontIcon"], function (require, exports, tslib_1, React, Icon_types_1, Image_1, Image_types_1, Utilities_1, FontIcon_1) {
|
|
"use strict";
|
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
exports.IconBase = void 0;
|
|
var getClassNames = (0, Utilities_1.classNamesFunction)({
|
|
// Icon is used a lot by other components.
|
|
// It's likely to see expected cases which pass different className to the Icon.
|
|
// Therefore setting a larger cache size.
|
|
cacheSize: 100,
|
|
});
|
|
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, children = _a.children, className = _a.className, styles = _a.styles, iconName = _a.iconName, imageErrorAs = _a.imageErrorAs, theme = _a.theme;
|
|
var isPlaceholder = typeof iconName === 'string' && iconName.length === 0;
|
|
var isImage =
|
|
// eslint-disable-next-line @typescript-eslint/no-deprecated
|
|
!!this.props.imageProps || this.props.iconType === Icon_types_1.IconType.image || this.props.iconType === Icon_types_1.IconType.Image;
|
|
var iconContent = (0, FontIcon_1.getIconContent)(iconName) || {};
|
|
var iconClassName = iconContent.iconClassName, iconContentChildren = iconContent.children, mergeImageProps = iconContent.mergeImageProps;
|
|
var classNames = getClassNames(styles, {
|
|
theme: theme,
|
|
className: className,
|
|
iconClassName: iconClassName,
|
|
isImage: isImage,
|
|
isPlaceholder: isPlaceholder,
|
|
});
|
|
var RootType = isImage ? 'span' : 'i';
|
|
var nativeProps = (0, Utilities_1.getNativeProps)(this.props, Utilities_1.htmlElementProperties, [
|
|
'aria-label',
|
|
]);
|
|
var imageLoadError = this.state.imageLoadError;
|
|
var imageProps = tslib_1.__assign(tslib_1.__assign({}, this.props.imageProps), { onLoadingStateChange: this._onImageLoadingStateChange });
|
|
var ImageType = (imageLoadError && imageErrorAs) || Image_1.Image;
|
|
// eslint-disable-next-line @typescript-eslint/no-deprecated
|
|
var ariaLabel = this.props['aria-label'] || this.props.ariaLabel;
|
|
var accessibleName = imageProps.alt || ariaLabel || this.props.title;
|
|
var hasName = !!(accessibleName ||
|
|
this.props['aria-labelledby'] ||
|
|
imageProps['aria-label'] ||
|
|
imageProps['aria-labelledby']);
|
|
var containerProps = hasName
|
|
? {
|
|
role: isImage || mergeImageProps ? undefined : 'img',
|
|
'aria-label': isImage || mergeImageProps ? undefined : accessibleName,
|
|
}
|
|
: {
|
|
'aria-hidden': true,
|
|
};
|
|
var finalIconContentChildren = iconContentChildren;
|
|
if (mergeImageProps && iconContentChildren && typeof iconContentChildren === 'object' && accessibleName) {
|
|
finalIconContentChildren = React.cloneElement(iconContentChildren, {
|
|
alt: accessibleName,
|
|
});
|
|
}
|
|
return (React.createElement(RootType, tslib_1.__assign({ "data-icon-name": iconName }, containerProps, nativeProps, (mergeImageProps
|
|
? {
|
|
title: undefined,
|
|
'aria-label': undefined,
|
|
}
|
|
: {}), { className: classNames.root }), isImage ? React.createElement(ImageType, tslib_1.__assign({}, imageProps)) : children || finalIconContentChildren));
|
|
};
|
|
return IconBase;
|
|
}(React.Component));
|
|
exports.IconBase = IconBase;
|
|
});
|
|
//# sourceMappingURL=Icon.base.js.map
|