@itwin/tree-widget-react 0.6.2 → 0.7.0

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.
Files changed (118) hide show
  1. package/lib/cjs/TreeWidget.js +1 -1
  2. package/lib/cjs/TreeWidget.js.map +1 -1
  3. package/lib/cjs/components/IconButton.js +3 -3
  4. package/lib/cjs/components/IconButton.js.map +1 -1
  5. package/lib/cjs/components/TreeFilteringState.js +4 -4
  6. package/lib/cjs/components/TreeFilteringState.js.map +1 -1
  7. package/lib/cjs/components/TreeWidgetComponent.d.ts +1 -1
  8. package/lib/cjs/components/TreeWidgetComponent.js +5 -5
  9. package/lib/cjs/components/TreeWidgetComponent.js.map +1 -1
  10. package/lib/cjs/components/TreeWidgetComponent.scss +1 -1
  11. package/lib/cjs/components/TreeWidgetUiItemsProvider.d.ts +4 -5
  12. package/lib/cjs/components/TreeWidgetUiItemsProvider.js +19 -14
  13. package/lib/cjs/components/TreeWidgetUiItemsProvider.js.map +1 -1
  14. package/lib/cjs/components/search-bar/SearchBar.d.ts +0 -3
  15. package/lib/cjs/components/search-bar/SearchBar.js +17 -28
  16. package/lib/cjs/components/search-bar/SearchBar.js.map +1 -1
  17. package/lib/cjs/components/search-bar/SearchBar.scss +18 -34
  18. package/lib/cjs/components/search-bar/SearchBox.js +1 -1
  19. package/lib/cjs/components/search-bar/SearchBox.js.map +1 -1
  20. package/lib/cjs/components/trees/CategoriesVisibilityUtils.d.ts +4 -5
  21. package/lib/cjs/components/trees/CategoriesVisibilityUtils.js +6 -9
  22. package/lib/cjs/components/trees/CategoriesVisibilityUtils.js.map +1 -1
  23. package/lib/cjs/components/trees/IModelContentTree.js +4 -4
  24. package/lib/cjs/components/trees/IModelContentTree.js.map +1 -1
  25. package/lib/cjs/components/trees/VisibilityTreeEventHandler.d.ts +4 -5
  26. package/lib/cjs/components/trees/VisibilityTreeEventHandler.js +17 -9
  27. package/lib/cjs/components/trees/VisibilityTreeEventHandler.js.map +1 -1
  28. package/lib/cjs/components/trees/VisibilityTreeRenderer.d.ts +4 -4
  29. package/lib/cjs/components/trees/VisibilityTreeRenderer.js +2 -2
  30. package/lib/cjs/components/trees/VisibilityTreeRenderer.js.map +1 -1
  31. package/lib/cjs/components/trees/category-tree/CategoriesTree.d.ts +9 -5
  32. package/lib/cjs/components/trees/category-tree/CategoriesTree.js +7 -8
  33. package/lib/cjs/components/trees/category-tree/CategoriesTree.js.map +1 -1
  34. package/lib/cjs/components/trees/category-tree/CategoriesTreeComponent.d.ts +7 -2
  35. package/lib/cjs/components/trees/category-tree/CategoriesTreeComponent.js +64 -31
  36. package/lib/cjs/components/trees/category-tree/CategoriesTreeComponent.js.map +1 -1
  37. package/lib/cjs/components/trees/category-tree/CategoryVisibilityHandler.d.ts +9 -9
  38. package/lib/cjs/components/trees/category-tree/CategoryVisibilityHandler.js +8 -8
  39. package/lib/cjs/components/trees/category-tree/CategoryVisibilityHandler.js.map +1 -1
  40. package/lib/cjs/components/trees/models-tree/ModelsTree.d.ts +5 -7
  41. package/lib/cjs/components/trees/models-tree/ModelsTree.js +7 -7
  42. package/lib/cjs/components/trees/models-tree/ModelsTree.js.map +1 -1
  43. package/lib/cjs/components/trees/models-tree/ModelsTreeComponent.d.ts +19 -2
  44. package/lib/cjs/components/trees/models-tree/ModelsTreeComponent.js +112 -74
  45. package/lib/cjs/components/trees/models-tree/ModelsTreeComponent.js.map +1 -1
  46. package/lib/cjs/components/trees/models-tree/ModelsVisibilityHandler.d.ts +6 -8
  47. package/lib/cjs/components/trees/models-tree/ModelsVisibilityHandler.js.map +1 -1
  48. package/lib/cjs/components/trees/spatial-tree/SpatialTreeComponent.js +9 -7
  49. package/lib/cjs/components/trees/spatial-tree/SpatialTreeComponent.js.map +1 -1
  50. package/lib/cjs/components/utils/AutoSizer.js +4 -4
  51. package/lib/cjs/components/utils/AutoSizer.js.map +1 -1
  52. package/lib/cjs/tree-widget-react.d.ts +0 -1
  53. package/lib/cjs/tree-widget-react.js +0 -1
  54. package/lib/cjs/tree-widget-react.js.map +1 -1
  55. package/lib/cjs/types.d.ts +19 -5
  56. package/lib/cjs/types.js +4 -0
  57. package/lib/cjs/types.js.map +1 -1
  58. package/lib/esm/components/TreeWidgetComponent.d.ts +1 -1
  59. package/lib/esm/components/TreeWidgetComponent.js +1 -1
  60. package/lib/esm/components/TreeWidgetComponent.js.map +1 -1
  61. package/lib/esm/components/TreeWidgetComponent.scss +1 -1
  62. package/lib/esm/components/TreeWidgetUiItemsProvider.d.ts +4 -5
  63. package/lib/esm/components/TreeWidgetUiItemsProvider.js +13 -8
  64. package/lib/esm/components/TreeWidgetUiItemsProvider.js.map +1 -1
  65. package/lib/esm/components/search-bar/SearchBar.d.ts +0 -3
  66. package/lib/esm/components/search-bar/SearchBar.js +14 -25
  67. package/lib/esm/components/search-bar/SearchBar.js.map +1 -1
  68. package/lib/esm/components/search-bar/SearchBar.scss +18 -34
  69. package/lib/esm/components/trees/CategoriesVisibilityUtils.d.ts +4 -5
  70. package/lib/esm/components/trees/CategoriesVisibilityUtils.js +4 -7
  71. package/lib/esm/components/trees/CategoriesVisibilityUtils.js.map +1 -1
  72. package/lib/esm/components/trees/VisibilityTreeEventHandler.d.ts +4 -5
  73. package/lib/esm/components/trees/VisibilityTreeEventHandler.js +13 -5
  74. package/lib/esm/components/trees/VisibilityTreeEventHandler.js.map +1 -1
  75. package/lib/esm/components/trees/VisibilityTreeRenderer.d.ts +4 -4
  76. package/lib/esm/components/trees/VisibilityTreeRenderer.js +1 -1
  77. package/lib/esm/components/trees/VisibilityTreeRenderer.js.map +1 -1
  78. package/lib/esm/components/trees/category-tree/CategoriesTree.d.ts +9 -5
  79. package/lib/esm/components/trees/category-tree/CategoriesTree.js +2 -3
  80. package/lib/esm/components/trees/category-tree/CategoriesTree.js.map +1 -1
  81. package/lib/esm/components/trees/category-tree/CategoriesTreeComponent.d.ts +7 -2
  82. package/lib/esm/components/trees/category-tree/CategoriesTreeComponent.js +63 -30
  83. package/lib/esm/components/trees/category-tree/CategoriesTreeComponent.js.map +1 -1
  84. package/lib/esm/components/trees/category-tree/CategoryVisibilityHandler.d.ts +9 -9
  85. package/lib/esm/components/trees/category-tree/CategoryVisibilityHandler.js +4 -4
  86. package/lib/esm/components/trees/category-tree/CategoryVisibilityHandler.js.map +1 -1
  87. package/lib/esm/components/trees/models-tree/ModelsTree.d.ts +5 -7
  88. package/lib/esm/components/trees/models-tree/ModelsTree.js.map +1 -1
  89. package/lib/esm/components/trees/models-tree/ModelsTreeComponent.d.ts +19 -2
  90. package/lib/esm/components/trees/models-tree/ModelsTreeComponent.js +107 -69
  91. package/lib/esm/components/trees/models-tree/ModelsTreeComponent.js.map +1 -1
  92. package/lib/esm/components/trees/models-tree/ModelsVisibilityHandler.d.ts +6 -8
  93. package/lib/esm/components/trees/models-tree/ModelsVisibilityHandler.js.map +1 -1
  94. package/lib/esm/components/trees/spatial-tree/SpatialTreeComponent.js +4 -2
  95. package/lib/esm/components/trees/spatial-tree/SpatialTreeComponent.js.map +1 -1
  96. package/lib/esm/tree-widget-react.d.ts +0 -1
  97. package/lib/esm/tree-widget-react.js +0 -1
  98. package/lib/esm/tree-widget-react.js.map +1 -1
  99. package/lib/esm/types.d.ts +19 -5
  100. package/lib/esm/types.js +4 -0
  101. package/lib/esm/types.js.map +1 -1
  102. package/package.json +32 -40
  103. package/lib/cjs/components/header/TreeHeader.d.ts +0 -15
  104. package/lib/cjs/components/header/TreeHeader.js +0 -43
  105. package/lib/cjs/components/header/TreeHeader.js.map +0 -1
  106. package/lib/cjs/components/header/TreeHeader.scss +0 -20
  107. package/lib/cjs/components/search-bar/Popup.d.ts +0 -50
  108. package/lib/cjs/components/search-bar/Popup.js +0 -246
  109. package/lib/cjs/components/search-bar/Popup.js.map +0 -1
  110. package/lib/cjs/components/search-bar/Popup.scss +0 -316
  111. package/lib/esm/components/header/TreeHeader.d.ts +0 -15
  112. package/lib/esm/components/header/TreeHeader.js +0 -20
  113. package/lib/esm/components/header/TreeHeader.js.map +0 -1
  114. package/lib/esm/components/header/TreeHeader.scss +0 -20
  115. package/lib/esm/components/search-bar/Popup.d.ts +0 -50
  116. package/lib/esm/components/search-bar/Popup.js +0 -220
  117. package/lib/esm/components/search-bar/Popup.js.map +0 -1
  118. package/lib/esm/components/search-bar/Popup.scss +0 -316
