1 |
|
2 |
|
3 |
|
4 |
|
5 |
|
6 |
|
7 |
|
8 |
|
9 |
|
10 |
|
11 |
|
12 |
|
13 |
|
14 |
|
15 |
|
16 | import { __assign, __rest } from "tslib";
|
17 | import classNames from "classnames";
|
18 | import * as React from "react";
|
19 | import { Icons, IconSize, SVGIconContainer, } from "@blueprintjs/icons";
|
20 | import { Classes, DISPLAYNAME_PREFIX, removeNonHTMLProps } from "../../common";
|
21 |
|
22 | export { IconSize };
|
23 |
|
24 |
|
25 |
|
26 |
|
27 |
|
28 |
|
29 | export var Icon = React.forwardRef(function (props, ref) {
|
30 | var _a, _b;
|
31 | var autoLoad = props.autoLoad, className = props.className, color = props.color, icon = props.icon, intent = props.intent, tagName = props.tagName, svgProps = props.svgProps, title = props.title, htmlTitle = props.htmlTitle, htmlProps = __rest(props, ["autoLoad", "className", "color", "icon", "intent", "tagName", "svgProps", "title", "htmlTitle"]);
|
32 |
|
33 |
|
34 | var size = (_b = (_a = props.iconSize) !== null && _a !== void 0 ? _a : props.size) !== null && _b !== void 0 ? _b : IconSize.STANDARD;
|
35 | var _c = React.useState(function () {
|
36 | return typeof icon === "string" ? Icons.getPaths(icon, size) : undefined;
|
37 | }), iconPaths = _c[0], setIconPaths = _c[1];
|
38 | React.useEffect(function () {
|
39 | var shouldCancelIconLoading = false;
|
40 | if (typeof icon === "string") {
|
41 |
|
42 |
|
43 |
|
44 |
|
45 | var loadedIconPaths = Icons.getPaths(icon, size);
|
46 | if (loadedIconPaths !== undefined) {
|
47 | setIconPaths(loadedIconPaths);
|
48 | }
|
49 | else if (autoLoad) {
|
50 | Icons.load(icon, size)
|
51 | .then(function () {
|
52 |
|
53 | if (!shouldCancelIconLoading) {
|
54 | setIconPaths(Icons.getPaths(icon, size));
|
55 | }
|
56 | })
|
57 | .catch(function (reason) {
|
58 | console.error("[Blueprint] Icon '".concat(icon, "' (").concat(size, "px) could not be loaded."), reason);
|
59 | });
|
60 | }
|
61 | else {
|
62 | console.error("[Blueprint] Icon '".concat(icon, "' (").concat(size, "px) is not loaded yet and autoLoad={false}, did you call Icons.load('").concat(icon, "', ").concat(size, ")?"));
|
63 | }
|
64 | }
|
65 | return function () {
|
66 | shouldCancelIconLoading = true;
|
67 | };
|
68 | }, [autoLoad, icon, size]);
|
69 | if (icon == null || typeof icon === "boolean") {
|
70 | return null;
|
71 | }
|
72 | else if (typeof icon !== "string") {
|
73 | return icon;
|
74 | }
|
75 | if (iconPaths == null) {
|
76 |
|
77 | var sizeClass = size === IconSize.STANDARD
|
78 | ? Classes.ICON_STANDARD
|
79 | : size === IconSize.LARGE
|
80 | ? Classes.ICON_LARGE
|
81 | : undefined;
|
82 | return React.createElement(tagName, __assign(__assign({}, removeNonHTMLProps(htmlProps)), { "aria-hidden": title ? undefined : true, className: classNames(Classes.ICON, sizeClass, Classes.iconClass(icon), Classes.intentClass(intent), className), "data-icon": icon, ref: ref, title: htmlTitle }));
|
83 | }
|
84 | else {
|
85 | var pathElements = iconPaths.map(function (d, i) { return React.createElement("path", { d: d, key: i, fillRule: "evenodd" }); });
|
86 |
|
87 |
|
88 |
|
89 | return (React.createElement(SVGIconContainer, __assign({ children: pathElements,
|
90 |
|
91 | className: classNames(Classes.intentClass(intent), className), color: color, htmlTitle: htmlTitle, iconName: icon, ref: ref, size: size, svgProps: svgProps, tagName: tagName, title: title }, removeNonHTMLProps(htmlProps))));
|
92 | }
|
93 | });
|
94 | Icon.defaultProps = {
|
95 | autoLoad: true,
|
96 | tagName: "span",
|
97 | };
|
98 | Icon.displayName = "".concat(DISPLAYNAME_PREFIX, ".Icon");
|
99 |
|
\ | No newline at end of file |