@kne/react-modal 0.1.11 → 0.1.13

package/dist/index.js

@@ -164,6 +164,49 @@ const useLockParentScroll = (enabled, getScrollElement) => {
   }, [enabled, getScrollElement]);
 };
 
+const usePatchElement = () => {
+  const [elements, setElements] = react.useState([]);
+  const patchElement = react.useCallback(element => {
+    setElements(originElements => [...originElements, element]);
+    return () => {
+      setElements(originElements => originElements.filter(ele => ele !== element));
+    };
+  }, []);
+  return [elements, patchElement];
+};
+
+const ModalLayerContext = /*#__PURE__*/react.createContext(null);
+const useModalLayer = () => react.useContext(ModalLayerContext);
+
+/**
+ * 挂在 Modal 内容树内（antd ZIndexContext 之下），
+ * 使就近 useModal 打开的内层成为本层 React 子树，从而自动叠层。
+ */
+const ModalLayerProvider = ({
+  children
+}) => {
+  const [elements, patchElement] = usePatchElement();
+  const value = react.useMemo(() => ({
+    patchElement
+  }), [patchElement]);
+  return /*#__PURE__*/jsxRuntime.jsxs(ModalLayerContext.Provider, {
+    value: value,
+    children: [children, elements]
+  });
+};
+
+/** 根级命令式打开（页面首次弹层）；不包 ModalLayerContext。 */
+const rootModalPatchRef = {
+  current: null
+};
+const ModalContextHolder = () => {
+  const [elements, patchElement] = usePatchElement();
+  rootModalPatchRef.current = patchElement;
+  return /*#__PURE__*/jsxRuntime.jsx(jsxRuntime.Fragment, {
+    children: elements
+  });
+};
+
 const ModalLocaleRoot = withLocale(({
   children
 }) => children);
@@ -182,10 +225,10 @@ const wrapCustomGetContainer$2 = customGetContainer => {
   }
   return () => customGetContainer;
 };
