@itwin/components-react 3.4.0-dev.50 → 3.4.0-dev.56
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/cjs/components-react/common/ImageRenderer.d.ts +3 -0
- package/lib/cjs/components-react/common/ImageRenderer.d.ts.map +1 -1
- package/lib/cjs/components-react/common/ImageRenderer.js +25 -1
- package/lib/cjs/components-react/common/ImageRenderer.js.map +1 -1
- package/lib/esm/components-react/common/ImageRenderer.d.ts +3 -0
- package/lib/esm/components-react/common/ImageRenderer.d.ts.map +1 -1
- package/lib/esm/components-react/common/ImageRenderer.js +25 -1
- package/lib/esm/components-react/common/ImageRenderer.js.map +1 -1
- package/package.json +12 -12
|
@@ -7,9 +7,12 @@ import { Image } from "./IImageLoader";
|
|
|
7
7
|
* @internal
|
|
8
8
|
*/
|
|
9
9
|
export declare class ImageRenderer {
|
|
10
|
+
private static _svgCache;
|
|
10
11
|
private hexToBase64;
|
|
11
12
|
/** Render raw binary image */
|
|
12
13
|
private renderBinary;
|
|
14
|
+
private isSvg;
|
|
15
|
+
private convertSvgToDataUri;
|
|
13
16
|
/** Render svg string into JSX */
|
|
14
17
|
private renderSvg;
|
|
15
18
|
/** Render image from an url */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ImageRenderer.d.ts","sourceRoot":"","sources":["../../../../src/components-react/common/ImageRenderer.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,EAAE,KAAK,EAAmD,MAAM,gBAAgB,CAAC;AAExF;;GAEG;AACH,qBAAa,aAAa;IACxB,OAAO,CAAC,WAAW;IAWnB,8BAA8B;IAC9B,OAAO,CAAC,YAAY;IAMpB,iCAAiC;IACjC,OAAO,CAAC,SAAS;
|
|
1
|
+
{"version":3,"file":"ImageRenderer.d.ts","sourceRoot":"","sources":["../../../../src/components-react/common/ImageRenderer.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,EAAE,KAAK,EAAmD,MAAM,gBAAgB,CAAC;AAExF;;GAEG;AACH,qBAAa,aAAa;IACxB,OAAO,CAAC,MAAM,CAAC,SAAS,CAAkC;IAE1D,OAAO,CAAC,WAAW;IAWnB,8BAA8B;IAC9B,OAAO,CAAC,YAAY;IAMpB,OAAO,CAAC,KAAK;IAab,OAAO,CAAC,mBAAmB;IAU3B,iCAAiC;IACjC,OAAO,CAAC,SAAS;IAajB,+BAA+B;IAC/B,OAAO,CAAC,SAAS;IAIjB,sCAAsC;IACtC,OAAO,CAAC,cAAc;IAItB,sDAAsD;IACtD,OAAO,CAAC,0BAA0B;IAIlC;;;OAGG;IACH,OAAO,CAAC,uBAAuB;IAc/B;;;OAGG;IACH,OAAO,CAAC,iBAAiB;IAKzB,yDAAyD;IAClD,MAAM,CAAC,WAAW,EAAE,KAAK,GAAG,KAAK,CAAC,SAAS;CAuBnD"}
|
|
@@ -50,9 +50,32 @@ class ImageRenderer {
|
|
|
50
50
|
const dataAsBase64 = this.hexToBase64(data);
|
|
51
51
|
return (React.createElement("img", { src: `data:image/${format};base64,${dataAsBase64}`, alt: "" }));
|
|
52
52
|
}
|
|
53
|
+
isSvg(input) {
|
|
54
|
+
const parser = new DOMParser();
|
|
55
|
+
const doc = parser.parseFromString(input, "application/xml");
|
|
56
|
+
const errorNode = doc.querySelector("parsererror");
|
|
57
|
+
if (errorNode) {
|
|
58
|
+
return false;
|
|
59
|
+
}
|
|
60
|
+
const rootNode = doc.documentElement.nodeName.toLowerCase();
|
|
61
|
+
return "svg" === rootNode;
|
|
62
|
+
}
|
|
63
|
+
convertSvgToDataUri(svg) {
|
|
64
|
+
if (!this.isSvg(svg)) {
|
|
65
|
+
return "";
|
|
66
|
+
}
|
|
67
|
+
// eslint-disable-next-line deprecation/deprecation
|
|
68
|
+
const svgAsBase64 = btoa(svg);
|
|
69
|
+
return `data:image/svg+xml;base64,${svgAsBase64}`;
|
|
70
|
+
}
|
|
53
71
|
/** Render svg string into JSX */
|
|
54
72
|
renderSvg(svg) {
|
|
55
|
-
|
|
73
|
+
let svgAsDataUri = ImageRenderer._svgCache.get(svg);
|
|
74
|
+
if (undefined === svgAsDataUri) {
|
|
75
|
+
svgAsDataUri = this.convertSvgToDataUri(svg.trim());
|
|
76
|
+
ImageRenderer._svgCache.set(svg, svgAsDataUri);
|
|
77
|
+
}
|
|
78
|
+
const iconSpec = appui_abstract_1.IconSpecUtilities.createWebComponentIconSpec(svgAsDataUri);
|
|
56
79
|
return (React.createElement("div", null,
|
|
57
80
|
React.createElement(core_react_1.Icon, { iconSpec: iconSpec })));
|
|
58
81
|
}
|
|
@@ -113,4 +136,5 @@ class ImageRenderer {
|
|
|
113
136
|
}
|
|
114
137
|
}
|
|
115
138
|
exports.ImageRenderer = ImageRenderer;
|
|
139
|
+
ImageRenderer._svgCache = new Map();
|
|
116
140
|
//# sourceMappingURL=ImageRenderer.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ImageRenderer.js","sourceRoot":"","sources":["../../../../src/components-react/common/ImageRenderer.tsx"],"names":[],"mappings":";AAAA;;;+FAG+F;AAC/F;;GAEG;;;;;;;;;;;;;;;;;;;;;;AAEH,6CAA+B;AAC/B,0DAAmE;AACnE,kDAAwE;AACxE,kDAA+C;AAG/C;;GAEG;AACH,MAAa,aAAa;
|
|
1
|
+
{"version":3,"file":"ImageRenderer.js","sourceRoot":"","sources":["../../../../src/components-react/common/ImageRenderer.tsx"],"names":[],"mappings":"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","sourcesContent":["/*---------------------------------------------------------------------------------------------\r\n* Copyright (c) Bentley Systems, Incorporated. All rights reserved.\r\n* See LICENSE.md in the project root for license terms and full copyright notice.\r\n*--------------------------------------------------------------------------------------------*/\r\n/** @packageDocumentation\r\n * @module Common\r\n */\r\n\r\nimport * as React from \"react\";\r\nimport { IconSpecUtilities, UiError } from \"@itwin/appui-abstract\";\r\nimport { Icon, WebFontIcon, WebFontIconProps } from \"@itwin/core-react\";\r\nimport { UiComponents } from \"../UiComponents\";\r\nimport { Image, ImageFileFormat, LoadedBinaryImage, LoadedImage } from \"./IImageLoader\";\r\n\r\n/** A class that renders images from data provided by an image loader\r\n * @internal\r\n */\r\nexport class ImageRenderer {\r\n private static _svgCache: Map<string, string> = new Map();\r\n\r\n private hexToBase64(hexstring: string) {\r\n const match = hexstring.match(/\\w{2}/g);\r\n // istanbul ignore next\r\n if (!match)\r\n return \"\";\r\n\r\n return btoa(match.map((a) => { // eslint-disable-line deprecation/deprecation\r\n return String.fromCharCode(parseInt(a, 16));\r\n }).join(\"\"));\r\n }\r\n\r\n /** Render raw binary image */\r\n private renderBinary(data: string, format: ImageFileFormat) {\r\n // Convert binary to base64\r\n const dataAsBase64 = this.hexToBase64(data);\r\n return (<img src={`data:image/${format};base64,${dataAsBase64}`} alt=\"\" />);\r\n }\r\n\r\n private isSvg(input: string): boolean {\r\n const parser = new DOMParser();\r\n const doc = parser.parseFromString(input, \"application/xml\");\r\n\r\n const errorNode = doc.querySelector(\"parsererror\");\r\n if (errorNode) {\r\n return false;\r\n }\r\n\r\n const rootNode = doc.documentElement.nodeName.toLowerCase();\r\n return \"svg\" === rootNode;\r\n }\r\n\r\n private convertSvgToDataUri(svg: string) {\r\n if (!this.isSvg(svg)) {\r\n return \"\";\r\n }\r\n\r\n // eslint-disable-next-line deprecation/deprecation\r\n const svgAsBase64 = btoa(svg);\r\n return `data:image/svg+xml;base64,${svgAsBase64}`;\r\n }\r\n\r\n /** Render svg string into JSX */\r\n private renderSvg(svg: string) {\r\n let svgAsDataUri = ImageRenderer._svgCache.get(svg);\r\n if (undefined === svgAsDataUri) {\r\n svgAsDataUri = this.convertSvgToDataUri(svg.trim());\r\n ImageRenderer._svgCache.set(svg, svgAsDataUri);\r\n }\r\n\r\n const iconSpec = IconSpecUtilities.createWebComponentIconSpec(svgAsDataUri);\r\n return (\r\n <div><Icon iconSpec={iconSpec} /></div>\r\n );\r\n }\r\n\r\n /** Render image from an url */\r\n private renderUrl(url: string) {\r\n return (<img src={url} alt=\"\" />);\r\n }\r\n\r\n /** Render image as core-react icon */\r\n private renderCoreIcon(iconName: string) {\r\n return (<WebFontIcon iconName={iconName} />);\r\n }\r\n\r\n /** Replaces the escaped instances of \"\\:\" with \":\" */\r\n private normalizeEscapedIconString(escapedIconString: string) {\r\n return escapedIconString.replace(/\\\\:/g, \":\");\r\n }\r\n\r\n /**\r\n * Extract class and name from icon name, if the name follows format \"{className}:{fontName}\".\r\n * className and fontName can be escaped using \\ if : is needed.\r\n */\r\n private extractIconClassAndName(iconName: string): Pick<WebFontIconProps, \"iconClassName\" | \"iconName\"> {\r\n const matches = iconName.match(/(\\\\.|[^:])+/g);\r\n if (!matches || matches.length !== 2)\r\n return {\r\n iconClassName: undefined,\r\n iconName,\r\n };\r\n\r\n return {\r\n iconClassName: this.normalizeEscapedIconString(matches[0]),\r\n iconName: this.normalizeEscapedIconString(matches[1]),\r\n };\r\n }\r\n\r\n /**\r\n * Render image as provided webfont icon.\r\n * Defaults to core-react icon if iconName does not contain className.\r\n */\r\n private renderWebfontIcon(iconName: string) {\r\n const iconInfo = this.extractIconClassAndName(iconName);\r\n return (<WebFontIcon {...iconInfo} />);\r\n }\r\n\r\n /** Render image from data provided by an image loader */\r\n public render(loadedImage: Image): React.ReactNode {\r\n switch (loadedImage.sourceType) {\r\n case \"binary\":\r\n const image = loadedImage as LoadedBinaryImage;\r\n return this.renderBinary(image.value, image.fileFormat);\r\n\r\n case \"url\":\r\n return this.renderUrl((loadedImage as LoadedImage).value);\r\n\r\n case \"svg\":\r\n return this.renderSvg((loadedImage as LoadedImage).value);\r\n\r\n case \"core-icon\":\r\n return this.renderCoreIcon((loadedImage as LoadedImage).value);\r\n\r\n case \"webfont-icon\":\r\n return this.renderWebfontIcon((loadedImage as LoadedImage).value);\r\n\r\n default:\r\n const unhandledSourceType: never = loadedImage.sourceType; // Compile time check that all cases are handled\r\n throw new UiError(UiComponents.loggerCategory(this), `Can't handle sourceType: \"${unhandledSourceType}\"`);\r\n }\r\n }\r\n}\r\n"]}
|
|
@@ -7,9 +7,12 @@ import { Image } from "./IImageLoader";
|
|
|
7
7
|
* @internal
|
|
8
8
|
*/
|
|
9
9
|
export declare class ImageRenderer {
|
|
10
|
+
private static _svgCache;
|
|
10
11
|
private hexToBase64;
|
|
11
12
|
/** Render raw binary image */
|
|
12
13
|
private renderBinary;
|
|
14
|
+
private isSvg;
|
|
15
|
+
private convertSvgToDataUri;
|
|
13
16
|
/** Render svg string into JSX */
|
|
14
17
|
private renderSvg;
|
|
15
18
|
/** Render image from an url */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ImageRenderer.d.ts","sourceRoot":"","sources":["../../../../src/components-react/common/ImageRenderer.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,EAAE,KAAK,EAAmD,MAAM,gBAAgB,CAAC;AAExF;;GAEG;AACH,qBAAa,aAAa;IACxB,OAAO,CAAC,WAAW;IAWnB,8BAA8B;IAC9B,OAAO,CAAC,YAAY;IAMpB,iCAAiC;IACjC,OAAO,CAAC,SAAS;
|
|
1
|
+
{"version":3,"file":"ImageRenderer.d.ts","sourceRoot":"","sources":["../../../../src/components-react/common/ImageRenderer.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,EAAE,KAAK,EAAmD,MAAM,gBAAgB,CAAC;AAExF;;GAEG;AACH,qBAAa,aAAa;IACxB,OAAO,CAAC,MAAM,CAAC,SAAS,CAAkC;IAE1D,OAAO,CAAC,WAAW;IAWnB,8BAA8B;IAC9B,OAAO,CAAC,YAAY;IAMpB,OAAO,CAAC,KAAK;IAab,OAAO,CAAC,mBAAmB;IAU3B,iCAAiC;IACjC,OAAO,CAAC,SAAS;IAajB,+BAA+B;IAC/B,OAAO,CAAC,SAAS;IAIjB,sCAAsC;IACtC,OAAO,CAAC,cAAc;IAItB,sDAAsD;IACtD,OAAO,CAAC,0BAA0B;IAIlC;;;OAGG;IACH,OAAO,CAAC,uBAAuB;IAc/B;;;OAGG;IACH,OAAO,CAAC,iBAAiB;IAKzB,yDAAyD;IAClD,MAAM,CAAC,WAAW,EAAE,KAAK,GAAG,KAAK,CAAC,SAAS;CAuBnD"}
|
|
@@ -28,9 +28,32 @@ export class ImageRenderer {
|
|
|
28
28
|
const dataAsBase64 = this.hexToBase64(data);
|
|
29
29
|
return (React.createElement("img", { src: `data:image/${format};base64,${dataAsBase64}`, alt: "" }));
|
|
30
30
|
}
|
|
31
|
+
isSvg(input) {
|
|
32
|
+
const parser = new DOMParser();
|
|
33
|
+
const doc = parser.parseFromString(input, "application/xml");
|
|
34
|
+
const errorNode = doc.querySelector("parsererror");
|
|
35
|
+
if (errorNode) {
|
|
36
|
+
return false;
|
|
37
|
+
}
|
|
38
|
+
const rootNode = doc.documentElement.nodeName.toLowerCase();
|
|
39
|
+
return "svg" === rootNode;
|
|
40
|
+
}
|
|
41
|
+
convertSvgToDataUri(svg) {
|
|
42
|
+
if (!this.isSvg(svg)) {
|
|
43
|
+
return "";
|
|
44
|
+
}
|
|
45
|
+
// eslint-disable-next-line deprecation/deprecation
|
|
46
|
+
const svgAsBase64 = btoa(svg);
|
|
47
|
+
return `data:image/svg+xml;base64,${svgAsBase64}`;
|
|
48
|
+
}
|
|
31
49
|
/** Render svg string into JSX */
|
|
32
50
|
renderSvg(svg) {
|
|
33
|
-
|
|
51
|
+
let svgAsDataUri = ImageRenderer._svgCache.get(svg);
|
|
52
|
+
if (undefined === svgAsDataUri) {
|
|
53
|
+
svgAsDataUri = this.convertSvgToDataUri(svg.trim());
|
|
54
|
+
ImageRenderer._svgCache.set(svg, svgAsDataUri);
|
|
55
|
+
}
|
|
56
|
+
const iconSpec = IconSpecUtilities.createWebComponentIconSpec(svgAsDataUri);
|
|
34
57
|
return (React.createElement("div", null,
|
|
35
58
|
React.createElement(Icon, { iconSpec: iconSpec })));
|
|
36
59
|
}
|
|
@@ -90,4 +113,5 @@ export class ImageRenderer {
|
|
|
90
113
|
}
|
|
91
114
|
}
|
|
92
115
|
}
|
|
116
|
+
ImageRenderer._svgCache = new Map();
|
|
93
117
|
//# sourceMappingURL=ImageRenderer.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ImageRenderer.js","sourceRoot":"","sources":["../../../../src/components-react/common/ImageRenderer.tsx"],"names":[],"mappings":"AAAA;;;+FAG+F;AAC/F;;GAEG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,iBAAiB,EAAE,OAAO,EAAE,MAAM,uBAAuB,CAAC;AACnE,OAAO,EAAE,IAAI,EAAE,WAAW,EAAoB,MAAM,mBAAmB,CAAC;AACxE,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAG/C;;GAEG;AACH,MAAM,OAAO,aAAa;
|
|
1
|
+
{"version":3,"file":"ImageRenderer.js","sourceRoot":"","sources":["../../../../src/components-react/common/ImageRenderer.tsx"],"names":[],"mappings":"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","sourcesContent":["/*---------------------------------------------------------------------------------------------\r\n* Copyright (c) Bentley Systems, Incorporated. All rights reserved.\r\n* See LICENSE.md in the project root for license terms and full copyright notice.\r\n*--------------------------------------------------------------------------------------------*/\r\n/** @packageDocumentation\r\n * @module Common\r\n */\r\n\r\nimport * as React from \"react\";\r\nimport { IconSpecUtilities, UiError } from \"@itwin/appui-abstract\";\r\nimport { Icon, WebFontIcon, WebFontIconProps } from \"@itwin/core-react\";\r\nimport { UiComponents } from \"../UiComponents\";\r\nimport { Image, ImageFileFormat, LoadedBinaryImage, LoadedImage } from \"./IImageLoader\";\r\n\r\n/** A class that renders images from data provided by an image loader\r\n * @internal\r\n */\r\nexport class ImageRenderer {\r\n private static _svgCache: Map<string, string> = new Map();\r\n\r\n private hexToBase64(hexstring: string) {\r\n const match = hexstring.match(/\\w{2}/g);\r\n // istanbul ignore next\r\n if (!match)\r\n return \"\";\r\n\r\n return btoa(match.map((a) => { // eslint-disable-line deprecation/deprecation\r\n return String.fromCharCode(parseInt(a, 16));\r\n }).join(\"\"));\r\n }\r\n\r\n /** Render raw binary image */\r\n private renderBinary(data: string, format: ImageFileFormat) {\r\n // Convert binary to base64\r\n const dataAsBase64 = this.hexToBase64(data);\r\n return (<img src={`data:image/${format};base64,${dataAsBase64}`} alt=\"\" />);\r\n }\r\n\r\n private isSvg(input: string): boolean {\r\n const parser = new DOMParser();\r\n const doc = parser.parseFromString(input, \"application/xml\");\r\n\r\n const errorNode = doc.querySelector(\"parsererror\");\r\n if (errorNode) {\r\n return false;\r\n }\r\n\r\n const rootNode = doc.documentElement.nodeName.toLowerCase();\r\n return \"svg\" === rootNode;\r\n }\r\n\r\n private convertSvgToDataUri(svg: string) {\r\n if (!this.isSvg(svg)) {\r\n return \"\";\r\n }\r\n\r\n // eslint-disable-next-line deprecation/deprecation\r\n const svgAsBase64 = btoa(svg);\r\n return `data:image/svg+xml;base64,${svgAsBase64}`;\r\n }\r\n\r\n /** Render svg string into JSX */\r\n private renderSvg(svg: string) {\r\n let svgAsDataUri = ImageRenderer._svgCache.get(svg);\r\n if (undefined === svgAsDataUri) {\r\n svgAsDataUri = this.convertSvgToDataUri(svg.trim());\r\n ImageRenderer._svgCache.set(svg, svgAsDataUri);\r\n }\r\n\r\n const iconSpec = IconSpecUtilities.createWebComponentIconSpec(svgAsDataUri);\r\n return (\r\n <div><Icon iconSpec={iconSpec} /></div>\r\n );\r\n }\r\n\r\n /** Render image from an url */\r\n private renderUrl(url: string) {\r\n return (<img src={url} alt=\"\" />);\r\n }\r\n\r\n /** Render image as core-react icon */\r\n private renderCoreIcon(iconName: string) {\r\n return (<WebFontIcon iconName={iconName} />);\r\n }\r\n\r\n /** Replaces the escaped instances of \"\\:\" with \":\" */\r\n private normalizeEscapedIconString(escapedIconString: string) {\r\n return escapedIconString.replace(/\\\\:/g, \":\");\r\n }\r\n\r\n /**\r\n * Extract class and name from icon name, if the name follows format \"{className}:{fontName}\".\r\n * className and fontName can be escaped using \\ if : is needed.\r\n */\r\n private extractIconClassAndName(iconName: string): Pick<WebFontIconProps, \"iconClassName\" | \"iconName\"> {\r\n const matches = iconName.match(/(\\\\.|[^:])+/g);\r\n if (!matches || matches.length !== 2)\r\n return {\r\n iconClassName: undefined,\r\n iconName,\r\n };\r\n\r\n return {\r\n iconClassName: this.normalizeEscapedIconString(matches[0]),\r\n iconName: this.normalizeEscapedIconString(matches[1]),\r\n };\r\n }\r\n\r\n /**\r\n * Render image as provided webfont icon.\r\n * Defaults to core-react icon if iconName does not contain className.\r\n */\r\n private renderWebfontIcon(iconName: string) {\r\n const iconInfo = this.extractIconClassAndName(iconName);\r\n return (<WebFontIcon {...iconInfo} />);\r\n }\r\n\r\n /** Render image from data provided by an image loader */\r\n public render(loadedImage: Image): React.ReactNode {\r\n switch (loadedImage.sourceType) {\r\n case \"binary\":\r\n const image = loadedImage as LoadedBinaryImage;\r\n return this.renderBinary(image.value, image.fileFormat);\r\n\r\n case \"url\":\r\n return this.renderUrl((loadedImage as LoadedImage).value);\r\n\r\n case \"svg\":\r\n return this.renderSvg((loadedImage as LoadedImage).value);\r\n\r\n case \"core-icon\":\r\n return this.renderCoreIcon((loadedImage as LoadedImage).value);\r\n\r\n case \"webfont-icon\":\r\n return this.renderWebfontIcon((loadedImage as LoadedImage).value);\r\n\r\n default:\r\n const unhandledSourceType: never = loadedImage.sourceType; // Compile time check that all cases are handled\r\n throw new UiError(UiComponents.loggerCategory(this), `Can't handle sourceType: \"${unhandledSourceType}\"`);\r\n }\r\n }\r\n}\r\n"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@itwin/components-react",
|
|
3
|
-
"version": "3.4.0-dev.
|
|
3
|
+
"version": "3.4.0-dev.56",
|
|
4
4
|
"description": "iTwin.js UI complex components",
|
|
5
5
|
"main": "lib/cjs/components-react.js",
|
|
6
6
|
"module": "lib/esm/components-react.js",
|
|
@@ -20,9 +20,9 @@
|
|
|
20
20
|
"url": "http://www.bentley.com"
|
|
21
21
|
},
|
|
22
22
|
"peerDependencies": {
|
|
23
|
-
"@itwin/appui-abstract": "^3.4.0-dev.
|
|
24
|
-
"@itwin/core-bentley": "^3.4.0-dev.
|
|
25
|
-
"@itwin/core-react": "^3.4.0-dev.
|
|
23
|
+
"@itwin/appui-abstract": "^3.4.0-dev.56",
|
|
24
|
+
"@itwin/core-bentley": "^3.4.0-dev.56",
|
|
25
|
+
"@itwin/core-react": "^3.4.0-dev.56",
|
|
26
26
|
"react": "^17.0.0",
|
|
27
27
|
"react-dom": "^17.0.0"
|
|
28
28
|
},
|
|
@@ -31,13 +31,13 @@
|
|
|
31
31
|
"NOTE: All tools used by scripts in this package must be listed as devDependencies"
|
|
32
32
|
],
|
|
33
33
|
"devDependencies": {
|
|
34
|
-
"@itwin/appui-abstract": "3.4.0-dev.
|
|
35
|
-
"@itwin/build-tools": "3.4.0-dev.
|
|
36
|
-
"@itwin/core-bentley": "3.4.0-dev.
|
|
37
|
-
"@itwin/core-common": "3.4.0-dev.
|
|
38
|
-
"@itwin/core-i18n": "3.4.0-dev.
|
|
39
|
-
"@itwin/core-react": "3.4.0-dev.
|
|
40
|
-
"@itwin/eslint-plugin": "3.4.0-dev.
|
|
34
|
+
"@itwin/appui-abstract": "3.4.0-dev.56",
|
|
35
|
+
"@itwin/build-tools": "3.4.0-dev.56",
|
|
36
|
+
"@itwin/core-bentley": "3.4.0-dev.56",
|
|
37
|
+
"@itwin/core-common": "3.4.0-dev.56",
|
|
38
|
+
"@itwin/core-i18n": "3.4.0-dev.56",
|
|
39
|
+
"@itwin/core-react": "3.4.0-dev.56",
|
|
40
|
+
"@itwin/eslint-plugin": "3.4.0-dev.56",
|
|
41
41
|
"@testing-library/dom": "^8.11.2",
|
|
42
42
|
"@testing-library/react": "^12.0.0",
|
|
43
43
|
"@testing-library/react-hooks": "^7.0.2",
|
|
@@ -104,7 +104,7 @@
|
|
|
104
104
|
"@itwin/itwinui-react": "~1.42.0",
|
|
105
105
|
"@types/shortid": "~0.0.29",
|
|
106
106
|
"callable-instance2": "1.0.0",
|
|
107
|
-
"classnames": "
|
|
107
|
+
"classnames": "2.3.1",
|
|
108
108
|
"eventemitter2": "^5.0.1",
|
|
109
109
|
"immer": "9.0.6",
|
|
110
110
|
"immutable": "^3.8.2",
|