@craftercms/studio-ui
Version:
Services, components, models & utils to build CrafterCMS authoring extensions.
124 lines (122 loc) • 4.03 kB
JavaScript
/*
* Copyright (C) 2007-2022 Crafter Software Corporation. All Rights Reserved.
*
* This program is free software: you can redistribute it and/or modify
* it under the terms of the GNU Lesser General Public License version 3 as published by
* the Free Software Foundation.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU Lesser General Public License for more details.
*
* You should have received a copy of the GNU Lesser General Public License
* along with this program. If not, see <http://www.gnu.org/licenses/>.
*/
/*
* Copyright (C) 2007-2022 Crafter Software Corporation. All Rights Reserved.
*
* This program is free software: you can redistribute it and/or modify
* it under the terms of the GNU General Public License version 3 as published by
* the Free Software Foundation.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU General Public License for more details.
*
* You should have received a copy of the GNU General Public License
* along with this program. If not, see <http://www.gnu.org/licenses/>.
*/
import * as React from 'react';
import { useMemo } from 'react';
import { useOnClose } from '../../hooks/useOnClose';
import MuiDialog from '@mui/material/Dialog';
import { useUnmount } from '../../hooks/useUnmount';
import DialogHeader from '../DialogHeader';
import MinimizedBar from '../MinimizedBar';
import { EnhancedDialogContext } from './useEnhancedDialogContext';
import Suspencified from '../Suspencified';
export function EnhancedDialog(props) {
// region const { ... } = props
const {
id,
open,
isSubmitting = false,
hasPendingChanges = false,
isMinimized = false,
isFullScreen = false,
title,
subtitle,
onClosed,
onMinimize,
onMaximize,
onWithPendingChangesCloseRequest,
children,
dialogHeaderProps,
omitHeader = false,
onFullScreen,
onCancelFullScreen,
...dialogProps
} = props;
// endregion
const onClose = useOnClose({
onClose(e, reason) {
if (hasPendingChanges) {
onWithPendingChangesCloseRequest?.(e, reason);
} else if (!isSubmitting) {
dialogProps.onClose?.(e, reason);
}
},
disableBackdropClick: isSubmitting,
disableEscapeKeyDown: isSubmitting
});
const context = useMemo(
() => ({
open,
isMinimized,
isFullScreen,
isSubmitting,
hasPendingChanges
}),
[hasPendingChanges, isFullScreen, isMinimized, isSubmitting, open]
);
return React.createElement(
EnhancedDialogContext.Provider,
{ value: context },
React.createElement(
MuiDialog,
{
open: open && !isMinimized,
keepMounted: isMinimized,
fullWidth: true,
maxWidth: 'md',
fullScreen: isFullScreen,
...dialogProps,
onClose: onClose
},
!omitHeader &&
React.createElement(DialogHeader, {
...dialogHeaderProps,
title: title ?? dialogHeaderProps?.title,
subtitle: subtitle ?? dialogHeaderProps?.subtitle,
disabled: isSubmitting,
onMinimizeButtonClick: onMinimize,
onFullScreenButtonClick: isFullScreen ? onCancelFullScreen : onFullScreen,
onCloseButtonClick: (e) => onClose(e, null)
}),
React.createElement(
Suspencified,
null,
React.Children.map(children, (child) => React.cloneElement(child, { onClose }))
),
React.createElement(OnClosedInvoker, { onClosed: onClosed })
),
React.createElement(MinimizedBar, { open: isMinimized, onMaximize: onMaximize, title: title })
);
}
export default EnhancedDialog;
function OnClosedInvoker({ onClosed }) {
useUnmount(onClosed);
return null;
}