MrUnknownDE/panel
1
0
Fork 0
mirror of https://github.com/MrUnknownDE/panel.git synced 2026-04-18 22:33:44 +02:00
Code Issues Packages Projects Releases Wiki Activity

Make modals programatically controllable via a HOC

Browse Source 
This allows entire components to be unmounted when the modal is hidden without affecting the fade in/out of the modal itself.

This also makes it easier to programatically dismiss a modal without having to copy the visibility all over the place, and makes working with props much simpler in those modal components
This commit is contained in:
Dane Everitt
2020-08-17 21:35:11 -07:00
parent d41b86f0ea
commit c28cba92e2
14 changed files with 192 additions and 70 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
resources/scripts/components/elements/Modal.tsx
View File

@@ -13,7 +13,7 @@ export interface RequiredModalProps {
top?: boolean;
}
interface Props extends RequiredModalProps {
export interface ModalProps extends RequiredModalProps {
dismissable?: boolean;
closeOnEscape?: boolean;
closeOnBackground?: boolean;
@@ -40,7 +40,7 @@ const ModalContainer = styled.div<{ alignTop?: boolean }>`
}
`;
const Modal: React.FC<Props> = ({ visible, appear, dismissable, showSpinnerOverlay, top = true, closeOnBackground = true, closeOnEscape = true, onDismissed, children }) => {
const Modal: React.FC<ModalProps> = ({ visible, appear, dismissable, showSpinnerOverlay, top = true, closeOnBackground = true, closeOnEscape = true, onDismissed, children }) => {
const [ render, setRender ] = useState(visible);
const isDismissable = useMemo(() => {
@@ -62,7 +62,13 @@ const Modal: React.FC<Props> = ({ visible, appear, dismissable, showSpinnerOverl
}, [ render ]);
return (
<Fade timeout={150} appear={appear} in={render} unmountOnExit onExited={onDismissed}>
<Fade
in={render}
timeout={150}
appear={appear || true}
unmountOnExit
onExited={() => onDismissed()}
>
<ModalMask
onClick={e => {
if (isDismissable && closeOnBackground) {