@itwin/core-react 4.2.1 → 4.3.0-dev.1
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/CHANGELOG.md +1 -6
- package/lib/cjs/core-react/_geometry.scss +3 -3
- package/lib/cjs/core-react/_math.scss +3 -3
- package/lib/cjs/core-react/_typography.scss +3 -3
- package/lib/cjs/core-react/autosuggest/AutoSuggest.scss +3 -3
- package/lib/cjs/core-react/badge/Badge.scss +3 -3
- package/lib/cjs/core-react/badge/NewBadge.scss +3 -3
- package/lib/cjs/core-react/base/Gap.js +1 -1
- package/lib/cjs/core-react/base/Gap.js.map +1 -1
- package/lib/cjs/core-react/base/base.scss +3 -3
- package/lib/cjs/core-react/base/index.scss +3 -3
- package/lib/cjs/core-react/classes.scss +3 -3
- package/lib/cjs/core-react/colorthemes.scss +3 -3
- package/lib/cjs/core-react/colorvariables.scss +3 -3
- package/lib/cjs/core-react/contextmenu/ContextMenu.js +1 -2
- package/lib/cjs/core-react/contextmenu/ContextMenu.js.map +1 -1
- package/lib/cjs/core-react/contextmenu/ContextMenu.scss +3 -3
- package/lib/cjs/core-react/contextmenu/GlobalContextMenu.js +3 -5
- package/lib/cjs/core-react/contextmenu/GlobalContextMenu.js.map +1 -1
- package/lib/cjs/core-react/dialog/Dialog.d.ts +3 -10
- package/lib/cjs/core-react/dialog/Dialog.d.ts.map +1 -1
- package/lib/cjs/core-react/dialog/Dialog.js +70 -168
- package/lib/cjs/core-react/dialog/Dialog.js.map +1 -1
- package/lib/cjs/core-react/dialog/Dialog.scss +59 -217
- package/lib/cjs/core-react/dialog/GlobalDialog.js +1 -2
- package/lib/cjs/core-react/dialog/GlobalDialog.js.map +1 -1
- package/lib/cjs/core-react/elementseparator/ElementSeparator.js +2 -2
- package/lib/cjs/core-react/elementseparator/ElementSeparator.js.map +1 -1
- package/lib/cjs/core-react/expandable/index.scss +3 -3
- package/lib/cjs/core-react/expandable/list.scss +3 -3
- package/lib/cjs/core-react/hocs/withOnOutsideClick.js +1 -2
- package/lib/cjs/core-react/hocs/withOnOutsideClick.js.map +1 -1
- package/lib/cjs/core-react/icons/IconComponent.js +1 -1
- package/lib/cjs/core-react/icons/IconComponent.js.map +1 -1
- package/lib/cjs/core-react/icons/SvgPath.scss +3 -3
- package/lib/cjs/core-react/icons/WebFontIcon.scss +3 -3
- package/lib/cjs/core-react/icons/index.scss +3 -3
- package/lib/cjs/core-react/icons/mixins.scss +3 -3
- package/lib/cjs/core-react/icons/variables.scss +3 -3
- package/lib/cjs/core-react/imagecheckbox/ImageCheckBox.scss +3 -3
- package/lib/cjs/core-react/index.scss +3 -3
- package/lib/cjs/core-react/inputs/index.scss +3 -3
- package/lib/cjs/core-react/inputs/input-label.scss +3 -3
- package/lib/cjs/core-react/inputs/input.scss +3 -3
- package/lib/cjs/core-react/inputs/numberinput/NumberInput.scss +3 -3
- package/lib/cjs/core-react/inputs/variables.scss +3 -3
- package/lib/cjs/core-react/listbox/Listbox.js +2 -3
- package/lib/cjs/core-react/listbox/Listbox.js.map +1 -1
- package/lib/cjs/core-react/listbox/Listbox.scss +3 -3
- package/lib/cjs/core-react/loading/LoadingPrompt.scss +3 -3
- package/lib/cjs/core-react/loading/LoadingSpinner.scss +3 -3
- package/lib/cjs/core-react/loading/index.scss +3 -3
- package/lib/cjs/core-react/loading/mixins.scss +3 -3
- package/lib/cjs/core-react/messagebox/MessageBox.d.ts.map +1 -1
- package/lib/cjs/core-react/messagebox/MessageBox.js +2 -2
- package/lib/cjs/core-react/messagebox/MessageBox.js.map +1 -1
- package/lib/cjs/core-react/messagebox/MessageBox.scss +3 -3
- package/lib/cjs/core-react/notification/MessageRenderer.js +1 -1
- package/lib/cjs/core-react/notification/MessageRenderer.js.map +1 -1
- package/lib/cjs/core-react/popup/Popup.js +4 -8
- package/lib/cjs/core-react/popup/Popup.js.map +1 -1
- package/lib/cjs/core-react/popup/Popup.scss +3 -3
- package/lib/cjs/core-react/radialmenu/RadialMenu.scss +3 -3
- package/lib/cjs/core-react/searchbox/SearchBox.scss +3 -3
- package/lib/cjs/core-react/settings/SettingsContainer.scss +3 -3
- package/lib/cjs/core-react/style/baseline.scss +3 -3
- package/lib/cjs/core-react/style/index.scss +3 -3
- package/lib/cjs/core-react/style/opacity.scss +3 -3
- package/lib/cjs/core-react/tabs/index.scss +3 -3
- package/lib/cjs/core-react/tabs/tabs.scss +3 -3
- package/lib/cjs/core-react/tabs/vertical.scss +3 -3
- package/lib/cjs/core-react/text/FilteredText.scss +3 -3
- package/lib/cjs/core-react/text/block.scss +3 -3
- package/lib/cjs/core-react/text/body.scss +3 -3
- package/lib/cjs/core-react/text/index.scss +3 -3
- package/lib/cjs/core-react/text/mixins.scss +3 -3
- package/lib/cjs/core-react/tree/ExpansionToggle.scss +3 -3
- package/lib/cjs/core-react/tree/Node.js +1 -2
- package/lib/cjs/core-react/tree/Node.js.map +1 -1
- package/lib/cjs/core-react/tree/Placeholder.scss +3 -3
- package/lib/cjs/core-react/tree/Tree.scss +3 -3
- package/lib/cjs/core-react/utils/IconWebComponent.js +1 -1
- package/lib/cjs/core-react/utils/IconWebComponent.js.map +1 -1
- package/lib/cjs/core-react/utils/getCssVariable.js +1 -1
- package/lib/cjs/core-react/utils/getCssVariable.js.map +1 -1
- package/lib/cjs/core-react/utils/hooks/useCrossOriginPopup.js +1 -2
- package/lib/cjs/core-react/utils/hooks/useCrossOriginPopup.js.map +1 -1
- package/lib/cjs/core-react/utils/hooks/useResizeObserver.js +8 -14
- package/lib/cjs/core-react/utils/hooks/useResizeObserver.js.map +1 -1
- package/lib/esm/core-react/_geometry.scss +3 -3
- package/lib/esm/core-react/_math.scss +3 -3
- package/lib/esm/core-react/_typography.scss +3 -3
- package/lib/esm/core-react/autosuggest/AutoSuggest.scss +3 -3
- package/lib/esm/core-react/badge/Badge.scss +3 -3
- package/lib/esm/core-react/badge/NewBadge.scss +3 -3
- package/lib/esm/core-react/base/Gap.js +1 -1
- package/lib/esm/core-react/base/Gap.js.map +1 -1
- package/lib/esm/core-react/base/base.scss +3 -3
- package/lib/esm/core-react/base/index.scss +3 -3
- package/lib/esm/core-react/classes.scss +3 -3
- package/lib/esm/core-react/colorthemes.scss +3 -3
- package/lib/esm/core-react/colorvariables.scss +3 -3
- package/lib/esm/core-react/contextmenu/ContextMenu.js +1 -2
- package/lib/esm/core-react/contextmenu/ContextMenu.js.map +1 -1
- package/lib/esm/core-react/contextmenu/ContextMenu.scss +3 -3
- package/lib/esm/core-react/contextmenu/GlobalContextMenu.js +3 -5
- package/lib/esm/core-react/contextmenu/GlobalContextMenu.js.map +1 -1
- package/lib/esm/core-react/dialog/Dialog.d.ts +3 -10
- package/lib/esm/core-react/dialog/Dialog.d.ts.map +1 -1
- package/lib/esm/core-react/dialog/Dialog.js +69 -167
- package/lib/esm/core-react/dialog/Dialog.js.map +1 -1
- package/lib/esm/core-react/dialog/Dialog.scss +59 -217
- package/lib/esm/core-react/dialog/GlobalDialog.js +1 -2
- package/lib/esm/core-react/dialog/GlobalDialog.js.map +1 -1
- package/lib/esm/core-react/elementseparator/ElementSeparator.js +2 -2
- package/lib/esm/core-react/elementseparator/ElementSeparator.js.map +1 -1
- package/lib/esm/core-react/expandable/index.scss +3 -3
- package/lib/esm/core-react/expandable/list.scss +3 -3
- package/lib/esm/core-react/hocs/withOnOutsideClick.js +1 -2
- package/lib/esm/core-react/hocs/withOnOutsideClick.js.map +1 -1
- package/lib/esm/core-react/icons/IconComponent.js +1 -1
- package/lib/esm/core-react/icons/IconComponent.js.map +1 -1
- package/lib/esm/core-react/icons/SvgPath.scss +3 -3
- package/lib/esm/core-react/icons/WebFontIcon.scss +3 -3
- package/lib/esm/core-react/icons/index.scss +3 -3
- package/lib/esm/core-react/icons/mixins.scss +3 -3
- package/lib/esm/core-react/icons/variables.scss +3 -3
- package/lib/esm/core-react/imagecheckbox/ImageCheckBox.scss +3 -3
- package/lib/esm/core-react/index.scss +3 -3
- package/lib/esm/core-react/inputs/index.scss +3 -3
- package/lib/esm/core-react/inputs/input-label.scss +3 -3
- package/lib/esm/core-react/inputs/input.scss +3 -3
- package/lib/esm/core-react/inputs/numberinput/NumberInput.scss +3 -3
- package/lib/esm/core-react/inputs/variables.scss +3 -3
- package/lib/esm/core-react/listbox/Listbox.js +2 -3
- package/lib/esm/core-react/listbox/Listbox.js.map +1 -1
- package/lib/esm/core-react/listbox/Listbox.scss +3 -3
- package/lib/esm/core-react/loading/LoadingPrompt.scss +3 -3
- package/lib/esm/core-react/loading/LoadingSpinner.scss +3 -3
- package/lib/esm/core-react/loading/index.scss +3 -3
- package/lib/esm/core-react/loading/mixins.scss +3 -3
- package/lib/esm/core-react/messagebox/MessageBox.d.ts.map +1 -1
- package/lib/esm/core-react/messagebox/MessageBox.js +2 -2
- package/lib/esm/core-react/messagebox/MessageBox.js.map +1 -1
- package/lib/esm/core-react/messagebox/MessageBox.scss +3 -3
- package/lib/esm/core-react/notification/MessageRenderer.js +1 -1
- package/lib/esm/core-react/notification/MessageRenderer.js.map +1 -1
- package/lib/esm/core-react/popup/Popup.js +4 -8
- package/lib/esm/core-react/popup/Popup.js.map +1 -1
- package/lib/esm/core-react/popup/Popup.scss +3 -3
- package/lib/esm/core-react/radialmenu/RadialMenu.scss +3 -3
- package/lib/esm/core-react/searchbox/SearchBox.scss +3 -3
- package/lib/esm/core-react/settings/SettingsContainer.scss +3 -3
- package/lib/esm/core-react/style/baseline.scss +3 -3
- package/lib/esm/core-react/style/index.scss +3 -3
- package/lib/esm/core-react/style/opacity.scss +3 -3
- package/lib/esm/core-react/tabs/index.scss +3 -3
- package/lib/esm/core-react/tabs/tabs.scss +3 -3
- package/lib/esm/core-react/tabs/vertical.scss +3 -3
- package/lib/esm/core-react/text/FilteredText.scss +3 -3
- package/lib/esm/core-react/text/block.scss +3 -3
- package/lib/esm/core-react/text/body.scss +3 -3
- package/lib/esm/core-react/text/index.scss +3 -3
- package/lib/esm/core-react/text/mixins.scss +3 -3
- package/lib/esm/core-react/tree/ExpansionToggle.scss +3 -3
- package/lib/esm/core-react/tree/Node.js +1 -2
- package/lib/esm/core-react/tree/Node.js.map +1 -1
- package/lib/esm/core-react/tree/Placeholder.scss +3 -3
- package/lib/esm/core-react/tree/Tree.scss +3 -3
- package/lib/esm/core-react/utils/IconWebComponent.js +1 -1
- package/lib/esm/core-react/utils/IconWebComponent.js.map +1 -1
- package/lib/esm/core-react/utils/getCssVariable.js +1 -1
- package/lib/esm/core-react/utils/getCssVariable.js.map +1 -1
- package/lib/esm/core-react/utils/hooks/useCrossOriginPopup.js +1 -2
- package/lib/esm/core-react/utils/hooks/useCrossOriginPopup.js.map +1 -1
- package/lib/esm/core-react/utils/hooks/useResizeObserver.js +8 -14
- package/lib/esm/core-react/utils/hooks/useResizeObserver.js.map +1 -1
- package/package.json +3 -3
- package/lib/cjs/core-react/dialog/SimpleDialog.d.ts +0 -68
- package/lib/cjs/core-react/dialog/SimpleDialog.d.ts.map +0 -1
- package/lib/cjs/core-react/dialog/SimpleDialog.js +0 -51
- package/lib/cjs/core-react/dialog/SimpleDialog.js.map +0 -1
- package/lib/esm/core-react/dialog/SimpleDialog.d.ts +0 -68
- package/lib/esm/core-react/dialog/SimpleDialog.d.ts.map +0 -1
- package/lib/esm/core-react/dialog/SimpleDialog.js +0 -47
- package/lib/esm/core-react/dialog/SimpleDialog.js.map +0 -1
|
@@ -20,20 +20,18 @@ export function useResizeObserver(onResize) {
|
|
|
20
20
|
const owningWindowRef = React.useRef(null);
|
|
21
21
|
// istanbul ignore next
|
|
22
22
|
const resizeObserverCleanup = () => {
|
|
23
|
-
var _a;
|
|
24
23
|
if (rafRef.current)
|
|
25
24
|
owningWindowRef.current.cancelAnimationFrame(rafRef.current);
|
|
26
|
-
|
|
25
|
+
resizeObserver.current?.disconnect();
|
|
27
26
|
resizeObserver.current = null;
|
|
28
27
|
};
|
|
29
28
|
React.useEffect(() => {
|
|
30
29
|
isMountedRef.current = true;
|
|
31
30
|
return () => {
|
|
32
|
-
var _a;
|
|
33
31
|
isMountedRef.current = false;
|
|
34
32
|
if (rafRef.current)
|
|
35
33
|
owningWindowRef.current.cancelAnimationFrame(rafRef.current);
|
|
36
|
-
|
|
34
|
+
owningWindowRef.current?.removeEventListener("beforeunload", resizeObserverCleanup);
|
|
37
35
|
};
|
|
38
36
|
}, []);
|
|
39
37
|
const processResize = React.useCallback((target) => {
|
|
@@ -74,10 +72,8 @@ export function useResizeObserver(onResize) {
|
|
|
74
72
|
setBounds(newBounds);
|
|
75
73
|
}
|
|
76
74
|
return () => {
|
|
77
|
-
var _a;
|
|
78
75
|
instance &&
|
|
79
|
-
(
|
|
80
|
-
/* istanbul ignore next */ (_a = resizeObserver.current) === null || _a === void 0 ? void 0 : _a.unobserve(instance));
|
|
76
|
+
/* istanbul ignore next */ resizeObserver.current?.unobserve(instance);
|
|
81
77
|
resizeObserver.current = null;
|
|
82
78
|
};
|
|
83
79
|
}, [handleResize, onResize]);
|
|
@@ -99,8 +95,8 @@ export function useResizeObserver(onResize) {
|
|
|
99
95
|
* @internal
|
|
100
96
|
*/
|
|
101
97
|
export function useLayoutResizeObserver(inElement, onResize) {
|
|
102
|
-
const inBoundingRect = inElement
|
|
103
|
-
const [bounds, setBounds] = React.useState({ width: inBoundingRect
|
|
98
|
+
const inBoundingRect = inElement?.getBoundingClientRect();
|
|
99
|
+
const [bounds, setBounds] = React.useState({ width: inBoundingRect?.width, height: inBoundingRect?.height });
|
|
104
100
|
const [watchedElement, setWatchedElement] = React.useState(inElement);
|
|
105
101
|
const resizeObserver = React.useRef(null);
|
|
106
102
|
const rafRef = React.useRef(0); // set to non-zero when requestAnimationFrame processing is active
|
|
@@ -108,10 +104,9 @@ export function useLayoutResizeObserver(inElement, onResize) {
|
|
|
108
104
|
const owningWindowRef = React.useRef(null);
|
|
109
105
|
// istanbul ignore next
|
|
110
106
|
const resizeObserverCleanup = () => {
|
|
111
|
-
var _a;
|
|
112
107
|
if (rafRef.current)
|
|
113
108
|
owningWindowRef.current.cancelAnimationFrame(rafRef.current);
|
|
114
|
-
|
|
109
|
+
resizeObserver.current?.disconnect();
|
|
115
110
|
resizeObserver.current = null;
|
|
116
111
|
};
|
|
117
112
|
React.useEffect(() => {
|
|
@@ -168,9 +163,8 @@ export function useLayoutResizeObserver(inElement, onResize) {
|
|
|
168
163
|
resizeObserver.current = new ResizeObserver(handleResize);
|
|
169
164
|
resizeObserver.current.observe(watchedElement);
|
|
170
165
|
return () => {
|
|
171
|
-
var _a;
|
|
172
166
|
// istanbul ignore next
|
|
173
|
-
|
|
167
|
+
resizeObserver.current?.disconnect();
|
|
174
168
|
resizeObserver.current = null;
|
|
175
169
|
};
|
|
176
170
|
}, [handleResize, watchedElement]);
|
|
@@ -208,7 +202,7 @@ export function ResizableContainerObserver({ onResize, children, }) {
|
|
|
208
202
|
}, [hasChildren]);
|
|
209
203
|
const processResize = React.useCallback((width, height) => {
|
|
210
204
|
// istanbul ignore next
|
|
211
|
-
onResize(width
|
|
205
|
+
onResize(width ?? 0, height ?? 0);
|
|
212
206
|
}, [onResize]);
|
|
213
207
|
useLayoutResizeObserver(containerElement, processResize);
|
|
214
208
|
const style = hasChildren
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useResizeObserver.js","sourceRoot":"","sources":["../../../../../src/core-react/utils/hooks/useResizeObserver.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/** @packageDocumentation\n * @module Utilities\n */\nimport * as React from \"react\";\nimport { ResizeObserver } from \"./ResizeObserverPolyfill\";\nimport { useRefEffect } from \"./useRefEffect\";\nimport { useRefs } from \"./useRefs\";\n\n/** Uses ResizeObserver API to notify about element bound changes.\n * @internal\n */\nexport function useResizeObserver<T extends Element>(\n onResize?: (width: number, height: number) => void\n) {\n const [bounds, setBounds] = React.useState({ width: 0, height: 0 });\n const resizeObserver = React.useRef<ResizeObserver | null>(null);\n const rafRef = React.useRef(0); // set to non-zero when requestAnimationFrame processing is active\n const isMountedRef = React.useRef(false);\n const owningWindowRef = React.useRef<any>(null);\n\n // istanbul ignore next\n const resizeObserverCleanup = () => {\n if (rafRef.current)\n owningWindowRef.current.cancelAnimationFrame(rafRef.current);\n\n resizeObserver.current?.disconnect();\n resizeObserver.current = null;\n };\n\n React.useEffect(() => {\n isMountedRef.current = true;\n return () => {\n isMountedRef.current = false;\n if (rafRef.current)\n owningWindowRef.current.cancelAnimationFrame(rafRef.current);\n owningWindowRef.current?.removeEventListener(\n \"beforeunload\",\n resizeObserverCleanup\n );\n };\n }, []);\n\n const processResize = React.useCallback(\n (target: HTMLElement) => {\n const newBounds = target.getBoundingClientRect();\n // istanbul ignore else\n if (\n isMountedRef.current &&\n (bounds.width !== newBounds.width || bounds.height !== newBounds.height)\n ) {\n setBounds(newBounds);\n onResize && onResize(newBounds.width, newBounds.height);\n }\n },\n [onResize, bounds.height, bounds.width]\n );\n\n const handleResize = React.useCallback(\n (entries: any[]) => {\n // istanbul ignore if\n if (\n !isMountedRef.current ||\n !Array.isArray(entries) ||\n 0 === entries.length\n ) {\n return;\n }\n const target = entries[0].target as HTMLElement;\n // istanbul ignore next\n owningWindowRef.current &&\n owningWindowRef.current.removeEventListener(\n \"beforeunload\",\n resizeObserverCleanup\n );\n\n owningWindowRef.current = target.ownerDocument.defaultView;\n // istanbul ignore else\n if (owningWindowRef.current) {\n owningWindowRef.current.addEventListener(\n \"unload\",\n resizeObserverCleanup\n );\n\n // using requestAnimationFrame to stop the \"ResizeObserver loop completed with undelivered notifications.\" and\n // \"ResizeObserver loop limit exceeded\" messages reported to window.onError\n rafRef.current = owningWindowRef.current.requestAnimationFrame(() =>\n processResize(target)\n );\n }\n },\n [processResize]\n );\n\n const observerRef = useRefEffect(\n (instance: T | null) => {\n resizeObserver.current = new ResizeObserver(handleResize);\n if (instance) {\n resizeObserver.current.observe(instance);\n const newBounds = instance.getBoundingClientRect();\n onResize && onResize(newBounds.width, newBounds.height);\n setBounds(newBounds);\n }\n\n return () => {\n instance &&\n /* istanbul ignore next */ resizeObserver.current?.unobserve(\n instance\n );\n resizeObserver.current = null;\n };\n },\n [handleResize, onResize]\n );\n\n const handleRef = React.useCallback(\n (instance: Element | null) => {\n const newBounds = instance && instance.getBoundingClientRect();\n // istanbul ignore if\n if (\n newBounds &&\n (bounds.width !== newBounds.width || bounds.height !== newBounds.height)\n ) {\n setBounds(newBounds);\n onResize && onResize(newBounds.width, newBounds.height);\n }\n },\n [bounds.height, bounds.width, onResize]\n );\n\n const ref = useRefs(handleRef, observerRef);\n return ref;\n}\n\n/** React hook that uses ResizeObserver API to notify about element bound changes. Note: to work similar to ReactResizeDetector\n * width and height are initialized as undefined and only set during after mount if bounds are non-zero. This implementation properly\n * handles observing element in pop-out/child windows.\n * @internal\n */\nexport function useLayoutResizeObserver(\n inElement: HTMLElement | null,\n onResize?: (width?: number, height?: number) => void\n) {\n const inBoundingRect = inElement?.getBoundingClientRect();\n const [bounds, setBounds] = React.useState<{\n width?: number;\n height?: number;\n }>({ width: inBoundingRect?.width, height: inBoundingRect?.height });\n const [watchedElement, setWatchedElement] = React.useState(inElement);\n const resizeObserver = React.useRef<ResizeObserver | null>(null);\n const rafRef = React.useRef(0); // set to non-zero when requestAnimationFrame processing is active\n const isMountedRef = React.useRef(false);\n const owningWindowRef = React.useRef<any>(null);\n\n // istanbul ignore next\n const resizeObserverCleanup = () => {\n if (rafRef.current)\n owningWindowRef.current.cancelAnimationFrame(rafRef.current);\n\n resizeObserver.current?.disconnect();\n resizeObserver.current = null;\n };\n\n React.useEffect(() => {\n isMountedRef.current = true;\n setWatchedElement(inElement);\n\n // istanbul ignore next\n if (inElement) {\n const newBounds = inElement.getBoundingClientRect();\n onResize && onResize(newBounds.width, newBounds.height);\n setBounds(newBounds);\n }\n\n return () => {\n isMountedRef.current = false;\n rafRef.current &&\n owningWindowRef.current &&\n owningWindowRef.current.cancelAnimationFrame(rafRef.current);\n owningWindowRef.current &&\n owningWindowRef.current.removeEventListener(\n \"beforeunload\",\n resizeObserverCleanup\n );\n };\n }, [onResize, inElement]);\n\n const processResize = React.useCallback(\n (target: HTMLElement) => {\n const newBounds = target.getBoundingClientRect();\n // istanbul ignore next\n if (\n isMountedRef.current &&\n (bounds.width !== newBounds.width || bounds.height !== newBounds.height)\n ) {\n onResize && onResize(newBounds.width, newBounds.height);\n setBounds(newBounds);\n }\n },\n [bounds.height, bounds.width, onResize]\n );\n\n const handleResize = React.useCallback(\n (entries: any[]) => {\n // istanbul ignore next\n if (\n !isMountedRef.current ||\n !Array.isArray(entries) ||\n 0 === entries.length\n ) {\n return;\n }\n const target = entries[0].target as HTMLElement;\n // istanbul ignore next\n if (owningWindowRef.current)\n owningWindowRef.current.removeEventListener(\n \"beforeunload\",\n resizeObserverCleanup\n );\n\n owningWindowRef.current = target.ownerDocument.defaultView;\n // istanbul ignore else\n if (owningWindowRef.current) {\n owningWindowRef.current.addEventListener(\n \"unload\",\n resizeObserverCleanup\n );\n\n // using requestAnimationFrame to stop the \"ResizeObserver loop completed with undelivered notifications.\" and\n // \"ResizeObserver loop limit exceeded\" messages reported to window.onError\n rafRef.current = owningWindowRef.current.requestAnimationFrame(() =>\n processResize(target)\n );\n }\n },\n [processResize]\n );\n\n React.useLayoutEffect(() => {\n if (!watchedElement) {\n return;\n }\n resizeObserver.current = new ResizeObserver(handleResize);\n resizeObserver.current.observe(watchedElement);\n return () => {\n // istanbul ignore next\n resizeObserver.current?.disconnect();\n resizeObserver.current = null;\n };\n }, [handleResize, watchedElement]);\n\n return [bounds.width, bounds.height];\n}\n\n/** Prop the ElementResizeObserver sends to the render function.\n * @public\n */\nexport interface RenderPropsArgs {\n width?: number;\n height?: number;\n}\n\n/** ElementResizeObserver provides functionality similar to ReactResizeDetector when a render function is specified. This implementation properly handles\n * observing element in pop-out/child windows.\n * @public\n */\nexport function ElementResizeObserver({\n watchedElement,\n render,\n}: {\n watchedElement: HTMLElement | null;\n render: (props: RenderPropsArgs) => React.ReactElement;\n}) {\n const [width, height] = useLayoutResizeObserver(watchedElement);\n return render({ width, height });\n}\n\n/** ResizableContainerObserver is a component that provides the functionality similar to the ReactResizeDetector option that call a function when\n * the observed element is resized. This implementation properly handles observing element in pop-out/child windows. If children nodes are defined then\n * the div added by the component is considered the container whose size will be observed. If no children are provided then the component will report\n * size changes from its parent container.\n * @public\n */\nexport function ResizableContainerObserver({\n onResize,\n children,\n}: {\n onResize: (width: number, height: number) => void;\n children?: React.ReactNode;\n}) {\n const containerRef = React.useRef<HTMLDivElement>(null); // set to non-zero when requestAnimationFrame processing is active\n const [containerElement, setContainerElement] =\n React.useState<HTMLElement | null>(null);\n const isMountedRef = React.useRef(false);\n const hasChildren = React.Children.count(children) !== 0;\n\n // if no children are specified then monitor size of parent element.\n React.useEffect(() => {\n // istanbul ignore next\n if (!isMountedRef.current && containerRef.current) {\n isMountedRef.current = true;\n const hasParent = !!containerRef.current.parentElement;\n setContainerElement(\n hasChildren && hasParent\n ? containerRef.current\n : containerRef.current.parentElement\n );\n }\n }, [hasChildren]);\n\n const processResize = React.useCallback(\n (width?: number, height?: number) => {\n // istanbul ignore next\n onResize(width ?? 0, height ?? 0);\n },\n [onResize]\n );\n\n useLayoutResizeObserver(containerElement, processResize);\n const style: React.CSSProperties = hasChildren\n ? { width: \"100%\", height: \"100%\" }\n : { display: \"none\" };\n\n return (\n <div\n ref={containerRef}\n className=\"uicore-resizable-container\"\n style={style}\n >\n {hasChildren && children}\n </div>\n );\n}\n"]}
|
|
1
|
+
{"version":3,"file":"useResizeObserver.js","sourceRoot":"","sources":["../../../../../src/core-react/utils/hooks/useResizeObserver.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/** @packageDocumentation\n * @module Utilities\n */\nimport * as React from \"react\";\nimport { ResizeObserver } from \"./ResizeObserverPolyfill\";\nimport { useRefEffect } from \"./useRefEffect\";\nimport { useRefs } from \"./useRefs\";\n\n/** Uses ResizeObserver API to notify about element bound changes.\n * @internal\n */\nexport function useResizeObserver<T extends Element>(\n onResize?: (width: number, height: number) => void\n) {\n const [bounds, setBounds] = React.useState({ width: 0, height: 0 });\n const resizeObserver = React.useRef<ResizeObserver | null>(null);\n const rafRef = React.useRef(0); // set to non-zero when requestAnimationFrame processing is active\n const isMountedRef = React.useRef(false);\n const owningWindowRef = React.useRef<any>(null);\n\n // istanbul ignore next\n const resizeObserverCleanup = () => {\n if (rafRef.current)\n owningWindowRef.current.cancelAnimationFrame(rafRef.current);\n\n resizeObserver.current?.disconnect();\n resizeObserver.current = null;\n };\n\n React.useEffect(() => {\n isMountedRef.current = true;\n return () => {\n isMountedRef.current = false;\n if (rafRef.current)\n owningWindowRef.current.cancelAnimationFrame(rafRef.current);\n owningWindowRef.current?.removeEventListener(\n \"beforeunload\",\n resizeObserverCleanup\n );\n };\n }, []);\n\n const processResize = React.useCallback(\n (target: HTMLElement) => {\n const newBounds = target.getBoundingClientRect();\n // istanbul ignore else\n if (\n isMountedRef.current &&\n (bounds.width !== newBounds.width || bounds.height !== newBounds.height)\n ) {\n setBounds(newBounds);\n onResize && onResize(newBounds.width, newBounds.height);\n }\n },\n [onResize, bounds.height, bounds.width]\n );\n\n const handleResize = React.useCallback(\n (entries: any[]) => {\n // istanbul ignore if\n if (\n !isMountedRef.current ||\n !Array.isArray(entries) ||\n 0 === entries.length\n ) {\n return;\n }\n const target = entries[0].target as HTMLElement;\n // istanbul ignore next\n owningWindowRef.current &&\n owningWindowRef.current.removeEventListener(\n \"beforeunload\",\n resizeObserverCleanup\n );\n\n owningWindowRef.current = target.ownerDocument.defaultView;\n // istanbul ignore else\n if (owningWindowRef.current) {\n owningWindowRef.current.addEventListener(\n \"unload\",\n resizeObserverCleanup\n );\n\n // using requestAnimationFrame to stop the \"ResizeObserver loop completed with undelivered notifications.\" and\n // \"ResizeObserver loop limit exceeded\" messages reported to window.onError\n rafRef.current = owningWindowRef.current.requestAnimationFrame(() =>\n processResize(target)\n );\n }\n },\n [processResize]\n );\n\n const observerRef = useRefEffect(\n (instance: T | null) => {\n resizeObserver.current = new ResizeObserver(handleResize);\n if (instance) {\n resizeObserver.current.observe(instance);\n const newBounds = instance.getBoundingClientRect();\n onResize && onResize(newBounds.width, newBounds.height);\n setBounds(newBounds);\n }\n\n return () => {\n instance &&\n /* istanbul ignore next */ resizeObserver.current?.unobserve(\n instance\n );\n resizeObserver.current = null;\n };\n },\n [handleResize, onResize]\n );\n\n const handleRef = React.useCallback(\n (instance: Element | null) => {\n const newBounds = instance && instance.getBoundingClientRect();\n // istanbul ignore if\n if (\n newBounds &&\n (bounds.width !== newBounds.width || bounds.height !== newBounds.height)\n ) {\n setBounds(newBounds);\n onResize && onResize(newBounds.width, newBounds.height);\n }\n },\n [bounds.height, bounds.width, onResize]\n );\n\n const ref = useRefs(handleRef, observerRef);\n return ref;\n}\n\n/** React hook that uses ResizeObserver API to notify about element bound changes. Note: to work similar to ReactResizeDetector\n * width and height are initialized as undefined and only set during after mount if bounds are non-zero. This implementation properly\n * handles observing element in pop-out/child windows.\n * @internal\n */\nexport function useLayoutResizeObserver(\n inElement: HTMLElement | null,\n onResize?: (width?: number, height?: number) => void\n) {\n const inBoundingRect = inElement?.getBoundingClientRect();\n const [bounds, setBounds] = React.useState<{\n width?: number;\n height?: number;\n }>({ width: inBoundingRect?.width, height: inBoundingRect?.height });\n const [watchedElement, setWatchedElement] = React.useState(inElement);\n const resizeObserver = React.useRef<ResizeObserver | null>(null);\n const rafRef = React.useRef(0); // set to non-zero when requestAnimationFrame processing is active\n const isMountedRef = React.useRef(false);\n const owningWindowRef = React.useRef<any>(null);\n\n // istanbul ignore next\n const resizeObserverCleanup = () => {\n if (rafRef.current)\n owningWindowRef.current.cancelAnimationFrame(rafRef.current);\n\n resizeObserver.current?.disconnect();\n resizeObserver.current = null;\n };\n\n React.useEffect(() => {\n isMountedRef.current = true;\n setWatchedElement(inElement);\n\n // istanbul ignore next\n if (inElement) {\n const newBounds = inElement.getBoundingClientRect();\n onResize && onResize(newBounds.width, newBounds.height);\n setBounds(newBounds);\n }\n\n return () => {\n isMountedRef.current = false;\n rafRef.current &&\n owningWindowRef.current &&\n owningWindowRef.current.cancelAnimationFrame(rafRef.current);\n owningWindowRef.current &&\n owningWindowRef.current.removeEventListener(\n \"beforeunload\",\n resizeObserverCleanup\n );\n };\n }, [onResize, inElement]);\n\n const processResize = React.useCallback(\n (target: HTMLElement) => {\n const newBounds = target.getBoundingClientRect();\n // istanbul ignore next\n if (\n isMountedRef.current &&\n (bounds.width !== newBounds.width || bounds.height !== newBounds.height)\n ) {\n onResize && onResize(newBounds.width, newBounds.height);\n setBounds(newBounds);\n }\n },\n [bounds.height, bounds.width, onResize]\n );\n\n const handleResize = React.useCallback(\n (entries: any[]) => {\n // istanbul ignore next\n if (\n !isMountedRef.current ||\n !Array.isArray(entries) ||\n 0 === entries.length\n ) {\n return;\n }\n const target = entries[0].target as HTMLElement;\n // istanbul ignore next\n if (owningWindowRef.current)\n owningWindowRef.current.removeEventListener(\n \"beforeunload\",\n resizeObserverCleanup\n );\n\n owningWindowRef.current = target.ownerDocument.defaultView;\n // istanbul ignore else\n if (owningWindowRef.current) {\n owningWindowRef.current.addEventListener(\n \"unload\",\n resizeObserverCleanup\n );\n\n // using requestAnimationFrame to stop the \"ResizeObserver loop completed with undelivered notifications.\" and\n // \"ResizeObserver loop limit exceeded\" messages reported to window.onError\n rafRef.current = owningWindowRef.current.requestAnimationFrame(() =>\n processResize(target)\n );\n }\n },\n [processResize]\n );\n\n React.useLayoutEffect(() => {\n if (!watchedElement) {\n return;\n }\n resizeObserver.current = new ResizeObserver(handleResize);\n resizeObserver.current.observe(watchedElement);\n return () => {\n // istanbul ignore next\n resizeObserver.current?.disconnect();\n resizeObserver.current = null;\n };\n }, [handleResize, watchedElement]);\n\n return [bounds.width, bounds.height];\n}\n\n/** Prop the ElementResizeObserver sends to the render function.\n * @public\n */\nexport interface RenderPropsArgs {\n width?: number;\n height?: number;\n}\n\n/** ElementResizeObserver provides functionality similar to ReactResizeDetector when a render function is specified. This implementation properly handles\n * observing element in pop-out/child windows.\n * @public\n */\nexport function ElementResizeObserver({\n watchedElement,\n render,\n}: {\n watchedElement: HTMLElement | null;\n render: (props: RenderPropsArgs) => React.ReactElement;\n}) {\n const [width, height] = useLayoutResizeObserver(watchedElement);\n return render({ width, height });\n}\n\n/** ResizableContainerObserver is a component that provides the functionality similar to the ReactResizeDetector option that call a function when\n * the observed element is resized. This implementation properly handles observing element in pop-out/child windows. If children nodes are defined then\n * the div added by the component is considered the container whose size will be observed. If no children are provided then the component will report\n * size changes from its parent container.\n * @public\n */\nexport function ResizableContainerObserver({\n onResize,\n children,\n}: {\n onResize: (width: number, height: number) => void;\n children?: React.ReactNode;\n}) {\n const containerRef = React.useRef<HTMLDivElement>(null); // set to non-zero when requestAnimationFrame processing is active\n const [containerElement, setContainerElement] =\n React.useState<HTMLElement | null>(null);\n const isMountedRef = React.useRef(false);\n const hasChildren = React.Children.count(children) !== 0;\n\n // if no children are specified then monitor size of parent element.\n React.useEffect(() => {\n // istanbul ignore next\n if (!isMountedRef.current && containerRef.current) {\n isMountedRef.current = true;\n const hasParent = !!containerRef.current.parentElement;\n setContainerElement(\n hasChildren && hasParent\n ? containerRef.current\n : containerRef.current.parentElement\n );\n }\n }, [hasChildren]);\n\n const processResize = React.useCallback(\n (width?: number, height?: number) => {\n // istanbul ignore next\n onResize(width ?? 0, height ?? 0);\n },\n [onResize]\n );\n\n useLayoutResizeObserver(containerElement, processResize);\n const style: React.CSSProperties = hasChildren\n ? { width: \"100%\", height: \"100%\" }\n : { display: \"none\" };\n\n return (\n <div\n ref={containerRef}\n className=\"uicore-resizable-container\"\n style={style}\n >\n {hasChildren && children}\n </div>\n );\n}\n"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@itwin/core-react",
|
|
3
|
-
"version": "4.
|
|
3
|
+
"version": "4.3.0-dev.1",
|
|
4
4
|
"description": "iTwin.js UI core components",
|
|
5
5
|
"main": "lib/cjs/core-react.js",
|
|
6
6
|
"module": "lib/esm/core-react.js",
|
|
@@ -54,7 +54,7 @@
|
|
|
54
54
|
"@types/react": "^17.0.37",
|
|
55
55
|
"@types/react-autosuggest": "10.1.2",
|
|
56
56
|
"@types/react-dom": "^17.0.0",
|
|
57
|
-
"@types/sinon": "^
|
|
57
|
+
"@types/sinon": "^10.0.15",
|
|
58
58
|
"@types/sinon-chai": "^3.2.0",
|
|
59
59
|
"chai": "^4.1.2",
|
|
60
60
|
"chai-as-promised": "^7",
|
|
@@ -71,7 +71,7 @@
|
|
|
71
71
|
"react-dom": "^17.0.0",
|
|
72
72
|
"react-test-renderer": "^17.0.0",
|
|
73
73
|
"rimraf": "^3.0.2",
|
|
74
|
-
"sinon": "^
|
|
74
|
+
"sinon": "^15.2.0",
|
|
75
75
|
"sinon-chai": "^3.2.0",
|
|
76
76
|
"ts-node": "^10.8.2",
|
|
77
77
|
"typemoq": "^2.1.0",
|
|
@@ -1,68 +0,0 @@
|
|
|
1
|
-
/** @packageDocumentation
|
|
2
|
-
* @module Dialog
|
|
3
|
-
*/
|
|
4
|
-
import "./Dialog.scss";
|
|
5
|
-
import * as React from "react";
|
|
6
|
-
import type { DialogButtonDef } from "@itwin/appui-abstract";
|
|
7
|
-
import type { CommonProps } from "../utils/Props";
|
|
8
|
-
import type { Omit } from "../utils/typeUtils";
|
|
9
|
-
import { Dialog as CoreDialog } from "./Dialog";
|
|
10
|
-
/** Properties of [[SimpleDialog]] component.
|
|
11
|
-
* @internal
|
|
12
|
-
*/
|
|
13
|
-
export interface SimpleDialogProps extends Omit<React.AllHTMLAttributes<HTMLDivElement>, "title">, CommonProps {
|
|
14
|
-
/** Indicates whether to show dialog or not */
|
|
15
|
-
opened: boolean;
|
|
16
|
-
/** Indicates whether the focus should be trapped within the dialog. Default: false */
|
|
17
|
-
trapFocus?: boolean;
|
|
18
|
-
/** Whether the hide the header. Default: false */
|
|
19
|
-
hideHeader?: boolean;
|
|
20
|
-
/** Title to show in title bar of dialog */
|
|
21
|
-
title?: string | JSX.Element;
|
|
22
|
-
/** List of DialogButtonDef objects specifying buttons and associated onClick events */
|
|
23
|
-
buttonCluster?: DialogButtonDef[];
|
|
24
|
-
/** onClick event for X button for dialog */
|
|
25
|
-
onClose?: () => void;
|
|
26
|
-
/** 'keyup' event for Esc key */
|
|
27
|
-
onEscape?: () => void;
|
|
28
|
-
/** Triggered when a click is triggered outside of this dialog. */
|
|
29
|
-
onOutsideClick?: (event: MouseEvent) => any;
|
|
30
|
-
/** Whether to show background overlay. Default: true.
|
|
31
|
-
* @note Modeless dialogs require an id and an implementation of onModelessPointerDown.
|
|
32
|
-
*/
|
|
33
|
-
modal?: boolean;
|
|
34
|
-
/** An id for a modeless dialog */
|
|
35
|
-
modelessId?: string;
|
|
36
|
-
/** Pointer Down event handler when modeless (modal = false) */
|
|
37
|
-
onModelessPointerDown?: (event: React.PointerEvent, id: string) => void;
|
|
38
|
-
/** Initial width of dialog. Displayed in px if value is a number; otherwise, displayed in specified CSS unit. Default: "50%" */
|
|
39
|
-
width?: string | number;
|
|
40
|
-
/** Initial height of dialog. Displayed in px if value is a number; otherwise, displayed in specified CSS unit. */
|
|
41
|
-
height?: string | number;
|
|
42
|
-
/** Minimum width that the dialog may be resized to. Displayed in px if value is a number; otherwise, displayed in specified CSS unit. Default: 300px */
|
|
43
|
-
minWidth?: string | number;
|
|
44
|
-
/** Minimum height that the dialog may be resized to. Displayed in px if value is a number; otherwise, displayed in specified CSS unit. Default: 100px */
|
|
45
|
-
minHeight?: string | number;
|
|
46
|
-
/** Maximum width that the dialog may be resized to. Displayed in px if value is a number; otherwise, displayed in specified CSS unit. */
|
|
47
|
-
maxWidth?: string | number;
|
|
48
|
-
/** Maximum height that the dialog may be resized to. Displayed in px if value is a number; otherwise, displayed in specified CSS unit. */
|
|
49
|
-
maxHeight?: string | number;
|
|
50
|
-
/** Custom CSS Style for overlay */
|
|
51
|
-
backgroundStyle?: React.CSSProperties;
|
|
52
|
-
/** Custom CSS Style for title */
|
|
53
|
-
titleStyle?: React.CSSProperties;
|
|
54
|
-
/** Custom CSS Style for footer */
|
|
55
|
-
footerStyle?: React.CSSProperties;
|
|
56
|
-
/** Custom CSS class name for the content */
|
|
57
|
-
contentClassName?: string;
|
|
58
|
-
/** Custom CSS Style for the content */
|
|
59
|
-
contentStyle?: React.CSSProperties;
|
|
60
|
-
}
|
|
61
|
-
/** itwinui-react [[Dialog]] wrapper that excludes buggy features and adds features from core-react [[Dialog]].
|
|
62
|
-
* @internal
|
|
63
|
-
*/
|
|
64
|
-
export declare class SimpleDialog extends CoreDialog {
|
|
65
|
-
constructor(props: SimpleDialogProps);
|
|
66
|
-
render(): JSX.Element;
|
|
67
|
-
}
|
|
68
|
-
//# sourceMappingURL=SimpleDialog.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"SimpleDialog.d.ts","sourceRoot":"","sources":["../../../../src/core-react/dialog/SimpleDialog.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,eAAe,CAAC;AACvB,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAE7D,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAClD,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,oBAAoB,CAAC;AAC/C,OAAO,EAAE,MAAM,IAAI,UAAU,EAAE,MAAM,UAAU,CAAC;AAGhD;;GAEG;AACH,MAAM,WAAW,iBACf,SAAQ,IAAI,CAAC,KAAK,CAAC,iBAAiB,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC,EAC5D,WAAW;IACb,8CAA8C;IAC9C,MAAM,EAAE,OAAO,CAAC;IAChB,sFAAsF;IACtF,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB,kDAAkD;IAClD,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,2CAA2C;IAC3C,KAAK,CAAC,EAAE,MAAM,GAAG,GAAG,CAAC,OAAO,CAAC;IAC7B,uFAAuF;IACvF,aAAa,CAAC,EAAE,eAAe,EAAE,CAAC;IAElC,4CAA4C;IAC5C,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,gCAAgC;IAChC,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,kEAAkE;IAClE,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,GAAG,CAAC;IAE5C;;OAEG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,kCAAkC;IAClC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,+DAA+D;IAC/D,qBAAqB,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,YAAY,EAAE,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAExE,gIAAgI;IAChI,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,kHAAkH;IAClH,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB,wJAAwJ;IACxJ,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC3B,yJAAyJ;IACzJ,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC5B,yIAAyI;IACzI,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC3B,0IAA0I;IAC1I,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAE5B,mCAAmC;IACnC,eAAe,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IACtC,iCAAiC;IACjC,UAAU,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IACjC,kCAAkC;IAClC,WAAW,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAClC,4CAA4C;IAC5C,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,uCAAuC;IACvC,YAAY,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CACpC;AAED;;GAEG;AACH,qBAAa,YAAa,SAAQ,UAAU;gBAC9B,KAAK,EAAE,iBAAiB;IAIpB,MAAM,IAAI,GAAG,CAAC,OAAO;CAkFtC"}
|
|
@@ -1,51 +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
|
-
/** @packageDocumentation
|
|
7
|
-
* @module Dialog
|
|
8
|
-
*/
|
|
9
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
10
|
-
exports.SimpleDialog = void 0;
|
|
11
|
-
require("./Dialog.scss");
|
|
12
|
-
const React = require("react");
|
|
13
|
-
const DivWithOutsideClick_1 = require("../base/DivWithOutsideClick");
|
|
14
|
-
const Dialog_1 = require("./Dialog");
|
|
15
|
-
const itwinui_react_1 = require("@itwin/itwinui-react");
|
|
16
|
-
/** itwinui-react [[Dialog]] wrapper that excludes buggy features and adds features from core-react [[Dialog]].
|
|
17
|
-
* @internal
|
|
18
|
-
*/
|
|
19
|
-
class SimpleDialog extends Dialog_1.Dialog {
|
|
20
|
-
constructor(props) {
|
|
21
|
-
super(props);
|
|
22
|
-
}
|
|
23
|
-
render() {
|
|
24
|
-
const { opened, title, buttonCluster, onClose, onOutsideClick, minWidth, minHeight, width, height, maxHeight, maxWidth, backgroundStyle, titleStyle, footerStyle, style, contentStyle, contentClassName, className, trapFocus, modal, hideHeader, ...props } = this.props;
|
|
25
|
-
const containerStyle = {
|
|
26
|
-
margin: "",
|
|
27
|
-
width,
|
|
28
|
-
height,
|
|
29
|
-
};
|
|
30
|
-
const minMaxStyle = {
|
|
31
|
-
minWidth,
|
|
32
|
-
minHeight,
|
|
33
|
-
maxWidth,
|
|
34
|
-
maxHeight,
|
|
35
|
-
};
|
|
36
|
-
const dialogBaseContainerStyle = {
|
|
37
|
-
...containerStyle,
|
|
38
|
-
...minMaxStyle,
|
|
39
|
-
};
|
|
40
|
-
const buttons = this.getFooterButtons(buttonCluster, "high-visibility", true);
|
|
41
|
-
return (React.createElement(itwinui_react_1.Dialog, { isOpen: opened, onClose: onClose, closeOnExternalClick: false, closeOnEsc: false, style: style, className: className, isResizable: false, isDraggable: false, trapFocus: trapFocus && /* istanbul ignore next */ modal, preventDocumentScroll: true, "data-testid": "core-dialog-root", ...props },
|
|
42
|
-
modal && React.createElement(itwinui_react_1.Dialog.Backdrop, { style: backgroundStyle }),
|
|
43
|
-
React.createElement(DivWithOutsideClick_1.DivWithOutsideClick, { onOutsideClick: onOutsideClick },
|
|
44
|
-
React.createElement(itwinui_react_1.Dialog.Main, { "data-testid": "core-dialog-container", style: dialogBaseContainerStyle, onPointerDown: this._handleContainerPointerDown },
|
|
45
|
-
!hideHeader && (React.createElement(itwinui_react_1.Dialog.TitleBar, { titleText: title, style: titleStyle })),
|
|
46
|
-
React.createElement(itwinui_react_1.Dialog.Content, { className: contentClassName, style: contentStyle }, this.props.children),
|
|
47
|
-
React.createElement(itwinui_react_1.Dialog.ButtonBar, { style: footerStyle }, buttons)))));
|
|
48
|
-
}
|
|
49
|
-
}
|
|
50
|
-
exports.SimpleDialog = SimpleDialog;
|
|
51
|
-
//# sourceMappingURL=SimpleDialog.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"SimpleDialog.js","sourceRoot":"","sources":["../../../../src/core-react/dialog/SimpleDialog.tsx"],"names":[],"mappings":";AAAA;;;gGAGgG;AAChG;;GAEG;;;AAEH,yBAAuB;AACvB,+BAA+B;AAE/B,qEAAkE;AAGlE,qCAAgD;AAChD,wDAA8C;AA6D9C;;GAEG;AACH,MAAa,YAAa,SAAQ,eAAU;IAC1C,YAAY,KAAwB;QAClC,KAAK,CAAC,KAAK,CAAC,CAAC;IACf,CAAC;IAEe,MAAM;QACpB,MAAM,EACJ,MAAM,EACN,KAAK,EACL,aAAa,EACb,OAAO,EACP,cAAc,EACd,QAAQ,EACR,SAAS,EACT,KAAK,EACL,MAAM,EACN,SAAS,EACT,QAAQ,EACR,eAAe,EACf,UAAU,EACV,WAAW,EACX,KAAK,EACL,YAAY,EACZ,gBAAgB,EAChB,SAAS,EACT,SAAS,EACT,KAAK,EACL,UAAU,EACV,GAAG,KAAK,EACT,GAAG,IAAI,CAAC,KAAK,CAAC;QAEf,MAAM,cAAc,GAAwB;YAC1C,MAAM,EAAE,EAAE;YACV,KAAK;YACL,MAAM;SACP,CAAC;QACF,MAAM,WAAW,GAAwB;YACvC,QAAQ;YACR,SAAS;YACT,QAAQ;YACR,SAAS;SACV,CAAC;QACF,MAAM,wBAAwB,GAAwB;YACpD,GAAG,cAAc;YACjB,GAAG,WAAW;SACf,CAAC;QAEF,MAAM,OAAO,GAAG,IAAI,CAAC,gBAAgB,CACnC,aAAa,EACb,iBAAiB,EACjB,IAAI,CACL,CAAC;QAEF,OAAO,CACL,oBAAC,sBAAM,IACL,MAAM,EAAE,MAAM,EACd,OAAO,EAAE,OAAO,EAChB,oBAAoB,EAAE,KAAK,EAC3B,UAAU,EAAE,KAAK,EACjB,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,SAAS,EACpB,WAAW,EAAE,KAAK,EAClB,WAAW,EAAE,KAAK,EAClB,SAAS,EAAE,SAAS,IAAI,0BAA0B,CAAC,KAAK,EACxD,qBAAqB,EAAE,IAAI,iBACf,kBAAkB,KAC1B,KAAK;YAER,KAAK,IAAI,oBAAC,sBAAM,CAAC,QAAQ,IAAC,KAAK,EAAE,eAAe,GAAI;YACrD,oBAAC,yCAAmB,IAAC,cAAc,EAAE,cAAc;gBACjD,oBAAC,sBAAM,CAAC,IAAI,mBACE,uBAAuB,EACnC,KAAK,EAAE,wBAAwB,EAC/B,aAAa,EAAE,IAAI,CAAC,2BAA2B;oBAE9C,CAAC,UAAU,IAAI,CACd,oBAAC,sBAAM,CAAC,QAAQ,IAAC,SAAS,EAAE,KAAK,EAAE,KAAK,EAAE,UAAU,GAAI,CACzD;oBACD,oBAAC,sBAAM,CAAC,OAAO,IAAC,SAAS,EAAE,gBAAgB,EAAE,KAAK,EAAE,YAAY,IAC7D,IAAI,CAAC,KAAK,CAAC,QAAQ,CACL;oBACjB,oBAAC,sBAAM,CAAC,SAAS,IAAC,KAAK,EAAE,WAAW,IAAG,OAAO,CAAoB,CACtD,CACM,CACf,CACV,CAAC;IACJ,CAAC;CACF;AAvFD,oCAuFC","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/** @packageDocumentation\n * @module Dialog\n */\n\nimport \"./Dialog.scss\";\nimport * as React from \"react\";\nimport type { DialogButtonDef } from \"@itwin/appui-abstract\";\nimport { DivWithOutsideClick } from \"../base/DivWithOutsideClick\";\nimport type { CommonProps } from \"../utils/Props\";\nimport type { Omit } from \"../utils/typeUtils\";\nimport { Dialog as CoreDialog } from \"./Dialog\";\nimport { Dialog } from \"@itwin/itwinui-react\";\n\n/** Properties of [[SimpleDialog]] component.\n * @internal\n */\nexport interface SimpleDialogProps\n extends Omit<React.AllHTMLAttributes<HTMLDivElement>, \"title\">,\n CommonProps {\n /** Indicates whether to show dialog or not */\n opened: boolean;\n /** Indicates whether the focus should be trapped within the dialog. Default: false */\n trapFocus?: boolean;\n\n /** Whether the hide the header. Default: false */\n hideHeader?: boolean;\n /** Title to show in title bar of dialog */\n title?: string | JSX.Element;\n /** List of DialogButtonDef objects specifying buttons and associated onClick events */\n buttonCluster?: DialogButtonDef[];\n\n /** onClick event for X button for dialog */\n onClose?: () => void;\n /** 'keyup' event for Esc key */\n onEscape?: () => void;\n /** Triggered when a click is triggered outside of this dialog. */\n onOutsideClick?: (event: MouseEvent) => any;\n\n /** Whether to show background overlay. Default: true.\n * @note Modeless dialogs require an id and an implementation of onModelessPointerDown.\n */\n modal?: boolean;\n /** An id for a modeless dialog */\n modelessId?: string;\n /** Pointer Down event handler when modeless (modal = false) */\n onModelessPointerDown?: (event: React.PointerEvent, id: string) => void;\n\n /** Initial width of dialog. Displayed in px if value is a number; otherwise, displayed in specified CSS unit. Default: \"50%\" */\n width?: string | number;\n /** Initial height of dialog. Displayed in px if value is a number; otherwise, displayed in specified CSS unit. */\n height?: string | number;\n /** Minimum width that the dialog may be resized to. Displayed in px if value is a number; otherwise, displayed in specified CSS unit. Default: 300px */\n minWidth?: string | number;\n /** Minimum height that the dialog may be resized to. Displayed in px if value is a number; otherwise, displayed in specified CSS unit. Default: 100px */\n minHeight?: string | number;\n /** Maximum width that the dialog may be resized to. Displayed in px if value is a number; otherwise, displayed in specified CSS unit. */\n maxWidth?: string | number;\n /** Maximum height that the dialog may be resized to. Displayed in px if value is a number; otherwise, displayed in specified CSS unit. */\n maxHeight?: string | number;\n\n /** Custom CSS Style for overlay */\n backgroundStyle?: React.CSSProperties;\n /** Custom CSS Style for title */\n titleStyle?: React.CSSProperties;\n /** Custom CSS Style for footer */\n footerStyle?: React.CSSProperties;\n /** Custom CSS class name for the content */\n contentClassName?: string;\n /** Custom CSS Style for the content */\n contentStyle?: React.CSSProperties;\n}\n\n/** itwinui-react [[Dialog]] wrapper that excludes buggy features and adds features from core-react [[Dialog]].\n * @internal\n */\nexport class SimpleDialog extends CoreDialog {\n constructor(props: SimpleDialogProps) {\n super(props);\n }\n\n public override render(): JSX.Element {\n const {\n opened,\n title,\n buttonCluster,\n onClose,\n onOutsideClick,\n minWidth,\n minHeight,\n width,\n height,\n maxHeight,\n maxWidth,\n backgroundStyle,\n titleStyle,\n footerStyle,\n style,\n contentStyle,\n contentClassName,\n className,\n trapFocus,\n modal,\n hideHeader,\n ...props\n } = this.props;\n\n const containerStyle: React.CSSProperties = {\n margin: \"\",\n width,\n height,\n };\n const minMaxStyle: React.CSSProperties = {\n minWidth,\n minHeight,\n maxWidth,\n maxHeight,\n };\n const dialogBaseContainerStyle: React.CSSProperties = {\n ...containerStyle,\n ...minMaxStyle,\n };\n\n const buttons = this.getFooterButtons(\n buttonCluster,\n \"high-visibility\",\n true\n );\n\n return (\n <Dialog\n isOpen={opened}\n onClose={onClose}\n closeOnExternalClick={false}\n closeOnEsc={false}\n style={style}\n className={className}\n isResizable={false}\n isDraggable={false}\n trapFocus={trapFocus && /* istanbul ignore next */ modal}\n preventDocumentScroll={true}\n data-testid=\"core-dialog-root\"\n {...props}\n >\n {modal && <Dialog.Backdrop style={backgroundStyle} />}\n <DivWithOutsideClick onOutsideClick={onOutsideClick}>\n <Dialog.Main\n data-testid=\"core-dialog-container\"\n style={dialogBaseContainerStyle}\n onPointerDown={this._handleContainerPointerDown}\n >\n {!hideHeader && (\n <Dialog.TitleBar titleText={title} style={titleStyle} />\n )}\n <Dialog.Content className={contentClassName} style={contentStyle}>\n {this.props.children}\n </Dialog.Content>\n <Dialog.ButtonBar style={footerStyle}>{buttons}</Dialog.ButtonBar>\n </Dialog.Main>\n </DivWithOutsideClick>\n </Dialog>\n );\n }\n}\n"]}
|
|
@@ -1,68 +0,0 @@
|
|
|
1
|
-
/** @packageDocumentation
|
|
2
|
-
* @module Dialog
|
|
3
|
-
*/
|
|
4
|
-
import "./Dialog.scss";
|
|
5
|
-
import * as React from "react";
|
|
6
|
-
import type { DialogButtonDef } from "@itwin/appui-abstract";
|
|
7
|
-
import type { CommonProps } from "../utils/Props";
|
|
8
|
-
import type { Omit } from "../utils/typeUtils";
|
|
9
|
-
import { Dialog as CoreDialog } from "./Dialog";
|
|
10
|
-
/** Properties of [[SimpleDialog]] component.
|
|
11
|
-
* @internal
|
|
12
|
-
*/
|
|
13
|
-
export interface SimpleDialogProps extends Omit<React.AllHTMLAttributes<HTMLDivElement>, "title">, CommonProps {
|
|
14
|
-
/** Indicates whether to show dialog or not */
|
|
15
|
-
opened: boolean;
|
|
16
|
-
/** Indicates whether the focus should be trapped within the dialog. Default: false */
|
|
17
|
-
trapFocus?: boolean;
|
|
18
|
-
/** Whether the hide the header. Default: false */
|
|
19
|
-
hideHeader?: boolean;
|
|
20
|
-
/** Title to show in title bar of dialog */
|
|
21
|
-
title?: string | JSX.Element;
|
|
22
|
-
/** List of DialogButtonDef objects specifying buttons and associated onClick events */
|
|
23
|
-
buttonCluster?: DialogButtonDef[];
|
|
24
|
-
/** onClick event for X button for dialog */
|
|
25
|
-
onClose?: () => void;
|
|
26
|
-
/** 'keyup' event for Esc key */
|
|
27
|
-
onEscape?: () => void;
|
|
28
|
-
/** Triggered when a click is triggered outside of this dialog. */
|
|
29
|
-
onOutsideClick?: (event: MouseEvent) => any;
|
|
30
|
-
/** Whether to show background overlay. Default: true.
|
|
31
|
-
* @note Modeless dialogs require an id and an implementation of onModelessPointerDown.
|
|
32
|
-
*/
|
|
33
|
-
modal?: boolean;
|
|
34
|
-
/** An id for a modeless dialog */
|
|
35
|
-
modelessId?: string;
|
|
36
|
-
/** Pointer Down event handler when modeless (modal = false) */
|
|
37
|
-
onModelessPointerDown?: (event: React.PointerEvent, id: string) => void;
|
|
38
|
-
/** Initial width of dialog. Displayed in px if value is a number; otherwise, displayed in specified CSS unit. Default: "50%" */
|
|
39
|
-
width?: string | number;
|
|
40
|
-
/** Initial height of dialog. Displayed in px if value is a number; otherwise, displayed in specified CSS unit. */
|
|
41
|
-
height?: string | number;
|
|
42
|
-
/** Minimum width that the dialog may be resized to. Displayed in px if value is a number; otherwise, displayed in specified CSS unit. Default: 300px */
|
|
43
|
-
minWidth?: string | number;
|
|
44
|
-
/** Minimum height that the dialog may be resized to. Displayed in px if value is a number; otherwise, displayed in specified CSS unit. Default: 100px */
|
|
45
|
-
minHeight?: string | number;
|
|
46
|
-
/** Maximum width that the dialog may be resized to. Displayed in px if value is a number; otherwise, displayed in specified CSS unit. */
|
|
47
|
-
maxWidth?: string | number;
|
|
48
|
-
/** Maximum height that the dialog may be resized to. Displayed in px if value is a number; otherwise, displayed in specified CSS unit. */
|
|
49
|
-
maxHeight?: string | number;
|
|
50
|
-
/** Custom CSS Style for overlay */
|
|
51
|
-
backgroundStyle?: React.CSSProperties;
|
|
52
|
-
/** Custom CSS Style for title */
|
|
53
|
-
titleStyle?: React.CSSProperties;
|
|
54
|
-
/** Custom CSS Style for footer */
|
|
55
|
-
footerStyle?: React.CSSProperties;
|
|
56
|
-
/** Custom CSS class name for the content */
|
|
57
|
-
contentClassName?: string;
|
|
58
|
-
/** Custom CSS Style for the content */
|
|
59
|
-
contentStyle?: React.CSSProperties;
|
|
60
|
-
}
|
|
61
|
-
/** itwinui-react [[Dialog]] wrapper that excludes buggy features and adds features from core-react [[Dialog]].
|
|
62
|
-
* @internal
|
|
63
|
-
*/
|
|
64
|
-
export declare class SimpleDialog extends CoreDialog {
|
|
65
|
-
constructor(props: SimpleDialogProps);
|
|
66
|
-
render(): JSX.Element;
|
|
67
|
-
}
|
|
68
|
-
//# sourceMappingURL=SimpleDialog.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"SimpleDialog.d.ts","sourceRoot":"","sources":["../../../../src/core-react/dialog/SimpleDialog.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,eAAe,CAAC;AACvB,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAE7D,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAClD,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,oBAAoB,CAAC;AAC/C,OAAO,EAAE,MAAM,IAAI,UAAU,EAAE,MAAM,UAAU,CAAC;AAGhD;;GAEG;AACH,MAAM,WAAW,iBACf,SAAQ,IAAI,CAAC,KAAK,CAAC,iBAAiB,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC,EAC5D,WAAW;IACb,8CAA8C;IAC9C,MAAM,EAAE,OAAO,CAAC;IAChB,sFAAsF;IACtF,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB,kDAAkD;IAClD,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,2CAA2C;IAC3C,KAAK,CAAC,EAAE,MAAM,GAAG,GAAG,CAAC,OAAO,CAAC;IAC7B,uFAAuF;IACvF,aAAa,CAAC,EAAE,eAAe,EAAE,CAAC;IAElC,4CAA4C;IAC5C,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,gCAAgC;IAChC,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,kEAAkE;IAClE,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,GAAG,CAAC;IAE5C;;OAEG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,kCAAkC;IAClC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,+DAA+D;IAC/D,qBAAqB,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,YAAY,EAAE,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAExE,gIAAgI;IAChI,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,kHAAkH;IAClH,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB,wJAAwJ;IACxJ,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC3B,yJAAyJ;IACzJ,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC5B,yIAAyI;IACzI,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC3B,0IAA0I;IAC1I,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAE5B,mCAAmC;IACnC,eAAe,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IACtC,iCAAiC;IACjC,UAAU,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IACjC,kCAAkC;IAClC,WAAW,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAClC,4CAA4C;IAC5C,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,uCAAuC;IACvC,YAAY,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CACpC;AAED;;GAEG;AACH,qBAAa,YAAa,SAAQ,UAAU;gBAC9B,KAAK,EAAE,iBAAiB;IAIpB,MAAM,IAAI,GAAG,CAAC,OAAO;CAkFtC"}
|
|
@@ -1,47 +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
|
-
/** @packageDocumentation
|
|
6
|
-
* @module Dialog
|
|
7
|
-
*/
|
|
8
|
-
import "./Dialog.scss";
|
|
9
|
-
import * as React from "react";
|
|
10
|
-
import { DivWithOutsideClick } from "../base/DivWithOutsideClick";
|
|
11
|
-
import { Dialog as CoreDialog } from "./Dialog";
|
|
12
|
-
import { Dialog } from "@itwin/itwinui-react";
|
|
13
|
-
/** itwinui-react [[Dialog]] wrapper that excludes buggy features and adds features from core-react [[Dialog]].
|
|
14
|
-
* @internal
|
|
15
|
-
*/
|
|
16
|
-
export class SimpleDialog extends CoreDialog {
|
|
17
|
-
constructor(props) {
|
|
18
|
-
super(props);
|
|
19
|
-
}
|
|
20
|
-
render() {
|
|
21
|
-
const { opened, title, buttonCluster, onClose, onOutsideClick, minWidth, minHeight, width, height, maxHeight, maxWidth, backgroundStyle, titleStyle, footerStyle, style, contentStyle, contentClassName, className, trapFocus, modal, hideHeader, ...props } = this.props;
|
|
22
|
-
const containerStyle = {
|
|
23
|
-
margin: "",
|
|
24
|
-
width,
|
|
25
|
-
height,
|
|
26
|
-
};
|
|
27
|
-
const minMaxStyle = {
|
|
28
|
-
minWidth,
|
|
29
|
-
minHeight,
|
|
30
|
-
maxWidth,
|
|
31
|
-
maxHeight,
|
|
32
|
-
};
|
|
33
|
-
const dialogBaseContainerStyle = {
|
|
34
|
-
...containerStyle,
|
|
35
|
-
...minMaxStyle,
|
|
36
|
-
};
|
|
37
|
-
const buttons = this.getFooterButtons(buttonCluster, "high-visibility", true);
|
|
38
|
-
return (React.createElement(Dialog, { isOpen: opened, onClose: onClose, closeOnExternalClick: false, closeOnEsc: false, style: style, className: className, isResizable: false, isDraggable: false, trapFocus: trapFocus && /* istanbul ignore next */ modal, preventDocumentScroll: true, "data-testid": "core-dialog-root", ...props },
|
|
39
|
-
modal && React.createElement(Dialog.Backdrop, { style: backgroundStyle }),
|
|
40
|
-
React.createElement(DivWithOutsideClick, { onOutsideClick: onOutsideClick },
|
|
41
|
-
React.createElement(Dialog.Main, { "data-testid": "core-dialog-container", style: dialogBaseContainerStyle, onPointerDown: this._handleContainerPointerDown },
|
|
42
|
-
!hideHeader && (React.createElement(Dialog.TitleBar, { titleText: title, style: titleStyle })),
|
|
43
|
-
React.createElement(Dialog.Content, { className: contentClassName, style: contentStyle }, this.props.children),
|
|
44
|
-
React.createElement(Dialog.ButtonBar, { style: footerStyle }, buttons)))));
|
|
45
|
-
}
|
|
46
|
-
}
|
|
47
|
-
//# sourceMappingURL=SimpleDialog.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"SimpleDialog.js","sourceRoot":"","sources":["../../../../src/core-react/dialog/SimpleDialog.tsx"],"names":[],"mappings":"AAAA;;;gGAGgG;AAChG;;GAEG;AAEH,OAAO,eAAe,CAAC;AACvB,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,mBAAmB,EAAE,MAAM,6BAA6B,CAAC;AAGlE,OAAO,EAAE,MAAM,IAAI,UAAU,EAAE,MAAM,UAAU,CAAC;AAChD,OAAO,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC;AA6D9C;;GAEG;AACH,MAAM,OAAO,YAAa,SAAQ,UAAU;IAC1C,YAAY,KAAwB;QAClC,KAAK,CAAC,KAAK,CAAC,CAAC;IACf,CAAC;IAEe,MAAM;QACpB,MAAM,EACJ,MAAM,EACN,KAAK,EACL,aAAa,EACb,OAAO,EACP,cAAc,EACd,QAAQ,EACR,SAAS,EACT,KAAK,EACL,MAAM,EACN,SAAS,EACT,QAAQ,EACR,eAAe,EACf,UAAU,EACV,WAAW,EACX,KAAK,EACL,YAAY,EACZ,gBAAgB,EAChB,SAAS,EACT,SAAS,EACT,KAAK,EACL,UAAU,EACV,GAAG,KAAK,EACT,GAAG,IAAI,CAAC,KAAK,CAAC;QAEf,MAAM,cAAc,GAAwB;YAC1C,MAAM,EAAE,EAAE;YACV,KAAK;YACL,MAAM;SACP,CAAC;QACF,MAAM,WAAW,GAAwB;YACvC,QAAQ;YACR,SAAS;YACT,QAAQ;YACR,SAAS;SACV,CAAC;QACF,MAAM,wBAAwB,GAAwB;YACpD,GAAG,cAAc;YACjB,GAAG,WAAW;SACf,CAAC;QAEF,MAAM,OAAO,GAAG,IAAI,CAAC,gBAAgB,CACnC,aAAa,EACb,iBAAiB,EACjB,IAAI,CACL,CAAC;QAEF,OAAO,CACL,oBAAC,MAAM,IACL,MAAM,EAAE,MAAM,EACd,OAAO,EAAE,OAAO,EAChB,oBAAoB,EAAE,KAAK,EAC3B,UAAU,EAAE,KAAK,EACjB,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,SAAS,EACpB,WAAW,EAAE,KAAK,EAClB,WAAW,EAAE,KAAK,EAClB,SAAS,EAAE,SAAS,IAAI,0BAA0B,CAAC,KAAK,EACxD,qBAAqB,EAAE,IAAI,iBACf,kBAAkB,KAC1B,KAAK;YAER,KAAK,IAAI,oBAAC,MAAM,CAAC,QAAQ,IAAC,KAAK,EAAE,eAAe,GAAI;YACrD,oBAAC,mBAAmB,IAAC,cAAc,EAAE,cAAc;gBACjD,oBAAC,MAAM,CAAC,IAAI,mBACE,uBAAuB,EACnC,KAAK,EAAE,wBAAwB,EAC/B,aAAa,EAAE,IAAI,CAAC,2BAA2B;oBAE9C,CAAC,UAAU,IAAI,CACd,oBAAC,MAAM,CAAC,QAAQ,IAAC,SAAS,EAAE,KAAK,EAAE,KAAK,EAAE,UAAU,GAAI,CACzD;oBACD,oBAAC,MAAM,CAAC,OAAO,IAAC,SAAS,EAAE,gBAAgB,EAAE,KAAK,EAAE,YAAY,IAC7D,IAAI,CAAC,KAAK,CAAC,QAAQ,CACL;oBACjB,oBAAC,MAAM,CAAC,SAAS,IAAC,KAAK,EAAE,WAAW,IAAG,OAAO,CAAoB,CACtD,CACM,CACf,CACV,CAAC;IACJ,CAAC;CACF","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/** @packageDocumentation\n * @module Dialog\n */\n\nimport \"./Dialog.scss\";\nimport * as React from \"react\";\nimport type { DialogButtonDef } from \"@itwin/appui-abstract\";\nimport { DivWithOutsideClick } from \"../base/DivWithOutsideClick\";\nimport type { CommonProps } from \"../utils/Props\";\nimport type { Omit } from \"../utils/typeUtils\";\nimport { Dialog as CoreDialog } from \"./Dialog\";\nimport { Dialog } from \"@itwin/itwinui-react\";\n\n/** Properties of [[SimpleDialog]] component.\n * @internal\n */\nexport interface SimpleDialogProps\n extends Omit<React.AllHTMLAttributes<HTMLDivElement>, \"title\">,\n CommonProps {\n /** Indicates whether to show dialog or not */\n opened: boolean;\n /** Indicates whether the focus should be trapped within the dialog. Default: false */\n trapFocus?: boolean;\n\n /** Whether the hide the header. Default: false */\n hideHeader?: boolean;\n /** Title to show in title bar of dialog */\n title?: string | JSX.Element;\n /** List of DialogButtonDef objects specifying buttons and associated onClick events */\n buttonCluster?: DialogButtonDef[];\n\n /** onClick event for X button for dialog */\n onClose?: () => void;\n /** 'keyup' event for Esc key */\n onEscape?: () => void;\n /** Triggered when a click is triggered outside of this dialog. */\n onOutsideClick?: (event: MouseEvent) => any;\n\n /** Whether to show background overlay. Default: true.\n * @note Modeless dialogs require an id and an implementation of onModelessPointerDown.\n */\n modal?: boolean;\n /** An id for a modeless dialog */\n modelessId?: string;\n /** Pointer Down event handler when modeless (modal = false) */\n onModelessPointerDown?: (event: React.PointerEvent, id: string) => void;\n\n /** Initial width of dialog. Displayed in px if value is a number; otherwise, displayed in specified CSS unit. Default: \"50%\" */\n width?: string | number;\n /** Initial height of dialog. Displayed in px if value is a number; otherwise, displayed in specified CSS unit. */\n height?: string | number;\n /** Minimum width that the dialog may be resized to. Displayed in px if value is a number; otherwise, displayed in specified CSS unit. Default: 300px */\n minWidth?: string | number;\n /** Minimum height that the dialog may be resized to. Displayed in px if value is a number; otherwise, displayed in specified CSS unit. Default: 100px */\n minHeight?: string | number;\n /** Maximum width that the dialog may be resized to. Displayed in px if value is a number; otherwise, displayed in specified CSS unit. */\n maxWidth?: string | number;\n /** Maximum height that the dialog may be resized to. Displayed in px if value is a number; otherwise, displayed in specified CSS unit. */\n maxHeight?: string | number;\n\n /** Custom CSS Style for overlay */\n backgroundStyle?: React.CSSProperties;\n /** Custom CSS Style for title */\n titleStyle?: React.CSSProperties;\n /** Custom CSS Style for footer */\n footerStyle?: React.CSSProperties;\n /** Custom CSS class name for the content */\n contentClassName?: string;\n /** Custom CSS Style for the content */\n contentStyle?: React.CSSProperties;\n}\n\n/** itwinui-react [[Dialog]] wrapper that excludes buggy features and adds features from core-react [[Dialog]].\n * @internal\n */\nexport class SimpleDialog extends CoreDialog {\n constructor(props: SimpleDialogProps) {\n super(props);\n }\n\n public override render(): JSX.Element {\n const {\n opened,\n title,\n buttonCluster,\n onClose,\n onOutsideClick,\n minWidth,\n minHeight,\n width,\n height,\n maxHeight,\n maxWidth,\n backgroundStyle,\n titleStyle,\n footerStyle,\n style,\n contentStyle,\n contentClassName,\n className,\n trapFocus,\n modal,\n hideHeader,\n ...props\n } = this.props;\n\n const containerStyle: React.CSSProperties = {\n margin: \"\",\n width,\n height,\n };\n const minMaxStyle: React.CSSProperties = {\n minWidth,\n minHeight,\n maxWidth,\n maxHeight,\n };\n const dialogBaseContainerStyle: React.CSSProperties = {\n ...containerStyle,\n ...minMaxStyle,\n };\n\n const buttons = this.getFooterButtons(\n buttonCluster,\n \"high-visibility\",\n true\n );\n\n return (\n <Dialog\n isOpen={opened}\n onClose={onClose}\n closeOnExternalClick={false}\n closeOnEsc={false}\n style={style}\n className={className}\n isResizable={false}\n isDraggable={false}\n trapFocus={trapFocus && /* istanbul ignore next */ modal}\n preventDocumentScroll={true}\n data-testid=\"core-dialog-root\"\n {...props}\n >\n {modal && <Dialog.Backdrop style={backgroundStyle} />}\n <DivWithOutsideClick onOutsideClick={onOutsideClick}>\n <Dialog.Main\n data-testid=\"core-dialog-container\"\n style={dialogBaseContainerStyle}\n onPointerDown={this._handleContainerPointerDown}\n >\n {!hideHeader && (\n <Dialog.TitleBar titleText={title} style={titleStyle} />\n )}\n <Dialog.Content className={contentClassName} style={contentStyle}>\n {this.props.children}\n </Dialog.Content>\n <Dialog.ButtonBar style={footerStyle}>{buttons}</Dialog.ButtonBar>\n </Dialog.Main>\n </DivWithOutsideClick>\n </Dialog>\n );\n }\n}\n"]}
|