-const VIEWPORT_EXAMPLE_SELECTORS$3 = ['.example-driver-device-scroll'];
+const VIEWPORT_EXAMPLE_SELECTORS$4 = ['.example-driver-device-scroll'];
 const viewportPopupMountOptions$3 = {
   cover: 'viewport',
-  exampleSelectors: VIEWPORT_EXAMPLE_SELECTORS$3
+  exampleSelectors: VIEWPORT_EXAMPLE_SELECTORS$4
 };
 const resolveModalGetContainer = ({
   customGetContainer,
@@ -209,6 +252,7 @@ const resolveModalGetContainer = ({
   };
 };
 const sizeStyleVars$1 = (size, hasFooter) => {
+  // body 最低高度随 size：small 基准 300，default/large 基准 500（再扣 title/footer chrome）
   const minBase = size === 'small' ? 300 : 500;
   const chrome = 48 + (hasFooter ? 58 : 0);
   const minHeight = `${Math.max(0, minBase - chrome)}px`;
@@ -254,11 +298,15 @@ const ModalOuter = ({
   });
   const bodyClassName = classnames__default["default"](modalStyle['modal-body'], 'modal-body');
   // 移动端全屏：body 用 flex 吃满 title/footer 之间剩余高度，footer 才能贴底；
-  // 勿写死 --kne-modal-body-height（高度受限类会把该值压矮，footer 悬在中间）
+  // 桌面默认：height:auto + max-height，短内容不撑满；bodyScroll=false 仍写死满高供 Tabs/分栏
   const bodyStyle = isMobile ? {
     flex: '1 1 auto',
     minHeight: 0,
     height: 'auto'
+  } : bodyScroll !== false ? {
+    height: 'auto',
+    maxHeight: 'var(--kne-modal-body-max-height)',
+    minHeight: 'var(--kne-modal-body-min-height)'
   } : {
     height: 'var(--kne-modal-body-height)'
   };
@@ -288,10 +336,7 @@ const ModalOuter = ({
       children: bodyInner
     }) : /*#__PURE__*/jsxRuntime.jsx("div", {
       className: classnames__default["default"](bodyClassName, modalStyle['body-scroll-off']),
-      style: isMobile ? {
-        flex: '1 1 auto',
-        minHeight: 0
-      } : undefined,
+      style: bodyStyle,
       children: bodyInner
     }), footer === null && footerButtons === undefined ? null : /*#__PURE__*/jsxRuntime.jsx(Footer, {
       footer: footer,
@@ -419,8 +464,11 @@ const computedCommonProps = ({
         } : null)
       }
     },
+    // LayerProvider 须在 antd Modal 内容树内（ZIndexContext 下），内层命令式才能自动 +100
     children: /*#__PURE__*/jsxRuntime.jsx(ModalLocaleRoot, {
-      children: runChildren({})
+      children: /*#__PURE__*/jsxRuntime.jsx(ModalLayerProvider, {
+        children: runChildren({})
+      })
     })
   };
 };
@@ -430,18 +478,23 @@ const Modal = withLocale(({
   open,
   mobileFullscreen = true,
   bodyScroll = true,
+  isMobile: isMobileProp,
+  fixedModeClass: fixedModeClassProp,
   ...props
 }) => {
   const hostRef = react.useRef(null);
   const {
-    isMobile,
-    fixedModeClass,
+    isMobile: detectedIsMobile,
+    fixedModeClass: detectedFixedModeClass,
     getPopupContainer,
     anchorRef
   } = responsiveUtils.usePopupMount({
     ...viewportPopupMountOptions$3,
     getPopupContainer: wrapCustomGetContainer$2(getContainer)
   });
+  // useModal 打开时可能已按 activeElement 解析出示例手机框，优先用调用方传入的 isMobile / fixedModeClass
+  const isMobile = isMobileProp ?? detectedIsMobile;
+  const fixedModeClass = fixedModeClassProp ?? detectedFixedModeClass;
   const getScrollElement = responsiveUtils.useScrollElement();
   useLockParentScroll(!!open, getScrollElement);
   const setAnchorRef = node => {
@@ -472,84 +525,143 @@ const Modal = withLocale(({
     })]
   });
 });
