Page MenuHomePhabricator
Files F3333740

No OneTemporary
Actions

View Options

diff --git a/web/modals/modal.react.js b/web/modals/modal.react.js
index 3b66a8c52..1f68556c3 100644
--- a/web/modals/modal.react.js
+++ b/web/modals/modal.react.js
@@ -1,103 +1,108 @@
// @flow
import classNames from 'classnames';
import * as React from 'react';
import SWMansionIcon, { type Icon } from '../SWMansionIcon.react';
import css from './modal.css';
export type ModalSize = 'small' | 'large' | 'fit-content';
-type Props = {
+
+export type ModalOverridableProps = {
+name: string,
+icon?: Icon,
+onClose: () => void,
+withCloseButton?: boolean,
- +children?: React.Node,
+size?: ModalSize,
};
-function Modal(props: Props): React.Node {
+type ModalProps = {
+ ...ModalOverridableProps,
+ +children?: React.Node,
+};
+
+function Modal(props: ModalProps): React.Node {
const {
size = 'small',
children,
onClose,
name,
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(
() =>
classNames(css.modalContainer, {
[css.modalContainerLarge]: size === 'large',
[css.modalContainerSmall]: size === 'small',
}),
[size],
);
const cornerCloseButton = React.useMemo(() => {
if (!withCloseButton) {
return null;
}
return (
<span className={css.modalClose} onClick={onClose}>
<SWMansionIcon size={24} icon="cross" />
</span>
);
}, [onClose, withCloseButton]);
const headerIcon = React.useMemo(() => {
if (!icon) {
return null;
}
return <SWMansionIcon size={24} icon={icon} />;
}, [icon]);
return (
<div
className={css.modalOverlay}
ref={overlayRef}
onClick={onBackgroundClick}
tabIndex={0}
onKeyDown={onKeyDown}
>
<div className={modalContainerClasses}>
<div className={css.modalHeader}>
<h2 className={css.title}>
{headerIcon}
{name}
</h2>
{cornerCloseButton}
</div>
{children}
</div>
</div>
);
}
export default Modal;
diff --git a/web/modals/search-modal.react.js b/web/modals/search-modal.react.js
index 8b9adb17e..cb70189b1 100644
--- a/web/modals/search-modal.react.js
+++ b/web/modals/search-modal.react.js
@@ -1,39 +1,37 @@
// @flow
import * as React from 'react';
import Search from '../components/search.react';
-import Modal, { type ModalSize } from './modal.react';
+import Modal, { type ModalOverridableProps } from './modal.react';
import css from './search-modal.css';
type Props = {
- +name: string,
- +searchPlaceholder: string,
- +size?: ModalSize,
- +onClose: () => void,
+ ...ModalOverridableProps,
+children: (searchText: string) => React.Node,
+ +searchPlaceholder: string,
};
function SearchModal(props: Props): React.Node {
const [searchText, setSearchText] = React.useState('');
- const { name, searchPlaceholder, size, onClose, children } = props;
+ const { children, searchPlaceholder, ...modalProps } = props;
const child = React.useMemo(() => children(searchText), [
children,
searchText,
]);
return (
- <Modal name={name} onClose={onClose} size={size}>
+ <Modal {...modalProps}>
<div className={css.container}>
<Search
onChangeText={setSearchText}
searchText={searchText}
placeholder={searchPlaceholder}
/>
{child}
</div>
</Modal>
);
}
export default SearchModal;

File Metadata

Mime Type
text/x-diff
Expires
Sat, Nov 23, 5:09 AM (1 d, 19 h)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
2560044
Default Alt Text
(3 KB)

Event Timeline