@deephaven/components 0.23.1-beta.2 → 0.23.1-beta.4
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/modal/Modal.d.ts.map +1 -1
- package/dist/modal/Modal.js +16 -3
- package/dist/modal/Modal.js.map +1 -1
- package/package.json +8 -8
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Modal.d.ts","sourceRoot":"","sources":["../../src/modal/Modal.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,
|
|
1
|
+
{"version":3,"file":"Modal.d.ts","sourceRoot":"","sources":["../../src/modal/Modal.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EACZ,SAAS,EAKV,MAAM,OAAO,CAAC;AAKf,UAAU,UAAU;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,SAAS,CAAC;IACtC,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,iBAAS,KAAK,CAAC,EACb,SAA4B,EAC5B,QAAQ,EACR,IAAa,EACb,QAAe,EACf,MAAc,EACd,QAAgB,EAChB,IAAI,EACJ,QAAQ,EACR,QAAQ,EACR,MAAM,EACN,aAAa,EAAE,UAAU,GAC1B,EAAE,UAAU,GAAG,KAAK,CAAC,YAAY,GAAG,IAAI,CA2IxC;AAED,eAAe,KAAK,CAAC"}
|
package/dist/modal/Modal.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import classNames from 'classnames';
|
|
2
|
-
import React, { useCallback, useEffect, useRef } from 'react';
|
|
2
|
+
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";
|
|
@@ -18,6 +18,8 @@ function Modal(_ref) {
|
|
|
18
18
|
'data-testid': dataTestId
|
|
19
19
|
} = _ref;
|
|
20
20
|
var element = useRef();
|
|
21
|
+
var background = useRef(null);
|
|
22
|
+
var [backgroundClicked, setBackgroundClicked] = useState(false);
|
|
21
23
|
var handleKeyDown = useCallback(event => {
|
|
22
24
|
switch (event.key) {
|
|
23
25
|
case 'Escape':
|
|
@@ -82,8 +84,20 @@ function Modal(_ref) {
|
|
|
82
84
|
timeout: ThemeExport.transitionMs,
|
|
83
85
|
onExited: onExited
|
|
84
86
|
}, /*#__PURE__*/React.createElement("div", {
|
|
87
|
+
ref: background,
|
|
85
88
|
className: "modal fade",
|
|
86
|
-
|
|
89
|
+
onMouseDown: e => {
|
|
90
|
+
if (e.target === background.current) {
|
|
91
|
+
setBackgroundClicked(true);
|
|
92
|
+
} else {
|
|
93
|
+
setBackgroundClicked(false);
|
|
94
|
+
}
|
|
95
|
+
},
|
|
96
|
+
onMouseUp: e => {
|
|
97
|
+
if (backgroundClicked && e.target === background.current && toggle !== undefined) {
|
|
98
|
+
toggle();
|
|
99
|
+
}
|
|
100
|
+
},
|
|
87
101
|
role: "dialog",
|
|
88
102
|
style: {
|
|
89
103
|
display: 'block'
|
|
@@ -100,7 +114,6 @@ function Modal(_ref) {
|
|
|
100
114
|
}
|
|
101
115
|
}, /*#__PURE__*/React.createElement("div", {
|
|
102
116
|
className: "modal-content",
|
|
103
|
-
onClick: e => e.stopPropagation(),
|
|
104
117
|
role: "presentation",
|
|
105
118
|
"data-testid": dataTestId
|
|
106
119
|
}, children))))), element.current) : null;
|
package/dist/modal/Modal.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Modal.js","names":["classNames","React","useCallback","useEffect","useRef","ReactDOM","CSSTransition","ThemeExport","Modal","className","children","role","keyboard","isOpen","centered","size","onOpened","onClosed","toggle","dataTestId","element","handleKeyDown","event","key","addKeydownEventListener","window","addEventListener","removeEventListener","open","closed","current","document","createElement","setAttribute","body","appendChild","onExited","removeChild","undefined","createPortal","appearActive","appearDone","transitionMs","zIndex","
|
|
1
|
+
{"version":3,"file":"Modal.js","names":["classNames","React","useCallback","useEffect","useRef","useState","ReactDOM","CSSTransition","ThemeExport","Modal","className","children","role","keyboard","isOpen","centered","size","onOpened","onClosed","toggle","dataTestId","element","background","backgroundClicked","setBackgroundClicked","handleKeyDown","event","key","addKeydownEventListener","window","addEventListener","removeEventListener","open","closed","current","document","createElement","setAttribute","body","appendChild","onExited","removeChild","undefined","createPortal","appearActive","appearDone","transitionMs","zIndex","e","target","display"],"sources":["../../src/modal/Modal.tsx"],"sourcesContent":["import classNames from 'classnames';\nimport React, {\n ReactNode,\n useCallback,\n useEffect,\n useRef,\n useState,\n} from 'react';\nimport ReactDOM from 'react-dom';\nimport { CSSTransition } from 'react-transition-group';\nimport ThemeExport from '../ThemeExport';\n\ninterface ModalProps {\n className?: string;\n children?: ReactNode;\n role?: string;\n keyboard?: boolean;\n isOpen?: boolean;\n centered?: boolean;\n size?: 'sm' | 'lg' | 'xl' | undefined;\n onOpened?: () => void;\n onClosed?: () => void;\n toggle?: () => void;\n 'data-testid'?: string;\n}\n\nfunction Modal({\n className = 'theme-bg-light',\n children,\n role = 'role',\n keyboard = true,\n isOpen = false,\n centered = false,\n size,\n onOpened,\n onClosed,\n toggle,\n 'data-testid': dataTestId,\n}: ModalProps): React.ReactElement | null {\n const element = useRef<HTMLElement>();\n const background = useRef<HTMLDivElement>(null);\n const [backgroundClicked, setBackgroundClicked] = useState(false);\n\n const handleKeyDown = useCallback(\n (event: KeyboardEvent): void => {\n switch (event.key) {\n case 'Escape':\n toggle?.();\n break;\n default:\n break;\n }\n },\n [toggle]\n );\n\n useEffect(\n function addKeydownEventListener() {\n if (isOpen && keyboard) {\n window.addEventListener('keydown', handleKeyDown);\n return () => window.removeEventListener('keydown', handleKeyDown);\n }\n },\n [handleKeyDown, isOpen, keyboard]\n );\n\n useEffect(\n function open() {\n if (isOpen && onOpened) {\n onOpened();\n }\n },\n [onOpened, isOpen]\n );\n\n useEffect(\n function closed() {\n if (!isOpen && onClosed) {\n onClosed();\n }\n },\n [onClosed, isOpen]\n );\n\n if (isOpen && !element.current) {\n element.current = document.createElement('div');\n element.current.setAttribute(\n 'style',\n 'padding-right: 15px; display: block'\n );\n element.current.setAttribute('role', 'presentation');\n document.body.appendChild(element.current);\n }\n\n const onExited = () => {\n if (element.current) {\n document.body.removeChild(element.current);\n element.current = undefined;\n }\n };\n\n return element.current\n ? ReactDOM.createPortal(\n <>\n <CSSTransition\n appear\n mountOnEnter\n unmountOnExit\n in={isOpen}\n classNames={{\n appearActive: 'show',\n appearDone: 'show',\n }}\n timeout={ThemeExport.transitionMs}\n onExited={onExited}\n >\n <div\n className={classNames('modal-backdrop fade')}\n style={{ zIndex: 1050 }}\n />\n </CSSTransition>\n <CSSTransition\n appear\n mountOnEnter\n unmountOnExit\n in={isOpen}\n classNames={{\n appearDone: 'show',\n }}\n timeout={ThemeExport.transitionMs}\n onExited={onExited}\n >\n <div\n ref={background}\n className=\"modal fade\"\n onMouseDown={e => {\n if (e.target === background.current) {\n setBackgroundClicked(true);\n } else {\n setBackgroundClicked(false);\n }\n }}\n onMouseUp={e => {\n if (\n backgroundClicked &&\n e.target === background.current &&\n toggle !== undefined\n ) {\n toggle();\n }\n }}\n role=\"dialog\"\n style={{ display: 'block' }}\n >\n <div\n className={classNames(`modal-dialog ${className}`, {\n 'modal-lg': size === 'lg',\n 'modal-sm': size === 'sm',\n 'modal-xl': size === 'xl',\n 'modal-dialog-centered': centered,\n })}\n style={{ zIndex: 1040 }}\n >\n <div\n className=\"modal-content\"\n role=\"presentation\"\n data-testid={dataTestId}\n >\n {children}\n </div>\n </div>\n </div>\n </CSSTransition>\n </>,\n element.current\n )\n : null;\n}\n\nexport default Modal;\n"],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@deephaven/components",
|
|
3
|
-
"version": "0.23.1-beta.
|
|
3
|
+
"version": "0.23.1-beta.4+60d5be5",
|
|
4
4
|
"description": "Deephaven React component library",
|
|
5
5
|
"author": "Deephaven Data Labs LLC",
|
|
6
6
|
"license": "Apache-2.0",
|
|
@@ -23,10 +23,10 @@
|
|
|
23
23
|
"build:sass": "sass --embed-sources --load-path=../../node_modules ./src:./dist ./scss/BaseStyleSheet.scss:./css/BaseStyleSheet.css"
|
|
24
24
|
},
|
|
25
25
|
"dependencies": {
|
|
26
|
-
"@deephaven/icons": "^0.23.1-beta.
|
|
27
|
-
"@deephaven/log": "^0.23.1-beta.
|
|
28
|
-
"@deephaven/react-hooks": "^0.23.1-beta.
|
|
29
|
-
"@deephaven/utils": "^0.23.1-beta.
|
|
26
|
+
"@deephaven/icons": "^0.23.1-beta.4+60d5be5",
|
|
27
|
+
"@deephaven/log": "^0.23.1-beta.4+60d5be5",
|
|
28
|
+
"@deephaven/react-hooks": "^0.23.1-beta.4+60d5be5",
|
|
29
|
+
"@deephaven/utils": "^0.23.1-beta.4+60d5be5",
|
|
30
30
|
"@fortawesome/fontawesome-svg-core": "^6.1.1",
|
|
31
31
|
"@fortawesome/react-fontawesome": "^0.1.18",
|
|
32
32
|
"bootstrap": "4.6.2",
|
|
@@ -49,8 +49,8 @@
|
|
|
49
49
|
"react-dom": "^17.x"
|
|
50
50
|
},
|
|
51
51
|
"devDependencies": {
|
|
52
|
-
"@deephaven/mocks": "^0.23.1-beta.
|
|
53
|
-
"@deephaven/tsconfig": "^0.23.1-beta.
|
|
52
|
+
"@deephaven/mocks": "^0.23.1-beta.4+60d5be5",
|
|
53
|
+
"@deephaven/tsconfig": "^0.23.1-beta.4+60d5be5"
|
|
54
54
|
},
|
|
55
55
|
"files": [
|
|
56
56
|
"dist",
|
|
@@ -63,5 +63,5 @@
|
|
|
63
63
|
"publishConfig": {
|
|
64
64
|
"access": "public"
|
|
65
65
|
},
|
|
66
|
-
"gitHead": "
|
|
66
|
+
"gitHead": "60d5be5a9e9d90f11524dce85db28113a234e8a8"
|
|
67
67
|
}
|