@@ -1,50 +0,0 @@
1
- import * as React from "react";
2
- import type { CommonProps } from "@itwin/core-react";
3
- import { RelativePosition } from "@itwin/appui-abstract";
4
- import "./Popup.scss";
5
- /** Properties for the [[Popup]] component */
6
- export interface PopupProps extends CommonProps {
7
- /** show or hide the box shadow */
8
- showShadow: boolean;
9
- /** show or hide the arrow */
10
- showArrow: boolean;
11
- /** indicate if the popup is shown or not */
12
- isShown: boolean;
13
- /** Direction (relative to the target) to which the popup is expanded */
14
- position: RelativePosition;
15
- /** Fixed position in the viewport */
16
- fixedPosition?: {
17
- top: number;
18
- left: number;
19
- };
20
- /** target element */
21
- context: HTMLElement | null;
22
- /** Function called when the popup is opened */
23
- onOpen?: () => void;
24
- /** Function called when the popup is closed */
25
- onClose?: () => void;
26
- }
27
- interface PopupState {
28
- isShown: boolean;
29
- position: RelativePosition;
30
- }
31
- /** Popup React component */
32
- export declare class Popup extends React.Component<PopupProps, PopupState> {
33
- private _popupRef;
34
- private _targetElement?;
35
- constructor(props: PopupProps, context?: any);
36
- static defaultProps: Partial<PopupProps>;
37
- componentDidMount(): void;
38
- componentDidUpdate(previousProps: PopupProps): void;
39
- componentWillUnmount(): void;
40
- private _onBodyClick;
41
- private _onEsc;
42
- private _onShow;
43
- private _onClose;
44
- private _getContext;
45
- private getPositionClassName;
46
- private getPositionWithinViewport;
47
- render(): JSX.Element;
48
- }
49
- export {};
50
- //# sourceMappingURL=Popup.d.ts.map
@@ -1,246 +0,0 @@
1
- "use strict";
2
- /*---------------------------------------------------------------------------------------------
3
- * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
4
- * See LICENSE.md in the project root for license terms and full copyright notice.
5
- *--------------------------------------------------------------------------------------------*/
6
- var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
7
- if (k2 === undefined) k2 = k;
8
- Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
9
- }) : (function(o, m, k, k2) {
10
- if (k2 === undefined) k2 = k;
11
- o[k2] = m[k];
12
- }));
13
- var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
14
- Object.defineProperty(o, "default", { enumerable: true, value: v });
15
- }) : function(o, v) {
16
- o["default"] = v;
17
- });
18
- var __importStar = (this && this.__importStar) || function (mod) {
19
- if (mod && mod.__esModule) return mod;
20
- var result = {};
21
- if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
22
- __setModuleDefault(result, mod);
23
- return result;
24
- };
25
- var __importDefault = (this && this.__importDefault) || function (mod) {
26
- return (mod && mod.__esModule) ? mod : { "default": mod };
27
- };
28
- Object.defineProperty(exports, "__esModule", { value: true });
29
- exports.Popup = void 0;
30
- const React = __importStar(require("react"));
31
- const classnames_1 = __importDefault(require("classnames"));
32
- const appui_abstract_1 = require("@itwin/appui-abstract");
33
- require("./Popup.scss");
34
- /** Popup React component */
35
- class Popup extends React.Component {
36
- constructor(props, context) {
37
- super(props, context);
38
- this._popupRef = React.createRef();
39
- this._onBodyClick = (event) => {
40
- const context = this._getContext();
41
- // Ignore clicks on the popover or button
42
- if (context === event.target) {
43
- return;
44
- }
45
- if (context && context.contains(event.target)) {
46
- return;
47
- }
48
- if (this._popupRef.current &&
49
- (this._popupRef.current === event.target ||
50
- this._popupRef.current.contains(event.target))) {
51
- return;
52
- }
53
- this._onClose();
54
- };
55
- this._onEsc = (event) => {
56
- // Esc key
57
- if (event.key === "Escape") {
58
- this._onClose();
59
- }
60
- };
61
- this._getContext = () => this.props.context || this._targetElement;
62
- this.state = { isShown: this.props.isShown, position: this.props.position };
63
- }
64
- componentDidMount() {
65
- const popupElement = this._popupRef.current;
66
- if (popupElement && popupElement.parentElement) {
67
- this._targetElement = popupElement.parentElement;
68
- }
69
- }
70
- componentDidUpdate(previousProps) {
71
- if (this.props.isShown === previousProps.isShown)
72
- return;
73
- if (this.props.isShown) {
74
- this._onShow();
75
- }
76
- else {
77
- this._onClose();
78
- }
79
- }
80
- componentWillUnmount() {
81
- document.body.removeEventListener("click", this._onBodyClick, false);
82
- document.body.removeEventListener("keydown", this._onEsc, false);
83
- }
84
- _onShow() {
85
- if (this.state.isShown) {
86
- return;
87
- }
88
- document.addEventListener("click", this._onBodyClick, true);
89
- document.addEventListener("keydown", this._onEsc, true);
90
- const newPosition = this.getPositionWithinViewport();
91
- this.setState({ position: newPosition, isShown: true }, () => {
92
- if (this.props.onOpen)
93
- this.props.onOpen();
94
- });
95
- }
96
- _onClose() {
97
- if (!this.state.isShown) {
98
- return;
99
- }
100
- document.removeEventListener("click", this._onBodyClick, true);
101
- document.removeEventListener("keydown", this._onEsc, true);
102
- // eslint-disable-next-line @itwin/react-set-state-usage
103
- this.setState({ isShown: false, position: this.props.position }, () => {
104
- if (this.props.onClose)
105
- this.props.onClose();
106
- });
107
- }
108
- getPositionClassName(position) {
109
- switch (position) {
110
- case appui_abstract_1.RelativePosition.TopLeft:
111
- return classnames_1.default("tree-widget-search-popup-top-left");
112
- case appui_abstract_1.RelativePosition.TopRight:
113
- return classnames_1.default("tree-widget-search-popup-top-right");
114
- case appui_abstract_1.RelativePosition.BottomLeft:
115
- return classnames_1.default("tree-widget-search-popup-bottom-left");
116
- case appui_abstract_1.RelativePosition.BottomRight:
117
- return classnames_1.default("tree-widget-search-popup-bottom-right");
118
- case appui_abstract_1.RelativePosition.Top:
119
- return classnames_1.default("tree-widget-search-popup-top");
120
- case appui_abstract_1.RelativePosition.Left:
121
- return classnames_1.default("tree-widget-search-popup-left");
122
- case appui_abstract_1.RelativePosition.Right:
123
- return classnames_1.default("tree-widget-search-popup-right");
124
- default:
125
- return classnames_1.default("tree-widget-search-popup-bottom");
126
- }
127
- }
128
- getPositionWithinViewport() {
129
- const popupElement = this._popupRef.current;
130
- if (!popupElement || !this._targetElement)
131
- return this.props.position;
132
- // Note: Cannot use DOMRect yet since it's experimental and not available in all browsers (Nov. 2018)
133
- const viewportRect = {
134
- left: window.scrollX,
135
- top: window.scrollY,
136
- right: window.scrollX + window.innerWidth,
137
- bottom: window.scrollY + window.innerHeight,
138
- };
139
- const targetRect = this._targetElement.getBoundingClientRect();
140
- const popupRect = popupElement.getBoundingClientRect();
141
- const containerStyle = window.getComputedStyle(this._targetElement);
142
- const offset = this.props.showArrow ? 12 : 4;
143
- switch (this.props.position) {
144
- case appui_abstract_1.RelativePosition.BottomRight: {
145
- const bottomMargin = containerStyle.marginBottom
146
- ? parseFloat(containerStyle.marginBottom)
147
- : 0;
148
- if (targetRect.bottom + popupRect.height + bottomMargin + offset >
149
- viewportRect.bottom) {
150
- return appui_abstract_1.RelativePosition.TopRight;
151
- }
152
- break;
153
- }
154
- case appui_abstract_1.RelativePosition.TopRight: {
155
- const topMargin = containerStyle.marginTop
156
- ? parseFloat(containerStyle.marginTop)
157
- : 0;
158
- if (targetRect.top - popupRect.height - topMargin - offset <
159
- viewportRect.top) {
160
- return appui_abstract_1.RelativePosition.BottomRight;
161
- }
162
- break;
163
- }
164
- case appui_abstract_1.RelativePosition.TopLeft: {
165
- const topMargin = containerStyle.marginTop
166
- ? parseFloat(containerStyle.marginTop)
167
- : 0;
168
- if (targetRect.top - popupRect.height - topMargin - offset <
169
- viewportRect.top) {
170
- return appui_abstract_1.RelativePosition.BottomLeft;
171
- }
172
- break;
173
- }
174
- case appui_abstract_1.RelativePosition.BottomLeft: {
175
- const bottomMargin = containerStyle.marginBottom
176
- ? parseFloat(containerStyle.marginBottom)
177
- : 0;
178
- if (targetRect.bottom + popupRect.height + bottomMargin + offset >
179
- viewportRect.bottom) {
180
- return appui_abstract_1.RelativePosition.TopLeft;
181
- }
182
- break;
183
- }
184
- case appui_abstract_1.RelativePosition.Bottom: {
185
- const bottomMargin = containerStyle.marginBottom
186
- ? parseFloat(containerStyle.marginBottom)
187
- : 0;
188
- if (targetRect.bottom + popupRect.height + bottomMargin + offset >
189
- viewportRect.bottom) {
190
- return appui_abstract_1.RelativePosition.Top;
191
- }
192
- break;
193
- }
194
- case appui_abstract_1.RelativePosition.Top: {
195
- const topMargin = containerStyle.marginTop
196
- ? parseFloat(containerStyle.marginTop)
197
- : 0;
198
- if (targetRect.top - popupRect.height - topMargin - offset <
199
- viewportRect.top) {
200
- return appui_abstract_1.RelativePosition.Bottom;
201
- }
202
- break;
203
- }
204
- case appui_abstract_1.RelativePosition.Left: {
205
- const leftMargin = containerStyle.marginLeft
206
- ? parseFloat(containerStyle.marginLeft)
207
- : 0;
208
- if (targetRect.left - popupRect.width - leftMargin - offset <
209
- viewportRect.left) {
210
- return appui_abstract_1.RelativePosition.Right;
211
- }
212
- break;
213
- }
214
- case appui_abstract_1.RelativePosition.Right: {
215
- const rightMargin = containerStyle.marginRight
216
- ? parseFloat(containerStyle.marginRight)
217
- : 0;
218
- if (targetRect.right + popupRect.width + rightMargin + offset >
219
- viewportRect.right) {
220
- return appui_abstract_1.RelativePosition.Left;
221
- }
222
- break;
223
- }
224
- }
225
- return this.props.position;
226
- }
227
- render() {
228
- const className = classnames_1.default("tree-widget-search-popup", this.getPositionClassName(this.state.position), this.props.showShadow && "tree-widget-search-popup-shadow", this.state.isShown && "visible", this.props.showArrow && "arrow", this.props.className);
229
- let style;
230
- if (this.props.fixedPosition) {
231
- style = {
232
- top: this.props.fixedPosition.top,
233
- left: this.props.fixedPosition.left,
234
- position: "fixed",
235
- };
236
- }
237
- return (React.createElement("div", { style: style, className: className, ref: this._popupRef }, this.props.children));
238
- }
239
- }
240
- exports.Popup = Popup;
241
- Popup.defaultProps = {
242
- position: appui_abstract_1.RelativePosition.Bottom,
243
- showShadow: true,
244
- showArrow: false,
245
- };
246
- //# sourceMappingURL=Popup.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"Popup.js","sourceRoot":"","sources":["../../../../src/components/search-bar/Popup.tsx"],"names":[],"mappings":"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","sourcesContent":["/*---------------------------------------------------------------------------------------------\n* Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n* See LICENSE.md in the project root for license terms and full copyright notice.\n*--------------------------------------------------------------------------------------------*/\n\nimport * as React from \"react\";\nimport classnames from \"classnames\";\nimport type { CommonProps } from \"@itwin/core-react\";\nimport { RelativePosition } from \"@itwin/appui-abstract\";\nimport \"./Popup.scss\";\n\n/** Properties for the [[Popup]] component */\nexport interface PopupProps extends CommonProps {\n /** show or hide the box shadow */\n showShadow: boolean;\n /** show or hide the arrow */\n showArrow: boolean;\n /** indicate if the popup is shown or not */\n isShown: boolean;\n /** Direction (relative to the target) to which the popup is expanded */\n position: RelativePosition;\n /** Fixed position in the viewport */\n fixedPosition?: { top: number, left: number };\n /** target element */\n context: HTMLElement | null;\n /** Function called when the popup is opened */\n onOpen?: () => void;\n /** Function called when the popup is closed */\n onClose?: () => void;\n}\n\ninterface PopupState {\n isShown: boolean;\n position: RelativePosition;\n}\n\ninterface Rect {\n left: number;\n top: number;\n right: number;\n bottom: number;\n}\n\n/** Popup React component */\nexport class Popup extends React.Component<PopupProps, PopupState> {\n private _popupRef = React.createRef<HTMLDivElement>();\n private _targetElement?: HTMLElement; // target element owning the popup\n\n constructor(props: PopupProps, context?: any) {\n super(props, context);\n\n this.state = { isShown: this.props.isShown, position: this.props.position };\n }\n\n public static defaultProps: Partial<PopupProps> = {\n position: RelativePosition.Bottom,\n showShadow: true,\n showArrow: false,\n };\n\n public componentDidMount() {\n const popupElement = this._popupRef.current;\n if (popupElement && popupElement.parentElement) {\n this._targetElement = popupElement.parentElement;\n }\n }\n\n public componentDidUpdate(previousProps: PopupProps) {\n if (this.props.isShown === previousProps.isShown) return;\n\n if (this.props.isShown) {\n this._onShow();\n } else {\n this._onClose();\n }\n }\n\n public componentWillUnmount() {\n document.body.removeEventListener(\"click\", this._onBodyClick, false);\n document.body.removeEventListener(\"keydown\", this._onEsc, false);\n }\n\n private _onBodyClick = (event: MouseEvent): void => {\n const context = this._getContext();\n\n // Ignore clicks on the popover or button\n if (context === event.target) {\n return;\n }\n\n if (context && context.contains(event.target as Node)) {\n return;\n }\n\n if (\n this._popupRef.current &&\n (this._popupRef.current === event.target ||\n this._popupRef.current.contains(event.target as Node))\n ) {\n return;\n }\n\n this._onClose();\n };\n\n private _onEsc = (event: KeyboardEvent): void => {\n // Esc key\n if (event.key === \"Escape\") {\n this._onClose();\n }\n };\n\n private _onShow() {\n if (this.state.isShown) {\n return;\n }\n\n document.addEventListener(\"click\", this._onBodyClick, true);\n document.addEventListener(\"keydown\", this._onEsc, true);\n\n const newPosition = this.getPositionWithinViewport();\n this.setState({ position: newPosition, isShown: true }, () => {\n if (this.props.onOpen) this.props.onOpen();\n });\n }\n\n private _onClose() {\n if (!this.state.isShown) {\n return;\n }\n\n document.removeEventListener(\"click\", this._onBodyClick, true);\n document.removeEventListener(\"keydown\", this._onEsc, true);\n\n // eslint-disable-next-line @itwin/react-set-state-usage\n this.setState({ isShown: false, position: this.props.position }, () => {\n if (this.props.onClose) this.props.onClose();\n });\n }\n\n private _getContext = () => this.props.context || this._targetElement;\n\n private getPositionClassName(position: RelativePosition): string {\n switch (position) {\n case RelativePosition.TopLeft:\n return classnames(\"tree-widget-search-popup-top-left\");\n case RelativePosition.TopRight:\n return classnames(\"tree-widget-search-popup-top-right\");\n case RelativePosition.BottomLeft:\n return classnames(\"tree-widget-search-popup-bottom-left\");\n case RelativePosition.BottomRight:\n return classnames(\"tree-widget-search-popup-bottom-right\");\n case RelativePosition.Top:\n return classnames(\"tree-widget-search-popup-top\");\n case RelativePosition.Left:\n return classnames(\"tree-widget-search-popup-left\");\n case RelativePosition.Right:\n return classnames(\"tree-widget-search-popup-right\");\n default:\n return classnames(\"tree-widget-search-popup-bottom\");\n }\n }\n\n private getPositionWithinViewport(): RelativePosition {\n const popupElement = this._popupRef.current;\n\n if (!popupElement || !this._targetElement) return this.props.position;\n // Note: Cannot use DOMRect yet since it's experimental and not available in all browsers (Nov. 2018)\n const viewportRect: Rect = {\n left: window.scrollX,\n top: window.scrollY,\n right: window.scrollX + window.innerWidth,\n bottom: window.scrollY + window.innerHeight,\n };\n const targetRect = this._targetElement.getBoundingClientRect();\n const popupRect = popupElement.getBoundingClientRect();\n const containerStyle = window.getComputedStyle(this._targetElement);\n const offset = this.props.showArrow ? 12 : 4;\n\n switch (this.props.position) {\n case RelativePosition.BottomRight: {\n const bottomMargin = containerStyle.marginBottom\n ? parseFloat(containerStyle.marginBottom)\n : 0;\n if (\n targetRect.bottom + popupRect.height + bottomMargin + offset >\n viewportRect.bottom\n ) {\n return RelativePosition.TopRight;\n }\n break;\n }\n\n case RelativePosition.TopRight: {\n const topMargin = containerStyle.marginTop\n ? parseFloat(containerStyle.marginTop)\n : 0;\n if (\n targetRect.top - popupRect.height - topMargin - offset <\n viewportRect.top\n ) {\n return RelativePosition.BottomRight;\n }\n break;\n }\n\n case RelativePosition.TopLeft: {\n const topMargin = containerStyle.marginTop\n ? parseFloat(containerStyle.marginTop)\n : 0;\n if (\n targetRect.top - popupRect.height - topMargin - offset <\n viewportRect.top\n ) {\n return RelativePosition.BottomLeft;\n }\n break;\n }\n\n case RelativePosition.BottomLeft: {\n const bottomMargin = containerStyle.marginBottom\n ? parseFloat(containerStyle.marginBottom)\n : 0;\n if (\n targetRect.bottom + popupRect.height + bottomMargin + offset >\n viewportRect.bottom\n ) {\n return RelativePosition.TopLeft;\n }\n break;\n }\n\n case RelativePosition.Bottom: {\n const bottomMargin = containerStyle.marginBottom\n ? parseFloat(containerStyle.marginBottom)\n : 0;\n if (\n targetRect.bottom + popupRect.height + bottomMargin + offset >\n viewportRect.bottom\n ) {\n return RelativePosition.Top;\n }\n break;\n }\n\n case RelativePosition.Top: {\n const topMargin = containerStyle.marginTop\n ? parseFloat(containerStyle.marginTop)\n : 0;\n if (\n targetRect.top - popupRect.height - topMargin - offset <\n viewportRect.top\n ) {\n return RelativePosition.Bottom;\n }\n break;\n }\n\n case RelativePosition.Left: {\n const leftMargin = containerStyle.marginLeft\n ? parseFloat(containerStyle.marginLeft)\n : 0;\n if (\n targetRect.left - popupRect.width - leftMargin - offset <\n viewportRect.left\n ) {\n return RelativePosition.Right;\n }\n break;\n }\n\n case RelativePosition.Right: {\n const rightMargin = containerStyle.marginRight\n ? parseFloat(containerStyle.marginRight)\n : 0;\n if (\n targetRect.right + popupRect.width + rightMargin + offset >\n viewportRect.right\n ) {\n return RelativePosition.Left;\n }\n break;\n }\n }\n\n return this.props.position;\n }\n\n public render(): JSX.Element {\n const className = classnames(\n \"tree-widget-search-popup\",\n this.getPositionClassName(this.state.position),\n this.props.showShadow && \"tree-widget-search-popup-shadow\",\n this.state.isShown && \"visible\",\n this.props.showArrow && \"arrow\",\n this.props.className\n );\n\n let style: React.CSSProperties | undefined;\n if (this.props.fixedPosition) {\n style = {\n top: this.props.fixedPosition.top,\n left: this.props.fixedPosition.left,\n position: \"fixed\",\n };\n }\n\n return (\n <div style={style} className={className} ref={this._popupRef}>\n {this.props.children}\n </div>\n );\n }\n}\n"]}
@@ -1,316 +0,0 @@
1
- /*---------------------------------------------------------------------------------------------
2
- * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
3
- * See LICENSE.md in the project root for license terms and full copyright notice.
4
- *--------------------------------------------------------------------------------------------*/
5
- @import "~@itwin/core-react/lib/cjs/core-react/index";
6
-
7
- .tree-widget-search-popup {
8
- display: block;
9
- box-sizing: border-box;
10
- position: absolute;
11
- // border-radius: 4px;
12
- background: $buic-background-1;
13
- border: 1px solid $buic-background-panel-stroke;
14
- visibility: hidden;
15
- z-index: 100;
16
- animation-duration: 250ms;
17
- animation-timing-function: ease;
18
- animation-fill-mode: forwards;
19
- }
20
-
21
- .tree-widget-search-popup.arrow::after,
22
- .tree-widget-search-popup.arrow::before {
23
- border: solid transparent;
24
- content: " ";
25
- height: 0;
26
- width: 0;
27
- position: absolute;
28
- pointer-events: none;
29
- }
30
-
31
- .tree-widget-search-popup.tree-widget-search-popup-bottom-left.arrow::after,
32
- .tree-widget-search-popup.tree-widget-search-popup-bottom-left.arrow::before {
33
- bottom: 100%;
34
- left: 25%;
35
- }
36
-
37
- .tree-widget-search-popup.tree-widget-search-popup-bottom-right.arrow::after,
38
- .tree-widget-search-popup.tree-widget-search-popup-bottom-right.arrow::before {
39
- bottom: 100%;
40
- left: 75%;
41
- }
42
-
43
- .tree-widget-search-popup.tree-widget-search-popup-bottom.arrow::after,
44
- .tree-widget-search-popup.tree-widget-search-popup-bottom.arrow::before {
45
- bottom: 100%;
46
- left: 50%;
47
- }
48
-
49
- .tree-widget-search-popup.tree-widget-search-popup-top.arrow::after,
50
- .tree-widget-search-popup.tree-widget-search-popup-top.arrow::before {
51
- top: 100%;
52
- left: 50%;
53
- }
54
-
55
- .tree-widget-search-popup.tree-widget-search-popup-top-left.arrow::after,
56
- .tree-widget-search-popup.tree-widget-search-popup-top-left.arrow::before {
57
- top: 100%;
58
- left: 25%;
59
- }
60
-
61
- .tree-widget-search-popup.tree-widget-search-popup-top-right.arrow::after,
62
- .tree-widget-search-popup.tree-widget-search-popup-top-right.arrow::before {
63
- top: 100%;
64
- left: 75%;
65
- }
66
-
67
- .tree-widget-search-popup.tree-widget-search-popup-left.arrow::after,
68
- .tree-widget-search-popup.tree-widget-search-popup-left.arrow::before {
69
- top: 50%;
70
- left: 100%;
71
- }
72
-
73
- .tree-widget-search-popup.tree-widget-search-popup-right.arrow::after,
74
- .tree-widget-search-popup.tree-widget-search-popup-right.arrow::before {
75
- top: 50%;
76
- right: 100%;
77
- }
78
-
79
- .tree-widget-search-popup.tree-widget-search-popup-bottom.arrow::before,
80
- .tree-widget-search-popup.tree-widget-search-popup-bottom-left.arrow::before,
81
- .tree-widget-search-popup.tree-widget-search-popup-bottom-right.arrow::before {
82
- border-bottom-color: inherit;
83
- border-width: 9px;
84
- margin-left: -9px;
85
- }
86
-
87
- .tree-widget-search-popup.tree-widget-search-popup-top.arrow::before,
88
- .tree-widget-search-popup.tree-widget-search-popup-top-left.arrow::before,
89
- .tree-widget-search-popup.tree-widget-search-popup-top-right.arrow::before {
90
- border-top-color: inherit;
91
- border-width: 9px;
92
- margin-left: -9px;
93
- }
94
-
95
- .tree-widget-search-popup.tree-widget-search-popup-left.arrow::before {
96
- border-left-color: inherit;
97
- border-width: 9px;
98
- margin-top: -9px;
99
- }
100
-
101
- .tree-widget-search-popup.tree-widget-search-popup-right.arrow::before {
102
- border-right-color: inherit;
103
- border-width: 9px;
104
- margin-top: -9px;
105
- }
106
-
107
- .tree-widget-search-popup.tree-widget-search-popup-bottom.arrow::after,
108
- .tree-widget-search-popup.tree-widget-search-popup-bottom-left.arrow::after,
109
- .tree-widget-search-popup.tree-widget-search-popup-bottom-right.arrow::after {
110
- border-bottom-color: currentColor;
111
- border-width: 8px;
112
- margin-left: -8px;
113
- }
114
-
115
- .tree-widget-search-popup.tree-widget-search-popup-top.arrow::after,
116
- .tree-widget-search-popup.tree-widget-search-popup-top-left.arrow::after,
117
- .tree-widget-search-popup.tree-widget-search-popup-top-right.arrow::after {
118
- border-top-color: currentColor;
119
- border-width: 8px;
120
- margin-left: -8px;
121
- }
122
-
123
- .tree-widget-search-popup.tree-widget-search-popup-left.arrow::after {
124
- border-left-color: currentColor;
125
- border-width: 8px;
126
- margin-top: -8px;
127
- }
128
-
129
- .tree-widget-search-popup.tree-widget-search-popup-right.arrow::after {
130
- border-right-color: currentColor;
131
- border-width: 8px;
132
- margin-top: -8px;
133
- }
134
-
135
- .tree-widget-search-popup-top-left {
136
- top: -4px;
137
- left: 0;
138
- transform: translateY(-100%);
139
- transform-origin: left bottom 0;
140
- }
141
-
142
- .tree-widget-search-popup.tree-widget-search-popup-top-left.visible {
143
- animation-name: dr-animate-top-corner;
144
- }
145
-
146
- .tree-widget-search-popup-top {
147
- top: -4px;
148
- left: 50%;
149
- transform: translate(-50%, -100%);
150
- transform-origin: bottom;
151
- }
152
-
153
- .tree-widget-search-popup.tree-widget-search-popup-top.visible {
154
- animation-name: dr-animate-top;
155
- }
156
-
157
- .tree-widget-search-popup-top-right {
158
- top: -4px;
159
- right: 0;
160
- transform: translateY(-100%);
161
- transform-origin: right bottom 0;
162
- }
163
-
164
- .tree-widget-search-popup.tree-widget-search-popup-top-right.visible {
165
- animation-name: dr-animate-top-corner;
166
- }
167
-
168
- .tree-widget-search-popup-bottom-left {
169
- top: calc(100% + 0px);
170
- left: 0;
171
- transform-origin: left top 0;
172
- }
173
-
174
- .tree-widget-search-popup.tree-widget-search-popup-bottom-left.visible {
175
- animation-name: dr-animate-bottom-corner;
176
- }
177
-
178
- .tree-widget-search-popup-bottom {
179
- top: calc(100% + 4px);
180
- left: 50%;
181
- transform: translateX(-50%);
182
- transform-origin: top;
183
- }
184
-
185
- .tree-widget-search-popup.tree-widget-search-popup-bottom.visible {
186
- animation-name: dr-animate-bottom;
187
- }
188
-
189
- .tree-widget-search-popup-bottom-right {
190
- top: calc(100% + 4px);
191
- right: 0;
192
- transform-origin: right top 0;
193
- }
194
-
195
- .tree-widget-search-popup.tree-widget-search-popup-bottom-right.visible {
196
- animation-name: dr-animate-bottom-corner;
197
- }
198
-
199
- .tree-widget-search-popup-left {
200
- left: -4px;
201
- top: 50%;
202
- transform: translate(-100%, -50%);
203
- transform-origin: right;
204
- }
205
-
206
- .tree-widget-search-popup.popup-left.visible {
207
- animation-name: dr-animate-left;
208
- }
209
-
210
- .tree-widget-search-popup-right {
211
- right: -4px;
212
- top: 50%;
213
- transform: translate(100%, -50%);
214
- transform-origin: left;
215
- }
216
-
217
- .tree-widget-search-popup.popup-right.visible {
218
- animation-name: dr-animate-right;
219
- }
220
-
221
- .tree-widget-search-popup.popup-bottom-left.arrow,
222
- .tree-widget-search-popup.popup-bottom.arrow,
223
- .tree-widget-search-popup.popup-bottom-right.arrow {
224
- top: calc(100% + 12px);
225
- }
226
-
227
- .tree-widget-search-popup.popup-top.arrow,
228
- .tree-widget-search-popup.popup-top-left.arrow,
229
- .tree-widget-search-popup.popup-top-right.arrow {
230
- top: -12px;
231
- }
232
-
233
- .tree-widget-search-popup.popup-left.arrow {
234
- left: -12px;
235
- }
236
-
237
- .tree-widget-search-popup.popup-right.arrow {
238
- right: -12px;
239
- }
240
-
241
- .tree-widget-search-popup-shadow {
242
- box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25);
243
- background-clip: padding-box;
244
- }
245
-
246
- @keyframes dr-animate-bottom {
247
- from {
248
- visibility: hidden;
249
- transform: translateX(-50%) scale(1, 0);
250
- }
251
-
252
- to {
253
- visibility: visible;
254
- transform: translateX(-50%) scale(1);
255
- }
256
- }
257
-
258
- @keyframes dr-animate-top {
259
- from {
260
- visibility: hidden;
261
- transform: translate(-50%, -100%) scale(1, 0);
262
- }
263
-
264
- to {
265
- visibility: visible;
266
- transform: translate(-50%, -100%) scale(1);
267
- }
268
- }
269
-
270
- @keyframes dr-animate-top-corner {
271
- from {
272
- visibility: hidden;
273
- transform: translateY(-100%) scale(0);
274
- }
275
-
276
- to {
277
- visibility: visible;
278
- transform: translateY(-100%) scale(1);
279
- }
280
- }
281
-
282
- @keyframes dr-animate-bottom-corner {
283
- from {
284
- visibility: hidden;
285
- transform: scale(0);
286
- }
287
-
288
- to {
289
- visibility: visible;
290
- transform: scale(1);
291
- }
292
- }
293
-
294
- @keyframes dr-animate-left {
295
- from {
296
- visibility: hidden;
297
- transform: translate(-100%, -50%) scale(0, 1);
298
- }
299
-
300
- to {
301
- visibility: visible;
302
- transform: translate(-100%, -50%) scale(1);
303
- }
304
- }
305
-
306
- @keyframes dr-animate-right {
307
- from {
308
- visibility: hidden;
309
- transform: translate(100%, -50%) scale(0, 1);
310
- }
311
-
312
- to {
313
- visibility: visible;
314
- transform: translate(100%, -50%) scale(1);
315
- }
316
- }
@@ -1,15 +0,0 @@
1
- /// <reference types="react" />
2
- import type { SearchOptions } from "../TreeFilteringState";
3
- import "./TreeHeader.scss";
4
- export interface TreeHeaderComponentProps {
5
- showAll?: () => void;
6
- hideAll?: () => void;
7
- invert?: () => void;
8
- toggle2D?: () => void;
9
- toggle2DIcon?: string;
10
- toggle3D?: () => void;
11
- toggle3DIcon?: string;
12
- searchOptions: SearchOptions;
13
- }
14
- export declare function TreeHeaderComponent({ searchOptions, showAll, hideAll, invert, toggle2D, toggle2DIcon, toggle3D, toggle3DIcon, }: TreeHeaderComponentProps): JSX.Element;
15
- //# sourceMappingURL=TreeHeader.d.ts.map
@@ -1,20 +0,0 @@
1
- /*---------------------------------------------------------------------------------------------
2
- * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
3
- * See LICENSE.md in the project root for license terms and full copyright notice.
4
- *--------------------------------------------------------------------------------------------*/
5
- import * as React from "react";
6
- import { IconButton } from "../IconButton";
7
- import { SearchBar } from "../search-bar/SearchBar";
8
- import { TreeWidget } from "../../TreeWidget";
9
- import "./TreeHeader.scss";
10
- export function TreeHeaderComponent({ searchOptions, showAll, hideAll, invert, toggle2D, toggle2DIcon, toggle3D, toggle3DIcon, }) {
11
- var _a;
12
- return (React.createElement(SearchBar, { value: "", className: "tree-widget-header-tree-search-bar", valueChangedDelay: 500, placeholder: TreeWidget.translate("search"), title: TreeWidget.translate("searchForSomething"), filteringInProgress: searchOptions.isFiltering, onFilterCancel: searchOptions.onFilterCancel, onFilterClear: searchOptions.onFilterCancel, onFilterStart: searchOptions.onFilterStart, onSelectedChanged: searchOptions.onResultSelectedChanged, resultCount: (_a = searchOptions.matchedResultCount) !== null && _a !== void 0 ? _a : 0 },
13
- React.createElement("div", { className: "tree-widget-search-bar-button-container" },
14
- showAll && (React.createElement(IconButton, { className: "tree-widget-header-tree-toolbar-icon", key: "show-all-btn", icon: "icon-visibility", title: TreeWidget.translate("showAll"), onClick: showAll })),
15
- hideAll && (React.createElement(IconButton, { className: "tree-widget-header-tree-toolbar-icon", key: "hide-all-btn", icon: "icon-visibility-hide-2", title: TreeWidget.translate("hideAll"), onClick: hideAll })),
16
- invert && (React.createElement(IconButton, { key: "invert-all-btn", className: "tree-widget-header-tree-toolbar-icon", title: TreeWidget.translate("invert"), icon: "icon-visibility-invert", onClick: invert })),
17
- toggle2D && toggle2DIcon && (React.createElement(IconButton, { className: "tree-widget-header-tree-toolbar-icon", key: "view-2d-btn", icon: toggle2DIcon, title: TreeWidget.translate("toggle2DViews"), onClick: toggle2D, label: TreeWidget.translate("label2D") })),
18
- toggle3D && toggle3DIcon && (React.createElement(IconButton, { className: "tree-widget-header-tree-toolbar-icon", key: "view-3d-btn", icon: toggle3DIcon, title: TreeWidget.translate("toggle3DViews"), onClick: toggle3D, label: TreeWidget.translate("label3D") })))));
19
- }
20
- //# sourceMappingURL=TreeHeader.js.map