@blueprintjs/core
Version:
Core styles & components
99 lines • 5.15 kB
JavaScript
/*
* Copyright 2017 Palantir Technologies, Inc. All rights reserved.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
Object.defineProperty(exports, "__esModule", { value: true });
exports.Icon = exports.IconSize = void 0;
const tslib_1 = require("tslib");
const classnames_1 = tslib_1.__importDefault(require("classnames"));
const React = tslib_1.__importStar(require("react"));
const icons_1 = require("@blueprintjs/icons");
Object.defineProperty(exports, "IconSize", { enumerable: true, get: function () { return icons_1.IconSize; } });
const common_1 = require("../../common");
/**
* Icon component.
*
* @see https://blueprintjs.com/docs/#core/components/icon
*/
exports.Icon = React.forwardRef((props, ref) => {
var _a;
const { autoLoad = true, className, color, icon, intent, tagName = "span", svgProps, title, htmlTitle, ...htmlProps } = props;
const size = (_a = props.size) !== null && _a !== void 0 ? _a : icons_1.IconSize.STANDARD;
const [iconPaths, setIconPaths] = React.useState(() => typeof icon === "string" ? icons_1.Icons.getPaths(icon, size) : undefined);
React.useEffect(() => {
let shouldCancelIconLoading = false;
if (typeof icon === "string") {
// The icon may have been loaded already, in which case we can simply grab it.
// N.B. when `autoLoad={true}`, we can't rely on simply calling Icons.load() here to re-load an icon module
// which has already been loaded & cached, since it may have been loaded with special loading options which
// this component knows nothing about.
const loadedIconPaths = icons_1.Icons.getPaths(icon, size);
if (loadedIconPaths !== undefined) {
setIconPaths(loadedIconPaths);
}
else if (autoLoad) {
icons_1.Icons.load(icon, size)
.then(() => {
// if this effect expired by the time icon loaded, then don't set state
if (!shouldCancelIconLoading) {
setIconPaths(icons_1.Icons.getPaths(icon, size));
}
})
.catch(reason => {
console.error(`[Blueprint] Icon '${icon}' (${size}px) could not be loaded.`, reason);
});
}
else {
console.error(`[Blueprint] Icon '${icon}' (${size}px) is not loaded yet and autoLoad={false}, did you call Icons.load('${icon}', ${size})?`);
}
}
return () => {
shouldCancelIconLoading = true;
};
}, [autoLoad, icon, size]);
if (icon == null || typeof icon === "boolean") {
return null;
}
else if (typeof icon !== "string") {
return icon;
}
if (iconPaths == null) {
// fall back to icon font if unloaded or unable to load SVG implementation
const sizeClass = size === icons_1.IconSize.STANDARD
? common_1.Classes.ICON_STANDARD
: size === icons_1.IconSize.LARGE
? common_1.Classes.ICON_LARGE
: undefined;
return React.createElement(tagName || "span", {
"aria-hidden": title ? undefined : true,
...(0, common_1.removeNonHTMLProps)(htmlProps),
className: (0, classnames_1.default)(common_1.Classes.ICON, sizeClass, common_1.Classes.iconClass(icon), common_1.Classes.intentClass(intent), className),
"data-icon": icon,
ref,
title: htmlTitle,
});
}
else {
const pathElements = iconPaths.map((d, i) => React.createElement("path", { d: d, key: i, fillRule: "evenodd" }));
// HACKHACK: there is no good way to narrow the type of SVGIconContainerProps here because of the use
// of a conditional type within the type union that defines that interface. So we cast to <any>.
// see https://github.com/microsoft/TypeScript/issues/24929, https://github.com/microsoft/TypeScript/issues/33014
return (React.createElement(icons_1.SVGIconContainer, { children: pathElements,
// don't forward `Classes.ICON` or `Classes.iconClass(icon)` here, since the container will render those classes
className: (0, classnames_1.default)(common_1.Classes.intentClass(intent), className), color: color, htmlTitle: htmlTitle, iconName: icon, ref: ref, size: size, svgProps: svgProps, tagName: tagName, title: title, ...(0, common_1.removeNonHTMLProps)(htmlProps) }));
}
});
exports.Icon.displayName = `${common_1.DISPLAYNAME_PREFIX}.Icon`;
//# sourceMappingURL=icon.js.map
;