@craftercms/studio-ui/hooks/useEnhancedDialogState.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/>.
 */
import { useSpreadState } from './useSpreadState';
import { useMemo } from 'react';
import { nnou } from '../utils/object';
export function useEnhancedDialogState(initialState) {
  const [state, setState] = useSpreadState(
    Object.assign(
      { open: false, isMinimized: false, isFullScreen: false, hasPendingChanges: false, isSubmitting: false },
      initialState
    )
  );
  return useMemo(() => {
    const onOpen = () => setState({ open: true });
    const onClose = () => setState({ open: false });
    const onResetState = () =>
      setState(
        Object.assign(
          { open: false, isMinimized: false, isFullScreen: false, hasPendingChanges: false, isSubmitting: false },
          initialState
        )
      );
    const onFullScreen = () => setState({ isFullScreen: true });
    const onCancelFullScreen = () => setState({ isFullScreen: false });
    const onMaximize = () => setState({ isMinimized: false });
    const onMinimize = () => setState({ isMinimized: true });
    const onSubmittingChange = (isSubmitting) => setState({ isSubmitting });
    const onHasPendingChange = (hasPendingChanges) => setState({ hasPendingChanges });
    const onSubmittingAndOrPendingChange = ({ isSubmitting, hasPendingChanges }) => {
      if (
        (nnou(isSubmitting) && state.isSubmitting !== isSubmitting) ||
        (nnou(hasPendingChanges) && state.hasPendingChanges !== hasPendingChanges)
      ) {
        setState({
          isSubmitting: isSubmitting !== null && isSubmitting !== void 0 ? isSubmitting : state.isSubmitting,
          hasPendingChanges:
            hasPendingChanges !== null && hasPendingChanges !== void 0 ? hasPendingChanges : state.hasPendingChanges
        });
      }
    };
    return Object.assign(Object.assign({}, state), {
      onOpen,
      onClose,
      onResetState,
      onMaximize,
      onMinimize,
      onFullScreen,
      onCancelFullScreen,
      onSubmittingChange,
      onHasPendingChange,
      onSubmittingAndOrPendingChange
    });
    // Users of the effect most likely won’t memo the initial state
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [setState, state]);
}
export default useEnhancedDialogState;