1 | "use strict";
|
2 | Object.defineProperty(exports, "__esModule", { value: true });
|
3 | exports.IconBase = void 0;
|
4 | var tslib_1 = require("tslib");
|
5 | var React = require("react");
|
6 | var Icon_types_1 = require("./Icon.types");
|
7 | var Image_1 = require("../Image/Image");
|
8 | var Image_types_1 = require("../Image/Image.types");
|
9 | var Utilities_1 = require("../../Utilities");
|
10 | var FontIcon_1 = require("./FontIcon");
|
11 | var getClassNames = Utilities_1.classNamesFunction({
|
12 |
|
13 |
|
14 |
|
15 | cacheSize: 100,
|
16 | });
|
17 | var IconBase = (function (_super) {
|
18 | tslib_1.__extends(IconBase, _super);
|
19 | function IconBase(props) {
|
20 | var _this = _super.call(this, props) || this;
|
21 | _this._onImageLoadingStateChange = function (state) {
|
22 | if (_this.props.imageProps && _this.props.imageProps.onLoadingStateChange) {
|
23 | _this.props.imageProps.onLoadingStateChange(state);
|
24 | }
|
25 | if (state === Image_types_1.ImageLoadState.error) {
|
26 | _this.setState({ imageLoadError: true });
|
27 | }
|
28 | };
|
29 | _this.state = {
|
30 | imageLoadError: false,
|
31 | };
|
32 | return _this;
|
33 | }
|
34 | IconBase.prototype.render = function () {
|
35 | var _a = this.props, children = _a.children, className = _a.className, styles = _a.styles, iconName = _a.iconName, imageErrorAs = _a.imageErrorAs, theme = _a.theme;
|
36 | var isPlaceholder = typeof iconName === 'string' && iconName.length === 0;
|
37 | var isImage =
|
38 |
|
39 | !!this.props.imageProps || this.props.iconType === Icon_types_1.IconType.image || this.props.iconType === Icon_types_1.IconType.Image;
|
40 | var iconContent = FontIcon_1.getIconContent(iconName) || {};
|
41 | var iconClassName = iconContent.iconClassName, iconContentChildren = iconContent.children, mergeImageProps = iconContent.mergeImageProps;
|
42 | var classNames = getClassNames(styles, {
|
43 | theme: theme,
|
44 | className: className,
|
45 | iconClassName: iconClassName,
|
46 | isImage: isImage,
|
47 | isPlaceholder: isPlaceholder,
|
48 | });
|
49 | var RootType = isImage ? 'span' : 'i';
|
50 | var nativeProps = Utilities_1.getNativeProps(this.props, Utilities_1.htmlElementProperties, [
|
51 | 'aria-label',
|
52 | ]);
|
53 | var imageLoadError = this.state.imageLoadError;
|
54 | var imageProps = tslib_1.__assign(tslib_1.__assign({}, this.props.imageProps), { onLoadingStateChange: this._onImageLoadingStateChange });
|
55 | var ImageType = (imageLoadError && imageErrorAs) || Image_1.Image;
|
56 |
|
57 | var ariaLabel = this.props['aria-label'] || this.props.ariaLabel;
|
58 | var accessibleName = imageProps.alt || ariaLabel || this.props.title;
|
59 | var hasName = !!(accessibleName ||
|
60 | this.props['aria-labelledby'] ||
|
61 | imageProps['aria-label'] ||
|
62 | imageProps['aria-labelledby']);
|
63 | var containerProps = hasName
|
64 | ? {
|
65 | role: isImage || mergeImageProps ? undefined : 'img',
|
66 | 'aria-label': isImage || mergeImageProps ? undefined : accessibleName,
|
67 | }
|
68 | : {
|
69 | 'aria-hidden': true,
|
70 | };
|
71 | var finalIconContentChildren = iconContentChildren;
|
72 | if (mergeImageProps && iconContentChildren && typeof iconContentChildren === 'object' && accessibleName) {
|
73 | finalIconContentChildren = React.cloneElement(iconContentChildren, {
|
74 | alt: accessibleName,
|
75 | });
|
76 | }
|
77 | return (React.createElement(RootType, tslib_1.__assign({ "data-icon-name": iconName }, containerProps, nativeProps, (mergeImageProps
|
78 | ? {
|
79 | title: undefined,
|
80 | 'aria-label': undefined,
|
81 | }
|
82 | : {}), { className: classNames.root }), isImage ? React.createElement(ImageType, tslib_1.__assign({}, imageProps)) : children || finalIconContentChildren));
|
83 | };
|
84 | return IconBase;
|
85 | }(React.Component));
|
86 | exports.IconBase = IconBase;
|
87 |
|
\ | No newline at end of file |