@react-form-builder/core/dist/features/modal/Modal.js

React JSON Schema Form Builder to create complex, validated, reusable forms with no deep React knowledge required

import { jsx as t, jsxs as S } from "react/jsx-runtime";
import { useCallback as D, useRef as H, useMemo as f, useImperativeHandle as k, createElement as A } from "react";
import { useComponentData as V } from "../../utils/contexts/ComponentDataContext.js";
import { useStore as I } from "../../utils/contexts/StoreContext.js";
import { namedObserver as u } from "../../utils/namedObserver.js";
import { useBuilderComponent as K } from "../../utils/useBuilderComponent.js";
import { modalStateKey as h, modalBeforeHideFnName as x, modalOnCloseEventHandler as $ } from "../event/consts/modalActions.js";
import { createDataProxy as q } from "../event/utils/createComponentDataProxy.js";
import { useViewerProps as N } from "../form-viewer/components/ViewerPropsContext.js";
import { NewStoreProvider as z } from "../form-viewer/components/ViewerStoreProvider.js";
import { useEmbeddedFormViewer as G } from "../form-viewer/EmbeddedFormViewerContext.js";
import { isTemplateType as b, getTemplateName as R } from "../ui/templateUtil.js";
import { closeCurrentModalActionName as J } from "./closeCurrentModalActionName.js";
import B from "./Modal.module.css.js";
import { useModalComponentData as L } from "./useModalComponentData.js";
import { useModalType as Q } from "./useModalType.js";
const E = () => {
  const o = Q(), e = N();
  if (o)
    return e.view.get(o);
}, F = () => /* @__PURE__ */ S("div", { className: B.warn, "data-testid": "modal-type-not-specified", children: [
  "Modal: ",
  /* @__PURE__ */ t("em", { children: "specify the component to display the modal window to use" })
] }), O = () => (console.info("Modal: template not specified"), /* @__PURE__ */ S("div", { className: B.warn, "data-testid": "modal-template-not-specified", children: [
  "Modal: ",
  /* @__PURE__ */ t("em", { children: "template not specified" })
] })), U = ({ modalTemplate: o }) => {
  const e = E(), r = f(() => o && b(o) ? R(o) : o, [o]);
  return e ? o ? /* @__PURE__ */ t("div", { children: `Modal: '${r}'` }) : /* @__PURE__ */ t(O, {}) : /* @__PURE__ */ t(F, {});
}, W = u("ModalBuilder", U), X = ({ open: o, handleClose: e, model: r, children: a, onCloseRef: m }) => {
  const d = V(), s = L(d, r.type), n = s.componentState;
  k(m, () => () => {
    s.componentState.ownProps.onClose?.();
  }, [s.componentState.ownProps]);
  const l = {
    ...n.ownProps,
    open: o,
    handleClose: e
  };
  return A(r.component, l, a);
}, Y = u("ComponentModal", X), Z = (o) => {
  const e = N(), r = V(), a = I(), { context: m } = a.formViewerPropsStore, d = E(), s = G(), { modalTemplate: n } = o, {
    open: l = !1,
    initialData: M,
    [x]: w
  } = r?.userDefinedProps?.[h] || {}, p = D((y) => {
    if (r.userDefinedProps ??= {}, r.userDefinedProps[h].open = !1, y) {
      const T = q(a.formData);
      Object.entries(y).forEach(([g, j]) => {
        T[g] = j;
      });
    }
  }, [r, a.formData]), C = H(null), P = D(() => {
    C?.current?.();
  }, []), v = f(() => ({
    ...e.context,
    modalContext: {
      [J]: p,
      [$]: P,
      [x]: w,
      parentContext: m
    }
  }), [m, e.context, p, P, w]), i = n && b(n) ? R(n) : n, c = f(() => {
    if (i)
      return {
        ...e,
        formName: i,
        initialData: M,
        errors: void 0,
        onFormDataChange: void 0,
        readOnly: void 0,
        disabled: void 0,
        context: v
      };
  }, [e, i, M, v]);
  return d ? !i || !c ? /* @__PURE__ */ t(O, {}) : /* @__PURE__ */ t(Y, { model: d, open: l, handleClose: p, onCloseRef: C, children: /* @__PURE__ */ t(z, { props: c, children: /* @__PURE__ */ t(s, { ...c }) }) }) : /* @__PURE__ */ t(F, {});
}, _ = u("ModalViewer", Z), Co = (o) => K(W, _, o);
export {
  Co as Modal
};
//# sourceMappingURL=Modal.js.map