f-react-use-modal/lib/commonjs/provider.js

f-react-use-modal

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.ModalsProvider = void 0;
var _invariant = _interopRequireDefault(require("invariant"));
var React = _interopRequireWildcard(require("react"));
var _context = require("./context.js");
var _jsxRuntime = require("react/jsx-runtime");
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
/**
 * Provider for Modals stacks. The subtree of this component can use the `useDialogs` hook to
 * access the modals API. The modals are rendered in the order they are requested.
 *
 */
const ModalsProvider = props => {
  const {
    children,
    unmountAfter = 1000
  } = props;
  const [stack, setStack] = React.useState([]);
  const keyPrefix = React.useId();
  const nextId = React.useRef(0);
  const requestModal = React.useCallback(function open(Component, payload, options = {}) {
    const {
      onClose = async () => {}
    } = options;
    let resolve;
    const promise = new Promise(resolveImpl => {
      resolve = resolveImpl;
    });
    (0, _invariant.default)(resolve, 'resolve not set');
    const key = `${keyPrefix}-${nextId.current}`;
    nextId.current += 1;
    const newEntry = {
      key,
      open: true,
      promise,
      Component,
      payload,
      onClose,
      resolve
    };
    setStack(prevStack => [...prevStack, newEntry]);
    return promise;
  }, [keyPrefix]);
  const closeModalUi = React.useCallback(function closeDialogUi(modal) {
    const updateStack = prevStack => prevStack.map(entry => entry.promise === modal ? {
      ...entry,
      open: false
    } : entry);
    const filterStack = prevStack => prevStack.filter(entry => entry.promise !== modal);
    setStack(updateStack);
    setTimeout(() => {
      setStack(filterStack);
    }, unmountAfter);
  }, [unmountAfter]);
  const closeModal = React.useCallback(async function closeModal(modal, result) {
    const entryToClose = stack.find(entry => entry.promise === modal);
    (0, _invariant.default)(entryToClose, 'Dialog not found');
    const {
      onClose,
      resolve
    } = entryToClose;
    await onClose(result);
    resolve(result);
    closeModalUi(modal);
    return modal;
  }, [stack, closeModalUi]);
  const contextValue = React.useMemo(() => ({
    open: requestModal,
    close: closeModal
  }), [requestModal, closeModal]);
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_context.ModalsContext.Provider, {
    value: contextValue,
    children: [children, stack.map(({
      key,
      open,
      Component,
      payload,
      promise
    }) => /*#__PURE__*/(0, _jsxRuntime.jsx)(Component, {
      payload: payload,
      open: open,
      onClose: async result => {
        await closeModal(promise, result);
      }
    }, key))]
  });
};
exports.ModalsProvider = ModalsProvider;
//# sourceMappingURL=provider.js.map