-const useModal = () => {
-  const {
-    modal
-  } = antd.App.useApp();
+
+let hookModalUuid = 0;
+
+/** 与 Modal / useDrawer 一致：示例手机框挂载根 */
+const VIEWPORT_EXAMPLE_SELECTORS$3 = ['.example-driver-device-scroll'];
+const HookModal = /*#__PURE__*/react.forwardRef(({
+  config,
+  afterClose: hookAfterClose
+}, ref) => {
+  const [open, setOpen] = react.useState(true);
+  const [innerConfig, setInnerConfig] = react.useState(config);
+  const close = () => {
+    setOpen(false);
+  };
+  react.useImperativeHandle(ref, () => ({
+    destroy: close,
+    update: newConfig => {
+      setInnerConfig(origin => Object.assign({}, origin, typeof newConfig === 'function' ? newConfig(origin) : newConfig));
+    }
+  }));
   const {
-    resolveMount,
-    getPopupContainer
-  } = responsiveUtils.usePopupMount(viewportPopupMountOptions$3);
+    afterClose: userAfterClose,
+    onClose: userOnClose,
+    onConfirm: userOnConfirm,
+    onCancel: userOnCancel,
+    ...restConfig
+  } = innerConfig;
+  return /*#__PURE__*/jsxRuntime.jsx(Modal, {
+    ...restConfig,
+    open: open,
+    onClose: () => {
+      userOnClose?.();
+      close();
+    },
+    onCancel: function () {
+      userOnCancel?.(...[].slice.call(arguments));
+      close();
+    },
+    onConfirm: function () {
+      try {
+        const _arguments = arguments;
+        return Promise.resolve(Promise.resolve(userOnConfirm?.(...[].slice.call(_arguments)))).then(function (res) {
+          if (res !== false) {
+            close();
+          }
+          return res;
+        });
+      } catch (e) {
+        return Promise.reject(e);
+      }
+    },
+    afterClose: function () {
+      var args = [].slice.call(arguments);
+      hookAfterClose?.(...args);
+      userAfterClose?.(...args);
+    }
+  });
+});
+
+/**
+ * 命令式内容弹窗：就近 patch 到 ModalLayerProvider（多层）或根 ModalContextHolder。
+ * 不走 App.modal.info / ConfirmDialog，层级交给 antd ZIndexContext。
+ *
+ * 打开时用 document.activeElement 解析示例手机框（与 useDrawer 一致），
+ * 使 useFormModal 在手机预览内也能挂进 `.example-driver-device-scroll`，
+ * 而不是落到 Global Holder 所在的外层 body。
+ */
+const useModal = () => {
+  const layer = react.useContext(ModalLayerContext);
   const getScrollElement = responsiveUtils.useScrollElement();
-  return props => {
-    const anchor = typeof document !== 'undefined' ? document.activeElement : null;
-    const {
-      isMobile,
-      fixedModeClass
-    } = resolveMount(anchor);
-    const unlock = lockParentScroll(getScrollElement);
+  const [actionQueue, setActionQueue] = react.useState([]);
+  react.useEffect(() => {
+    if (actionQueue.length) {
+      const cloneQueue = [...actionQueue];
+      cloneQueue.forEach(action => action());
+      setActionQueue([]);
+    }
+  }, [actionQueue]);
+  return react.useCallback(props => {
+    hookModalUuid += 1;
+    const modalRef = /*#__PURE__*/react.createRef();
     const api = {};
-    const {
-      afterClose: userAfterClose,
-      getContainer: customGetContainer,
-      onClose: userOnClose,
-      onConfirm: userOnConfirm,
-      onCancel: userOnCancel,
-      ...restProps
-    } = props;
-    const closeModal = () => {
-      api.close?.();
-    };
-    const {
-      children,
-      getContainer,
-      afterClose,
-      ...otherProps
-    } = computedCommonProps({
-      ...restProps,
-      isMobile,
-      fixedModeClass,
-      onClose: () => {
-        userOnClose?.();
-        closeModal();
-      },
-      onCancel: function () {
-        userOnCancel?.(...[].slice.call(arguments));
-        closeModal();
-      },
-      onConfirm: function () {
-        try {
-          const _arguments = arguments;
-          return Promise.resolve(Promise.resolve(userOnConfirm?.(...[].slice.call(_arguments)))).then(function (res) {
-            if (res !== false) {
-              closeModal();
-            }
-            return res;
-          });
-        } catch (e) {
-          return Promise.reject(e);
+    let closeFunc;
+    let unlock = () => {};
+    const resolvePatch = () => layer?.patchElement || rootModalPatchRef.current;
+    const runOpen = () => {
+      const patch = resolvePatch();
+      if (typeof patch !== 'function') {
+        throw new Error('useModal requires <ModalContextHolder /> mounted inside <App> before calling useModal()');
+      }
+      unlock = lockParentScroll(getScrollElement);
+      const {
+        afterClose: userAfterClose,
+        getContainer: customGetContainer,
+        ...restProps
+      } = props;
+
+      // Holder 在 Global 外层；用点击焦点定位示例手机框（对齐 useDrawer / FileModal）
+      const openAnchor = typeof document !== 'undefined' ? document.activeElement : null;
+      const exampleMount = responsiveUtils.findExamplePhoneMountNode(openAnchor, VIEWPORT_EXAMPLE_SELECTORS$3);
+      const examplePhoneProps = exampleMount && !customGetContainer ? {
+        getContainer: () => exampleMount,
+        isMobile: true,
+        fixedModeClass: 'kne-is-boundary'
+      } : customGetContainer ? {
+        getContainer: customGetContainer
+      } : {};
+      const modalEl = /*#__PURE__*/jsxRuntime.jsx(HookModal, {
+        ref: modalRef,
+        config: {
+          ...restProps,
+          ...examplePhoneProps,
+          afterClose: function () {
+            unlock();
+            userAfterClose?.(...[].slice.call(arguments));
+          }
+        },
+        afterClose: () => {
+          closeFunc && closeFunc();
         }
-      },
-      afterClose: function () {
-        unlock();
-        userAfterClose?.(...[].slice.call(arguments));
+      }, `react-modal-${hookModalUuid}`);
+      closeFunc = patch(modalEl);
+    };
+    if (resolvePatch()) {
+      runOpen();
+    } else {
+      setActionQueue(prev => [...prev, runOpen]);
+    }
+    api.close = () => {
+      if (modalRef.current) {
+        modalRef.current.destroy();
+      } else {
+        setActionQueue(prev => [...prev, () => modalRef.current?.destroy()]);
       }
-    });
-    const {
-      destroy
-    } = modal.info({
-      ...otherProps,
-      afterClose,
-      content: children,
-      getContainer: resolveModalGetContainer({
-        customGetContainer: customGetContainer ?? getContainer,
-        getPopupContainer,
-        getHostNode: () => anchor
-      })
-    });
-    api.close = destroy;
+    };
     return api;
-  };
+  }, [getScrollElement, layer]);
 };
 
 var style = {"kne-responsive-boundary":"kne-react-modal_qwqLr","kne-responsive-scroll":"kne-react-modal_vmry7","drawer":"kne-react-modal_cDsbq","small":"kne-react-modal_3QgK-","is-mobile":"kne-react-modal_FFf73","large":"kne-react-modal_8lell","drawer-body-inner":"kne-react-modal_xgX4D","drawer-antd-header":"kne-react-modal_3EUxr","drawer-antd-footer":"kne-react-modal_2G81L","drawer-antd-body":"kne-react-modal_eKVMu","drawer-outer":"kne-react-modal_P3Cw8","no-title":"kne-react-modal_upRot","no-footer":"kne-react-modal_j4sGu","no-padding":"kne-react-modal_pg37M","drawer-title":"kne-react-modal_-hw5V","drawer-body":"kne-react-modal_nJj7Y","body-scroll-off":"kne-react-modal_2Wh1H","modal-footer-extra":"kne-react-modal_M4hy9","drawer-close":"kne-react-modal_dVh38","drawer-host":"kne-react-modal_Nsxi9","drawer-host-render":"kne-react-modal_iGDWP","drawer-panel-host":"kne-react-modal_A0h-2","drawer-panel-body":"kne-react-modal_E4tcc","drawer-form-host":"kne-react-modal_vKkQW","drawer-wrapper-mobile":"kne-react-modal_vsxOs","drawer-wrapper-mobile-vertical":"kne-react-modal_HG8Vz","drawer-root-mobile":"kne-react-modal_G-qXe"};
@@ -892,17 +1004,6 @@ const Drawer = withLocale(({
   });
 });
 
-const usePatchElement = () => {
-  const [elements, setElements] = react.useState([]);
-  const patchElement = react.useCallback(element => {
-    setElements(originElements => [...originElements, element]);
-    return () => {
-      setElements(originElements => originElements.filter(ele => ele !== element));
-    };
-  }, []);
-  return [elements, patchElement];
-};
-
 const VIEWPORT_EXAMPLE_SELECTORS$1 = ['.example-driver-device-scroll'];
 
 // 与 Modal / Drawer 一致：真机 viewport；示例框 / container 仍 boundary
@@ -1215,43 +1316,48 @@ const mapConfirmProps = (props, {
     icon,
     isMobile
   });
+
+  // Confirm 走 antd ConfirmDialog：未传 zIndex 时用 static 顶层，适合真确认框盖住内容弹窗
+  const config = {
+    ...otherProps,
+    okText: confirmText ?? otherProps.okText,
+    cancelText: cancelText ?? otherProps.cancelText,
+    onOk: onConfirm ?? otherProps.onOk,
+    onCancel: onCancel ?? otherProps.onCancel,
+    getContainer: resolveModalGetContainer({
+      customGetContainer,
+      getPopupContainer,
+      getHostNode: () => anchor
+    }),
+    centered: true,
+    afterClose: function () {
+      var args = [].slice.call(arguments);
+      unlock();
+      userAfterClose && userAfterClose(...args);
+      afterClose && afterClose(...args);
+    },
+    icon: null,
+    classNames: {
+      mask: classnames__default["default"](isMobile && modalStyle['modal-mask-fullscreen'], isMobile && fixedModeClass, otherProps.classNames?.mask)
+    },
+    wrapClassName: classnames__default["default"](modalStyle['modal-wrap'], modalStyle['modal-wrap-centered'], confirmStyle['confirm-modal-wrap'], wrapClassName, {
+      [confirmStyle['is-danger']]: danger,
+      [confirmStyle['is-mobile']]: isMobile,
+      [fixedModeClass]: isMobile
+    }),
+    title: confirmTitle ? /*#__PURE__*/jsxRuntime.jsx(ConfirmLocaleRoot, {
+      children: confirmTitle
+    }) : null,
+    content: /*#__PURE__*/jsxRuntime.jsx(ConfirmLocaleRoot, {
+      children: content
+    })
+  };
+  if (zIndex !== undefined) {
+    config.zIndex = zIndex;
+  }
   return {
     modalMethod: type,
-    config: {
-      ...otherProps,
-      zIndex: zIndex ?? 1100,
-      okText: confirmText ?? otherProps.okText,
-      cancelText: cancelText ?? otherProps.cancelText,
-      onOk: onConfirm ?? otherProps.onOk,
-      onCancel: onCancel ?? otherProps.onCancel,
-      getContainer: resolveModalGetContainer({
-        customGetContainer,
-        getPopupContainer,
-        getHostNode: () => anchor
-      }),
-      centered: true,
-      afterClose: function () {
-        var args = [].slice.call(arguments);
-        unlock();
-        userAfterClose && userAfterClose(...args);
-        afterClose && afterClose(...args);
-      },
-      icon: null,
-      classNames: {
-        mask: classnames__default["default"](isMobile && modalStyle['modal-mask-fullscreen'], isMobile && fixedModeClass, otherProps.classNames?.mask)
-      },
-      wrapClassName: classnames__default["default"](modalStyle['modal-wrap'], modalStyle['modal-wrap-centered'], confirmStyle['confirm-modal-wrap'], wrapClassName, {
-        [confirmStyle['is-danger']]: danger,
-        [confirmStyle['is-mobile']]: isMobile,
-        [fixedModeClass]: isMobile
-      }),
-      title: confirmTitle ? /*#__PURE__*/jsxRuntime.jsx(ConfirmLocaleRoot, {
-        children: confirmTitle
-      }) : null,
-      content: /*#__PURE__*/jsxRuntime.jsx(ConfirmLocaleRoot, {
-        children: content
-      })
-    }
+    config
   };
 };
 const useConfirmModal = () => {
@@ -1375,6 +1481,8 @@ const modalClassNames = {
 exports.ColumnsLayout = ColumnsLayout;
 exports.Drawer = Drawer;
 exports.DrawerContextHolder = DrawerContextHolder;
+exports.ModalContextHolder = ModalContextHolder;
+exports.ModalLayerContext = ModalLayerContext;
 exports.ScrollRegion = ScrollRegion;
 exports.TabsLayout = TabsLayout;
 exports.createDrawerRender = createDrawerRender;
@@ -1384,4 +1492,5 @@ exports.modalClassNames = modalClassNames;
 exports.useConfirmModal = useConfirmModal;
 exports.useDrawer = useDrawer;
 exports.useModal = useModal;
+exports.useModalLayer = useModalLayer;
 //# sourceMappingURL=index.js.map