Merge branch 'main' into next

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' },
 );

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
+      <TabsContextProvider {...tabContext} tabBarExtraContent={null}>
-        width={openSizeWidthMap.get(openSize)}
+        <Drawer
-        title={field.title}
+          zIndex={antdDrawerZIndex + props.level}
-        {...others}
+          width={openSizeWidthMap.get(openSize)}
-        {...drawerProps}
+          title={field.title}
-        rootStyle={rootStyle}
+          {...others}
-        destroyOnClose
+          {...drawerProps}
-        open={visible}
+          rootStyle={rootStyle}
-        onClose={() => setVisible(false, true)}
+          destroyOnClose
-        rootClassName={classNames(componentCls, hashId, drawerProps?.className, others.className, 'reset')}
+          open={visible}
-        footer={
+          onClose={() => setVisible(false, true)}
-          footerSchema && (
+          rootClassName={classNames(componentCls, hashId, drawerProps?.className, others.className, 'reset')}
-            <div className={'footer'}>
+          footer={
-              <RecursionField
+            footerSchema && (
-                basePath={field.address}
+              <div className={'footer'}>
-                schema={schema}
+                <RecursionField
-                onlyRenderProperties
+                  basePath={field.address}
-                filterProperties={(s) => {
+                  schema={schema}
-                  return s['x-component'] === footerNodeName;
+                  onlyRenderProperties
-                }}
+                  filterProperties={(s) => {
-              />
+                    return s['x-component'] === footerNodeName;
-            </div>
+                  }}
-          )
+                />
-        }
+              </div>
-      >
+            )
-        <RecursionField
+          }
-          basePath={field.address}
+        >
-          schema={schema}
+          <RecursionField
-          onlyRenderProperties
+            basePath={field.address}
-          filterProperties={(s) => {
+            schema={schema}
-            return s['x-component'] !== footerNodeName;
+            onlyRenderProperties
-          }}
+            filterProperties={(s) => {
-        />
+              return s['x-component'] !== footerNodeName;
-      </Drawer>
+            }}
+          />
+        </Drawer>
+      </TabsContextProvider>
     );
   },
   { displayName: 'ActionDrawer' },

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
+      <TabsContextProvider {...tabContext} tabBarExtraContent={null}>
-        width={actualWidth}
+        <Modal
-        title={field.title}
+          zIndex={antdDrawerZIndex + props.level}
-        {...(others as ModalProps)}
+          width={actualWidth}
-        {...modalProps}
+          title={field.title}
-        styles={styles}
+          {...(others as ModalProps)}
-        style={{
+          {...modalProps}
-          ...modalProps?.style,
+          styles={styles}
-          ...others?.style,
+          style={{
-        }}
+            ...modalProps?.style,
-        destroyOnClose
+            ...others?.style,
-        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;
           }}
-        />
+          destroyOnClose
-      </Modal>
+          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' },

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: antdDrawerZIndex + level,
-      zIndex: 20 + level,
     };
   }, [level]);
 
@@ -44,11 +44,7 @@ export function ActionPage({ level }) {
 
   const container = getContainerDOM();
 
-  if (container) {
+  return createPortal(actionPageNode, container || document.body);
-    return createPortal(actionPageNode, container);
-  }
-
-  return actionPageNode;
 }
 
 ActionPage.Footer = observer(

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;

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]);