@renderlesskit/react/dist/esm/dialog/helpers/useNestedDialogs.js

Collection of headless components/hooks that are accessible, composable, customizable from low level to build your own UI & Design System powered by Reakit

import * as React from "react";
import { removeItemFromArray } from "reakit-utils/removeItemFromArray";
import { jsx as _jsx } from "react/jsx-runtime";
var DialogContext = /*#__PURE__*/React.createContext({});
export function useNestedDialogs(dialogRef, options) {
  var context = React.useContext(DialogContext);
  var [dialogs, setDialogs] = React.useState([]);
  var [visibleModals, setVisibleModals] = React.useState(dialogs);
  var addDialog = React.useCallback(ref => {
    var _context$addDialog;

    (_context$addDialog = context.addDialog) === null || _context$addDialog === void 0 ? void 0 : _context$addDialog.call(context, ref);
    setDialogs(prevDialogs => [...prevDialogs, ref]);
  }, // eslint-disable-next-line react-hooks/exhaustive-deps
  [context.addDialog]);
  var removeDialog = React.useCallback(ref => {
    var _context$removeDialog;

    (_context$removeDialog = context.removeDialog) === null || _context$removeDialog === void 0 ? void 0 : _context$removeDialog.call(context, ref);
    setDialogs(prevDialogs => removeItemFromArray(prevDialogs, ref));
  }, // eslint-disable-next-line react-hooks/exhaustive-deps
  [context.removeDialog]);
  var showDialog = React.useCallback(ref => {
    var _context$showDialog;

    (_context$showDialog = context.showDialog) === null || _context$showDialog === void 0 ? void 0 : _context$showDialog.call(context, ref);
    setVisibleModals(prevDialogs => [...prevDialogs, ref]);
  }, // eslint-disable-next-line react-hooks/exhaustive-deps
  [context.showDialog]);
  var hideDialog = React.useCallback(ref => {
    var _context$hideDialog;

    (_context$hideDialog = context.hideDialog) === null || _context$hideDialog === void 0 ? void 0 : _context$hideDialog.call(context, ref);
    setVisibleModals(prevDialogs => removeItemFromArray(prevDialogs, ref));
  }, // eslint-disable-next-line react-hooks/exhaustive-deps
  [context.hideDialog]); // If it's a nested dialog, add it to context

  React.useEffect(() => {
    var _context$addDialog2;

    if (options.unstable_orphan) return undefined;
    (_context$addDialog2 = context.addDialog) === null || _context$addDialog2 === void 0 ? void 0 : _context$addDialog2.call(context, dialogRef);
    return () => {
      var _context$removeDialog2;

      (_context$removeDialog2 = context.removeDialog) === null || _context$removeDialog2 === void 0 ? void 0 : _context$removeDialog2.call(context, dialogRef);
    }; // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [options.unstable_orphan, context.addDialog, dialogRef, context.removeDialog]);
  React.useEffect(() => {
    var _context$showDialog2;

    if (options.unstable_orphan) return undefined;
    if (!options.modal) return undefined;
    if (!options.visible) return undefined;
    (_context$showDialog2 = context.showDialog) === null || _context$showDialog2 === void 0 ? void 0 : _context$showDialog2.call(context, dialogRef);
    return () => {
      var _context$hideDialog2;

      (_context$hideDialog2 = context.hideDialog) === null || _context$hideDialog2 === void 0 ? void 0 : _context$hideDialog2.call(context, dialogRef);
    }; // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [options.unstable_orphan, options.modal, options.visible, context.showDialog, dialogRef, context.hideDialog]); // Close all nested dialogs when parent dialog closes

  React.useEffect(() => {
    if (context.visible === false && options.visible && !options.unstable_orphan) {
      var _options$hide;

      (_options$hide = options.hide) === null || _options$hide === void 0 ? void 0 : _options$hide.call(options);
    } // eslint-disable-next-line react-hooks/exhaustive-deps

  }, [context.visible, options.visible, options.hide, options.unstable_orphan]); // Provider

  var providerValue = React.useMemo(() => ({
    visible: options.visible,
    addDialog,
    removeDialog,
    showDialog,
    hideDialog
  }), [options.visible, addDialog, removeDialog, showDialog, hideDialog]);
  var wrap = React.useCallback(element => /*#__PURE__*/_jsx(DialogContext.Provider, {
    value: providerValue,
    children: element
  }), [providerValue]);
  return {
    dialogs,
    visibleModals,
    wrap
  };
}
//# sourceMappingURL=useNestedDialogs.js.map