@itwin/core-react 4.9.0 → 4.10.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.
- package/CHANGELOG.md +9 -1
- package/lib/cjs/core-react/autosuggest/AutoSuggest.d.ts.map +1 -1
- package/lib/cjs/core-react/autosuggest/AutoSuggest.js +11 -6
- package/lib/cjs/core-react/autosuggest/AutoSuggest.js.map +1 -1
- package/lib/cjs/core-react/autosuggest/AutoSuggest.scss +1 -1
- 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/button/UnderlinedButton.js +1 -1
- package/lib/cjs/core-react/button/UnderlinedButton.js.map +1 -1
- package/lib/cjs/core-react/checklistbox/CheckListBox.d.ts.map +1 -1
- package/lib/cjs/core-react/checklistbox/CheckListBox.js +4 -1
- package/lib/cjs/core-react/checklistbox/CheckListBox.js.map +1 -1
- package/lib/cjs/core-react/classes.scss +0 -1
- package/lib/cjs/core-react/colorvariables.scss +1 -1
- package/lib/cjs/core-react/contextmenu/ContextMenu.d.ts.map +1 -1
- package/lib/cjs/core-react/contextmenu/ContextMenu.js +10 -9
- package/lib/cjs/core-react/contextmenu/ContextMenu.js.map +1 -1
- package/lib/cjs/core-react/contextmenu/ContextMenuItem.js +1 -1
- package/lib/cjs/core-react/contextmenu/ContextMenuItem.js.map +1 -1
- 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 +4 -13
- package/lib/cjs/core-react/dialog/Dialog.d.ts.map +1 -1
- package/lib/cjs/core-react/dialog/Dialog.js +9 -7
- package/lib/cjs/core-react/dialog/Dialog.js.map +1 -1
- 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/ExpandableList.d.ts +0 -1
- package/lib/cjs/core-react/expandable/ExpandableList.d.ts.map +1 -1
- package/lib/cjs/core-react/expandable/ExpandableList.js +0 -1
- package/lib/cjs/core-react/expandable/ExpandableList.js.map +1 -1
- package/lib/cjs/core-react/focus/ItemKeyboardNavigator.d.ts +0 -1
- package/lib/cjs/core-react/focus/ItemKeyboardNavigator.d.ts.map +1 -1
- package/lib/cjs/core-react/focus/ItemKeyboardNavigator.js +22 -21
- package/lib/cjs/core-react/focus/ItemKeyboardNavigator.js.map +1 -1
- 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/index.scss +0 -1
- package/lib/cjs/core-react/inputs/iconinput/IconInput.d.ts.map +1 -1
- package/lib/cjs/core-react/inputs/iconinput/IconInput.js +2 -2
- package/lib/cjs/core-react/inputs/iconinput/IconInput.js.map +1 -1
- package/lib/cjs/core-react/inputs/iconinput/IconInput.scss +1 -1
- package/lib/cjs/core-react/inputs/input.scss +1 -5
- package/lib/cjs/core-react/inputs/numberinput/NumberInput.d.ts +3 -1
- package/lib/cjs/core-react/inputs/numberinput/NumberInput.d.ts.map +1 -1
- package/lib/cjs/core-react/inputs/numberinput/NumberInput.js +6 -6
- package/lib/cjs/core-react/inputs/numberinput/NumberInput.js.map +1 -1
- package/lib/cjs/core-react/inputs/numberinput/NumberInput.scss +1 -1
- package/lib/cjs/core-react/listbox/Listbox.js +6 -7
- package/lib/cjs/core-react/listbox/Listbox.js.map +1 -1
- package/lib/cjs/core-react/loading/LoadingSpinner.d.ts +3 -1
- package/lib/cjs/core-react/loading/LoadingSpinner.d.ts.map +1 -1
- package/lib/cjs/core-react/loading/LoadingSpinner.js.map +1 -1
- 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.d.ts.map +1 -1
- package/lib/cjs/core-react/popup/Popup.js +7 -10
- package/lib/cjs/core-react/popup/Popup.js.map +1 -1
- package/lib/cjs/core-react/radialmenu/RadialMenu.d.ts.map +1 -1
- package/lib/cjs/core-react/radialmenu/RadialMenu.js +1 -1
- package/lib/cjs/core-react/radialmenu/RadialMenu.js.map +1 -1
- package/lib/cjs/core-react/searchbox/SearchBox.js +2 -2
- package/lib/cjs/core-react/searchbox/SearchBox.js.map +1 -1
- package/lib/cjs/core-react/settings/SettingsManager.d.ts +0 -1
- package/lib/cjs/core-react/settings/SettingsManager.d.ts.map +1 -1
- package/lib/cjs/core-react/tree/Node.d.ts +3 -1
- package/lib/cjs/core-react/tree/Node.d.ts.map +1 -1
- package/lib/cjs/core-react/tree/Node.js +2 -3
- package/lib/cjs/core-react/tree/Node.js.map +1 -1
- package/lib/cjs/core-react/tree/Node.scss +1 -1
- 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/getObjectClassName.js +2 -3
- package/lib/cjs/core-react/utils/getObjectClassName.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.d.ts.map +1 -1
- package/lib/cjs/core-react/utils/hooks/useResizeObserver.js +18 -22
- package/lib/cjs/core-react/utils/hooks/useResizeObserver.js.map +1 -1
- package/lib/esm/core-react/autosuggest/AutoSuggest.d.ts.map +1 -1
- package/lib/esm/core-react/autosuggest/AutoSuggest.js +11 -6
- package/lib/esm/core-react/autosuggest/AutoSuggest.js.map +1 -1
- package/lib/esm/core-react/autosuggest/AutoSuggest.scss +1 -1
- 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/button/UnderlinedButton.js +1 -1
- package/lib/esm/core-react/button/UnderlinedButton.js.map +1 -1
- package/lib/esm/core-react/checklistbox/CheckListBox.d.ts.map +1 -1
- package/lib/esm/core-react/checklistbox/CheckListBox.js +4 -1
- package/lib/esm/core-react/checklistbox/CheckListBox.js.map +1 -1
- package/lib/esm/core-react/classes.scss +0 -1
- package/lib/esm/core-react/colorvariables.scss +1 -1
- package/lib/esm/core-react/contextmenu/ContextMenu.d.ts.map +1 -1
- package/lib/esm/core-react/contextmenu/ContextMenu.js +10 -9
- package/lib/esm/core-react/contextmenu/ContextMenu.js.map +1 -1
- package/lib/esm/core-react/contextmenu/ContextMenuItem.js +1 -1
- package/lib/esm/core-react/contextmenu/ContextMenuItem.js.map +1 -1
- 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 +4 -13
- package/lib/esm/core-react/dialog/Dialog.d.ts.map +1 -1
- package/lib/esm/core-react/dialog/Dialog.js +9 -7
- package/lib/esm/core-react/dialog/Dialog.js.map +1 -1
- 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/ExpandableList.d.ts +0 -1
- package/lib/esm/core-react/expandable/ExpandableList.d.ts.map +1 -1
- package/lib/esm/core-react/expandable/ExpandableList.js +0 -1
- package/lib/esm/core-react/expandable/ExpandableList.js.map +1 -1
- package/lib/esm/core-react/focus/ItemKeyboardNavigator.d.ts +0 -1
- package/lib/esm/core-react/focus/ItemKeyboardNavigator.d.ts.map +1 -1
- package/lib/esm/core-react/focus/ItemKeyboardNavigator.js +22 -21
- package/lib/esm/core-react/focus/ItemKeyboardNavigator.js.map +1 -1
- 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/index.scss +0 -1
- package/lib/esm/core-react/inputs/iconinput/IconInput.d.ts.map +1 -1
- package/lib/esm/core-react/inputs/iconinput/IconInput.js +2 -2
- package/lib/esm/core-react/inputs/iconinput/IconInput.js.map +1 -1
- package/lib/esm/core-react/inputs/iconinput/IconInput.scss +1 -1
- package/lib/esm/core-react/inputs/input.scss +1 -5
- package/lib/esm/core-react/inputs/numberinput/NumberInput.d.ts +3 -1
- package/lib/esm/core-react/inputs/numberinput/NumberInput.d.ts.map +1 -1
- package/lib/esm/core-react/inputs/numberinput/NumberInput.js +6 -6
- package/lib/esm/core-react/inputs/numberinput/NumberInput.js.map +1 -1
- package/lib/esm/core-react/inputs/numberinput/NumberInput.scss +1 -1
- package/lib/esm/core-react/listbox/Listbox.js +6 -7
- package/lib/esm/core-react/listbox/Listbox.js.map +1 -1
- package/lib/esm/core-react/loading/LoadingSpinner.d.ts +3 -1
- package/lib/esm/core-react/loading/LoadingSpinner.d.ts.map +1 -1
- package/lib/esm/core-react/loading/LoadingSpinner.js.map +1 -1
- 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.d.ts.map +1 -1
- package/lib/esm/core-react/popup/Popup.js +7 -10
- package/lib/esm/core-react/popup/Popup.js.map +1 -1
- package/lib/esm/core-react/radialmenu/RadialMenu.d.ts.map +1 -1
- package/lib/esm/core-react/radialmenu/RadialMenu.js +1 -1
- package/lib/esm/core-react/radialmenu/RadialMenu.js.map +1 -1
- package/lib/esm/core-react/searchbox/SearchBox.js +2 -2
- package/lib/esm/core-react/searchbox/SearchBox.js.map +1 -1
- package/lib/esm/core-react/settings/SettingsManager.d.ts +0 -1
- package/lib/esm/core-react/settings/SettingsManager.d.ts.map +1 -1
- package/lib/esm/core-react/tree/Node.d.ts +3 -1
- package/lib/esm/core-react/tree/Node.d.ts.map +1 -1
- package/lib/esm/core-react/tree/Node.js +2 -3
- package/lib/esm/core-react/tree/Node.js.map +1 -1
- package/lib/esm/core-react/tree/Node.scss +1 -1
- 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/getObjectClassName.js +2 -3
- package/lib/esm/core-react/utils/getObjectClassName.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.d.ts.map +1 -1
- package/lib/esm/core-react/utils/hooks/useResizeObserver.js +18 -22
- package/lib/esm/core-react/utils/hooks/useResizeObserver.js.map +1 -1
- package/package.json +13 -13
- package/lib/cjs/core-react/expandable/ExpandableList.scss +0 -9
- package/lib/cjs/core-react/expandable/classes.scss +0 -9
- package/lib/cjs/core-react/expandable/index.scss +0 -5
- package/lib/cjs/core-react/expandable/list.scss +0 -35
- package/lib/esm/core-react/expandable/ExpandableList.scss +0 -9
- package/lib/esm/core-react/expandable/classes.scss +0 -9
- package/lib/esm/core-react/expandable/index.scss +0 -5
- package/lib/esm/core-react/expandable/list.scss +0 -35
|
@@ -21,8 +21,7 @@ class GlobalContextMenu extends React.PureComponent {
|
|
|
21
21
|
parentDocument: null,
|
|
22
22
|
};
|
|
23
23
|
this._handleRefSet = (popupDiv) => {
|
|
24
|
-
|
|
25
|
-
const parentDocument = (_a = popupDiv === null || popupDiv === void 0 ? void 0 : popupDiv.ownerDocument) !== null && _a !== void 0 ? _a : null;
|
|
24
|
+
const parentDocument = popupDiv?.ownerDocument ?? null;
|
|
26
25
|
if (parentDocument) {
|
|
27
26
|
this._container = parentDocument.createElement("div");
|
|
28
27
|
this._container.id =
|
|
@@ -34,7 +33,7 @@ class GlobalContextMenu extends React.PureComponent {
|
|
|
34
33
|
rt = parentDocument.createElement("div");
|
|
35
34
|
rt.id = "core-global-context-menu-root";
|
|
36
35
|
// istanbul ignore next
|
|
37
|
-
(
|
|
36
|
+
(parentDocument.body.querySelector('[data-root-container="appui-root-id"]') ?? parentDocument.body).appendChild(rt);
|
|
38
37
|
}
|
|
39
38
|
rt.appendChild(this._container);
|
|
40
39
|
// used to support component rendering in pop-out window
|
|
@@ -50,7 +49,6 @@ class GlobalContextMenu extends React.PureComponent {
|
|
|
50
49
|
}
|
|
51
50
|
}
|
|
52
51
|
render() {
|
|
53
|
-
var _a;
|
|
54
52
|
const { x, y, identifier, contextMenuComponent, ...props } = this.props;
|
|
55
53
|
const positioningStyle = {
|
|
56
54
|
left: x,
|
|
@@ -61,7 +59,7 @@ class GlobalContextMenu extends React.PureComponent {
|
|
|
61
59
|
ReactDOM.createPortal(React.createElement("div", { className: "core-context-menu-global", style: positioningStyle },
|
|
62
60
|
React.createElement(CtxMenu, { ...props })),
|
|
63
61
|
// istanbul ignore next
|
|
64
|
-
|
|
62
|
+
this.state.parentDocument.body.querySelector('[data-root-container="appui-root-id"]') ?? this.state.parentDocument.body)));
|
|
65
63
|
}
|
|
66
64
|
}
|
|
67
65
|
exports.GlobalContextMenu = GlobalContextMenu;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"GlobalContextMenu.js","sourceRoot":"","sources":["../../../../src/core-react/contextmenu/GlobalContextMenu.tsx"],"names":[],"mappings":";AAAA;;;gGAGgG;AAChG;;GAEG;;;AAEH,+BAA+B;AAC/B,sCAAsC;AAEtC,+CAA4C;AAqB5C;;GAEG;AACH,MAAa,iBAAkB,SAAQ,KAAK,CAAC,aAG5C;IAOC,YAAY,KAA6B;QACvC,KAAK,CAAC,KAAK,CAAC,CAAC;QALU,UAAK,GAA2B;YACvD,cAAc,EAAE,IAAI;SACrB,CAAC;QAcM,kBAAa,GAAG,CAAC,QAA4B,EAAE,EAAE
|
|
1
|
+
{"version":3,"file":"GlobalContextMenu.js","sourceRoot":"","sources":["../../../../src/core-react/contextmenu/GlobalContextMenu.tsx"],"names":[],"mappings":";AAAA;;;gGAGgG;AAChG;;GAEG;;;AAEH,+BAA+B;AAC/B,sCAAsC;AAEtC,+CAA4C;AAqB5C;;GAEG;AACH,MAAa,iBAAkB,SAAQ,KAAK,CAAC,aAG5C;IAOC,YAAY,KAA6B;QACvC,KAAK,CAAC,KAAK,CAAC,CAAC;QALU,UAAK,GAA2B;YACvD,cAAc,EAAE,IAAI;SACrB,CAAC;QAcM,kBAAa,GAAG,CAAC,QAA4B,EAAE,EAAE;YACvD,MAAM,cAAc,GAAG,QAAQ,EAAE,aAAa,IAAI,IAAI,CAAC;YACvD,IAAI,cAAc,EAAE;gBAClB,IAAI,CAAC,UAAU,GAAG,cAAc,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;gBACtD,IAAI,CAAC,UAAU,CAAC,EAAE;oBAChB,IAAI,CAAC,KAAK,CAAC,UAAU,KAAK,SAAS;wBACjC,CAAC,CAAC,UAAU,IAAI,CAAC,KAAK,CAAC,UAAU,EAAE;wBACnC,CAAC,CAAC,0BAA0B,CAAC;gBACjC,IAAI,EAAE,GAAG,cAAc,CAAC,cAAc,CACpC,+BAA+B,CACd,CAAC;gBACpB,IAAI,CAAC,EAAE,EAAE;oBACP,EAAE,GAAG,cAAc,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;oBACzC,EAAE,CAAC,EAAE,GAAG,+BAA+B,CAAC;oBACxC,uBAAuB;oBACvB,CACE,cAAc,CAAC,IAAI,CAAC,aAAa,CAC/B,uCAAuC,CACxC,IAAI,cAAc,CAAC,IAAI,CACzB,CAAC,WAAW,CAAC,EAAE,CAAC,CAAC;iBACnB;gBACD,EAAE,CAAC,WAAW,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;gBAEhC,wDAAwD;gBACxD,IAAI,CAAC,QAAQ,CAAC,EAAE,cAAc,EAAE,CAAC,CAAC;aACnC;QACH,CAAC,CAAC;IApCF,CAAC;IAEe,oBAAoB;QAClC,uBAAuB;QACvB,IAAI,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,UAAU,CAAC,aAAa,EAAE;YACpD,UAAU;YACV,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,WAAW,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;SAC5D;IACH,CAAC;IA8Be,MAAM;QACpB,MAAM,EAAE,CAAC,EAAE,CAAC,EAAE,UAAU,EAAE,oBAAoB,EAAE,GAAG,KAAK,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC;QACxE,MAAM,gBAAgB,GAAwB;YAC5C,IAAI,EAAE,CAAC;YACP,GAAG,EAAE,CAAC;SACP,CAAC;QAEF,MAAM,OAAO,GAAG,oBAAoB,IAAI,yBAAW,CAAC;QAEpD,OAAO,CACL,6BAAK,GAAG,EAAE,IAAI,CAAC,aAAa,EAAE,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,IACrD,IAAI,CAAC,KAAK,CAAC,cAAc;YACxB,QAAQ,CAAC,YAAY,CACnB,6BAAK,SAAS,EAAC,0BAA0B,EAAC,KAAK,EAAE,gBAAgB;gBAC/D,oBAAC,OAAO,OAAK,KAAK,GAAI,CAClB;YACN,uBAAuB;YACvB,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,IAAI,CAAC,aAAa,CAC1C,uCAAuC,CACxC,IAAI,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,IAAI,CACpC,CACC,CACP,CAAC;IACJ,CAAC;CACF;AA1ED,8CA0EC","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 ContextMenu\n */\n\nimport * as React from \"react\";\nimport * as ReactDOM from \"react-dom\";\nimport type { ContextMenuProps } from \"./ContextMenu\";\nimport { ContextMenu } from \"./ContextMenu\";\n\n/** Properties for the [[GlobalContextMenu]] component\n * @public\n */\nexport interface GlobalContextMenuProps extends ContextMenuProps {\n /** Unique identifier, to distinguish from other GlobalContextMenu components. Needed only if multiple GlobalContextMenus are used simultaneously. */\n identifier?: string;\n /** Specifies the x/horizontal position on the viewport. */\n x: number | string;\n /** Specifies the y/vertical position on the viewport. */\n y: number | string;\n /** Context menu element. Default: ContextMenu */\n contextMenuComponent?: React.ComponentType<ContextMenuProps>;\n}\n\n/** @internal */\ninterface GlobalContextMenuState {\n parentDocument: Document | null;\n}\n\n/** GlobalContextMenu React component used to display a [[ContextMenu]] at the cursor\n * @public\n */\nexport class GlobalContextMenu extends React.PureComponent<\n GlobalContextMenuProps,\n GlobalContextMenuState\n> {\n private _container?: HTMLDivElement;\n\n public override readonly state: GlobalContextMenuState = {\n parentDocument: null,\n };\n\n constructor(props: GlobalContextMenuProps) {\n super(props);\n }\n\n public override componentWillUnmount() {\n // istanbul ignore else\n if (this._container && this._container.parentElement) {\n // cleanup\n this._container.parentElement.removeChild(this._container);\n }\n }\n\n private _handleRefSet = (popupDiv: HTMLElement | null) => {\n const parentDocument = popupDiv?.ownerDocument ?? null;\n if (parentDocument) {\n this._container = parentDocument.createElement(\"div\");\n this._container.id =\n this.props.identifier !== undefined\n ? `dialog-${this.props.identifier}`\n : \"core-global-context-menu\";\n let rt = parentDocument.getElementById(\n \"core-global-context-menu-root\"\n ) as HTMLDivElement;\n if (!rt) {\n rt = parentDocument.createElement(\"div\");\n rt.id = \"core-global-context-menu-root\";\n // istanbul ignore next\n (\n parentDocument.body.querySelector(\n '[data-root-container=\"appui-root-id\"]'\n ) ?? parentDocument.body\n ).appendChild(rt);\n }\n rt.appendChild(this._container);\n\n // used to support component rendering in pop-out window\n this.setState({ parentDocument });\n }\n };\n\n public override render(): React.ReactNode {\n const { x, y, identifier, contextMenuComponent, ...props } = this.props;\n const positioningStyle: React.CSSProperties = {\n left: x,\n top: y,\n };\n\n const CtxMenu = contextMenuComponent || ContextMenu;\n\n return (\n <div ref={this._handleRefSet} style={{ display: \"none\" }}>\n {this.state.parentDocument &&\n ReactDOM.createPortal(\n <div className=\"core-context-menu-global\" style={positioningStyle}>\n <CtxMenu {...props} />\n </div>,\n // istanbul ignore next\n this.state.parentDocument.body.querySelector(\n '[data-root-container=\"appui-root-id\"]'\n ) ?? this.state.parentDocument.body\n )}\n </div>\n );\n }\n}\n"]}
|
|
@@ -3,10 +3,11 @@
|
|
|
3
3
|
*/
|
|
4
4
|
import * as React from "react";
|
|
5
5
|
import type { DialogButtonDef } from "@itwin/appui-abstract";
|
|
6
|
-
import
|
|
6
|
+
import { Button } from "@itwin/itwinui-react";
|
|
7
7
|
import type { CommonProps } from "../utils/Props";
|
|
8
8
|
import type { Omit } from "../utils/typeUtils";
|
|
9
9
|
import "./Dialog.scss";
|
|
10
|
+
type ButtonProps = React.ComponentPropsWithoutRef<typeof Button>;
|
|
10
11
|
/** Enum for dialog alignment
|
|
11
12
|
* @public
|
|
12
13
|
*/
|
|
@@ -88,20 +89,10 @@ export interface DialogProps extends Omit<React.AllHTMLAttributes<HTMLDivElement
|
|
|
88
89
|
/** Custom CSS Style for the content */
|
|
89
90
|
contentStyle?: React.CSSProperties;
|
|
90
91
|
}
|
|
91
|
-
/**
|
|
92
|
-
interface DialogState {
|
|
93
|
-
rightResizing: boolean;
|
|
94
|
-
downResizing: boolean;
|
|
95
|
-
x?: number;
|
|
96
|
-
y?: number;
|
|
97
|
-
width?: number;
|
|
98
|
-
height?: number;
|
|
99
|
-
}
|
|
100
|
-
/**
|
|
101
|
-
* Dialog React component with optional resizing and dragging functionality
|
|
92
|
+
/** Dialog React component with optional resizing and dragging functionality
|
|
102
93
|
* @public
|
|
103
94
|
*/
|
|
104
|
-
export declare class Dialog extends React.Component<DialogProps
|
|
95
|
+
export declare class Dialog extends React.Component<DialogProps> {
|
|
105
96
|
private _parentDocument;
|
|
106
97
|
static defaultProps: Partial<DialogProps>;
|
|
107
98
|
constructor(props: DialogProps);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Dialog.d.ts","sourceRoot":"","sources":["../../../../src/core-react/dialog/Dialog.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAGH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;
|
|
1
|
+
{"version":3,"file":"Dialog.d.ts","sourceRoot":"","sources":["../../../../src/core-react/dialog/Dialog.tsx"],"names":[],"mappings":"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"}
|
|
@@ -32,8 +32,7 @@ var DialogAlignment;
|
|
|
32
32
|
DialogAlignment["Bottom"] = "bottom";
|
|
33
33
|
DialogAlignment["BottomRight"] = "bottom-right";
|
|
34
34
|
})(DialogAlignment = exports.DialogAlignment || (exports.DialogAlignment = {}));
|
|
35
|
-
/**
|
|
36
|
-
* Dialog React component with optional resizing and dragging functionality
|
|
35
|
+
/** Dialog React component with optional resizing and dragging functionality
|
|
37
36
|
* @public
|
|
38
37
|
*/
|
|
39
38
|
class Dialog extends React.Component {
|
|
@@ -46,7 +45,9 @@ class Dialog extends React.Component {
|
|
|
46
45
|
this._parentDocument = containerDiv.ownerDocument;
|
|
47
46
|
};
|
|
48
47
|
this._handleKeyUp = (event) => {
|
|
49
|
-
if (event.key === ts_key_enum_1.Key.Escape
|
|
48
|
+
if (event.key === ts_key_enum_1.Key.Escape.valueOf() &&
|
|
49
|
+
this.props.opened &&
|
|
50
|
+
this.props.onEscape) {
|
|
50
51
|
this.props.onEscape();
|
|
51
52
|
}
|
|
52
53
|
};
|
|
@@ -65,12 +66,12 @@ class Dialog extends React.Component {
|
|
|
65
66
|
this._parentDocument.addEventListener("keyup", this._handleKeyUp, true);
|
|
66
67
|
}
|
|
67
68
|
render() {
|
|
68
|
-
const { opened, title, footer, buttonCluster, onClose, onEscape, onOutsideClick, minWidth, minHeight, x, y, width, height, maxHeight, maxWidth, backgroundStyle, titleStyle, footerStyle, style, contentStyle, contentClassName, modal, resizable, movable, className, alignment, inset, trapFocus, modelessId, onModelessPointerDown, hideHeader, header, ...props } = this.props;
|
|
69
|
+
const { opened, title, footer, buttonCluster, onClose, onEscape, onOutsideClick, minWidth, minHeight, x, y, width, height, maxHeight, maxWidth, backgroundStyle, titleStyle, footerStyle, style, contentStyle, contentClassName, modal, resizable, movable, className, alignment, inset, trapFocus, modelessId, onModelessPointerDown, hideHeader, header, as, ...props } = this.props;
|
|
69
70
|
let initialOffset = {};
|
|
70
71
|
if (x || y) {
|
|
71
72
|
initialOffset = {
|
|
72
|
-
left: x
|
|
73
|
-
top: y
|
|
73
|
+
left: x ?? 0,
|
|
74
|
+
top: y ?? 0,
|
|
74
75
|
transform: "none",
|
|
75
76
|
};
|
|
76
77
|
}
|
|
@@ -98,7 +99,8 @@ class Dialog extends React.Component {
|
|
|
98
99
|
!hideHeader &&
|
|
99
100
|
(header || (React.createElement(itwinui_react_1.Dialog.TitleBar, { titleText: title, style: titleStyle, "data-testid": "core-dialog-head" }))),
|
|
100
101
|
React.createElement(itwinui_react_1.Dialog.Content, { className: contentClassName, style: { padding: inset ? undefined : 0, ...contentStyle } }, this.props.children),
|
|
101
|
-
footer ||
|
|
102
|
+
footer ||
|
|
103
|
+
(buttons && (React.createElement(itwinui_react_1.Dialog.ButtonBar, { style: footerStyle }, buttons)))))));
|
|
102
104
|
}
|
|
103
105
|
getCSSClassNameFromAlignment(alignment) {
|
|
104
106
|
switch (alignment) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Dialog.js","sourceRoot":"","sources":["../../../../src/core-react/dialog/Dialog.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 Dialog\n */\n\nimport classnames from \"classnames\";\nimport * as React from \"react\";\nimport { Key } from \"ts-key-enum\";\nimport type { DialogButtonDef } from \"@itwin/appui-abstract\";\nimport { DialogButtonType } from \"@itwin/appui-abstract\";\nimport { Dialog as BaseDialog, Button } from \"@itwin/itwinui-react\";\nimport type { ButtonProps } from \"@itwin/itwinui-react\";\nimport { DivWithOutsideClick } from \"../base/DivWithOutsideClick\";\nimport { UiCore } from \"../UiCore\";\nimport type { CommonProps } from \"../utils/Props\";\nimport type { Omit } from \"../utils/typeUtils\";\nimport \"./Dialog.scss\";\n\n// cspell:ignore focustrap\n\n/** Enum for dialog alignment\n * @public\n */\nexport enum DialogAlignment {\n TopLeft = \"top-left\",\n Top = \"top\",\n TopRight = \"top-right\",\n Left = \"left\",\n Center = \"center\",\n Right = \"right\",\n BottomLeft = \"bottom-left\",\n Bottom = \"bottom\",\n BottomRight = \"bottom-right\",\n}\n\n/** Properties for the [[Dialog]] component\n * @public\n */\nexport interface DialogProps\n extends Omit<React.AllHTMLAttributes<HTMLDivElement>, \"title\">,\n CommonProps {\n /** Indicates whether to show dialog or not */\n opened: boolean;\n\n /** Indicates whether the user can resize dialog with cursor. Default: false */\n resizable?: boolean;\n /** Indicates whether the user can move dialog with cursor. Default: false */\n movable?: boolean;\n /** Indicates whether the content should be inset. Default: true */\n inset?: 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 /** Override for the header */\n header?: React.ReactNode;\n /** Title to show in title bar of dialog */\n title?: string | React.ReactElement;\n /** Footer to show at bottom of dialog. Note: will override buttonCluster */\n footer?: string | React.ReactElement;\n /** List of DialogButtonDef objects specifying buttons and associated onClick events */\n buttonCluster?: DialogButtonDef[];\n\n /** Default alignment of dialog. */\n alignment?: DialogAlignment;\n /** Initial x/left position of dialog in px. */\n x?: number;\n /** Initial y/top position of dialog in px. */\n y?: number;\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 /** 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: 135px */\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. Default: 100% */\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 /** 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 /** 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/** @internal */\ninterface DialogState {\n rightResizing: boolean;\n downResizing: boolean;\n x?: number;\n y?: number;\n width?: number;\n height?: number;\n}\n\n/**\n * Dialog React component with optional resizing and dragging functionality\n * @public\n */\nexport class Dialog extends React.Component<DialogProps, DialogState> {\n private _parentDocument = document;\n public static defaultProps: Partial<DialogProps> = {\n maxWidth: \"100%\",\n width: \"50%\",\n hideHeader: false,\n resizable: false,\n movable: false,\n modal: true,\n inset: true,\n trapFocus: false,\n };\n\n constructor(props: DialogProps) {\n super(props);\n }\n\n public override componentWillUnmount(): void {\n this._parentDocument.removeEventListener(\"keyup\", this._handleKeyUp, true);\n }\n\n public override componentDidMount(): void {\n this._parentDocument.addEventListener(\"keyup\", this._handleKeyUp, true);\n }\n\n // istanbul ignore next\n public handleRefSet = (containerDiv: HTMLDivElement | null) => {\n if (containerDiv) this._parentDocument = containerDiv.ownerDocument;\n };\n\n public override render(): React.ReactElement {\n const {\n opened,\n title,\n footer,\n buttonCluster,\n onClose,\n onEscape,\n onOutsideClick,\n minWidth,\n minHeight,\n x,\n y,\n width,\n height,\n maxHeight,\n maxWidth,\n backgroundStyle,\n titleStyle,\n footerStyle,\n style,\n contentStyle,\n contentClassName,\n modal,\n resizable,\n movable,\n className,\n alignment,\n inset,\n trapFocus,\n modelessId,\n onModelessPointerDown,\n hideHeader,\n header,\n ...props\n } = this.props;\n\n let initialOffset: React.CSSProperties = {};\n if (x || y) {\n initialOffset = {\n left: x ?? 0,\n top: y ?? 0,\n transform: \"none\",\n };\n }\n\n const containerStyle: React.CSSProperties = {\n ...initialOffset,\n margin: \"\",\n width,\n height,\n };\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 <BaseDialog\n isOpen={opened}\n onClose={onClose}\n closeOnExternalClick={false}\n closeOnEsc={false}\n style={style}\n className={classnames(\"core-dialog\", className)}\n isDraggable={movable}\n isResizable={resizable}\n trapFocus={trapFocus && /* istanbul ignore next */ modal}\n preventDocumentScroll={true}\n data-testid=\"core-dialog-root\"\n {...props}\n >\n {modal && <BaseDialog.Backdrop style={backgroundStyle} />}\n <DivWithOutsideClick onOutsideClick={onOutsideClick}>\n <BaseDialog.Main\n className={classnames(\n \"core-dialog-main\",\n alignment && this.getCSSClassNameFromAlignment(alignment)\n )}\n data-testid=\"core-dialog-container\"\n style={dialogBaseContainerStyle}\n onPointerDown={this._handleContainerPointerDown}\n >\n {!hideHeader &&\n (header || (\n <BaseDialog.TitleBar\n titleText={title}\n style={titleStyle}\n data-testid=\"core-dialog-head\"\n />\n ))}\n <BaseDialog.Content\n className={contentClassName}\n style={{ padding: inset ? undefined : 0, ...contentStyle }}\n >\n {this.props.children}\n </BaseDialog.Content>\n {footer || (\n <BaseDialog.ButtonBar style={footerStyle}>\n {buttons}\n </BaseDialog.ButtonBar>\n )}\n </BaseDialog.Main>\n </DivWithOutsideClick>\n </BaseDialog>\n );\n }\n\n private getCSSClassNameFromAlignment(alignment: DialogAlignment): string {\n switch (alignment) {\n case DialogAlignment.TopLeft:\n return \"core-align-top-left\";\n case DialogAlignment.Top:\n return \"core-align-top\";\n case DialogAlignment.TopRight:\n return \"core-align-top-right\";\n case DialogAlignment.Left:\n return \"core-align-left\";\n case DialogAlignment.Center:\n return \"core-align-center\";\n case DialogAlignment.Right:\n return \"core-align-right\";\n case DialogAlignment.BottomLeft:\n return \"core-align-bottom-left\";\n case DialogAlignment.Bottom:\n return \"core-align-bottom\";\n case DialogAlignment.BottomRight:\n return \"core-align-bottom-right\";\n }\n }\n\n protected getFooterButtons(\n buttonCluster: DialogButtonDef[] | undefined,\n /* istanbul ignore next */ primaryStyleType: ButtonProps[\"styleType\"] = \"cta\",\n /* istanbul ignore next */ noCoreButtonClasses: boolean = false\n ): React.ReactNode[] | undefined {\n if (buttonCluster === undefined) return undefined;\n\n const buttons: React.ReactNode[] = [];\n buttonCluster.forEach((button: DialogButtonDef, index: number) => {\n let buttonText = \"\";\n // istanbul ignore next\n let buttonClass = classnames(\n !noCoreButtonClasses && \"core-dialog-button\",\n !noCoreButtonClasses && `dialog-button-${button.type}`,\n button.className\n );\n let usePrimaryStyleType = false;\n\n switch (button.type) {\n case DialogButtonType.OK:\n buttonText = UiCore.translate(\"dialog.ok\");\n buttonClass = classnames(buttonClass, button.buttonStyle);\n usePrimaryStyleType = true;\n break;\n case DialogButtonType.Retry:\n buttonText = UiCore.translate(\"dialog.retry\");\n buttonClass = classnames(buttonClass, button.buttonStyle);\n usePrimaryStyleType = true;\n break;\n case DialogButtonType.Yes:\n buttonText = UiCore.translate(\"dialog.yes\");\n buttonClass = classnames(buttonClass, button.buttonStyle);\n usePrimaryStyleType = true;\n break;\n case DialogButtonType.No:\n buttonText = UiCore.translate(\"dialog.no\");\n buttonClass = classnames(buttonClass, button.buttonStyle);\n break;\n case DialogButtonType.Cancel:\n buttonText = UiCore.translate(\"dialog.cancel\");\n buttonClass = classnames(buttonClass, button.buttonStyle);\n break;\n case DialogButtonType.Close:\n buttonText = UiCore.translate(\"dialog.close\");\n buttonClass = classnames(buttonClass, button.buttonStyle);\n break;\n case DialogButtonType.Next:\n buttonText = UiCore.translate(\"dialog.next\");\n buttonClass = classnames(buttonClass, button.buttonStyle);\n usePrimaryStyleType = true;\n break;\n case DialogButtonType.Previous:\n buttonText = UiCore.translate(\"dialog.previous\");\n buttonClass = classnames(buttonClass, button.buttonStyle);\n usePrimaryStyleType = true;\n break;\n }\n\n if (button.label) buttonText = button.label;\n\n buttons.push(\n <Button\n className={buttonClass}\n disabled={button.disabled}\n styleType={usePrimaryStyleType ? primaryStyleType : undefined}\n key={index.toString()}\n onClick={button.onClick}\n >\n {buttonText}\n </Button>\n );\n });\n return buttons;\n }\n\n private _handleKeyUp = (event: KeyboardEvent) => {\n if (event.key === Key.Escape && this.props.opened && this.props.onEscape) {\n this.props.onEscape();\n }\n };\n\n protected _handleContainerPointerDown = (event: React.PointerEvent): void => {\n // istanbul ignore next\n if (!this.props.modal) {\n if (this.props.onModelessPointerDown && this.props.modelessId)\n this.props.onModelessPointerDown(event, this.props.modelessId);\n }\n };\n}\n"]}
|
|
1
|
+
{"version":3,"file":"Dialog.js","sourceRoot":"","sources":["../../../../src/core-react/dialog/Dialog.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 Dialog\n */\n\nimport classnames from \"classnames\";\nimport * as React from \"react\";\nimport { Key } from \"ts-key-enum\";\nimport type { DialogButtonDef } from \"@itwin/appui-abstract\";\nimport { DialogButtonType } from \"@itwin/appui-abstract\";\nimport { Dialog as BaseDialog, Button } from \"@itwin/itwinui-react\";\nimport { DivWithOutsideClick } from \"../base/DivWithOutsideClick\";\nimport { UiCore } from \"../UiCore\";\nimport type { CommonProps } from \"../utils/Props\";\nimport type { Omit } from \"../utils/typeUtils\";\nimport \"./Dialog.scss\";\n\ntype ButtonProps = React.ComponentPropsWithoutRef<typeof Button>;\n\n// cspell:ignore focustrap\n\n/** Enum for dialog alignment\n * @public\n */\nexport enum DialogAlignment {\n TopLeft = \"top-left\",\n Top = \"top\",\n TopRight = \"top-right\",\n Left = \"left\",\n Center = \"center\",\n Right = \"right\",\n BottomLeft = \"bottom-left\",\n Bottom = \"bottom\",\n BottomRight = \"bottom-right\",\n}\n\n/** Properties for the [[Dialog]] component\n * @public\n */\nexport interface DialogProps\n extends Omit<React.AllHTMLAttributes<HTMLDivElement>, \"title\">,\n CommonProps {\n /** Indicates whether to show dialog or not */\n opened: boolean;\n\n /** Indicates whether the user can resize dialog with cursor. Default: false */\n resizable?: boolean;\n /** Indicates whether the user can move dialog with cursor. Default: false */\n movable?: boolean;\n /** Indicates whether the content should be inset. Default: true */\n inset?: 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 /** Override for the header */\n header?: React.ReactNode;\n /** Title to show in title bar of dialog */\n title?: string | React.ReactElement;\n /** Footer to show at bottom of dialog. Note: will override buttonCluster */\n footer?: string | React.ReactElement;\n /** List of DialogButtonDef objects specifying buttons and associated onClick events */\n buttonCluster?: DialogButtonDef[];\n\n /** Default alignment of dialog. */\n alignment?: DialogAlignment;\n /** Initial x/left position of dialog in px. */\n x?: number;\n /** Initial y/top position of dialog in px. */\n y?: number;\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 /** 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: 135px */\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. Default: 100% */\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 /** 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 /** 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/** Dialog React component with optional resizing and dragging functionality\n * @public\n */\nexport class Dialog extends React.Component<DialogProps> {\n private _parentDocument = document;\n public static defaultProps: Partial<DialogProps> = {\n maxWidth: \"100%\",\n width: \"50%\",\n hideHeader: false,\n resizable: false,\n movable: false,\n modal: true,\n inset: true,\n trapFocus: false,\n };\n\n constructor(props: DialogProps) {\n super(props);\n }\n\n public override componentWillUnmount(): void {\n this._parentDocument.removeEventListener(\"keyup\", this._handleKeyUp, true);\n }\n\n public override componentDidMount(): void {\n this._parentDocument.addEventListener(\"keyup\", this._handleKeyUp, true);\n }\n\n // istanbul ignore next\n public handleRefSet = (containerDiv: HTMLDivElement | null) => {\n if (containerDiv) this._parentDocument = containerDiv.ownerDocument;\n };\n\n public override render(): React.ReactElement {\n const {\n opened,\n title,\n footer,\n buttonCluster,\n onClose,\n onEscape,\n onOutsideClick,\n minWidth,\n minHeight,\n x,\n y,\n width,\n height,\n maxHeight,\n maxWidth,\n backgroundStyle,\n titleStyle,\n footerStyle,\n style,\n contentStyle,\n contentClassName,\n modal,\n resizable,\n movable,\n className,\n alignment,\n inset,\n trapFocus,\n modelessId,\n onModelessPointerDown,\n hideHeader,\n header,\n as,\n ...props\n } = this.props;\n\n let initialOffset: React.CSSProperties = {};\n if (x || y) {\n initialOffset = {\n left: x ?? 0,\n top: y ?? 0,\n transform: \"none\",\n };\n }\n\n const containerStyle: React.CSSProperties = {\n ...initialOffset,\n margin: \"\",\n width,\n height,\n };\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 <BaseDialog\n isOpen={opened}\n onClose={onClose}\n closeOnExternalClick={false}\n closeOnEsc={false}\n style={style}\n className={classnames(\"core-dialog\", className)}\n isDraggable={movable}\n isResizable={resizable}\n trapFocus={trapFocus && /* istanbul ignore next */ modal}\n preventDocumentScroll={true}\n data-testid=\"core-dialog-root\"\n {...props}\n >\n {modal && <BaseDialog.Backdrop style={backgroundStyle} />}\n <DivWithOutsideClick onOutsideClick={onOutsideClick}>\n <BaseDialog.Main\n className={classnames(\n \"core-dialog-main\",\n alignment && this.getCSSClassNameFromAlignment(alignment)\n )}\n data-testid=\"core-dialog-container\"\n style={dialogBaseContainerStyle}\n onPointerDown={this._handleContainerPointerDown}\n >\n {!hideHeader &&\n (header || (\n <BaseDialog.TitleBar\n titleText={title}\n style={titleStyle}\n data-testid=\"core-dialog-head\"\n />\n ))}\n <BaseDialog.Content\n className={contentClassName}\n style={{ padding: inset ? undefined : 0, ...contentStyle }}\n >\n {this.props.children}\n </BaseDialog.Content>\n {footer ||\n (buttons && (\n <BaseDialog.ButtonBar style={footerStyle}>\n {buttons}\n </BaseDialog.ButtonBar>\n ))}\n </BaseDialog.Main>\n </DivWithOutsideClick>\n </BaseDialog>\n );\n }\n\n private getCSSClassNameFromAlignment(alignment: DialogAlignment): string {\n switch (alignment) {\n case DialogAlignment.TopLeft:\n return \"core-align-top-left\";\n case DialogAlignment.Top:\n return \"core-align-top\";\n case DialogAlignment.TopRight:\n return \"core-align-top-right\";\n case DialogAlignment.Left:\n return \"core-align-left\";\n case DialogAlignment.Center:\n return \"core-align-center\";\n case DialogAlignment.Right:\n return \"core-align-right\";\n case DialogAlignment.BottomLeft:\n return \"core-align-bottom-left\";\n case DialogAlignment.Bottom:\n return \"core-align-bottom\";\n case DialogAlignment.BottomRight:\n return \"core-align-bottom-right\";\n }\n }\n\n protected getFooterButtons(\n buttonCluster: DialogButtonDef[] | undefined,\n /* istanbul ignore next */ primaryStyleType: ButtonProps[\"styleType\"] = \"cta\",\n /* istanbul ignore next */ noCoreButtonClasses: boolean = false\n ): React.ReactNode[] | undefined {\n if (buttonCluster === undefined) return undefined;\n\n const buttons: React.ReactNode[] = [];\n buttonCluster.forEach((button: DialogButtonDef, index: number) => {\n let buttonText = \"\";\n // istanbul ignore next\n let buttonClass = classnames(\n !noCoreButtonClasses && \"core-dialog-button\",\n !noCoreButtonClasses && `dialog-button-${button.type}`,\n button.className\n );\n let usePrimaryStyleType = false;\n\n switch (button.type) {\n case DialogButtonType.OK:\n buttonText = UiCore.translate(\"dialog.ok\");\n buttonClass = classnames(buttonClass, button.buttonStyle);\n usePrimaryStyleType = true;\n break;\n case DialogButtonType.Retry:\n buttonText = UiCore.translate(\"dialog.retry\");\n buttonClass = classnames(buttonClass, button.buttonStyle);\n usePrimaryStyleType = true;\n break;\n case DialogButtonType.Yes:\n buttonText = UiCore.translate(\"dialog.yes\");\n buttonClass = classnames(buttonClass, button.buttonStyle);\n usePrimaryStyleType = true;\n break;\n case DialogButtonType.No:\n buttonText = UiCore.translate(\"dialog.no\");\n buttonClass = classnames(buttonClass, button.buttonStyle);\n break;\n case DialogButtonType.Cancel:\n buttonText = UiCore.translate(\"dialog.cancel\");\n buttonClass = classnames(buttonClass, button.buttonStyle);\n break;\n case DialogButtonType.Close:\n buttonText = UiCore.translate(\"dialog.close\");\n buttonClass = classnames(buttonClass, button.buttonStyle);\n break;\n case DialogButtonType.Next:\n buttonText = UiCore.translate(\"dialog.next\");\n buttonClass = classnames(buttonClass, button.buttonStyle);\n usePrimaryStyleType = true;\n break;\n case DialogButtonType.Previous:\n buttonText = UiCore.translate(\"dialog.previous\");\n buttonClass = classnames(buttonClass, button.buttonStyle);\n usePrimaryStyleType = true;\n break;\n }\n\n if (button.label) buttonText = button.label;\n\n buttons.push(\n <Button\n className={buttonClass}\n disabled={button.disabled}\n styleType={usePrimaryStyleType ? primaryStyleType : undefined}\n key={index.toString()}\n onClick={button.onClick}\n >\n {buttonText}\n </Button>\n );\n });\n return buttons;\n }\n\n private _handleKeyUp = (event: KeyboardEvent) => {\n if (\n event.key === Key.Escape.valueOf() &&\n this.props.opened &&\n this.props.onEscape\n ) {\n this.props.onEscape();\n }\n };\n\n protected _handleContainerPointerDown = (event: React.PointerEvent): void => {\n // istanbul ignore next\n if (!this.props.modal) {\n if (this.props.onModelessPointerDown && this.props.modelessId)\n this.props.onModelessPointerDown(event, this.props.modelessId);\n }\n };\n}\n"]}
|
|
@@ -21,8 +21,7 @@ class GlobalDialog extends React.Component {
|
|
|
21
21
|
parentDocument: null,
|
|
22
22
|
};
|
|
23
23
|
this._handleRefSet = (popupDiv) => {
|
|
24
|
-
|
|
25
|
-
const parentDocument = (_a = popupDiv === null || popupDiv === void 0 ? void 0 : popupDiv.ownerDocument) !== null && _a !== void 0 ? _a : null;
|
|
24
|
+
const parentDocument = popupDiv?.ownerDocument ?? null;
|
|
26
25
|
if (parentDocument) {
|
|
27
26
|
this._container = parentDocument.createElement("div");
|
|
28
27
|
this._container.id =
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"GlobalDialog.js","sourceRoot":"","sources":["../../../../src/core-react/dialog/GlobalDialog.tsx"],"names":[],"mappings":";AAAA;;;gGAGgG;AAChG;;GAEG;;;AAEH,+BAA+B;AAC/B,sCAAsC;AAEtC,qCAAkC;AAgBlC;;GAEG;AACH,MAAa,YAAa,SAAQ,KAAK,CAAC,SAGvC;IAOC,YAAY,KAAwB;QAClC,KAAK,CAAC,KAAK,CAAC,CAAC;QALU,UAAK,GAAsB;YAClD,cAAc,EAAE,IAAI;SACrB,CAAC;QAMM,kBAAa,GAAG,CAAC,QAA4B,EAAE,EAAE
|
|
1
|
+
{"version":3,"file":"GlobalDialog.js","sourceRoot":"","sources":["../../../../src/core-react/dialog/GlobalDialog.tsx"],"names":[],"mappings":";AAAA;;;gGAGgG;AAChG;;GAEG;;;AAEH,+BAA+B;AAC/B,sCAAsC;AAEtC,qCAAkC;AAgBlC;;GAEG;AACH,MAAa,YAAa,SAAQ,KAAK,CAAC,SAGvC;IAOC,YAAY,KAAwB;QAClC,KAAK,CAAC,KAAK,CAAC,CAAC;QALU,UAAK,GAAsB;YAClD,cAAc,EAAE,IAAI;SACrB,CAAC;QAMM,kBAAa,GAAG,CAAC,QAA4B,EAAE,EAAE;YACvD,MAAM,cAAc,GAAG,QAAQ,EAAE,aAAa,IAAI,IAAI,CAAC;YACvD,IAAI,cAAc,EAAE;gBAClB,IAAI,CAAC,UAAU,GAAG,cAAc,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;gBACtD,IAAI,CAAC,UAAU,CAAC,EAAE;oBAChB,IAAI,CAAC,KAAK,CAAC,UAAU,KAAK,SAAS;wBACjC,CAAC,CAAC,UAAU,IAAI,CAAC,KAAK,CAAC,UAAU,EAAE;wBACnC,CAAC,CAAC,aAAa,CAAC;gBACpB,IAAI,EAAE,GAAG,cAAc,CAAC,cAAc,CACpC,kBAAkB,CACD,CAAC;gBACpB,IAAI,CAAC,EAAE,EAAE;oBACP,EAAE,GAAG,cAAc,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;oBACzC,EAAE,CAAC,EAAE,GAAG,kBAAkB,CAAC;oBAC3B,cAAc,CAAC,IAAI,CAAC,WAAW,CAAC,EAAE,CAAC,CAAC;iBACrC;gBACD,EAAE,CAAC,WAAW,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;gBAEhC,wDAAwD;gBACxD,IAAI,CAAC,QAAQ,CAAC,EAAE,cAAc,EAAE,CAAC,CAAC;aACnC;QACH,CAAC,CAAC;IAvBF,CAAC;IAyBe,oBAAoB;QAClC,uBAAuB;QACvB,IAAI,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,UAAU,CAAC,aAAa,EAAE;YACpD,UAAU;YACV,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,WAAW,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;SAC5D;IACH,CAAC;IAEe,MAAM;QACpB,MAAM,EAAE,UAAU,EAAE,GAAG,KAAK,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC;QAC5C,OAAO,CACL,6BAAK,GAAG,EAAE,IAAI,CAAC,aAAa,IACzB,IAAI,CAAC,KAAK,CAAC,cAAc;YACxB,QAAQ,CAAC,YAAY,CACnB,oBAAC,eAAM,OAAK,KAAK,GAAI,EACrB,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,IAAI,CAC/B,CACC,CACP,CAAC;IACJ,CAAC;CACF;AAzDD,oCAyDC","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 * as React from \"react\";\nimport * as ReactDOM from \"react-dom\";\nimport type { DialogProps } from \"./Dialog\";\nimport { Dialog } from \"./Dialog\";\n\n/** Properties for the [[GlobalDialog]] component\n * @public\n */\nexport interface GlobalDialogProps extends DialogProps {\n identifier?: string;\n}\n\n/** State properties for the [[GlobalDialog]] component\n * @public\n */\nexport interface GlobalDialogState {\n parentDocument: Document | null;\n}\n\n/** GlobalDialog React component used to display a [[Dialog]] on the top of screen\n * @public\n */\nexport class GlobalDialog extends React.Component<\n GlobalDialogProps,\n GlobalDialogState\n> {\n private _container?: HTMLDivElement;\n\n public override readonly state: GlobalDialogState = {\n parentDocument: null,\n };\n\n constructor(props: GlobalDialogProps) {\n super(props);\n }\n\n private _handleRefSet = (popupDiv: HTMLElement | null) => {\n const parentDocument = popupDiv?.ownerDocument ?? null;\n if (parentDocument) {\n this._container = parentDocument.createElement(\"div\");\n this._container.id =\n this.props.identifier !== undefined\n ? `dialog-${this.props.identifier}`\n : \"core-dialog\";\n let rt = parentDocument.getElementById(\n \"core-dialog-root\"\n ) as HTMLDivElement;\n if (!rt) {\n rt = parentDocument.createElement(\"div\");\n rt.id = \"core-dialog-root\";\n parentDocument.body.appendChild(rt);\n }\n rt.appendChild(this._container);\n\n // used to support component rendering in pop-out window\n this.setState({ parentDocument });\n }\n };\n\n public override componentWillUnmount() {\n // istanbul ignore else\n if (this._container && this._container.parentElement) {\n // cleanup\n this._container.parentElement.removeChild(this._container);\n }\n }\n\n public override render(): React.ReactNode {\n const { identifier, ...props } = this.props;\n return (\n <div ref={this._handleRefSet}>\n {this.state.parentDocument &&\n ReactDOM.createPortal(\n <Dialog {...props} />,\n this.state.parentDocument.body\n )}\n </div>\n );\n }\n}\n"]}
|
|
@@ -35,8 +35,8 @@ const useElementSeparatorPointerHandler = ({ onResizeHandleDragChanged, onResize
|
|
|
35
35
|
const pointerOutOfBounds = (0, react_1.useRef)(false);
|
|
36
36
|
const [isElementDragged, setIsDragged] = (0, react_1.useState)(false);
|
|
37
37
|
const [isElementHovered, setIsHovered] = (0, react_1.useState)(false);
|
|
38
|
-
const isGroupDragged = isResizeHandleBeingDragged
|
|
39
|
-
const isGroupHovered = isResizeHandleHovered
|
|
38
|
+
const isGroupDragged = isResizeHandleBeingDragged ?? isElementDragged;
|
|
39
|
+
const isGroupHovered = isResizeHandleHovered ?? isElementHovered;
|
|
40
40
|
useConditionalCleanup(isElementDragged && !!onResizeHandleDragChanged, () => onResizeHandleDragChanged(false));
|
|
41
41
|
useConditionalCleanup(isElementHovered && !!onResizeHandleHoverChanged, () => onResizeHandleHoverChanged(false));
|
|
42
42
|
if (isGroupHovered && pointerOutOfBounds.current)
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ElementSeparator.js","sourceRoot":"","sources":["../../../../src/core-react/elementseparator/ElementSeparator.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 ElementSeparator\n */\n\nimport \"./ElementSeparator.scss\";\nimport * as React from \"react\";\nimport {\n useCallback,\n useEffect,\n useLayoutEffect,\n useMemo,\n useRef,\n useState,\n} from \"react\";\nimport classnames from \"classnames\";\nimport { Orientation } from \"../enums/Orientation\";\nimport type { CommonProps } from \"../utils/Props\";\nimport { useThrottledFn } from \"../utils/hooks/useThrottledFn\";\nimport { UiCore } from \"../UiCore\";\n\n/**\n * Results returned by onRatioChanged callback for determining new ratio and whether the ratio was updated.\n * @public\n */\nexport interface RatioChangeResult {\n ratio: number;\n}\n\n/** Properties of [[ElementSeparator]] React component\n * @public\n */\nexport interface ElementSeparatorProps extends CommonProps {\n /** Separator orientation */\n orientation: Orientation;\n /** Ratio between left cell and right cell */\n ratio: number;\n /** Area width or height (depending on orientation) in pixels */\n movableArea?: number;\n /** Separator width or height in pixels. 30 by default */\n separatorSize?: number;\n /** Callback to ratio changed event */\n onRatioChanged?: (ratio: number) => void | RatioChangeResult;\n /** Is resize handle hovered */\n isResizeHandleHovered?: boolean;\n /** Callback to hover event change */\n onResizeHandleHoverChanged?: (isHovered: boolean) => void;\n /** Is resize handle being dragged */\n isResizeHandleBeingDragged?: boolean;\n /** Callback to drag event change */\n onResizeHandleDragChanged?: (isDragStarted: boolean) => void;\n}\n\nfunction getCurrentGlobalPosition(\n orientation: Orientation,\n e: PointerEvent | React.PointerEvent\n) {\n return orientation === Orientation.Horizontal ? e.clientX : e.clientY;\n}\n\nconst useConditionalCleanup = (condition: boolean, cleanup: () => void) => {\n const conditionRef = useRef(condition);\n const cleanupRef = useRef(cleanup);\n\n conditionRef.current = condition;\n cleanupRef.current = cleanup;\n\n useEffect(() => {\n return () => {\n if (conditionRef.current) cleanupRef.current();\n };\n }, []);\n};\n\nconst useElementSeparatorPointerHandler = ({\n onResizeHandleDragChanged,\n onResizeHandleHoverChanged,\n isResizeHandleBeingDragged,\n isResizeHandleHovered,\n movableArea,\n ratio,\n orientation,\n onRatioChanged,\n}: ElementSeparatorProps) => {\n const globalPosition = useRef(0);\n const pointerOutOfBounds = useRef(false);\n\n const [isElementDragged, setIsDragged] = useState(false);\n const [isElementHovered, setIsHovered] = useState(false);\n const isGroupDragged = isResizeHandleBeingDragged ?? isElementDragged;\n const isGroupHovered = isResizeHandleHovered ?? isElementHovered;\n\n useConditionalCleanup(isElementDragged && !!onResizeHandleDragChanged, () =>\n onResizeHandleDragChanged!(false)\n );\n useConditionalCleanup(isElementHovered && !!onResizeHandleHoverChanged, () =>\n onResizeHandleHoverChanged!(false)\n );\n\n if (isGroupHovered && pointerOutOfBounds.current)\n pointerOutOfBounds.current = false;\n\n const stopDrag = useCallback(() => {\n // istanbul ignore else\n if (isGroupDragged) {\n setIsDragged(false);\n if (onResizeHandleDragChanged) onResizeHandleDragChanged(false);\n }\n }, [isGroupDragged, onResizeHandleDragChanged]);\n\n const startDrag = useCallback(\n (e: PointerEvent | React.PointerEvent) => {\n globalPosition.current = getCurrentGlobalPosition(orientation, e);\n\n // istanbul ignore else\n if (!isGroupDragged) {\n setIsDragged(true);\n if (onResizeHandleDragChanged) onResizeHandleDragChanged(true);\n }\n },\n [isGroupDragged, orientation, onResizeHandleDragChanged]\n );\n\n const onPointerUp = useCallback(() => {\n stopDrag();\n }, [stopDrag]);\n\n const onThrottledPointerMove = useThrottledFn(\n (e: PointerEvent | React.PointerEvent) => {\n if (!movableArea) {\n stopDrag();\n return;\n }\n\n const currentPosition = getCurrentGlobalPosition(orientation, e);\n const positionChange = currentPosition - globalPosition.current;\n\n // Should not need to recalculate if position on our movement axis does not change\n if (Math.abs(positionChange) < 1) return;\n\n const currentLocalPosition = movableArea * ratio + positionChange;\n const newRatio = currentLocalPosition / movableArea;\n\n globalPosition.current = currentPosition;\n if (pointerOutOfBounds.current || !onRatioChanged) return;\n\n const result = onRatioChanged(newRatio);\n if (\n result &&\n result.ratio === ratio &&\n !isGroupHovered &&\n !pointerOutOfBounds.current\n )\n pointerOutOfBounds.current = true;\n },\n 16,\n [stopDrag, isGroupHovered, ratio, movableArea, onRatioChanged, orientation]\n );\n\n useEffect(() => {\n return () => onThrottledPointerMove.cancel();\n }, [onThrottledPointerMove]);\n\n useLayoutEffect(() => {\n if (isElementDragged) {\n document.addEventListener(\"pointerup\", onPointerUp);\n document.addEventListener(\"pointermove\", onThrottledPointerMove);\n }\n\n return () => {\n document.removeEventListener(\"pointerup\", onPointerUp);\n document.removeEventListener(\"pointermove\", onThrottledPointerMove);\n };\n }, [isElementDragged, onPointerUp, onThrottledPointerMove]);\n\n const onPointerDown = useCallback(\n (e: PointerEvent | React.PointerEvent) => {\n if (!isGroupDragged) {\n startDrag(e);\n } else {\n stopDrag();\n }\n },\n [isGroupDragged, startDrag, stopDrag]\n );\n\n const onPointerOver = useCallback(() => {\n // istanbul ignore next\n if (isGroupHovered) return;\n\n setIsHovered(true);\n if (onResizeHandleHoverChanged) onResizeHandleHoverChanged(true);\n }, [isGroupHovered, onResizeHandleHoverChanged]);\n\n const onPointerOut = useCallback(() => {\n // istanbul ignore next\n if (!isGroupHovered) return;\n\n setIsHovered(false);\n if (onResizeHandleHoverChanged) onResizeHandleHoverChanged(false);\n }, [isGroupHovered, onResizeHandleHoverChanged]);\n\n return {\n isHovered: isGroupHovered,\n isDragged: isGroupDragged,\n onPointerDown,\n onPointerOver,\n onPointerOut,\n };\n};\n\nfunction getStyle(\n orientation: Orientation,\n separatorSize?: number\n): React.CSSProperties {\n separatorSize = separatorSize || 30;\n\n if (orientation === Orientation.Horizontal)\n return {\n width: separatorSize,\n margin: `0px ${-Math.floor(separatorSize / 2)}px`,\n };\n return {\n height: separatorSize,\n margin: `${-Math.floor(separatorSize / 2)}px 1px`,\n };\n}\n\n/** A movable button, which allows to change the ratio between left element and right element\n * @public\n */\nexport const ElementSeparator = (props: ElementSeparatorProps) => {\n const label = useRef(UiCore.translate(\"elementSeparator.label\"));\n const [hasHoverHappened, setHasHoverHappened] = useState(false);\n const { isDragged, isHovered, onPointerDown, onPointerOver, onPointerOut } =\n useElementSeparatorPointerHandler(props);\n\n const isHoverNeeded = isHovered || isDragged;\n if (!hasHoverHappened && isHoverNeeded) setHasHoverHappened(isHoverNeeded);\n\n // This is done to avoid fade-out animation when first rendering.\n const unhoverClass = hasHoverHappened\n ? \"core-element-separator-group-unhovered\"\n : \"\";\n\n const classNames = classnames(\n \"core-element-separator\",\n props.orientation === Orientation.Horizontal\n ? \"core-element-separator--horizontal\"\n : \"core-element-separator--vertical\",\n props.className,\n isHoverNeeded ? \"core-element-separator-group-hovered\" : unhoverClass\n );\n\n const orientation = props.orientation;\n const separatorSize = props.separatorSize;\n const style = useMemo(\n () => getStyle(orientation, separatorSize),\n [orientation, separatorSize]\n );\n const styles: React.CSSProperties = {\n ...style,\n ...props.style,\n };\n\n return (\n <button\n style={styles}\n className={classNames}\n onPointerDown={onPointerDown}\n onPointerOver={onPointerOver}\n onPointerOut={onPointerOut}\n aria-label={label.current}\n />\n );\n};\n"]}
|
|
1
|
+
{"version":3,"file":"ElementSeparator.js","sourceRoot":"","sources":["../../../../src/core-react/elementseparator/ElementSeparator.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 ElementSeparator\n */\n\nimport \"./ElementSeparator.scss\";\nimport * as React from \"react\";\nimport {\n useCallback,\n useEffect,\n useLayoutEffect,\n useMemo,\n useRef,\n useState,\n} from \"react\";\nimport classnames from \"classnames\";\nimport { Orientation } from \"../enums/Orientation\";\nimport type { CommonProps } from \"../utils/Props\";\nimport { useThrottledFn } from \"../utils/hooks/useThrottledFn\";\nimport { UiCore } from \"../UiCore\";\n\n/**\n * Results returned by onRatioChanged callback for determining new ratio and whether the ratio was updated.\n * @public\n */\nexport interface RatioChangeResult {\n ratio: number;\n}\n\n/** Properties of [[ElementSeparator]] React component\n * @public\n */\nexport interface ElementSeparatorProps extends CommonProps {\n /** Separator orientation */\n orientation: Orientation;\n /** Ratio between left cell and right cell */\n ratio: number;\n /** Area width or height (depending on orientation) in pixels */\n movableArea?: number;\n /** Separator width or height in pixels. 30 by default */\n separatorSize?: number;\n /** Callback to ratio changed event */\n onRatioChanged?: (ratio: number) => void | RatioChangeResult;\n /** Is resize handle hovered */\n isResizeHandleHovered?: boolean;\n /** Callback to hover event change */\n onResizeHandleHoverChanged?: (isHovered: boolean) => void;\n /** Is resize handle being dragged */\n isResizeHandleBeingDragged?: boolean;\n /** Callback to drag event change */\n onResizeHandleDragChanged?: (isDragStarted: boolean) => void;\n}\n\nfunction getCurrentGlobalPosition(\n orientation: Orientation,\n e: PointerEvent | React.PointerEvent\n) {\n return orientation === Orientation.Horizontal ? e.clientX : e.clientY;\n}\n\nconst useConditionalCleanup = (condition: boolean, cleanup: () => void) => {\n const conditionRef = useRef(condition);\n const cleanupRef = useRef(cleanup);\n\n conditionRef.current = condition;\n cleanupRef.current = cleanup;\n\n useEffect(() => {\n return () => {\n if (conditionRef.current) cleanupRef.current();\n };\n }, []);\n};\n\nconst useElementSeparatorPointerHandler = ({\n onResizeHandleDragChanged,\n onResizeHandleHoverChanged,\n isResizeHandleBeingDragged,\n isResizeHandleHovered,\n movableArea,\n ratio,\n orientation,\n onRatioChanged,\n}: ElementSeparatorProps) => {\n const globalPosition = useRef(0);\n const pointerOutOfBounds = useRef(false);\n\n const [isElementDragged, setIsDragged] = useState(false);\n const [isElementHovered, setIsHovered] = useState(false);\n const isGroupDragged = isResizeHandleBeingDragged ?? isElementDragged;\n const isGroupHovered = isResizeHandleHovered ?? isElementHovered;\n\n useConditionalCleanup(isElementDragged && !!onResizeHandleDragChanged, () =>\n onResizeHandleDragChanged!(false)\n );\n useConditionalCleanup(isElementHovered && !!onResizeHandleHoverChanged, () =>\n onResizeHandleHoverChanged!(false)\n );\n\n if (isGroupHovered && pointerOutOfBounds.current)\n pointerOutOfBounds.current = false;\n\n const stopDrag = useCallback(() => {\n // istanbul ignore else\n if (isGroupDragged) {\n setIsDragged(false);\n if (onResizeHandleDragChanged) onResizeHandleDragChanged(false);\n }\n }, [isGroupDragged, onResizeHandleDragChanged]);\n\n const startDrag = useCallback(\n (e: PointerEvent | React.PointerEvent) => {\n globalPosition.current = getCurrentGlobalPosition(orientation, e);\n\n // istanbul ignore else\n if (!isGroupDragged) {\n setIsDragged(true);\n if (onResizeHandleDragChanged) onResizeHandleDragChanged(true);\n }\n },\n [isGroupDragged, orientation, onResizeHandleDragChanged]\n );\n\n const onPointerUp = useCallback(() => {\n stopDrag();\n }, [stopDrag]);\n\n const onThrottledPointerMove = useThrottledFn(\n (e: PointerEvent | React.PointerEvent) => {\n if (!movableArea) {\n stopDrag();\n return;\n }\n\n const currentPosition = getCurrentGlobalPosition(orientation, e);\n const positionChange = currentPosition - globalPosition.current;\n\n // Should not need to recalculate if position on our movement axis does not change\n if (Math.abs(positionChange) < 1) return;\n\n const currentLocalPosition = movableArea * ratio + positionChange;\n const newRatio = currentLocalPosition / movableArea;\n\n globalPosition.current = currentPosition;\n if (pointerOutOfBounds.current || !onRatioChanged) return;\n\n const result = onRatioChanged(newRatio);\n if (\n result &&\n result.ratio === ratio &&\n !isGroupHovered &&\n !pointerOutOfBounds.current\n )\n pointerOutOfBounds.current = true;\n },\n 16,\n [stopDrag, isGroupHovered, ratio, movableArea, onRatioChanged, orientation]\n );\n\n useEffect(() => {\n return () => onThrottledPointerMove.cancel();\n }, [onThrottledPointerMove]);\n\n useLayoutEffect(() => {\n if (isElementDragged) {\n document.addEventListener(\"pointerup\", onPointerUp);\n document.addEventListener(\"pointermove\", onThrottledPointerMove);\n }\n\n return () => {\n document.removeEventListener(\"pointerup\", onPointerUp);\n document.removeEventListener(\"pointermove\", onThrottledPointerMove);\n };\n }, [isElementDragged, onPointerUp, onThrottledPointerMove]);\n\n const onPointerDown = useCallback(\n (e: PointerEvent | React.PointerEvent) => {\n if (!isGroupDragged) {\n startDrag(e);\n } else {\n stopDrag();\n }\n },\n [isGroupDragged, startDrag, stopDrag]\n );\n\n const onPointerOver = useCallback(() => {\n // istanbul ignore next\n if (isGroupHovered) return;\n\n setIsHovered(true);\n if (onResizeHandleHoverChanged) onResizeHandleHoverChanged(true);\n }, [isGroupHovered, onResizeHandleHoverChanged]);\n\n const onPointerOut = useCallback(() => {\n // istanbul ignore next\n if (!isGroupHovered) return;\n\n setIsHovered(false);\n if (onResizeHandleHoverChanged) onResizeHandleHoverChanged(false);\n }, [isGroupHovered, onResizeHandleHoverChanged]);\n\n return {\n isHovered: isGroupHovered,\n isDragged: isGroupDragged,\n onPointerDown,\n onPointerOver,\n onPointerOut,\n };\n};\n\nfunction getStyle(\n orientation: Orientation,\n separatorSize?: number\n): React.CSSProperties {\n separatorSize = separatorSize || 30;\n\n if (orientation === Orientation.Horizontal)\n return {\n width: separatorSize,\n margin: `0px ${-Math.floor(separatorSize / 2)}px`,\n };\n return {\n height: separatorSize,\n margin: `${-Math.floor(separatorSize / 2)}px 1px`,\n };\n}\n\n/** A movable button, which allows to change the ratio between left element and right element\n * @public\n */\nexport const ElementSeparator = (props: ElementSeparatorProps) => {\n const label = useRef(UiCore.translate(\"elementSeparator.label\"));\n const [hasHoverHappened, setHasHoverHappened] = useState(false);\n const { isDragged, isHovered, onPointerDown, onPointerOver, onPointerOut } =\n useElementSeparatorPointerHandler(props);\n\n const isHoverNeeded = isHovered || isDragged;\n if (!hasHoverHappened && isHoverNeeded) setHasHoverHappened(isHoverNeeded);\n\n // This is done to avoid fade-out animation when first rendering.\n const unhoverClass = hasHoverHappened\n ? \"core-element-separator-group-unhovered\"\n : \"\";\n\n const classNames = classnames(\n \"core-element-separator\",\n props.orientation === Orientation.Horizontal\n ? \"core-element-separator--horizontal\"\n : \"core-element-separator--vertical\",\n props.className,\n isHoverNeeded ? \"core-element-separator-group-hovered\" : unhoverClass\n );\n\n const orientation = props.orientation;\n const separatorSize = props.separatorSize;\n const style = useMemo(\n () => getStyle(orientation, separatorSize),\n [orientation, separatorSize]\n );\n const styles: React.CSSProperties = {\n ...style,\n ...props.style,\n };\n\n return (\n <button\n style={styles}\n className={classNames}\n onPointerDown={onPointerDown}\n onPointerOver={onPointerOver}\n onPointerOut={onPointerOut}\n aria-label={label.current}\n />\n );\n};\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ExpandableList.d.ts","sourceRoot":"","sources":["../../../../src/core-react/expandable/ExpandableList.tsx"],"names":[],"mappings":"AAIA;;GAEG;
|
|
1
|
+
{"version":3,"file":"ExpandableList.d.ts","sourceRoot":"","sources":["../../../../src/core-react/expandable/ExpandableList.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAGH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAElD;;GAEG;AACH,MAAM,WAAW,mBAAoB,SAAQ,WAAW;IACtD,wCAAwC;IACxC,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,yDAAyD;IACzD,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,iEAAiE;IACjE,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,cAAc;IACd,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,gBAAgB;AAChB,UAAU,mBAAmB;IAC3B,WAAW,EAAE,MAAM,CAAC;CACrB;AAED;;;GAGG;AACH,qBAAa,cAAe,SAAQ,KAAK,CAAC,aAAa,CACrD,mBAAmB,EACnB,mBAAmB,CACpB;gBACa,KAAK,EAAE,mBAAmB;IAMtC,OAAc,YAAY,EAAE,OAAO,CAAC,mBAAmB,CAAC,CAGtD;IAGF,OAAO,CAAC,kBAAkB,CAexB;IAEF,OAAO,CAAC,YAAY;IAYpB,gBAAgB;IACA,kBAAkB,CAAC,SAAS,EAAE,mBAAmB;IASjD,MAAM,IAAI,KAAK,CAAC,YAAY;CAa7C"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ExpandableList.js","sourceRoot":"","sources":["../../../../src/core-react/expandable/ExpandableList.tsx"],"names":[],"mappings":";AAAA;;;gGAGgG;AAChG;;GAEG;;;AAEH,
|
|
1
|
+
{"version":3,"file":"ExpandableList.js","sourceRoot":"","sources":["../../../../src/core-react/expandable/ExpandableList.tsx"],"names":[],"mappings":";AAAA;;;gGAGgG;AAChG;;GAEG;;;AAEH,2CAAoC;AACpC,+BAA+B;AAsB/B;;;GAGG;AACH,MAAa,cAAe,SAAQ,KAAK,CAAC,aAGzC;IACC,YAAY,KAA0B;QACpC,KAAK,CAAC,KAAK,CAAC,CAAC;QAUf,mBAAmB;QACX,uBAAkB,GAAG,CAC3B,KAAa,EACb,QAAuC,EACvC,EAAE;YACF,IAAI,WAAW,GAAG,KAAK,CAAC;YAExB,IAAI,IAAI,CAAC,KAAK,CAAC,mBAAmB,IAAI,KAAK,KAAK,IAAI,CAAC,KAAK,CAAC,WAAW;gBACpE,WAAW,GAAG,CAAC,CAAC,CAAC;YAEnB,IAAI,CAAC,QAAQ,CAAC,EAAE,WAAW,EAAE,CAAC,CAAC;YAE/B,uBAAuB;YACvB,IAAI,QAAQ,EAAE;gBACZ,QAAQ,CAAC,WAAW,KAAK,KAAK,CAAC,CAAC,CAAC,oCAAoC;aACtE;QACH,CAAC,CAAC;QAxBA,IAAI,CAAC,KAAK,GAAG,EAAE,WAAW,EAAE,IAAI,CAAC,KAAK,CAAC,kBAAmB,EAAE,CAAC;IAC/D,CAAC;IAyBO,YAAY;QAClB,OAAO,KAAK,CAAC,QAAQ,CAAC,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC,KAAU,EAAE,CAAC,EAAE,EAAE;YAC/D,OAAO,KAAK,CAAC,YAAY,CAAC,KAAK,EAAE;gBAC/B,GAAG,EAAE,CAAC;gBACN,UAAU,EAAE,IAAI,CAAC,KAAK,CAAC,gBAAgB;oBACrC,CAAC,CAAC,CAAC,KAAK,IAAI,CAAC,KAAK,CAAC,WAAW;oBAC9B,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,UAAU;gBAC1B,QAAQ,EAAE,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC,EAAE,KAAK,CAAC,KAAK,CAAC,QAAQ,CAAC;aACtE,CAAC,CAAC;QACL,CAAC,CAAC,CAAC;IACL,CAAC;IAED,gBAAgB;IACA,kBAAkB,CAAC,SAA8B;QAC/D,IACE,IAAI,CAAC,KAAK,CAAC,kBAAkB,KAAK,SAAS,CAAC,kBAAkB;YAC9D,IAAI,CAAC,KAAK,CAAC,kBAAkB,KAAK,IAAI,CAAC,KAAK,CAAC,WAAW,EACxD;YACA,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,CAAC,CAAC,EAAE,WAAW,EAAE,KAAK,CAAC,kBAAmB,EAAE,CAAC,CAAC,CAAC;SAC3E;IACH,CAAC;IAEe,MAAM;QACpB,OAAO,CACL,6BACE,SAAS,EAAE,IAAA,oBAAU,EACnB,+BAA+B,EAC/B,IAAI,CAAC,KAAK,CAAC,SAAS,CACrB,EACD,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,IAEtB,IAAI,CAAC,YAAY,EAAE,CAChB,CACP,CAAC;IACJ,CAAC;;AAzDa,2BAAY,GAAiC;IACzD,gBAAgB,EAAE,KAAK;IACvB,kBAAkB,EAAE,CAAC;CACtB,AAHyB,CAGxB;AAbS,wCAAc","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 Expandable\n */\n\nimport classnames from \"classnames\";\nimport * as React from \"react\";\nimport type { CommonProps } from \"../utils/Props\";\n\n/** Properties for [[ExpandableList]] component\n * @public\n */\nexport interface ExpandableListProps extends CommonProps {\n /** Index of the default active block */\n defaultActiveBlock?: number;\n /** Indicates whether to allow only one expanded block */\n singleExpandOnly?: boolean;\n /** Indicates whether the single expanded block is collapsible */\n singleIsCollapsible?: boolean;\n /** Content */\n children?: React.ReactNode;\n}\n\n/** @internal */\ninterface ExpandableListState {\n activeBlock: number;\n}\n\n/**\n * ExpandableList React component is a container for ExpandableBlock components.\n * @public\n */\nexport class ExpandableList extends React.PureComponent<\n ExpandableListProps,\n ExpandableListState\n> {\n constructor(props: ExpandableListProps) {\n super(props);\n\n this.state = { activeBlock: this.props.defaultActiveBlock! };\n }\n\n public static defaultProps: Partial<ExpandableListProps> = {\n singleExpandOnly: false,\n defaultActiveBlock: 0,\n };\n\n // set active block\n private _handleBlockToggle = (\n index: number,\n onToggle: (isExpanding: boolean) => any\n ) => {\n let activeBlock = index;\n\n if (this.props.singleIsCollapsible && index === this.state.activeBlock)\n activeBlock = -1;\n\n this.setState({ activeBlock });\n\n // istanbul ignore else\n if (onToggle) {\n onToggle(activeBlock === index); // fire the ExpandableBlock onToggle\n }\n };\n\n private renderBlocks() {\n return React.Children.map(this.props.children, (child: any, i) => {\n return React.cloneElement(child, {\n key: i,\n isExpanded: this.props.singleExpandOnly\n ? i === this.state.activeBlock\n : child.props.isExpanded,\n onToggle: this._handleBlockToggle.bind(this, i, child.props.onToggle),\n });\n });\n }\n\n /** @internal */\n public override componentDidUpdate(prevProps: ExpandableListProps) {\n if (\n this.props.defaultActiveBlock !== prevProps.defaultActiveBlock &&\n this.props.defaultActiveBlock !== this.state.activeBlock\n ) {\n this.setState((_, props) => ({ activeBlock: props.defaultActiveBlock! }));\n }\n }\n\n public override render(): React.ReactElement {\n return (\n <div\n className={classnames(\n \"uicore-expandable-blocks-list\",\n this.props.className\n )}\n style={this.props.style}\n >\n {this.renderBlocks()}\n </div>\n );\n }\n}\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ItemKeyboardNavigator.d.ts","sourceRoot":"","sources":["../../../../src/core-react/focus/ItemKeyboardNavigator.tsx"],"names":[],"mappings":"AAIA;;GAEG
|
|
1
|
+
{"version":3,"file":"ItemKeyboardNavigator.d.ts","sourceRoot":"","sources":["../../../../src/core-react/focus/ItemKeyboardNavigator.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAGH,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAEnD;;GAEG;AACH,MAAM,MAAM,qBAAqB,GAAG,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;AAE/D;;GAEG;AACH,qBAAa,qBAAqB;IAQvB,WAAW,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI;IACpC,cAAc,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI;IARhD,OAAO,CAAC,UAAU,CAAsB;IACxC,OAAO,CAAC,UAAU,CAAK;IACvB,OAAO,CAAC,YAAY,CAA0B;IAC9C,OAAO,CAAC,UAAU,CAAQ;IAC1B,OAAO,CAAC,yBAAyB,CAAC,CAAwB;gBAGjD,WAAW,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,EACpC,cAAc,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI;IAUhD,qBAAqB;IACrB,IAAW,SAAS,IAAI,MAAM,CAE7B;IACD,IAAW,SAAS,CAAC,KAAK,EAAE,MAAM,EAEjC;IAED,8BAA8B;IAC9B,IAAW,WAAW,IAAI,WAAW,CAEpC;IACD,IAAW,WAAW,CAAC,WAAW,EAAE,WAAW,EAE9C;IAED,2GAA2G;IAC3G,IAAW,SAAS,IAAI,OAAO,CAE9B;IACD,IAAW,SAAS,CAAC,CAAC,EAAE,OAAO,EAE9B;IAED,+FAA+F;IAC/F,IAAW,wBAAwB,IAAI,qBAAqB,GAAG,SAAS,CAEvE;IACD,IAAW,wBAAwB,CAAC,CAAC,EAAE,qBAAqB,GAAG,SAAS,EAEvE;IAED,8BAA8B;IACvB,kBAAkB,CAAC,KAAK,EAAE,KAAK,CAAC,aAAa,EAAE,KAAK,EAAE,MAAM,GAAG,IAAI;IA6B1E,4BAA4B;IACrB,gBAAgB,CAAC,KAAK,EAAE,KAAK,CAAC,aAAa,EAAE,KAAK,EAAE,MAAM,GAAG,IAAI;IAWxE,OAAO,CAAC,cAAc;IAItB,OAAO,CAAC,aAAa;IAKrB;;;OAGG;IACH,OAAO,CAAC,oBAAoB;IAkC5B;OACG;IACH,OAAO,CAAC,sBAAsB;IA8B9B,OAAO,CAAC,YAAY;CAGrB;AAED;;GAEG;AACH,wBAAgB,eAAe,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAQpD"}
|
|
@@ -59,23 +59,23 @@ class ItemKeyboardNavigator {
|
|
|
59
59
|
handleKeyDownEvent(event, index) {
|
|
60
60
|
const key = event.key;
|
|
61
61
|
switch (key) {
|
|
62
|
-
case ts_key_enum_1.Key.Home:
|
|
62
|
+
case ts_key_enum_1.Key.Home.valueOf():
|
|
63
63
|
event.preventDefault();
|
|
64
64
|
// Activate first item
|
|
65
65
|
this.focusFirstItem();
|
|
66
66
|
break;
|
|
67
|
-
case ts_key_enum_1.Key.End:
|
|
67
|
+
case ts_key_enum_1.Key.End.valueOf():
|
|
68
68
|
event.preventDefault();
|
|
69
69
|
// Activate last item
|
|
70
70
|
this.focusLastItem();
|
|
71
71
|
break;
|
|
72
72
|
// Up and down are in keydown
|
|
73
73
|
// because we need to prevent page scroll >:)
|
|
74
|
-
case ts_key_enum_1.Key.ArrowUp:
|
|
75
|
-
case ts_key_enum_1.Key.ArrowDown:
|
|
74
|
+
case ts_key_enum_1.Key.ArrowUp.valueOf():
|
|
75
|
+
case ts_key_enum_1.Key.ArrowDown.valueOf():
|
|
76
76
|
this.determineOrientation(event, index);
|
|
77
77
|
break;
|
|
78
|
-
case ts_key_enum_1.Key.Enter:
|
|
78
|
+
case ts_key_enum_1.Key.Enter.valueOf():
|
|
79
79
|
case " ":
|
|
80
80
|
this.activateItem(index);
|
|
81
81
|
break;
|
|
@@ -85,8 +85,8 @@ class ItemKeyboardNavigator {
|
|
|
85
85
|
handleKeyUpEvent(event, index) {
|
|
86
86
|
const key = event.key;
|
|
87
87
|
switch (key) {
|
|
88
|
-
case ts_key_enum_1.Key.ArrowLeft:
|
|
89
|
-
case ts_key_enum_1.Key.ArrowRight:
|
|
88
|
+
case ts_key_enum_1.Key.ArrowLeft.valueOf():
|
|
89
|
+
case ts_key_enum_1.Key.ArrowRight.valueOf():
|
|
90
90
|
this.determineOrientation(event, index);
|
|
91
91
|
break;
|
|
92
92
|
}
|
|
@@ -107,22 +107,22 @@ class ItemKeyboardNavigator {
|
|
|
107
107
|
const vertical = this._orientation === Orientation_1.Orientation.Vertical;
|
|
108
108
|
let proceed = false;
|
|
109
109
|
if (vertical) {
|
|
110
|
-
if (key === ts_key_enum_1.Key.ArrowUp || key === ts_key_enum_1.Key.ArrowDown) {
|
|
110
|
+
if (key === ts_key_enum_1.Key.ArrowUp.valueOf() || key === ts_key_enum_1.Key.ArrowDown.valueOf()) {
|
|
111
111
|
event.preventDefault();
|
|
112
112
|
proceed = true;
|
|
113
113
|
}
|
|
114
114
|
else if (this.crossAxisArrowKeyHandler &&
|
|
115
|
-
(key === ts_key_enum_1.Key.ArrowLeft || key === ts_key_enum_1.Key.ArrowRight)) {
|
|
116
|
-
this.crossAxisArrowKeyHandler(key === ts_key_enum_1.Key.ArrowRight);
|
|
115
|
+
(key === ts_key_enum_1.Key.ArrowLeft.valueOf() || key === ts_key_enum_1.Key.ArrowRight.valueOf())) {
|
|
116
|
+
this.crossAxisArrowKeyHandler(key === ts_key_enum_1.Key.ArrowRight.valueOf());
|
|
117
117
|
}
|
|
118
118
|
}
|
|
119
119
|
else {
|
|
120
|
-
if (key === ts_key_enum_1.Key.ArrowLeft || key === ts_key_enum_1.Key.ArrowRight) {
|
|
120
|
+
if (key === ts_key_enum_1.Key.ArrowLeft.valueOf() || key === ts_key_enum_1.Key.ArrowRight.valueOf()) {
|
|
121
121
|
proceed = true;
|
|
122
122
|
}
|
|
123
123
|
else if (this.crossAxisArrowKeyHandler &&
|
|
124
|
-
(key === ts_key_enum_1.Key.ArrowUp || key === ts_key_enum_1.Key.ArrowDown)) {
|
|
125
|
-
this.crossAxisArrowKeyHandler(key === ts_key_enum_1.Key.ArrowDown);
|
|
124
|
+
(key === ts_key_enum_1.Key.ArrowUp.valueOf() || key === ts_key_enum_1.Key.ArrowDown.valueOf())) {
|
|
125
|
+
this.crossAxisArrowKeyHandler(key === ts_key_enum_1.Key.ArrowDown.valueOf());
|
|
126
126
|
}
|
|
127
127
|
}
|
|
128
128
|
if (proceed) {
|
|
@@ -144,7 +144,8 @@ class ItemKeyboardNavigator {
|
|
|
144
144
|
else {
|
|
145
145
|
// istanbul ignore else
|
|
146
146
|
if (this._allowWrap) {
|
|
147
|
-
if (pressed === ts_key_enum_1.Key.ArrowLeft
|
|
147
|
+
if (pressed === ts_key_enum_1.Key.ArrowLeft.valueOf() ||
|
|
148
|
+
pressed === ts_key_enum_1.Key.ArrowUp.valueOf()) {
|
|
148
149
|
this.focusLastItem();
|
|
149
150
|
}
|
|
150
151
|
else {
|
|
@@ -164,16 +165,16 @@ exports.ItemKeyboardNavigator = ItemKeyboardNavigator;
|
|
|
164
165
|
*/
|
|
165
166
|
function isNavigationKey(key) {
|
|
166
167
|
return (isArrowKey(key) ||
|
|
167
|
-
key === ts_key_enum_1.Key.Home ||
|
|
168
|
-
key === ts_key_enum_1.Key.End ||
|
|
168
|
+
key === ts_key_enum_1.Key.Home.valueOf() ||
|
|
169
|
+
key === ts_key_enum_1.Key.End.valueOf() ||
|
|
169
170
|
key === " " ||
|
|
170
|
-
key === ts_key_enum_1.Key.Enter);
|
|
171
|
+
key === ts_key_enum_1.Key.Enter.valueOf());
|
|
171
172
|
}
|
|
172
173
|
exports.isNavigationKey = isNavigationKey;
|
|
173
174
|
function isArrowKey(key) {
|
|
174
|
-
return (key === ts_key_enum_1.Key.ArrowLeft ||
|
|
175
|
-
key === ts_key_enum_1.Key.ArrowRight ||
|
|
176
|
-
key === ts_key_enum_1.Key.ArrowUp ||
|
|
177
|
-
key === ts_key_enum_1.Key.ArrowDown);
|
|
175
|
+
return (key === ts_key_enum_1.Key.ArrowLeft.valueOf() ||
|
|
176
|
+
key === ts_key_enum_1.Key.ArrowRight.valueOf() ||
|
|
177
|
+
key === ts_key_enum_1.Key.ArrowUp.valueOf() ||
|
|
178
|
+
key === ts_key_enum_1.Key.ArrowDown.valueOf());
|
|
178
179
|
}
|
|
179
180
|
//# sourceMappingURL=ItemKeyboardNavigator.js.map
|