mirror of
https://gitee.com/nocobase/nocobase.git
synced 2024-12-02 12:18:15 +08:00
fix(embed): fix issue with unable to open subpage (#5335)
This commit is contained in:
parent
a8de9193d8
commit
3513303022
@ -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' },
|
||||
);
|
||||
|
@ -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' },
|
||||
|
@ -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' },
|
||||
|
@ -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(
|
||||
|
@ -154,3 +154,5 @@ export const setInitialActionState = (field) => {
|
||||
field.data.hidden = false;
|
||||
field.componentProps['disabled'] = false;
|
||||
};
|
||||
|
||||
export const antdDrawerZIndex = 1000;
|
||||
|
@ -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]);
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user