UNPKG

@blueprintjs/core

Version:

Core styles & components

99 lines 5.15 kB
"use strict"; /* * 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