fix(embed): fix issue with unable to open subpage (#5335)

2024-12-02 12:18:15 +08:00 · 2024-09-27 11:02:15 +08:00 · 2024-09-27 11:02:15 +08:00 · 3513303022
commit 3513303022
parent a8de9193d8
6 changed files with 131 additions and 121 deletions
--- a/packages/core/client/src/schema-component/antd/action/Action.Container.tsx
+++ b/packages/core/client/src/schema-component/antd/action/Action.Container.tsx
@ -11,18 +11,26 @@ import { observer, RecursionField, useField, useFieldSchema } from '@formily/rea
 import React from 'react';
 import { useActionContext } from '.';
 import { useOpenModeContext } from '../../../modules/popup/OpenModeProvider';
-import { useCurrentPopupContext } from '../page/PagePopups';
 import { ComposedActionDrawer } from './types';

+const PopupLevelContext = React.createContext(0);
+
 export const ActionContainer: ComposedActionDrawer = observer(
  (props: any) => {
    const { getComponentByOpenMode, defaultOpenMode } = useOpenModeContext();
    const { openMode = defaultOpenMode } = useActionContext();
-    const { currentLevel } = useCurrentPopupContext();
+    const popupLevel = React.useContext(PopupLevelContext);
+    const currentLevel = popupLevel + 1;

    const Component = getComponentByOpenMode(openMode);

-    return <Component footerNodeName={'Action.Container.Footer'} level={currentLevel} {...props} />;
+    console.log('currentLevel', currentLevel);
+
+    return (
+      <PopupLevelContext.Provider value={currentLevel}>
+        <Component footerNodeName={'Action.Container.Footer'} level={currentLevel || 1} {...props} />
+      </PopupLevelContext.Provider>
+    );
  },
  { displayName: 'ActionContainer' },
 );
--- a/packages/core/client/src/schema-component/antd/action/Action.Drawer.tsx
+++ b/packages/core/client/src/schema-component/antd/action/Action.Drawer.tsx
@ -14,10 +14,12 @@ import React, { useMemo } from 'react';
 import { ErrorBoundary, FallbackProps } from 'react-error-boundary';
 import { ErrorFallback } from '../error-fallback';
 import { useCurrentPopupContext } from '../page/PagePopups';
+import { TabsContextProvider, useTabsContext } from '../tabs/context';
 import { useStyles } from './Action.Drawer.style';
 import { useActionContext } from './hooks';
 import { useSetAriaLabelForDrawer } from './hooks/useSetAriaLabelForDrawer';
 import { ActionDrawerProps, ComposedActionDrawer, OpenSize } from './types';
+import { antdDrawerZIndex } from './utils';

 const DrawerErrorFallback: React.FC<FallbackProps> = (props) => {
  const { visible, setVisible } = useActionContext();
@ -40,6 +42,7 @@ export const InternalActionDrawer: React.FC<ActionDrawerProps> = observer(
    const schema = useFieldSchema();
    const field = useField();
    const { componentCls, hashId } = useStyles();
+    const tabContext = useTabsContext();
    const footerSchema = schema.reduceProperties((buf, s) => {
      if (s['x-component'] === footerNodeName) {
        return s;
@ -60,40 +63,43 @@ export const InternalActionDrawer: React.FC<ActionDrawerProps> = observer(
    }

    return (
-      <Drawer
-        width={openSizeWidthMap.get(openSize)}
-        title={field.title}
-        {...others}
-        {...drawerProps}
-        rootStyle={rootStyle}
-        destroyOnClose
-        open={visible}
-        onClose={() => setVisible(false, true)}
-        rootClassName={classNames(componentCls, hashId, drawerProps?.className, others.className, 'reset')}
-        footer={
-          footerSchema && (
-            <div className={'footer'}>
-              <RecursionField
-                basePath={field.address}
-                schema={schema}
-                onlyRenderProperties
-                filterProperties={(s) => {
-                  return s['x-component'] === footerNodeName;
-                }}
-              />
-            </div>
-          )
-        }
-      >
-        <RecursionField
-          basePath={field.address}
-          schema={schema}
-          onlyRenderProperties
-          filterProperties={(s) => {
-            return s['x-component'] !== footerNodeName;
-          }}
-        />
-      </Drawer>
+      <TabsContextProvider {...tabContext} tabBarExtraContent={null}>
+        <Drawer
+          zIndex={antdDrawerZIndex + props.level}
+          width={openSizeWidthMap.get(openSize)}
+          title={field.title}
+          {...others}
+          {...drawerProps}
+          rootStyle={rootStyle}
+          destroyOnClose
+          open={visible}
+          onClose={() => setVisible(false, true)}
+          rootClassName={classNames(componentCls, hashId, drawerProps?.className, others.className, 'reset')}
+          footer={
+            footerSchema && (
+              <div className={'footer'}>
+                <RecursionField
+                  basePath={field.address}
+                  schema={schema}
+                  onlyRenderProperties
+                  filterProperties={(s) => {
+                    return s['x-component'] === footerNodeName;
+                  }}
+                />
+              </div>
+            )
+          }
+        >
+          <RecursionField
+            basePath={field.address}
+            schema={schema}
+            onlyRenderProperties
+            filterProperties={(s) => {
+              return s['x-component'] !== footerNodeName;
+            }}
+          />
+        </Drawer>
+      </TabsContextProvider>
    );
  },
  { displayName: 'ActionDrawer' },
--- a/packages/core/client/src/schema-component/antd/action/Action.Modal.tsx
+++ b/packages/core/client/src/schema-component/antd/action/Action.Modal.tsx
@ -16,9 +16,11 @@ import { ErrorBoundary, FallbackProps } from 'react-error-boundary';
 import { useToken } from '../../../style';
 import { ErrorFallback } from '../error-fallback';
 import { useCurrentPopupContext } from '../page/PagePopups';
+import { TabsContextProvider, useTabsContext } from '../tabs/context';
 import { useActionContext } from './hooks';
 import { useSetAriaLabelForModal } from './hooks/useSetAriaLabelForModal';
 import { ActionDrawerProps, ComposedActionDrawer, OpenSize } from './types';
+import { antdDrawerZIndex } from './utils';

 const ModalErrorFallback: React.FC<FallbackProps> = (props) => {
  const { visible, setVisible } = useActionContext();
@ -44,6 +46,7 @@ export const InternalActionModal: React.FC<ActionDrawerProps<ModalProps>> = obse
    const form = useForm();
    const field = useField();
    const { token } = useToken();
+    const tabContext = useTabsContext();
    const footerSchema = schema.reduceProperties((buf, s) => {
      if (s['x-component'] === footerNodeName) {
        return s;
@ -68,75 +71,78 @@ export const InternalActionModal: React.FC<ActionDrawerProps<ModalProps>> = obse
    }

    return (
-      <Modal
-        width={actualWidth}
-        title={field.title}
-        {...(others as ModalProps)}
-        {...modalProps}
-        styles={styles}
-        style={{
-          ...modalProps?.style,
-          ...others?.style,
-        }}
-        destroyOnClose
-        open={visible}
-        onCancel={() => {
-          setVisible(false, true);
-          form.reset();
-        }}
-        className={classNames(
-          others.className,
-          modalProps?.className,
-          css`
-            &.nb-action-popup {
-              .ant-modal-header {
-                display: none;
-              }
-
-              .ant-modal-content {
-                background: var(--nb-box-bg);
-                border: 1px solid rgba(255, 255, 255, 0.1);
-                padding-bottom: 0;
-              }
-
-              // 这里的样式是为了保证页面 tabs 标签下面的分割线和页面内容对齐（页面内边距可以通过主题编辑器调节）
-              .ant-tabs-nav {
-                padding-left: ${token.paddingLG - token.paddingPageHorizontal}px;
-                padding-right: ${token.paddingLG - token.paddingPageHorizontal}px;
-                margin-left: ${token.paddingPageHorizontal - token.paddingLG}px;
-                margin-right: ${token.paddingPageHorizontal - token.paddingLG}px;
-              }
-
-              .ant-modal-footer {
-                display: ${showFooter ? 'block' : 'none'};
-              }
-            }
-          `,
-        )}
-        footer={
-          showFooter ? (
-            <RecursionField
-              basePath={field.address}
-              schema={schema}
-              onlyRenderProperties
-              filterProperties={(s) => {
-                return s['x-component'] === footerNodeName;
-              }}
-            />
-          ) : (
-            false
-          )
-        }
-      >
-        <RecursionField
-          basePath={field.address}
-          schema={schema}
-          onlyRenderProperties
-          filterProperties={(s) => {
-            return s['x-component'] !== footerNodeName;
+      <TabsContextProvider {...tabContext} tabBarExtraContent={null}>
+        <Modal
+          zIndex={antdDrawerZIndex + props.level}
+          width={actualWidth}
+          title={field.title}
+          {...(others as ModalProps)}
+          {...modalProps}
+          styles={styles}
+          style={{
+            ...modalProps?.style,
+            ...others?.style,
          }}
-        />
-      </Modal>
+          destroyOnClose
+          open={visible}
+          onCancel={() => {
+            setVisible(false, true);
+            form.reset();
+          }}
+          className={classNames(
+            others.className,
+            modalProps?.className,
+            css`
+              &.nb-action-popup {
+                .ant-modal-header {
+                  display: none;
+                }
+
+                .ant-modal-content {
+                  background: var(--nb-box-bg);
+                  border: 1px solid rgba(255, 255, 255, 0.1);
+                  padding-bottom: 0;
+                }
+
+                // 这里的样式是为了保证页面 tabs 标签下面的分割线和页面内容对齐（页面内边距可以通过主题编辑器调节）
+                .ant-tabs-nav {
+                  padding-left: ${token.paddingLG - token.paddingPageHorizontal}px;
+                  padding-right: ${token.paddingLG - token.paddingPageHorizontal}px;
+                  margin-left: ${token.paddingPageHorizontal - token.paddingLG}px;
+                  margin-right: ${token.paddingPageHorizontal - token.paddingLG}px;
+                }
+
+                .ant-modal-footer {
+                  display: ${showFooter ? 'block' : 'none'};
+                }
+              }
+            `,
+          )}
+          footer={
+            showFooter ? (
+              <RecursionField
+                basePath={field.address}
+                schema={schema}
+                onlyRenderProperties
+                filterProperties={(s) => {
+                  return s['x-component'] === footerNodeName;
+                }}
+              />
+            ) : (
+              false
+            )
+          }
+        >
+          <RecursionField
+            basePath={field.address}
+            schema={schema}
+            onlyRenderProperties
+            filterProperties={(s) => {
+              return s['x-component'] !== footerNodeName;
+            }}
+          />
+        </Modal>
+      </TabsContextProvider>
    );
  },
  { displayName: 'ActionModal' },
--- a/packages/core/client/src/schema-component/antd/action/Action.Page.tsx
+++ b/packages/core/client/src/schema-component/antd/action/Action.Page.tsx
@ -15,6 +15,7 @@ import { BackButtonUsedInSubPage } from '../page/BackButtonUsedInSubPage';
 import { TabsContextProvider, useTabsContext } from '../tabs/context';
 import { useActionPageStyle } from './Action.Page.style';
 import { usePopupOrSubpagesContainerDOM } from './hooks/usePopupSlotDOM';
+import { antdDrawerZIndex } from './utils';

 export function ActionPage({ level }) {
  const filedSchema = useFieldSchema();
@ -25,8 +26,7 @@ export function ActionPage({ level }) {

  const style = useMemo(() => {
    return {
-      // 20 is the z-index value of the main page
-      zIndex: 20 + level,
+      zIndex: antdDrawerZIndex + level,
    };
  }, [level]);

@ -44,11 +44,7 @@ export function ActionPage({ level }) {

  const container = getContainerDOM();

-  if (container) {
-    return createPortal(actionPageNode, container);
-  }
-
-  return actionPageNode;
+  return createPortal(actionPageNode, container || document.body);
 }

 ActionPage.Footer = observer(
--- a/packages/core/client/src/schema-component/antd/action/utils.ts
+++ b/packages/core/client/src/schema-component/antd/action/utils.ts
@ -154,3 +154,5 @@ export const setInitialActionState = (field) => {
  field.data.hidden = false;
  field.componentProps['disabled'] = false;
 };
+
+export const antdDrawerZIndex = 1000;
--- a/packages/core/client/src/schema-items/OpenModeSchemaItems.tsx
+++ b/packages/core/client/src/schema-items/OpenModeSchemaItems.tsx
@ -113,7 +113,6 @@ export const SchemaSettingOpenModeSchemaItems: React.FC<Options> = (props) => {
  const field = useField();
  const { t } = useTranslation();
  const { dn } = useDesignable();
-  const { isPopupVisibleControlledByURL } = usePopupSettings();
  const openModeValue = fieldSchema?.['x-component-props']?.['openMode'] || 'drawer';

  const _modeOptions = useMemo(() => {
@ -121,17 +120,10 @@ export const SchemaSettingOpenModeSchemaItems: React.FC<Options> = (props) => {
      return modeOptions;
    }

-    if (isPopupVisibleControlledByURL()) {
-      return [
-        { label: t('Drawer'), value: 'drawer' },
-        { label: t('Dialog'), value: 'modal' },
-        { label: t('Page'), value: 'page' },
-      ];
-    }
-
    return [
      { label: t('Drawer'), value: 'drawer' },
      { label: t('Dialog'), value: 'modal' },
+      { label: t('Page'), value: 'page' },
    ];
  }, [modeOptions, t]);