Page MenuHomePhabricator
Files F2760171

D5354.diff
No OneTemporary
Actions

D5354.diff
View Options

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
@@ -3,6 +3,8 @@
import classNames from 'classnames';
import * as React from 'react';
+import ModalOverlay from 'lib/components/modal.react';
+
import SWMansionIcon, { type Icon } from '../SWMansionIcon.react';
import css from './modal.css';
@@ -30,31 +32,6 @@
icon,
withCloseButton = true,
} = props;
- const overlayRef = React.useRef();
-
- const onBackgroundClick = React.useCallback(
- event => {
- if (event.target === 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(
() =>
@@ -84,13 +61,7 @@
}, [icon]);
return (
- <div
- className={css.modalOverlay}
- ref={overlayRef}
- onClick={onBackgroundClick}
- tabIndex={0}
- onKeyDown={onKeyDown}
- >
+ <ModalOverlay onClose={onClose}>
<div className={modalContainerClasses}>
<div className={css.modalHeader}>
<h2 className={css.title}>
@@ -101,7 +72,7 @@
</div>
{children}
</div>
- </div>
+ </ModalOverlay>
);
}

File Metadata

Mime Type
text/plain
Expires
Fri, Sep 20, 6:08 AM (16 h, 38 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
2146397
Default Alt Text
D5354.diff (1 KB)

Event Timeline