@craftercms/studio-ui/components/EnhancedDialog/EnhancedDialog.js

Services, components, models & utils to build CrafterCMS authoring extensions.

/*
 * 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/>.
 */
var __rest =
  (this && this.__rest) ||
  function (s, e) {
    var t = {};
    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
    if (s != null && typeof Object.getOwnPropertySymbols === 'function')
      for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
        if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
      }
    return t;
  };
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
    } = props,
    dialogProps = __rest(props, [
      'id',
      'open',
      'isSubmitting',
      'hasPendingChanges',
      'isMinimized',
      'isFullScreen',
      'title',
      'subtitle',
      'onClosed',
      'onMinimize',
      'onMaximize',
      'onWithPendingChangesCloseRequest',
      'children',
      'dialogHeaderProps',
      'omitHeader',
      'onFullScreen',
      'onCancelFullScreen'
    ]);
  // endregion
  const onClose = useOnClose({
    onClose(e, reason) {
      var _a;
      if (hasPendingChanges) {
        onWithPendingChangesCloseRequest === null || onWithPendingChangesCloseRequest === void 0
          ? void 0
          : onWithPendingChangesCloseRequest(e, reason);
      } else if (!isSubmitting) {
        (_a = dialogProps.onClose) === null || _a === void 0 ? void 0 : _a.call(dialogProps, 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,
      Object.assign(
        {
          open: open && !isMinimized,
          keepMounted: isMinimized,
          fullWidth: true,
          maxWidth: 'md',
          fullScreen: isFullScreen
        },
        dialogProps,
        { onClose: onClose }
      ),
      !omitHeader &&
        React.createElement(
          DialogHeader,
          Object.assign({}, dialogHeaderProps, {
            title:
              title !== null && title !== void 0
                ? title
                : dialogHeaderProps === null || dialogHeaderProps === void 0
                ? void 0
                : dialogHeaderProps.title,
            subtitle:
              subtitle !== null && subtitle !== void 0
                ? subtitle
                : dialogHeaderProps === null || dialogHeaderProps === void 0
                ? void 0
                : 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;
}