@deephaven/components 0.46.1-beta.2 → 0.46.1-beta.7
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/dist/AutoCompleteInput.js +40 -34
- package/dist/AutoCompleteInput.js.map +1 -1
- package/dist/AutoResizeTextarea.js +2 -1
- package/dist/AutoResizeTextarea.js.map +1 -1
- package/dist/BasicModal.js +48 -33
- package/dist/BasicModal.js.map +1 -1
- package/dist/Button.js +19 -8
- package/dist/Button.js.map +1 -1
- package/dist/ButtonGroup.js +5 -3
- package/dist/ButtonGroup.js.map +1 -1
- package/dist/ButtonOld.js +5 -3
- package/dist/ButtonOld.js.map +1 -1
- package/dist/CardFlip.js +14 -9
- package/dist/CardFlip.js.map +1 -1
- package/dist/Checkbox.js +23 -19
- package/dist/Checkbox.js.map +1 -1
- package/dist/Collapse.js +12 -9
- package/dist/Collapse.js.map +1 -1
- package/dist/ComboBox.js +61 -51
- package/dist/ComboBox.js.map +1 -1
- package/dist/CopyButton.js +5 -3
- package/dist/CopyButton.js.map +1 -1
- package/dist/CustomTimeSelect.js +92 -84
- package/dist/CustomTimeSelect.js.map +1 -1
- package/dist/DateInput.js +19 -17
- package/dist/DateInput.js.map +1 -1
- package/dist/DateTimeInput.js +20 -18
- package/dist/DateTimeInput.js.map +1 -1
- package/dist/DebouncedSearchInput.js +2 -1
- package/dist/DebouncedSearchInput.js.map +1 -1
- package/dist/DraggableItemList.js +97 -80
- package/dist/DraggableItemList.js.map +1 -1
- package/dist/EditableItemList.js +53 -46
- package/dist/EditableItemList.js.map +1 -1
- package/dist/HierarchicalCheckboxMenu.js +59 -49
- package/dist/HierarchicalCheckboxMenu.js.map +1 -1
- package/dist/ItemList.js +42 -37
- package/dist/ItemList.js.map +1 -1
- package/dist/ItemListItem.js +5 -3
- package/dist/ItemListItem.js.map +1 -1
- package/dist/LoadingOverlay.js +28 -20
- package/dist/LoadingOverlay.js.map +1 -1
- package/dist/LoadingSpinner.js +13 -10
- package/dist/LoadingSpinner.js.map +1 -1
- package/dist/MaskedInput.js +2 -1
- package/dist/MaskedInput.js.map +1 -1
- package/dist/Option.js +5 -3
- package/dist/Option.js.map +1 -1
- package/dist/RadioGroup.js +14 -10
- package/dist/RadioGroup.js.map +1 -1
- package/dist/RadioItem.js +23 -19
- package/dist/RadioItem.js.map +1 -1
- package/dist/RandomAreaPlotAnimation.js +8 -6
- package/dist/RandomAreaPlotAnimation.js.map +1 -1
- package/dist/SearchInput.js +26 -21
- package/dist/SearchInput.js.map +1 -1
- package/dist/Select.js +5 -3
- package/dist/Select.js.map +1 -1
- package/dist/SelectValueList.js +29 -24
- package/dist/SelectValueList.js.map +1 -1
- package/dist/SocketedButton.js +13 -10
- package/dist/SocketedButton.js.map +1 -1
- package/dist/TimeInput.js +2 -1
- package/dist/TimeInput.js.map +1 -1
- package/dist/TimeSlider.js +123 -106
- package/dist/TimeSlider.js.map +1 -1
- package/dist/ToastNotification.js +35 -27
- package/dist/ToastNotification.js.map +1 -1
- package/dist/UISwitch.js +7 -5
- package/dist/UISwitch.js.map +1 -1
- package/dist/ValidateLabelInput.js +33 -24
- package/dist/ValidateLabelInput.js.map +1 -1
- package/dist/context-actions/ContextActions.js +7 -5
- package/dist/context-actions/ContextActions.js.map +1 -1
- package/dist/context-actions/ContextMenu.js +44 -41
- package/dist/context-actions/ContextMenu.js.map +1 -1
- package/dist/context-actions/ContextMenuItem.js +34 -24
- package/dist/context-actions/ContextMenuItem.js.map +1 -1
- package/dist/context-actions/ContextMenuRoot.js +6 -4
- package/dist/context-actions/ContextMenuRoot.js.map +1 -1
- package/dist/context-actions/GlobalContextActions.js +3 -3
- package/dist/context-actions/GlobalContextActions.js.map +1 -1
- package/dist/menu-actions/DropdownMenu.js +19 -16
- package/dist/menu-actions/DropdownMenu.js.map +1 -1
- package/dist/menu-actions/Menu.js +8 -9
- package/dist/menu-actions/Menu.js.map +1 -1
- package/dist/modal/DebouncedModal.js +14 -9
- package/dist/modal/DebouncedModal.js.map +1 -1
- package/dist/modal/InfoModal.js +22 -13
- package/dist/modal/InfoModal.js.map +1 -1
- package/dist/modal/Modal.js +70 -60
- package/dist/modal/Modal.js.map +1 -1
- package/dist/modal/ModalBody.js +5 -3
- package/dist/modal/ModalBody.js.map +1 -1
- package/dist/modal/ModalFooter.js +5 -3
- package/dist/modal/ModalFooter.js.map +1 -1
- package/dist/modal/ModalHeader.js +19 -13
- package/dist/modal/ModalHeader.js.map +1 -1
- package/dist/navigation/Menu.js +15 -12
- package/dist/navigation/Menu.js.map +1 -1
- package/dist/navigation/MenuItem.js +29 -22
- package/dist/navigation/MenuItem.js.map +1 -1
- package/dist/navigation/Page.js +35 -26
- package/dist/navigation/Page.js.map +1 -1
- package/dist/navigation/Stack.js +33 -20
- package/dist/navigation/Stack.js.map +1 -1
- package/dist/popper/Popper.js +31 -25
- package/dist/popper/Popper.js.map +1 -1
- package/dist/popper/Tooltip.js +18 -13
- package/dist/popper/Tooltip.js.map +1 -1
- package/package.json +7 -7
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ContextMenuRoot.js","names":["React","Component","classNames","ContextMenu","ContextActionUtils","ContextMenuRoot","constructor","props","handleMenuClose","bind","handleContextMenu","container","createRef","openMenu","state","actions","left","top","componentDidMount","current","parentElement","addEventListener","componentWillUnmount","removeEventListener","e","isContextActionEvent","metaKey","ctrlKey","contextActions","getMenuItems","parentRect","getBoundingClientRect","clientY","clientX","length","target","preventDefault","setState","element","document","elementFromPoint","mouseEvent","MouseEvent","bubbles","cancelable","dispatchEvent","menu","render","dataTestId","verifiedTop","verifiedLeft","active"],"sources":["../../src/context-actions/ContextMenuRoot.tsx"],"sourcesContent":["import React, { Component } from 'react';\nimport classNames from 'classnames';\nimport ContextMenu from './ContextMenu';\nimport ContextActionUtils, { MenuItem } from './ContextActionUtils';\n\ntype ContextMenuRootProps = Record<string, never> & {\n 'data-testid'?: string;\n};\n\ninterface ContextMenuRootState {\n actions: MenuItem[] | null;\n left: number;\n top: number;\n}\n\n/**\n * Put at your root container, any contextmenu events that are unhandled in the root container will be handled by this\n */\nclass ContextMenuRoot extends Component<\n ContextMenuRootProps,\n ContextMenuRootState\n> {\n constructor(props: ContextMenuRootProps) {\n super(props);\n\n this.handleMenuClose = this.handleMenuClose.bind(this);\n this.handleContextMenu = this.handleContextMenu.bind(this);\n this.container = React.createRef();\n this.openMenu = React.createRef();\n\n this.state = {\n actions: null,\n left: 0,\n top: 0,\n };\n }\n\n componentDidMount(): void {\n if (this.container.current?.parentElement) {\n this.container.current.parentElement.addEventListener(\n 'contextmenu',\n this.handleContextMenu\n );\n }\n }\n\n componentWillUnmount(): void {\n if (this.container.current?.parentElement) {\n this.container.current.parentElement.removeEventListener(\n 'contextmenu',\n this.handleContextMenu\n );\n }\n }\n\n container: React.RefObject<HTMLDivElement>;\n\n openMenu: React.RefObject<ContextMenu>;\n\n handleContextMenu(e: MouseEvent): void {\n if (!ContextActionUtils.isContextActionEvent(e)) {\n return;\n }\n\n if (!this.container.current) {\n return;\n }\n\n if (e.metaKey || e.ctrlKey) {\n // debug escape hatch to native menu\n return;\n }\n\n const contextActions = ContextActionUtils.getMenuItems(e.contextActions);\n\n const parentRect = this.container.current.getBoundingClientRect();\n const top = e.clientY - parentRect.top;\n const left = e.clientX - parentRect.left;\n\n if (contextActions.length === 0) {\n // This code path seems to only exist for Chrome on Mac\n // Mac appears to trigger contextmenu events on mousedown vs. mouseup on Windows\n // Mouseup on Windows triggers blur before contextmenu which effectively does what this path does\n if (e.target === this.container.current) {\n // re-emit right clicks that hit the context-root blocking layer\n e.preventDefault();\n\n // Set actions to null removes the menu\n // That allows a new menu to be opened on a different element so initial position is set properly\n // Otherwise the instance of this menu may be reused\n // A new contextmenu event is triggered on the element at the location the user clicked on the blocking layer\n this.setState({ actions: null }, () => {\n const element = document.elementFromPoint(left, top); // x y\n\n const mouseEvent = new MouseEvent('contextmenu', {\n clientX: e.clientX,\n clientY: e.clientY,\n bubbles: true,\n cancelable: true,\n });\n\n element?.dispatchEvent(mouseEvent);\n });\n return;\n }\n\n // target was a menu item\n return;\n }\n\n // new clicks, set actions\n e.preventDefault();\n this.setState({\n actions: contextActions,\n top,\n left,\n });\n }\n\n handleMenuClose(menu: ContextMenu): void {\n if (menu === this.openMenu.current) {\n this.setState({ actions: null });\n }\n }\n\n render(): JSX.Element {\n let menu = null;\n const { 'data-testid': dataTestId } = this.props;\n const { actions, top, left } = this.state;\n if (actions) {\n menu = (\n <ContextMenu\n ref={this.openMenu}\n actions={actions}\n onMenuClosed={this.handleMenuClose}\n top={top}\n left={left}\n updatePosition={(verifiedTop, verifiedLeft) => {\n this.setState({ top: verifiedTop, left: verifiedLeft });\n }}\n data-testid={dataTestId}\n />\n );\n }\n return (\n <div\n className={classNames('context-menu-root', { active: actions })}\n ref={this.container}\n >\n {menu}\n </div>\n );\n }\n}\n\nexport default ContextMenuRoot;\n"],"mappings":"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
|
|
1
|
+
{"version":3,"file":"ContextMenuRoot.js","names":["React","Component","classNames","ContextMenu","ContextActionUtils","ContextMenuRoot","constructor","props","handleMenuClose","bind","handleContextMenu","container","createRef","openMenu","state","actions","left","top","componentDidMount","current","parentElement","addEventListener","componentWillUnmount","removeEventListener","e","isContextActionEvent","metaKey","ctrlKey","contextActions","getMenuItems","parentRect","getBoundingClientRect","clientY","clientX","length","target","preventDefault","setState","element","document","elementFromPoint","mouseEvent","MouseEvent","bubbles","cancelable","dispatchEvent","menu","render","dataTestId","verifiedTop","verifiedLeft","active"],"sources":["../../src/context-actions/ContextMenuRoot.tsx"],"sourcesContent":["import React, { Component } from 'react';\nimport classNames from 'classnames';\nimport ContextMenu from './ContextMenu';\nimport ContextActionUtils, { MenuItem } from './ContextActionUtils';\n\ntype ContextMenuRootProps = Record<string, never> & {\n 'data-testid'?: string;\n};\n\ninterface ContextMenuRootState {\n actions: MenuItem[] | null;\n left: number;\n top: number;\n}\n\n/**\n * Put at your root container, any contextmenu events that are unhandled in the root container will be handled by this\n */\nclass ContextMenuRoot extends Component<\n ContextMenuRootProps,\n ContextMenuRootState\n> {\n constructor(props: ContextMenuRootProps) {\n super(props);\n\n this.handleMenuClose = this.handleMenuClose.bind(this);\n this.handleContextMenu = this.handleContextMenu.bind(this);\n this.container = React.createRef();\n this.openMenu = React.createRef();\n\n this.state = {\n actions: null,\n left: 0,\n top: 0,\n };\n }\n\n componentDidMount(): void {\n if (this.container.current?.parentElement) {\n this.container.current.parentElement.addEventListener(\n 'contextmenu',\n this.handleContextMenu\n );\n }\n }\n\n componentWillUnmount(): void {\n if (this.container.current?.parentElement) {\n this.container.current.parentElement.removeEventListener(\n 'contextmenu',\n this.handleContextMenu\n );\n }\n }\n\n container: React.RefObject<HTMLDivElement>;\n\n openMenu: React.RefObject<ContextMenu>;\n\n handleContextMenu(e: MouseEvent): void {\n if (!ContextActionUtils.isContextActionEvent(e)) {\n return;\n }\n\n if (!this.container.current) {\n return;\n }\n\n if (e.metaKey || e.ctrlKey) {\n // debug escape hatch to native menu\n return;\n }\n\n const contextActions = ContextActionUtils.getMenuItems(e.contextActions);\n\n const parentRect = this.container.current.getBoundingClientRect();\n const top = e.clientY - parentRect.top;\n const left = e.clientX - parentRect.left;\n\n if (contextActions.length === 0) {\n // This code path seems to only exist for Chrome on Mac\n // Mac appears to trigger contextmenu events on mousedown vs. mouseup on Windows\n // Mouseup on Windows triggers blur before contextmenu which effectively does what this path does\n if (e.target === this.container.current) {\n // re-emit right clicks that hit the context-root blocking layer\n e.preventDefault();\n\n // Set actions to null removes the menu\n // That allows a new menu to be opened on a different element so initial position is set properly\n // Otherwise the instance of this menu may be reused\n // A new contextmenu event is triggered on the element at the location the user clicked on the blocking layer\n this.setState({ actions: null }, () => {\n const element = document.elementFromPoint(left, top); // x y\n\n const mouseEvent = new MouseEvent('contextmenu', {\n clientX: e.clientX,\n clientY: e.clientY,\n bubbles: true,\n cancelable: true,\n });\n\n element?.dispatchEvent(mouseEvent);\n });\n return;\n }\n\n // target was a menu item\n return;\n }\n\n // new clicks, set actions\n e.preventDefault();\n this.setState({\n actions: contextActions,\n top,\n left,\n });\n }\n\n handleMenuClose(menu: ContextMenu): void {\n if (menu === this.openMenu.current) {\n this.setState({ actions: null });\n }\n }\n\n render(): JSX.Element {\n let menu = null;\n const { 'data-testid': dataTestId } = this.props;\n const { actions, top, left } = this.state;\n if (actions) {\n menu = (\n <ContextMenu\n ref={this.openMenu}\n actions={actions}\n onMenuClosed={this.handleMenuClose}\n top={top}\n left={left}\n updatePosition={(verifiedTop, verifiedLeft) => {\n this.setState({ top: verifiedTop, left: verifiedLeft });\n }}\n data-testid={dataTestId}\n />\n );\n }\n return (\n <div\n className={classNames('context-menu-root', { active: actions })}\n ref={this.container}\n >\n {menu}\n </div>\n );\n }\n}\n\nexport default ContextMenuRoot;\n"],"mappings":";;;AAAA,OAAOA,KAAK,IAAIC,SAAS,QAAQ,OAAO;AACxC,OAAOC,UAAU,MAAM,YAAY;AAAC,OAC7BC,WAAW;AAAA,OACXC,kBAAkB;AAAA;AAYzB;AACA;AACA;AACA,MAAMC,eAAe,SAASJ,SAAS,CAGrC;EACAK,WAAW,CAACC,KAA2B,EAAE;IACvC,KAAK,CAACA,KAAK,CAAC;IAAC;IAAA;IAEb,IAAI,CAACC,eAAe,GAAG,IAAI,CAACA,eAAe,CAACC,IAAI,CAAC,IAAI,CAAC;IACtD,IAAI,CAACC,iBAAiB,GAAG,IAAI,CAACA,iBAAiB,CAACD,IAAI,CAAC,IAAI,CAAC;IAC1D,IAAI,CAACE,SAAS,gBAAGX,KAAK,CAACY,SAAS,EAAE;IAClC,IAAI,CAACC,QAAQ,gBAAGb,KAAK,CAACY,SAAS,EAAE;IAEjC,IAAI,CAACE,KAAK,GAAG;MACXC,OAAO,EAAE,IAAI;MACbC,IAAI,EAAE,CAAC;MACPC,GAAG,EAAE;IACP,CAAC;EACH;EAEAC,iBAAiB,GAAS;IAAA;IACxB,6BAAI,IAAI,CAACP,SAAS,CAACQ,OAAO,kDAAtB,sBAAwBC,aAAa,EAAE;MACzC,IAAI,CAACT,SAAS,CAACQ,OAAO,CAACC,aAAa,CAACC,gBAAgB,CACnD,aAAa,EACb,IAAI,CAACX,iBAAiB,CACvB;IACH;EACF;EAEAY,oBAAoB,GAAS;IAAA;IAC3B,8BAAI,IAAI,CAACX,SAAS,CAACQ,OAAO,mDAAtB,uBAAwBC,aAAa,EAAE;MACzC,IAAI,CAACT,SAAS,CAACQ,OAAO,CAACC,aAAa,CAACG,mBAAmB,CACtD,aAAa,EACb,IAAI,CAACb,iBAAiB,CACvB;IACH;EACF;EAMAA,iBAAiB,CAACc,CAAa,EAAQ;IACrC,IAAI,CAACpB,kBAAkB,CAACqB,oBAAoB,CAACD,CAAC,CAAC,EAAE;MAC/C;IACF;IAEA,IAAI,CAAC,IAAI,CAACb,SAAS,CAACQ,OAAO,EAAE;MAC3B;IACF;IAEA,IAAIK,CAAC,CAACE,OAAO,IAAIF,CAAC,CAACG,OAAO,EAAE;MAC1B;MACA;IACF;IAEA,IAAMC,cAAc,GAAGxB,kBAAkB,CAACyB,YAAY,CAACL,CAAC,CAACI,cAAc,CAAC;IAExE,IAAME,UAAU,GAAG,IAAI,CAACnB,SAAS,CAACQ,OAAO,CAACY,qBAAqB,EAAE;IACjE,IAAMd,GAAG,GAAGO,CAAC,CAACQ,OAAO,GAAGF,UAAU,CAACb,GAAG;IACtC,IAAMD,IAAI,GAAGQ,CAAC,CAACS,OAAO,GAAGH,UAAU,CAACd,IAAI;IAExC,IAAIY,cAAc,CAACM,MAAM,KAAK,CAAC,EAAE;MAC/B;MACA;MACA;MACA,IAAIV,CAAC,CAACW,MAAM,KAAK,IAAI,CAACxB,SAAS,CAACQ,OAAO,EAAE;QACvC;QACAK,CAAC,CAACY,cAAc,EAAE;;QAElB;QACA;QACA;QACA;QACA,IAAI,CAACC,QAAQ,CAAC;UAAEtB,OAAO,EAAE;QAAK,CAAC,EAAE,MAAM;UACrC,IAAMuB,OAAO,GAAGC,QAAQ,CAACC,gBAAgB,CAACxB,IAAI,EAAEC,GAAG,CAAC,CAAC,CAAC;;UAEtD,IAAMwB,UAAU,GAAG,IAAIC,UAAU,CAAC,aAAa,EAAE;YAC/CT,OAAO,EAAET,CAAC,CAACS,OAAO;YAClBD,OAAO,EAAER,CAAC,CAACQ,OAAO;YAClBW,OAAO,EAAE,IAAI;YACbC,UAAU,EAAE;UACd,CAAC,CAAC;UAEFN,OAAO,aAAPA,OAAO,uBAAPA,OAAO,CAAEO,aAAa,CAACJ,UAAU,CAAC;QACpC,CAAC,CAAC;QACF;MACF;;MAEA;MACA;IACF;;IAEA;IACAjB,CAAC,CAACY,cAAc,EAAE;IAClB,IAAI,CAACC,QAAQ,CAAC;MACZtB,OAAO,EAAEa,cAAc;MACvBX,GAAG;MACHD;IACF,CAAC,CAAC;EACJ;EAEAR,eAAe,CAACsC,IAAiB,EAAQ;IACvC,IAAIA,IAAI,KAAK,IAAI,CAACjC,QAAQ,CAACM,OAAO,EAAE;MAClC,IAAI,CAACkB,QAAQ,CAAC;QAAEtB,OAAO,EAAE;MAAK,CAAC,CAAC;IAClC;EACF;EAEAgC,MAAM,GAAgB;IACpB,IAAID,IAAI,GAAG,IAAI;IACf,IAAM;MAAE,aAAa,EAAEE;IAAW,CAAC,GAAG,IAAI,CAACzC,KAAK;IAChD,IAAM;MAAEQ,OAAO;MAAEE,GAAG;MAAED;IAAK,CAAC,GAAG,IAAI,CAACF,KAAK;IACzC,IAAIC,OAAO,EAAE;MACX+B,IAAI,gBACF,KAAC,WAAW;QACV,GAAG,EAAE,IAAI,CAACjC,QAAS;QACnB,OAAO,EAAEE,OAAQ;QACjB,YAAY,EAAE,IAAI,CAACP,eAAgB;QACnC,GAAG,EAAES,GAAI;QACT,IAAI,EAAED,IAAK;QACX,cAAc,EAAE,CAACiC,WAAW,EAAEC,YAAY,KAAK;UAC7C,IAAI,CAACb,QAAQ,CAAC;YAAEpB,GAAG,EAAEgC,WAAW;YAAEjC,IAAI,EAAEkC;UAAa,CAAC,CAAC;QACzD,CAAE;QACF,eAAaF;MAAW,EAE3B;IACH;IACA,oBACE;MACE,SAAS,EAAE9C,UAAU,CAAC,mBAAmB,EAAE;QAAEiD,MAAM,EAAEpC;MAAQ,CAAC,CAAE;MAChE,GAAG,EAAE,IAAI,CAACJ,SAAU;MAAA,UAEnBmC;IAAI,EACD;EAEV;AACF;AAEA,eAAezC,eAAe"}
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import React, { Component } from 'react';
|
|
2
2
|
import GlobalContextAction from "./GlobalContextAction.js";
|
|
3
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
3
4
|
class GlobalContextActions extends Component {
|
|
4
5
|
render() {
|
|
5
6
|
var {
|
|
@@ -13,11 +14,10 @@ class GlobalContextActions extends Component {
|
|
|
13
14
|
shortcut
|
|
14
15
|
} = action;
|
|
15
16
|
if (action.title != null || action.menuElement || shortcut) {
|
|
16
|
-
var actionElement = /*#__PURE__*/
|
|
17
|
-
key: "".concat(action.title, ".").concat(shortcut === null || shortcut === void 0 ? void 0 : shortcut.id),
|
|
17
|
+
var actionElement = /*#__PURE__*/_jsx(GlobalContextAction, {
|
|
18
18
|
action: action,
|
|
19
19
|
"data-testid": dataTestId
|
|
20
|
-
});
|
|
20
|
+
}, "".concat(action.title, ".").concat(shortcut === null || shortcut === void 0 ? void 0 : shortcut.id));
|
|
21
21
|
actionElements.push(actionElement);
|
|
22
22
|
}
|
|
23
23
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"GlobalContextActions.js","names":["React","Component","GlobalContextAction","GlobalContextActions","render","actions","dataTestId","props","actionElements","i","length","action","shortcut","title","menuElement","actionElement","id","push"],"sources":["../../src/context-actions/GlobalContextActions.tsx"],"sourcesContent":["import React, { Component } from 'react';\nimport GlobalContextAction from './GlobalContextAction';\nimport type { ContextAction } from './ContextActionUtils';\n\ninterface GlobalContextActionsProps {\n actions: ContextAction[];\n 'data-testid'?: string;\n}\n\nclass GlobalContextActions extends Component<GlobalContextActionsProps> {\n render(): React.ReactNode {\n const { actions, 'data-testid': dataTestId } = this.props;\n const actionElements = [];\n for (let i = 0; i < actions.length; i += 1) {\n const action = actions[i];\n const { shortcut } = action;\n if (action.title != null || action.menuElement || shortcut) {\n const actionElement = (\n <GlobalContextAction\n key={`${action.title}.${shortcut?.id}`}\n action={action}\n data-testid={dataTestId}\n />\n );\n actionElements.push(actionElement);\n }\n }\n return actionElements;\n }\n}\n\nexport default GlobalContextActions;\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,SAAS,QAAQ,OAAO;AAAC,OAClCC,mBAAmB;AAQ1B,MAAMC,oBAAoB,SAASF,SAAS,CAA4B;EACtEG,MAAM,GAAoB;IACxB,IAAM;MAAEC,OAAO;MAAE,aAAa,EAAEC;IAAW,CAAC,GAAG,IAAI,CAACC,KAAK;IACzD,IAAMC,cAAc,GAAG,EAAE;IACzB,KAAK,IAAIC,CAAC,GAAG,CAAC,EAAEA,CAAC,GAAGJ,OAAO,CAACK,MAAM,EAAED,CAAC,IAAI,CAAC,EAAE;MAC1C,IAAME,MAAM,GAAGN,OAAO,CAACI,CAAC,CAAC;MACzB,IAAM;QAAEG;MAAS,CAAC,GAAGD,MAAM;MAC3B,IAAIA,MAAM,CAACE,KAAK,IAAI,IAAI,IAAIF,MAAM,CAACG,WAAW,IAAIF,QAAQ,EAAE;QAC1D,IAAMG,aAAa,gBACjB,
|
|
1
|
+
{"version":3,"file":"GlobalContextActions.js","names":["React","Component","GlobalContextAction","GlobalContextActions","render","actions","dataTestId","props","actionElements","i","length","action","shortcut","title","menuElement","actionElement","id","push"],"sources":["../../src/context-actions/GlobalContextActions.tsx"],"sourcesContent":["import React, { Component } from 'react';\nimport GlobalContextAction from './GlobalContextAction';\nimport type { ContextAction } from './ContextActionUtils';\n\ninterface GlobalContextActionsProps {\n actions: ContextAction[];\n 'data-testid'?: string;\n}\n\nclass GlobalContextActions extends Component<GlobalContextActionsProps> {\n render(): React.ReactNode {\n const { actions, 'data-testid': dataTestId } = this.props;\n const actionElements = [];\n for (let i = 0; i < actions.length; i += 1) {\n const action = actions[i];\n const { shortcut } = action;\n if (action.title != null || action.menuElement || shortcut) {\n const actionElement = (\n <GlobalContextAction\n key={`${action.title}.${shortcut?.id}`}\n action={action}\n data-testid={dataTestId}\n />\n );\n actionElements.push(actionElement);\n }\n }\n return actionElements;\n }\n}\n\nexport default GlobalContextActions;\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,SAAS,QAAQ,OAAO;AAAC,OAClCC,mBAAmB;AAAA;AAQ1B,MAAMC,oBAAoB,SAASF,SAAS,CAA4B;EACtEG,MAAM,GAAoB;IACxB,IAAM;MAAEC,OAAO;MAAE,aAAa,EAAEC;IAAW,CAAC,GAAG,IAAI,CAACC,KAAK;IACzD,IAAMC,cAAc,GAAG,EAAE;IACzB,KAAK,IAAIC,CAAC,GAAG,CAAC,EAAEA,CAAC,GAAGJ,OAAO,CAACK,MAAM,EAAED,CAAC,IAAI,CAAC,EAAE;MAC1C,IAAME,MAAM,GAAGN,OAAO,CAACI,CAAC,CAAC;MACzB,IAAM;QAAEG;MAAS,CAAC,GAAGD,MAAM;MAC3B,IAAIA,MAAM,CAACE,KAAK,IAAI,IAAI,IAAIF,MAAM,CAACG,WAAW,IAAIF,QAAQ,EAAE;QAC1D,IAAMG,aAAa,gBACjB,KAAC,mBAAmB;UAElB,MAAM,EAAEJ,MAAO;UACf,eAAaL;QAAW,aAFhBK,MAAM,CAACE,KAAK,cAAID,QAAQ,aAARA,QAAQ,uBAARA,QAAQ,CAAEI,EAAE,EAIvC;QACDR,cAAc,CAACS,IAAI,CAACF,aAAa,CAAC;MACpC;IACF;IACA,OAAOP,cAAc;EACvB;AACF;AAEA,eAAeL,oBAAoB"}
|
|
@@ -38,6 +38,7 @@ import classNames from 'classnames';
|
|
|
38
38
|
import { Popper } from "../popper/index.js";
|
|
39
39
|
import Menu from "./Menu.js";
|
|
40
40
|
import "./DropdownMenu.css";
|
|
41
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
41
42
|
class DropdownMenu extends PureComponent {
|
|
42
43
|
constructor(props) {
|
|
43
44
|
super(props);
|
|
@@ -136,24 +137,26 @@ class DropdownMenu extends PureComponent {
|
|
|
136
137
|
options = _objectSpread({
|
|
137
138
|
separateKeyboardMouse: true
|
|
138
139
|
}, options);
|
|
139
|
-
return /*#__PURE__*/
|
|
140
|
+
return /*#__PURE__*/_jsx("div", {
|
|
140
141
|
className: "menu-actions-listener",
|
|
141
142
|
ref: this.container,
|
|
142
|
-
"data-testid": dataTestId
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
143
|
+
"data-testid": dataTestId,
|
|
144
|
+
children: /*#__PURE__*/_jsx(Popper, {
|
|
145
|
+
ref: this.popper,
|
|
146
|
+
options: popperOptions,
|
|
147
|
+
className: classNames('menu-popper', popperClassName),
|
|
148
|
+
onExited: this.handleExited,
|
|
149
|
+
closeOnBlur: true,
|
|
150
|
+
interactive: true,
|
|
151
|
+
children: /*#__PURE__*/_jsx(Menu, {
|
|
152
|
+
actions: actions,
|
|
153
|
+
closeMenu: this.handleCloseMenu,
|
|
154
|
+
onMenuOpened: onMenuOpened,
|
|
155
|
+
options: options,
|
|
156
|
+
menuStyle: menuStyle
|
|
157
|
+
})
|
|
158
|
+
})
|
|
159
|
+
});
|
|
157
160
|
}
|
|
158
161
|
}
|
|
159
162
|
_defineProperty(DropdownMenu, "defaultProps", {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DropdownMenu.js","names":["React","PureComponent","classNames","Popper","Menu","DropdownMenu","constructor","props","handleClick","bind","handleCloseMenu","handleExited","container","createRef","parent","popper","isOpen","componentDidMount","isShown","current","parentElement","addEventListener","openMenu","componentDidUpdate","prevProps","window","requestAnimationFrame","closeMenu","componentWillUnmount","removeEventListener","hide","show","scheduleUpdate","e","preventDefault","stopPropagation","onMenuClosed","render","actions","onMenuOpened","popperClassName","dataTestId","menuStyle","options","popperOptions","placement","separateKeyboardMouse","undefined"],"sources":["../../src/menu-actions/DropdownMenu.tsx"],"sourcesContent":["/**\n * Add dropdown menu that you add onto any component.\n *\n * Similar to the context-actions package, accepts list of actions to create a dropdown menu.\n * Note: Does not support nested sub-menus.\n *\n * Usage:\n * let actions = [{\n * title: 'My Action',\n * action: () => { alert('My Action Clicked!') }\n * icon: faPrint, // Limited to FontAwesome icons for now.\n * shortcut: Shortcut, // Shortcut class instance\n * group: ContextActions.groups.default, // What group to group the context action with\n * order: null // Int where to order within group\n * }];\n *\n * Usage:\n * 1. Auto bind click to open event to parent\n * <div>\n * Click in this container\n * <DropdownMenu actions={actions}/>\n * </div>\n *\n * 2. Control via prop\n * <div>\n * DropdownMenu will not react to the click event if isShown prop is used\n * <DropdownMenu actions={actions} isShown={isShown} />\n * </div>\n *\n */\nimport React, { PureComponent } from 'react';\nimport classNames from 'classnames';\nimport { PopperOptions } from 'popper.js';\nimport { Popper } from '../popper';\nimport Menu, { MenuOptions } from './Menu';\nimport { ContextAction } from '../context-actions/ContextActionUtils';\nimport './DropdownMenu.scss';\n\nexport type DropdownAction = ContextAction & { actions?: never };\n\nexport type DropdownActions =\n | (() => DropdownAction[])\n | DropdownAction\n | DropdownAction[];\n\ntype DropdownMenuProps = {\n // Override to prevent nested lists\n actions: DropdownActions;\n isShown: boolean | null;\n onMenuClosed(): void;\n onMenuOpened(): void;\n options: MenuOptions;\n popperOptions: PopperOptions;\n popperClassName: string;\n menuStyle: React.CSSProperties;\n 'data-testid'?: string;\n};\n\nclass DropdownMenu extends PureComponent<DropdownMenuProps> {\n static defaultProps = {\n isShown: null,\n onMenuClosed(): void {\n // no-op\n },\n onMenuOpened(): void {\n // no-op\n },\n options: {},\n popperOptions: {},\n popperClassName: '',\n menuStyle: {},\n 'data-testid': undefined,\n };\n\n constructor(props: DropdownMenuProps) {\n super(props);\n\n this.handleClick = this.handleClick.bind(this);\n this.handleCloseMenu = this.handleCloseMenu.bind(this);\n this.handleExited = this.handleExited.bind(this);\n\n this.container = React.createRef();\n this.parent = null;\n this.popper = React.createRef();\n\n this.isOpen = false;\n }\n\n componentDidMount(): void {\n const { isShown } = this.props;\n\n if (isShown === null) {\n if (this.container.current?.parentElement) {\n this.parent = this.container.current.parentElement;\n this.parent.addEventListener('click', this.handleClick);\n }\n } else if (isShown) {\n this.openMenu();\n }\n }\n\n componentDidUpdate(prevProps: DropdownMenuProps): void {\n const { isShown } = this.props;\n\n if (prevProps.isShown !== isShown) {\n if (isShown !== null && isShown) {\n // https://github.com/reactjs/react-transition-group/issues/382\n window.requestAnimationFrame(() => {\n this.openMenu();\n });\n } else {\n this.closeMenu();\n }\n }\n }\n\n componentWillUnmount(): void {\n if (this.parent) {\n this.parent.removeEventListener('click', this.handleClick);\n }\n }\n\n container: React.RefObject<HTMLDivElement>;\n\n parent: Element | null;\n\n popper: React.RefObject<Popper>;\n\n isOpen: boolean;\n\n closeMenu(): void {\n this.popper.current?.hide();\n }\n\n openMenu(): void {\n if (this.popper.current && !this.isOpen) {\n this.popper.current.show();\n this.isOpen = true;\n }\n }\n\n scheduleUpdate(): void {\n this.popper.current?.scheduleUpdate();\n }\n\n handleClick(e: Event): void {\n e.preventDefault();\n e.stopPropagation();\n\n this.openMenu();\n }\n\n handleCloseMenu(): void {\n this.closeMenu();\n }\n\n handleExited(): void {\n this.isOpen = false;\n\n const { onMenuClosed } = this.props;\n onMenuClosed();\n }\n\n render(): JSX.Element {\n const {\n actions,\n onMenuOpened,\n popperClassName,\n 'data-testid': dataTestId,\n } = this.props;\n const { menuStyle } = this.props;\n let { options, popperOptions } = this.props;\n popperOptions = { placement: 'bottom', ...popperOptions };\n options = {\n separateKeyboardMouse: true,\n ...options,\n };\n return (\n <div\n className=\"menu-actions-listener\"\n ref={this.container}\n data-testid={dataTestId}\n >\n <Popper\n ref={this.popper}\n options={popperOptions}\n className={classNames('menu-popper', popperClassName)}\n onExited={this.handleExited}\n closeOnBlur\n interactive\n >\n <Menu\n actions={actions}\n closeMenu={this.handleCloseMenu}\n onMenuOpened={onMenuOpened}\n options={options}\n menuStyle={menuStyle}\n />\n </Popper>\n </div>\n );\n }\n}\n\nexport default DropdownMenu;\n"],"mappings":"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
|
|
1
|
+
{"version":3,"file":"DropdownMenu.js","names":["React","PureComponent","classNames","Popper","Menu","DropdownMenu","constructor","props","handleClick","bind","handleCloseMenu","handleExited","container","createRef","parent","popper","isOpen","componentDidMount","isShown","current","parentElement","addEventListener","openMenu","componentDidUpdate","prevProps","window","requestAnimationFrame","closeMenu","componentWillUnmount","removeEventListener","hide","show","scheduleUpdate","e","preventDefault","stopPropagation","onMenuClosed","render","actions","onMenuOpened","popperClassName","dataTestId","menuStyle","options","popperOptions","placement","separateKeyboardMouse","undefined"],"sources":["../../src/menu-actions/DropdownMenu.tsx"],"sourcesContent":["/**\n * Add dropdown menu that you add onto any component.\n *\n * Similar to the context-actions package, accepts list of actions to create a dropdown menu.\n * Note: Does not support nested sub-menus.\n *\n * Usage:\n * let actions = [{\n * title: 'My Action',\n * action: () => { alert('My Action Clicked!') }\n * icon: faPrint, // Limited to FontAwesome icons for now.\n * shortcut: Shortcut, // Shortcut class instance\n * group: ContextActions.groups.default, // What group to group the context action with\n * order: null // Int where to order within group\n * }];\n *\n * Usage:\n * 1. Auto bind click to open event to parent\n * <div>\n * Click in this container\n * <DropdownMenu actions={actions}/>\n * </div>\n *\n * 2. Control via prop\n * <div>\n * DropdownMenu will not react to the click event if isShown prop is used\n * <DropdownMenu actions={actions} isShown={isShown} />\n * </div>\n *\n */\nimport React, { PureComponent } from 'react';\nimport classNames from 'classnames';\nimport { PopperOptions } from 'popper.js';\nimport { Popper } from '../popper';\nimport Menu, { MenuOptions } from './Menu';\nimport { ContextAction } from '../context-actions/ContextActionUtils';\nimport './DropdownMenu.scss';\n\nexport type DropdownAction = ContextAction & { actions?: never };\n\nexport type DropdownActions =\n | (() => DropdownAction[])\n | DropdownAction\n | DropdownAction[];\n\ntype DropdownMenuProps = {\n // Override to prevent nested lists\n actions: DropdownActions;\n isShown: boolean | null;\n onMenuClosed(): void;\n onMenuOpened(): void;\n options: MenuOptions;\n popperOptions: PopperOptions;\n popperClassName: string;\n menuStyle: React.CSSProperties;\n 'data-testid'?: string;\n};\n\nclass DropdownMenu extends PureComponent<DropdownMenuProps> {\n static defaultProps = {\n isShown: null,\n onMenuClosed(): void {\n // no-op\n },\n onMenuOpened(): void {\n // no-op\n },\n options: {},\n popperOptions: {},\n popperClassName: '',\n menuStyle: {},\n 'data-testid': undefined,\n };\n\n constructor(props: DropdownMenuProps) {\n super(props);\n\n this.handleClick = this.handleClick.bind(this);\n this.handleCloseMenu = this.handleCloseMenu.bind(this);\n this.handleExited = this.handleExited.bind(this);\n\n this.container = React.createRef();\n this.parent = null;\n this.popper = React.createRef();\n\n this.isOpen = false;\n }\n\n componentDidMount(): void {\n const { isShown } = this.props;\n\n if (isShown === null) {\n if (this.container.current?.parentElement) {\n this.parent = this.container.current.parentElement;\n this.parent.addEventListener('click', this.handleClick);\n }\n } else if (isShown) {\n this.openMenu();\n }\n }\n\n componentDidUpdate(prevProps: DropdownMenuProps): void {\n const { isShown } = this.props;\n\n if (prevProps.isShown !== isShown) {\n if (isShown !== null && isShown) {\n // https://github.com/reactjs/react-transition-group/issues/382\n window.requestAnimationFrame(() => {\n this.openMenu();\n });\n } else {\n this.closeMenu();\n }\n }\n }\n\n componentWillUnmount(): void {\n if (this.parent) {\n this.parent.removeEventListener('click', this.handleClick);\n }\n }\n\n container: React.RefObject<HTMLDivElement>;\n\n parent: Element | null;\n\n popper: React.RefObject<Popper>;\n\n isOpen: boolean;\n\n closeMenu(): void {\n this.popper.current?.hide();\n }\n\n openMenu(): void {\n if (this.popper.current && !this.isOpen) {\n this.popper.current.show();\n this.isOpen = true;\n }\n }\n\n scheduleUpdate(): void {\n this.popper.current?.scheduleUpdate();\n }\n\n handleClick(e: Event): void {\n e.preventDefault();\n e.stopPropagation();\n\n this.openMenu();\n }\n\n handleCloseMenu(): void {\n this.closeMenu();\n }\n\n handleExited(): void {\n this.isOpen = false;\n\n const { onMenuClosed } = this.props;\n onMenuClosed();\n }\n\n render(): JSX.Element {\n const {\n actions,\n onMenuOpened,\n popperClassName,\n 'data-testid': dataTestId,\n } = this.props;\n const { menuStyle } = this.props;\n let { options, popperOptions } = this.props;\n popperOptions = { placement: 'bottom', ...popperOptions };\n options = {\n separateKeyboardMouse: true,\n ...options,\n };\n return (\n <div\n className=\"menu-actions-listener\"\n ref={this.container}\n data-testid={dataTestId}\n >\n <Popper\n ref={this.popper}\n options={popperOptions}\n className={classNames('menu-popper', popperClassName)}\n onExited={this.handleExited}\n closeOnBlur\n interactive\n >\n <Menu\n actions={actions}\n closeMenu={this.handleCloseMenu}\n onMenuOpened={onMenuOpened}\n options={options}\n menuStyle={menuStyle}\n />\n </Popper>\n </div>\n );\n }\n}\n\nexport default DropdownMenu;\n"],"mappings":"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"}
|
|
@@ -6,6 +6,7 @@ function _toPrimitive(input, hint) { if (typeof input !== "object" || input ===
|
|
|
6
6
|
import React, { PureComponent } from 'react';
|
|
7
7
|
import ContextActionUtils from "../context-actions/ContextActionUtils.js";
|
|
8
8
|
import ContextMenuItem from "../context-actions/ContextMenuItem.js";
|
|
9
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
9
10
|
/**
|
|
10
11
|
* Do not use this class directly. Use DropdownMenu instead.
|
|
11
12
|
*
|
|
@@ -195,12 +196,9 @@ class Menu extends PureComponent {
|
|
|
195
196
|
for (var i = 0; i < menuItems.length; i += 1) {
|
|
196
197
|
var menuItem = menuItems[i];
|
|
197
198
|
if (i > 0 && menuItem.group !== menuItems[i - 1].group) {
|
|
198
|
-
menuItemElements.push( /*#__PURE__*/
|
|
199
|
-
key: "".concat(i, ".separator")
|
|
200
|
-
}));
|
|
199
|
+
menuItemElements.push( /*#__PURE__*/_jsx("hr", {}, "".concat(i, ".separator")));
|
|
201
200
|
}
|
|
202
|
-
var menuItemElement = /*#__PURE__*/
|
|
203
|
-
key: i,
|
|
201
|
+
var menuItemElement = /*#__PURE__*/_jsx(ContextMenuItem, {
|
|
204
202
|
isKeyboardSelected: keyboardIndex === i,
|
|
205
203
|
isMouseSelected: mouseIndex === i,
|
|
206
204
|
menuItem: menuItem,
|
|
@@ -208,13 +206,13 @@ class Menu extends PureComponent {
|
|
|
208
206
|
onMenuItemClick: this.handleMenuItemClick,
|
|
209
207
|
onMenuItemMouseMove: this.handleMenuItemMouseMove,
|
|
210
208
|
onMenuItemContextMenu: () => false
|
|
211
|
-
});
|
|
209
|
+
}, i);
|
|
212
210
|
menuItemElements.push(menuItemElement);
|
|
213
211
|
}
|
|
214
212
|
var {
|
|
215
213
|
menuStyle
|
|
216
214
|
} = this.props;
|
|
217
|
-
return /*#__PURE__*/
|
|
215
|
+
return /*#__PURE__*/_jsx("div", {
|
|
218
216
|
className: "context-menu-container",
|
|
219
217
|
style: _objectSpread({}, menuStyle),
|
|
220
218
|
ref: this.container,
|
|
@@ -222,8 +220,9 @@ class Menu extends PureComponent {
|
|
|
222
220
|
onMouseLeave: this.handleMouseLeave,
|
|
223
221
|
role: "menuitem",
|
|
224
222
|
tabIndex: 0,
|
|
225
|
-
"data-testid": dataTestId
|
|
226
|
-
|
|
223
|
+
"data-testid": dataTestId,
|
|
224
|
+
children: menuItemElements
|
|
225
|
+
});
|
|
227
226
|
}
|
|
228
227
|
}
|
|
229
228
|
_defineProperty(Menu, "defaultProps", {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Menu.js","names":["React","PureComponent","ContextActionUtils","ContextMenuItem","Menu","constructor","props","handleKeyDown","bind","handleMenuItemClick","handleMenuItemMouseMove","handleMouseLeave","handleCloseMenu","container","createRef","oldFocus","document","activeElement","rAF","options","keyboardIndex","initialKeyboardIndex","state","menuItems","mouseIndex","componentDidMount","initMenu","window","requestAnimationFrame","current","focus","onMenuOpened","componentDidUpdate","prevProps","actions","componentWillUnmount","cancelAnimationFrame","getKeyboardIndex","separateKeyboardMouse","undefined","getMouseIndex","setKeyboardIndex","index","setState","setMouseIndex","getMenuItems","length","sortActions","concat","e","newFocus","key","shiftKey","getNextMenuItem","closeMenu","HTMLElement","preventDefault","stopPropagation","closeAll","onMenuClosed","menuItem","disabled","action","focusIndex","indexOf","render","menuItemElements","dataTestId","i","group","push","menuItemElement","menuStyle"],"sources":["../../src/menu-actions/Menu.tsx"],"sourcesContent":["import React, { PureComponent } from 'react';\nimport ContextActionUtils, {\n ContextAction,\n} from '../context-actions/ContextActionUtils';\nimport ContextMenuItem from '../context-actions/ContextMenuItem';\n\nexport type MenuOptions = {\n doNotVerifyPosition?: boolean;\n separateKeyboardMouse?: boolean;\n initialKeyboardIndex?: number;\n};\n\ntype MenuProps = {\n actions: (() => ContextAction[]) | ContextAction | ContextAction[];\n closeMenu(closeAll: boolean): void;\n onMenuClosed(menu: Menu): void;\n onMenuOpened(menu: Menu): void;\n options: MenuOptions;\n menuStyle: React.CSSProperties;\n 'data-testid'?: string;\n};\n\ntype MenuState = {\n menuItems: ContextAction[];\n keyboardIndex: number;\n mouseIndex: number;\n};\n\n/**\n * Do not use this class directly. Use DropdownMenu instead.\n *\n * Generates list from actions for use by DropdownMenu.\n * It has beem split from the context-actions component, due to divergering requirements,\n * but still re-uses styling from context-menu. Depending on how usage evolves, may get split further.\n *\n */\n\nclass Menu extends PureComponent<MenuProps, MenuState> {\n static defaultProps = {\n closeMenu(): void {\n // no-op\n },\n onMenuOpened(): void {\n // no-op\n },\n onMenuClosed(): void {\n // no-op\n },\n options: {},\n menuStyle: {},\n 'data-testid': undefined,\n };\n\n constructor(props: MenuProps) {\n super(props);\n\n this.handleKeyDown = this.handleKeyDown.bind(this);\n this.handleMenuItemClick = this.handleMenuItemClick.bind(this);\n this.handleMenuItemMouseMove = this.handleMenuItemMouseMove.bind(this);\n this.handleMouseLeave = this.handleMouseLeave.bind(this);\n this.handleCloseMenu = this.handleCloseMenu.bind(this);\n\n this.container = React.createRef();\n this.oldFocus = document.activeElement;\n this.rAF = 0;\n\n const { options } = props;\n const keyboardIndex = options.initialKeyboardIndex ?? -1;\n this.state = {\n menuItems: [],\n keyboardIndex,\n mouseIndex: -1,\n };\n }\n\n componentDidMount(): void {\n this.initMenu();\n\n this.rAF = window.requestAnimationFrame(() => {\n // set initial focus to container so keyboard navigation works\n // components can still override focus in onMenuOpened callback\n this.container.current?.focus();\n const { onMenuOpened } = this.props;\n onMenuOpened(this);\n });\n }\n\n componentDidUpdate(prevProps: MenuProps): void {\n const { actions } = this.props;\n if (prevProps.actions !== actions) {\n this.initMenu();\n }\n }\n\n componentWillUnmount(): void {\n cancelAnimationFrame(this.rAF);\n }\n\n container: React.RefObject<HTMLDivElement>;\n\n oldFocus: Element | null;\n\n rAF: number;\n\n getKeyboardIndex(): number | null {\n const { options } = this.props;\n if (\n options.separateKeyboardMouse !== undefined &&\n options.separateKeyboardMouse\n ) {\n const { keyboardIndex } = this.state;\n return keyboardIndex;\n }\n\n return this.getMouseIndex();\n }\n\n setKeyboardIndex(index: number): void {\n const { options } = this.props;\n if (\n options.separateKeyboardMouse !== undefined &&\n options.separateKeyboardMouse\n ) {\n this.setState({ keyboardIndex: index });\n } else {\n this.setMouseIndex(index);\n }\n }\n\n getMouseIndex(): number {\n const { mouseIndex } = this.state;\n return mouseIndex;\n }\n\n setMouseIndex(index: number): void {\n this.setState({ mouseIndex: index });\n }\n\n initMenu(): void {\n // cancel any pending close\n cancelAnimationFrame(this.rAF);\n\n this.setState({\n menuItems: [],\n });\n\n const { actions } = this.props;\n const menuItems = ContextActionUtils.getMenuItems(actions, false);\n\n if (menuItems.length > 0) {\n this.setState(state => ({\n menuItems: ContextActionUtils.sortActions(\n state.menuItems.concat(menuItems)\n ),\n }));\n }\n }\n\n handleKeyDown(e: React.KeyboardEvent): void {\n const { menuItems } = this.state;\n const oldFocus = this.getKeyboardIndex();\n let newFocus = oldFocus;\n\n if (e.key === 'Enter' || e.key === ' ') {\n if (oldFocus != null && oldFocus >= 0 && oldFocus < menuItems.length) {\n this.handleMenuItemClick(menuItems[oldFocus], e);\n }\n return;\n }\n\n if (e.key === 'Escape') {\n newFocus = null;\n } else if (\n e.key === 'ArrowUp' ||\n (e.key === 'Tab' && e.shiftKey === true)\n ) {\n newFocus = ContextActionUtils.getNextMenuItem(\n newFocus ?? 0,\n -1,\n menuItems\n );\n } else if (\n e.key === 'ArrowDown' ||\n (e.key === 'Tab' && e.shiftKey === false)\n ) {\n newFocus = ContextActionUtils.getNextMenuItem(\n newFocus ?? 0,\n 1,\n menuItems\n );\n }\n\n if (oldFocus !== newFocus) {\n if (newFocus !== null) {\n this.setKeyboardIndex(newFocus);\n } else {\n this.closeMenu();\n if (this.oldFocus instanceof HTMLElement) {\n this.oldFocus.focus();\n }\n }\n\n e.preventDefault();\n e.stopPropagation();\n }\n }\n\n closeMenu(closeAll = false): void {\n const { closeMenu, onMenuClosed } = this.props;\n cancelAnimationFrame(this.rAF);\n this.rAF = window.requestAnimationFrame(() => {\n closeMenu(closeAll);\n onMenuClosed(this);\n });\n }\n\n handleCloseMenu(): void {\n this.closeMenu();\n }\n\n handleMenuItemClick(menuItem: ContextAction, e: React.SyntheticEvent): void {\n e.preventDefault();\n e.stopPropagation();\n\n if (\n menuItem != null &&\n (menuItem.disabled === undefined || !menuItem.disabled) &&\n menuItem.action != null\n ) {\n menuItem.action();\n this.closeMenu(true);\n }\n }\n\n handleMenuItemMouseMove(menuItem: ContextAction): void {\n const { menuItems } = this.state;\n const focusIndex = menuItems.indexOf(menuItem);\n this.setMouseIndex(focusIndex);\n }\n\n handleMouseLeave(): void {\n this.setMouseIndex(-1);\n }\n\n render(): JSX.Element {\n const menuItemElements = [];\n const { 'data-testid': dataTestId } = this.props;\n const { keyboardIndex, menuItems, mouseIndex } = this.state;\n for (let i = 0; i < menuItems.length; i += 1) {\n const menuItem = menuItems[i];\n\n if (i > 0 && menuItem.group !== menuItems[i - 1].group) {\n menuItemElements.push(<hr key={`${i}.separator`} />);\n }\n\n const menuItemElement = (\n <ContextMenuItem\n key={i}\n isKeyboardSelected={keyboardIndex === i}\n isMouseSelected={mouseIndex === i}\n menuItem={menuItem}\n closeMenu={this.handleCloseMenu}\n onMenuItemClick={this.handleMenuItemClick}\n onMenuItemMouseMove={this.handleMenuItemMouseMove}\n onMenuItemContextMenu={() => false}\n />\n );\n\n menuItemElements.push(menuItemElement);\n }\n\n const { menuStyle } = this.props;\n\n return (\n <div\n className=\"context-menu-container\"\n style={{ ...menuStyle }}\n ref={this.container}\n onKeyDown={this.handleKeyDown}\n onMouseLeave={this.handleMouseLeave}\n role=\"menuitem\"\n tabIndex={0}\n data-testid={dataTestId}\n >\n {menuItemElements}\n </div>\n );\n }\n}\n\nexport default Menu;\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Menu.js","names":["React","PureComponent","ContextActionUtils","ContextMenuItem","Menu","constructor","props","handleKeyDown","bind","handleMenuItemClick","handleMenuItemMouseMove","handleMouseLeave","handleCloseMenu","container","createRef","oldFocus","document","activeElement","rAF","options","keyboardIndex","initialKeyboardIndex","state","menuItems","mouseIndex","componentDidMount","initMenu","window","requestAnimationFrame","current","focus","onMenuOpened","componentDidUpdate","prevProps","actions","componentWillUnmount","cancelAnimationFrame","getKeyboardIndex","separateKeyboardMouse","undefined","getMouseIndex","setKeyboardIndex","index","setState","setMouseIndex","getMenuItems","length","sortActions","concat","e","newFocus","key","shiftKey","getNextMenuItem","closeMenu","HTMLElement","preventDefault","stopPropagation","closeAll","onMenuClosed","menuItem","disabled","action","focusIndex","indexOf","render","menuItemElements","dataTestId","i","group","push","menuItemElement","menuStyle"],"sources":["../../src/menu-actions/Menu.tsx"],"sourcesContent":["import React, { PureComponent } from 'react';\nimport ContextActionUtils, {\n ContextAction,\n} from '../context-actions/ContextActionUtils';\nimport ContextMenuItem from '../context-actions/ContextMenuItem';\n\nexport type MenuOptions = {\n doNotVerifyPosition?: boolean;\n separateKeyboardMouse?: boolean;\n initialKeyboardIndex?: number;\n};\n\ntype MenuProps = {\n actions: (() => ContextAction[]) | ContextAction | ContextAction[];\n closeMenu(closeAll: boolean): void;\n onMenuClosed(menu: Menu): void;\n onMenuOpened(menu: Menu): void;\n options: MenuOptions;\n menuStyle: React.CSSProperties;\n 'data-testid'?: string;\n};\n\ntype MenuState = {\n menuItems: ContextAction[];\n keyboardIndex: number;\n mouseIndex: number;\n};\n\n/**\n * Do not use this class directly. Use DropdownMenu instead.\n *\n * Generates list from actions for use by DropdownMenu.\n * It has beem split from the context-actions component, due to divergering requirements,\n * but still re-uses styling from context-menu. Depending on how usage evolves, may get split further.\n *\n */\n\nclass Menu extends PureComponent<MenuProps, MenuState> {\n static defaultProps = {\n closeMenu(): void {\n // no-op\n },\n onMenuOpened(): void {\n // no-op\n },\n onMenuClosed(): void {\n // no-op\n },\n options: {},\n menuStyle: {},\n 'data-testid': undefined,\n };\n\n constructor(props: MenuProps) {\n super(props);\n\n this.handleKeyDown = this.handleKeyDown.bind(this);\n this.handleMenuItemClick = this.handleMenuItemClick.bind(this);\n this.handleMenuItemMouseMove = this.handleMenuItemMouseMove.bind(this);\n this.handleMouseLeave = this.handleMouseLeave.bind(this);\n this.handleCloseMenu = this.handleCloseMenu.bind(this);\n\n this.container = React.createRef();\n this.oldFocus = document.activeElement;\n this.rAF = 0;\n\n const { options } = props;\n const keyboardIndex = options.initialKeyboardIndex ?? -1;\n this.state = {\n menuItems: [],\n keyboardIndex,\n mouseIndex: -1,\n };\n }\n\n componentDidMount(): void {\n this.initMenu();\n\n this.rAF = window.requestAnimationFrame(() => {\n // set initial focus to container so keyboard navigation works\n // components can still override focus in onMenuOpened callback\n this.container.current?.focus();\n const { onMenuOpened } = this.props;\n onMenuOpened(this);\n });\n }\n\n componentDidUpdate(prevProps: MenuProps): void {\n const { actions } = this.props;\n if (prevProps.actions !== actions) {\n this.initMenu();\n }\n }\n\n componentWillUnmount(): void {\n cancelAnimationFrame(this.rAF);\n }\n\n container: React.RefObject<HTMLDivElement>;\n\n oldFocus: Element | null;\n\n rAF: number;\n\n getKeyboardIndex(): number | null {\n const { options } = this.props;\n if (\n options.separateKeyboardMouse !== undefined &&\n options.separateKeyboardMouse\n ) {\n const { keyboardIndex } = this.state;\n return keyboardIndex;\n }\n\n return this.getMouseIndex();\n }\n\n setKeyboardIndex(index: number): void {\n const { options } = this.props;\n if (\n options.separateKeyboardMouse !== undefined &&\n options.separateKeyboardMouse\n ) {\n this.setState({ keyboardIndex: index });\n } else {\n this.setMouseIndex(index);\n }\n }\n\n getMouseIndex(): number {\n const { mouseIndex } = this.state;\n return mouseIndex;\n }\n\n setMouseIndex(index: number): void {\n this.setState({ mouseIndex: index });\n }\n\n initMenu(): void {\n // cancel any pending close\n cancelAnimationFrame(this.rAF);\n\n this.setState({\n menuItems: [],\n });\n\n const { actions } = this.props;\n const menuItems = ContextActionUtils.getMenuItems(actions, false);\n\n if (menuItems.length > 0) {\n this.setState(state => ({\n menuItems: ContextActionUtils.sortActions(\n state.menuItems.concat(menuItems)\n ),\n }));\n }\n }\n\n handleKeyDown(e: React.KeyboardEvent): void {\n const { menuItems } = this.state;\n const oldFocus = this.getKeyboardIndex();\n let newFocus = oldFocus;\n\n if (e.key === 'Enter' || e.key === ' ') {\n if (oldFocus != null && oldFocus >= 0 && oldFocus < menuItems.length) {\n this.handleMenuItemClick(menuItems[oldFocus], e);\n }\n return;\n }\n\n if (e.key === 'Escape') {\n newFocus = null;\n } else if (\n e.key === 'ArrowUp' ||\n (e.key === 'Tab' && e.shiftKey === true)\n ) {\n newFocus = ContextActionUtils.getNextMenuItem(\n newFocus ?? 0,\n -1,\n menuItems\n );\n } else if (\n e.key === 'ArrowDown' ||\n (e.key === 'Tab' && e.shiftKey === false)\n ) {\n newFocus = ContextActionUtils.getNextMenuItem(\n newFocus ?? 0,\n 1,\n menuItems\n );\n }\n\n if (oldFocus !== newFocus) {\n if (newFocus !== null) {\n this.setKeyboardIndex(newFocus);\n } else {\n this.closeMenu();\n if (this.oldFocus instanceof HTMLElement) {\n this.oldFocus.focus();\n }\n }\n\n e.preventDefault();\n e.stopPropagation();\n }\n }\n\n closeMenu(closeAll = false): void {\n const { closeMenu, onMenuClosed } = this.props;\n cancelAnimationFrame(this.rAF);\n this.rAF = window.requestAnimationFrame(() => {\n closeMenu(closeAll);\n onMenuClosed(this);\n });\n }\n\n handleCloseMenu(): void {\n this.closeMenu();\n }\n\n handleMenuItemClick(menuItem: ContextAction, e: React.SyntheticEvent): void {\n e.preventDefault();\n e.stopPropagation();\n\n if (\n menuItem != null &&\n (menuItem.disabled === undefined || !menuItem.disabled) &&\n menuItem.action != null\n ) {\n menuItem.action();\n this.closeMenu(true);\n }\n }\n\n handleMenuItemMouseMove(menuItem: ContextAction): void {\n const { menuItems } = this.state;\n const focusIndex = menuItems.indexOf(menuItem);\n this.setMouseIndex(focusIndex);\n }\n\n handleMouseLeave(): void {\n this.setMouseIndex(-1);\n }\n\n render(): JSX.Element {\n const menuItemElements = [];\n const { 'data-testid': dataTestId } = this.props;\n const { keyboardIndex, menuItems, mouseIndex } = this.state;\n for (let i = 0; i < menuItems.length; i += 1) {\n const menuItem = menuItems[i];\n\n if (i > 0 && menuItem.group !== menuItems[i - 1].group) {\n menuItemElements.push(<hr key={`${i}.separator`} />);\n }\n\n const menuItemElement = (\n <ContextMenuItem\n key={i}\n isKeyboardSelected={keyboardIndex === i}\n isMouseSelected={mouseIndex === i}\n menuItem={menuItem}\n closeMenu={this.handleCloseMenu}\n onMenuItemClick={this.handleMenuItemClick}\n onMenuItemMouseMove={this.handleMenuItemMouseMove}\n onMenuItemContextMenu={() => false}\n />\n );\n\n menuItemElements.push(menuItemElement);\n }\n\n const { menuStyle } = this.props;\n\n return (\n <div\n className=\"context-menu-container\"\n style={{ ...menuStyle }}\n ref={this.container}\n onKeyDown={this.handleKeyDown}\n onMouseLeave={this.handleMouseLeave}\n role=\"menuitem\"\n tabIndex={0}\n data-testid={dataTestId}\n >\n {menuItemElements}\n </div>\n );\n }\n}\n\nexport default Menu;\n"],"mappings":"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"}
|
|
@@ -1,5 +1,8 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { useDebouncedValue } from '@deephaven/react-hooks';
|
|
3
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
4
|
+
import { Fragment as _Fragment } from "react/jsx-runtime";
|
|
5
|
+
import { jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
6
|
/**
|
|
4
7
|
* Display a modal after a debounce time. Blocks the screen from interaction immediately,
|
|
5
8
|
* but then waits the set debounce time before rendering the modal.
|
|
@@ -12,15 +15,17 @@ function DebouncedModal(_ref) {
|
|
|
12
15
|
isOpen = false
|
|
13
16
|
} = _ref;
|
|
14
17
|
var debouncedIsOpen = useDebouncedValue(isOpen, debounceMs);
|
|
15
|
-
return /*#__PURE__*/
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
18
|
+
return /*#__PURE__*/_jsxs(_Fragment, {
|
|
19
|
+
children: [blockInteraction && isOpen && /*#__PURE__*/_jsx("div", {
|
|
20
|
+
className: "modal-backdrop",
|
|
21
|
+
style: {
|
|
22
|
+
backgroundColor: 'transparent'
|
|
23
|
+
},
|
|
24
|
+
"data-testid": "debounced-modal-backdrop"
|
|
25
|
+
}), /*#__PURE__*/React.cloneElement(children, {
|
|
26
|
+
isOpen: isOpen && debouncedIsOpen
|
|
27
|
+
})]
|
|
28
|
+
});
|
|
24
29
|
}
|
|
25
30
|
export default DebouncedModal;
|
|
26
31
|
//# sourceMappingURL=DebouncedModal.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DebouncedModal.js","names":["React","useDebouncedValue","DebouncedModal","blockInteraction","children","debounceMs","isOpen","debouncedIsOpen","backgroundColor","cloneElement"],"sources":["../../src/modal/DebouncedModal.tsx"],"sourcesContent":["import React from 'react';\nimport { useDebouncedValue } from '@deephaven/react-hooks';\n\nexport type DebouncedModalProps = {\n /** Whether to block interaction immediately */\n blockInteraction?: boolean;\n\n /** Children to render after the alloted debounce time */\n children: React.ReactElement;\n\n /** Time to debounce */\n debounceMs: number;\n\n /**\n * Will render the `children` `debounceMs` after `isOpen` is set to `true.\n * Will stop rendering immediately after `isOpen` is set to `false`.\n */\n isOpen?: boolean;\n};\n\n/**\n * Display a modal after a debounce time. Blocks the screen from interaction immediately,\n * but then waits the set debounce time before rendering the modal.\n */\nfunction DebouncedModal({\n blockInteraction = true,\n children,\n debounceMs,\n isOpen = false,\n}: DebouncedModalProps) {\n const debouncedIsOpen = useDebouncedValue(isOpen, debounceMs);\n\n return (\n <>\n {blockInteraction && isOpen && (\n <div\n className=\"modal-backdrop\"\n style={{ backgroundColor: 'transparent' }}\n data-testid=\"debounced-modal-backdrop\"\n />\n )}\n {React.cloneElement(children, { isOpen: isOpen && debouncedIsOpen })}\n </>\n );\n}\n\nexport default DebouncedModal;\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,iBAAiB,QAAQ,wBAAwB;
|
|
1
|
+
{"version":3,"file":"DebouncedModal.js","names":["React","useDebouncedValue","DebouncedModal","blockInteraction","children","debounceMs","isOpen","debouncedIsOpen","backgroundColor","cloneElement"],"sources":["../../src/modal/DebouncedModal.tsx"],"sourcesContent":["import React from 'react';\nimport { useDebouncedValue } from '@deephaven/react-hooks';\n\nexport type DebouncedModalProps = {\n /** Whether to block interaction immediately */\n blockInteraction?: boolean;\n\n /** Children to render after the alloted debounce time */\n children: React.ReactElement;\n\n /** Time to debounce */\n debounceMs: number;\n\n /**\n * Will render the `children` `debounceMs` after `isOpen` is set to `true.\n * Will stop rendering immediately after `isOpen` is set to `false`.\n */\n isOpen?: boolean;\n};\n\n/**\n * Display a modal after a debounce time. Blocks the screen from interaction immediately,\n * but then waits the set debounce time before rendering the modal.\n */\nfunction DebouncedModal({\n blockInteraction = true,\n children,\n debounceMs,\n isOpen = false,\n}: DebouncedModalProps) {\n const debouncedIsOpen = useDebouncedValue(isOpen, debounceMs);\n\n return (\n <>\n {blockInteraction && isOpen && (\n <div\n className=\"modal-backdrop\"\n style={{ backgroundColor: 'transparent' }}\n data-testid=\"debounced-modal-backdrop\"\n />\n )}\n {React.cloneElement(children, { isOpen: isOpen && debouncedIsOpen })}\n </>\n );\n}\n\nexport default DebouncedModal;\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,iBAAiB,QAAQ,wBAAwB;AAAC;AAAA;AAAA;AAmB3D;AACA;AACA;AACA;AACA,SAASC,cAAc,OAKC;EAAA,IALA;IACtBC,gBAAgB,GAAG,IAAI;IACvBC,QAAQ;IACRC,UAAU;IACVC,MAAM,GAAG;EACU,CAAC;EACpB,IAAMC,eAAe,GAAGN,iBAAiB,CAACK,MAAM,EAAED,UAAU,CAAC;EAE7D,oBACE;IAAA,WACGF,gBAAgB,IAAIG,MAAM,iBACzB;MACE,SAAS,EAAC,gBAAgB;MAC1B,KAAK,EAAE;QAAEE,eAAe,EAAE;MAAc,CAAE;MAC1C,eAAY;IAA0B,EAEzC,eACAR,KAAK,CAACS,YAAY,CAACL,QAAQ,EAAE;MAAEE,MAAM,EAAEA,MAAM,IAAIC;IAAgB,CAAC,CAAC;EAAA,EACnE;AAEP;AAEA,eAAeL,cAAc"}
|
package/dist/modal/InfoModal.js
CHANGED
|
@@ -3,6 +3,8 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
|
|
|
3
3
|
import Modal from "./Modal.js";
|
|
4
4
|
import ModalBody from "./ModalBody.js";
|
|
5
5
|
import "./InfoModal.css";
|
|
6
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
7
|
+
import { jsxs as _jsxs } from "react/jsx-runtime";
|
|
6
8
|
/**
|
|
7
9
|
* A modal that displays a message with an icon. Can be used for informational messages, warnings, or errors.
|
|
8
10
|
* Does not have any buttons and cannot be dismissed.
|
|
@@ -15,20 +17,27 @@ function InfoModal(_ref) {
|
|
|
15
17
|
subtitle,
|
|
16
18
|
title
|
|
17
19
|
} = _ref;
|
|
18
|
-
return /*#__PURE__*/
|
|
20
|
+
return /*#__PURE__*/_jsx(Modal, {
|
|
19
21
|
isOpen: isOpen,
|
|
20
|
-
className: className
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
22
|
+
className: className,
|
|
23
|
+
children: /*#__PURE__*/_jsx(ModalBody, {
|
|
24
|
+
children: /*#__PURE__*/_jsxs("div", {
|
|
25
|
+
className: "info-modal",
|
|
26
|
+
children: [icon != null && /*#__PURE__*/_jsx("div", {
|
|
27
|
+
className: "message-icon",
|
|
28
|
+
children: /*#__PURE__*/_jsx(FontAwesomeIcon, {
|
|
29
|
+
icon: icon
|
|
30
|
+
})
|
|
31
|
+
}), /*#__PURE__*/_jsx("div", {
|
|
32
|
+
className: "message-header",
|
|
33
|
+
children: title
|
|
34
|
+
}), subtitle != null && /*#__PURE__*/_jsx("div", {
|
|
35
|
+
className: "message-content",
|
|
36
|
+
children: subtitle
|
|
37
|
+
})]
|
|
38
|
+
})
|
|
39
|
+
})
|
|
40
|
+
});
|
|
32
41
|
}
|
|
33
42
|
export default InfoModal;
|
|
34
43
|
//# sourceMappingURL=InfoModal.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"InfoModal.js","names":["React","FontAwesomeIcon","Modal","ModalBody","InfoModal","className","icon","isOpen","subtitle","title"],"sources":["../../src/modal/InfoModal.tsx"],"sourcesContent":["import React from 'react';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport { IconProp } from '@fortawesome/fontawesome-svg-core';\nimport Modal from './Modal';\nimport ModalBody from './ModalBody';\nimport './InfoModal.scss';\n\ntype InfoModalProps = {\n /** Class name to give the info modal */\n className?: string;\n\n /** Icon to display in the modal */\n icon?: IconProp;\n\n /** Title to display in the modal */\n title: React.ReactNode;\n\n /** Subtitle/detail to display in the modal */\n subtitle?: React.ReactNode;\n\n /** Whether the modal is open/visible or not. */\n isOpen?: boolean;\n};\n\n/**\n * A modal that displays a message with an icon. Can be used for informational messages, warnings, or errors.\n * Does not have any buttons and cannot be dismissed.\n */\nfunction InfoModal({\n className,\n icon,\n isOpen = false,\n subtitle,\n title,\n}: InfoModalProps): JSX.Element {\n return (\n <Modal isOpen={isOpen} className={className}>\n <ModalBody>\n <div className=\"info-modal\">\n {icon != null && (\n <div className=\"message-icon\">\n <FontAwesomeIcon icon={icon} />\n </div>\n )}\n <div className=\"message-header\">{title}</div>\n {subtitle != null && (\n <div className=\"message-content\">{subtitle}</div>\n )}\n </div>\n </ModalBody>\n </Modal>\n );\n}\n\nexport default InfoModal;\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,eAAe,QAAQ,gCAAgC;AAAC,OAE1DC,KAAK;AAAA,OACLC,SAAS;AAAA;AAoBhB;AACA;AACA;AACA;AACA,SAASC,SAAS,OAMc;EAAA,IANb;IACjBC,SAAS;IACTC,IAAI;IACJC,MAAM,GAAG,KAAK;IACdC,QAAQ;IACRC;EACc,CAAC;EACf,oBACE,
|
|
1
|
+
{"version":3,"file":"InfoModal.js","names":["React","FontAwesomeIcon","Modal","ModalBody","InfoModal","className","icon","isOpen","subtitle","title"],"sources":["../../src/modal/InfoModal.tsx"],"sourcesContent":["import React from 'react';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport { IconProp } from '@fortawesome/fontawesome-svg-core';\nimport Modal from './Modal';\nimport ModalBody from './ModalBody';\nimport './InfoModal.scss';\n\ntype InfoModalProps = {\n /** Class name to give the info modal */\n className?: string;\n\n /** Icon to display in the modal */\n icon?: IconProp;\n\n /** Title to display in the modal */\n title: React.ReactNode;\n\n /** Subtitle/detail to display in the modal */\n subtitle?: React.ReactNode;\n\n /** Whether the modal is open/visible or not. */\n isOpen?: boolean;\n};\n\n/**\n * A modal that displays a message with an icon. Can be used for informational messages, warnings, or errors.\n * Does not have any buttons and cannot be dismissed.\n */\nfunction InfoModal({\n className,\n icon,\n isOpen = false,\n subtitle,\n title,\n}: InfoModalProps): JSX.Element {\n return (\n <Modal isOpen={isOpen} className={className}>\n <ModalBody>\n <div className=\"info-modal\">\n {icon != null && (\n <div className=\"message-icon\">\n <FontAwesomeIcon icon={icon} />\n </div>\n )}\n <div className=\"message-header\">{title}</div>\n {subtitle != null && (\n <div className=\"message-content\">{subtitle}</div>\n )}\n </div>\n </ModalBody>\n </Modal>\n );\n}\n\nexport default InfoModal;\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,eAAe,QAAQ,gCAAgC;AAAC,OAE1DC,KAAK;AAAA,OACLC,SAAS;AAAA;AAAA;AAAA;AAoBhB;AACA;AACA;AACA;AACA,SAASC,SAAS,OAMc;EAAA,IANb;IACjBC,SAAS;IACTC,IAAI;IACJC,MAAM,GAAG,KAAK;IACdC,QAAQ;IACRC;EACc,CAAC;EACf,oBACE,KAAC,KAAK;IAAC,MAAM,EAAEF,MAAO;IAAC,SAAS,EAAEF,SAAU;IAAA,uBAC1C,KAAC,SAAS;MAAA,uBACR;QAAK,SAAS,EAAC,YAAY;QAAA,WACxBC,IAAI,IAAI,IAAI,iBACX;UAAK,SAAS,EAAC,cAAc;UAAA,uBAC3B,KAAC,eAAe;YAAC,IAAI,EAAEA;UAAK;QAAG,EAElC,eACD;UAAK,SAAS,EAAC,gBAAgB;UAAA,UAAEG;QAAK,EAAO,EAC5CD,QAAQ,IAAI,IAAI,iBACf;UAAK,SAAS,EAAC,iBAAiB;UAAA,UAAEA;QAAQ,EAC3C;MAAA;IACG;EACI,EACN;AAEZ;AAEA,eAAeJ,SAAS"}
|
package/dist/modal/Modal.js
CHANGED
|
@@ -3,6 +3,9 @@ import React, { useCallback, useEffect, useRef, useState } from 'react';
|
|
|
3
3
|
import ReactDOM from 'react-dom';
|
|
4
4
|
import { CSSTransition } from 'react-transition-group';
|
|
5
5
|
import ThemeExport from "../ThemeExport.js";
|
|
6
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
7
|
+
import { Fragment as _Fragment } from "react/jsx-runtime";
|
|
8
|
+
import { jsxs as _jsxs } from "react/jsx-runtime";
|
|
6
9
|
function Modal(_ref) {
|
|
7
10
|
var {
|
|
8
11
|
className = 'theme-bg-light',
|
|
@@ -57,66 +60,73 @@ function Modal(_ref) {
|
|
|
57
60
|
element.current = undefined;
|
|
58
61
|
}
|
|
59
62
|
};
|
|
60
|
-
return element.current ? /*#__PURE__*/ReactDOM.createPortal( /*#__PURE__*/
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
63
|
+
return element.current ? /*#__PURE__*/ReactDOM.createPortal( /*#__PURE__*/_jsxs(_Fragment, {
|
|
64
|
+
children: [/*#__PURE__*/_jsx(CSSTransition, {
|
|
65
|
+
appear: true,
|
|
66
|
+
mountOnEnter: true,
|
|
67
|
+
unmountOnExit: true,
|
|
68
|
+
in: isOpen,
|
|
69
|
+
classNames: {
|
|
70
|
+
appearActive: 'show',
|
|
71
|
+
appearDone: 'show'
|
|
72
|
+
},
|
|
73
|
+
timeout: ThemeExport.transitionMs,
|
|
74
|
+
onExited: onExited,
|
|
75
|
+
children: /*#__PURE__*/_jsx("div", {
|
|
76
|
+
className: classNames('modal-backdrop fade'),
|
|
77
|
+
style: {
|
|
78
|
+
zIndex: 1050
|
|
79
|
+
}
|
|
80
|
+
})
|
|
81
|
+
}), /*#__PURE__*/_jsx(CSSTransition, {
|
|
82
|
+
appear: true,
|
|
83
|
+
mountOnEnter: true,
|
|
84
|
+
unmountOnExit: true,
|
|
85
|
+
in: isOpen,
|
|
86
|
+
classNames: {
|
|
87
|
+
appearDone: 'show'
|
|
88
|
+
},
|
|
89
|
+
timeout: ThemeExport.transitionMs,
|
|
90
|
+
onExited: onExited,
|
|
91
|
+
children: /*#__PURE__*/_jsx("div", {
|
|
92
|
+
ref: background,
|
|
93
|
+
className: "modal fade",
|
|
94
|
+
onMouseDown: e => {
|
|
95
|
+
if (e.target === background.current) {
|
|
96
|
+
setBackgroundClicked(true);
|
|
97
|
+
} else {
|
|
98
|
+
setBackgroundClicked(false);
|
|
99
|
+
}
|
|
100
|
+
},
|
|
101
|
+
onMouseUp: e => {
|
|
102
|
+
if (backgroundClicked && e.target === background.current && toggle !== undefined) {
|
|
103
|
+
toggle();
|
|
104
|
+
}
|
|
105
|
+
},
|
|
106
|
+
role: "dialog",
|
|
107
|
+
style: {
|
|
108
|
+
display: 'block'
|
|
109
|
+
},
|
|
110
|
+
children: /*#__PURE__*/_jsx("div", {
|
|
111
|
+
className: classNames("modal-dialog ".concat(className), {
|
|
112
|
+
'modal-lg': size === 'lg',
|
|
113
|
+
'modal-sm': size === 'sm',
|
|
114
|
+
'modal-xl': size === 'xl',
|
|
115
|
+
'modal-dialog-centered': centered
|
|
116
|
+
}),
|
|
117
|
+
style: {
|
|
118
|
+
zIndex: 1040
|
|
119
|
+
},
|
|
120
|
+
children: /*#__PURE__*/_jsx("div", {
|
|
121
|
+
className: "modal-content",
|
|
122
|
+
role: "presentation",
|
|
123
|
+
"data-testid": dataTestId,
|
|
124
|
+
children: children
|
|
125
|
+
})
|
|
126
|
+
})
|
|
127
|
+
})
|
|
128
|
+
})]
|
|
129
|
+
}), element.current) : null;
|
|
120
130
|
}
|
|
121
131
|
export default Modal;
|
|
122
132
|
//# sourceMappingURL=Modal.js.map
|