office-ui-fabric-react
Version:
Reusable React components for building experiences for Office 365.
65 lines • 3.27 kB
JavaScript
import * as tslib_1 from "tslib";
/* tslint:disable */
import * as React from 'react';
/* tslint:enable */
import { IconType } from './Icon.types';
import { Image } from '../Image/Image';
import { ImageLoadState } from '../Image/Image.types';
import { getNativeProps, htmlElementProperties, BaseComponent, classNamesFunction } from '../../Utilities';
import { getIcon } from '../../Styling';
var getClassNames = 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 === 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, getStyles = _a.getStyles, iconName = _a.iconName, imageErrorAs = _a.imageErrorAs;
var isPlaceholder = typeof iconName === 'string' && iconName.length === 0;
var isImage = this.props.iconType === IconType.image || this.props.iconType === IconType.Image;
var _b = this._getIconContent(iconName), iconClassName = _b.iconClassName, children = _b.children;
var classNames = getClassNames(getStyles, { className: className, isPlaceholder: isPlaceholder, isImage: isImage, iconClassName: iconClassName });
var containerProps = ariaLabel ? { 'aria-label': ariaLabel, 'data-icon-name': iconName, } : {
role: 'presentation',
'aria-hidden': true,
'data-icon-name': iconName,
};
if (this.props.iconType === IconType.image || this.props.iconType === IconType.Image) {
var imageLoadError = this.state.imageLoadError;
var imageProps = tslib_1.__assign({}, this.props.imageProps, { onLoadingStateChange: this.onImageLoadingStateChange });
var ImageType = imageLoadError && imageErrorAs || Image;
return (React.createElement("div", tslib_1.__assign({}, containerProps, { className: classNames.root }),
React.createElement(ImageType, tslib_1.__assign({}, imageProps))));
}
else {
return (React.createElement("i", tslib_1.__assign({}, containerProps, getNativeProps(this.props, htmlElementProperties, ['name', 'iconName']), { className: classNames.root }), children));
}
};
IconBase.prototype._getIconContent = function (name) {
var iconDefinition = getIcon(name) || {
subset: {
className: undefined
},
code: undefined
};
return {
children: iconDefinition.code,
iconClassName: iconDefinition.subset.className
};
};
return IconBase;
}(BaseComponent));
export { IconBase };
//# sourceMappingURL=Icon.base.js.map