Page MenuHomePhabricator
Files F3245877

D5363.diff
No OneTemporary
Actions

D5363.diff
View Options

diff --git a/web/modals/modal-overlay.css b/web/modals/modal-overlay.css
new file mode 100644
--- /dev/null
+++ b/web/modals/modal-overlay.css
@@ -0,0 +1,13 @@
+div.modalOverlay {
+ position: fixed;
+ left: 0;
+ top: 0;
+ height: 100%;
+ z-index: 4;
+ width: 100%;
+ background-color: rgba(0, 0, 0, 0.9);
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+}
diff --git a/web/modals/modal-overlay.react.js b/web/modals/modal-overlay.react.js
new file mode 100644
--- /dev/null
+++ b/web/modals/modal-overlay.react.js
@@ -0,0 +1,63 @@
+// @flow
+
+import * as React from 'react';
+
+import css from './modal-overlay.css';
+
+type ModalOverlayProps = {
+ +onClose: () => void,
+ +children?: React.Node,
+};
+
+function ModalOverlay(props: ModalOverlayProps): React.Node {
+ const { children, onClose } = props;
+
+ const overlayRef = React.useRef();
+ const firstClickRef = React.useRef(null);
+
+ const onBackgroundMouseDown = React.useCallback(event => {
+ firstClickRef.current = event.target;
+ }, []);
+
+ const onBackgroundMouseUp = React.useCallback(
+ event => {
+ if (
+ event.target === overlayRef.current &&
+ firstClickRef.current === overlayRef.current
+ ) {
+ onClose();
+ }
+ },
+ [onClose],
+ );
+
+ const onKeyDown = React.useCallback(
+ event => {
+ if (event.keyCode === 27) {
+ onClose();
+ }
+ },
+ [onClose],
+ );
+
+ React.useEffect(() => {
+ if (overlayRef.current) {
+ overlayRef.current.focus();
+ }
+ }, []);
+
+ return (
+ <div
+ className={css.modalOverlay}
+ ref={overlayRef}
+ onMouseDown={onBackgroundMouseDown}
+ onMouseUp={onBackgroundMouseUp}
+ tabIndex={0}
+ onKeyDown={onKeyDown}
+ >
+ {children}
+ </div>
+ );
+}
+
+export default ModalOverlay;
diff --git a/web/modals/modal.css b/web/modals/modal.css
--- a/web/modals/modal.css
+++ b/web/modals/modal.css
@@ -1,17 +1,3 @@
-div.modalOverlay {
- position: fixed;
- left: 0;
- top: 0;
- height: 100%;
- z-index: 4;
- width: 100%;
- background-color: rgba(0, 0, 0, 0.9);
- display: flex;
- flex-direction: column;
- align-items: center;
- justify-content: center;
-}
-
div.modalContainer {
display: flex;
background-color: var(--modal-bg);
diff --git a/web/modals/modal.react.js b/web/modals/modal.react.js
--- a/web/modals/modal.react.js
+++ b/web/modals/modal.react.js
@@ -4,6 +4,7 @@
import * as React from 'react';
import SWMansionIcon, { type Icon } from '../SWMansionIcon.react';
+import ModalOverlay from './modal-overlay.react';
import css from './modal.css';
export type ModalSize = 'small' | 'large' | 'fit-content';
@@ -30,39 +31,6 @@
icon,
withCloseButton = true,
} = props;
- const overlayRef = React.useRef();
- const firstClickRef = React.useRef(null);
-
- const onBackgroundMouseDown = React.useCallback(event => {
- firstClickRef.current = event.target;
- }, []);
-
- const onBackgroundMouseUp = React.useCallback(
- event => {
- if (
- event.target === overlayRef.current &&
- firstClickRef.current === overlayRef.current
- ) {
- onClose();
- }
- },
- [onClose],
- );
-
- const onKeyDown = React.useCallback(
- event => {
- if (event.keyCode === 27) {
- onClose();
- }
- },
- [onClose],
- );
-
- React.useEffect(() => {
- if (overlayRef.current) {
- overlayRef.current.focus();
- }
- }, []);
const modalContainerClasses = React.useMemo(
() =>
@@ -92,14 +60,7 @@
}, [icon]);
return (
- <div
- className={css.modalOverlay}
- ref={overlayRef}
- onMouseDown={onBackgroundMouseDown}
- onMouseUp={onBackgroundMouseUp}
- tabIndex={0}
- onKeyDown={onKeyDown}
- >
+ <ModalOverlay onClose={onClose}>
<div className={modalContainerClasses}>
<div className={css.modalHeader}>
<h2 className={css.title}>
@@ -110,7 +71,7 @@
</div>
{children}
</div>
- </div>
+ </ModalOverlay>
);
}

File Metadata

Mime Type
text/plain
Expires
Fri, Nov 15, 8:32 PM (21 h, 35 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
2495363
Default Alt Text
D5363.diff (4 KB)

Event Timeline