fm453/nocobase
1
0
Fork 0
mirror of https://gitee.com/nocobase/nocobase.git synced 2025-05-05 21:49:25 +08:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'main' into next

Browse Source
This commit is contained in:
nocobase[bot] 2025-04-10 05:51:47 +00:00
commit ee260e24f6
1 changed files with 20 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
packages/core/client/src/schema-component/antd/action/Action.Modal.tsx
View File

@ -9,7 +9,7 @@
import { css } from '@emotion/css'; import { css } from '@emotion/css';
import { observer, useField, useFieldSchema } from '@formily/react'; import { observer, useField, useFieldSchema } from '@formily/react';
import { Modal, ModalProps } from 'antd'; import { Modal, ModalProps, Skeleton } from 'antd';
import classNames from 'classnames'; import classNames from 'classnames';
import React, { FC, startTransition, useEffect, useState } from 'react'; import React, { FC, startTransition, useEffect, useState } from 'react';
import { ErrorBoundary, FallbackProps } from 'react-error-boundary'; import { ErrorBoundary, FallbackProps } from 'react-error-boundary';
@ -53,7 +53,6 @@ const ActionModalContent: FC<{ footerNodeName: string; field: any; schema: any }
if (!deferredVisible) { if (!deferredVisible) {
return null; return null;
} }
return ( return (
<NocoBaseRecursionField <NocoBaseRecursionField
basePath={field.address} basePath={field.address}
@ -67,6 +66,19 @@ const ActionModalContent: FC<{ footerNodeName: string; field: any; schema: any }
}, },
); );
export function useDelayedVisible(visible: boolean, delay = 200) {
const [ready, setReady] = useState(false);
useEffect(() => {
if (visible) {
const timer = setTimeout(() => setReady(true), delay);
return () => clearTimeout(timer);
} else {
setReady(false);
}
}, [visible]);
return ready;
}
export const InternalActionModal: React.FC<ActionDrawerProps<ModalProps>> = observer( export const InternalActionModal: React.FC<ActionDrawerProps<ModalProps>> = observer(
(props) => { (props) => {
const { footerNodeName = 'Action.Modal.Footer', width, zIndex: _zIndex, ...others } = props; const { footerNodeName = 'Action.Modal.Footer', width, zIndex: _zIndex, ...others } = props;
@ -90,6 +102,7 @@ export const InternalActionModal: React.FC<ActionDrawerProps<ModalProps>> = obse
} }
const zIndex = getZIndex('modal', _zIndex || parentZIndex, props.level || 0); const zIndex = getZIndex('modal', _zIndex || parentZIndex, props.level || 0);
const ready = useDelayedVisible(visible, 200); // 200ms 与 Modal 动画时间一致
return ( return (
<ActionContextNoRerender> <ActionContextNoRerender>
@ -154,7 +167,11 @@ export const InternalActionModal: React.FC<ActionDrawerProps<ModalProps>> = obse
) )
} }
> >
<ActionModalContent footerNodeName={footerNodeName} field={field} schema={schema} /> {ready ? (
<ActionModalContent footerNodeName={footerNodeName} field={field} schema={schema} />
) : (
<Skeleton active paragraph={{ rows: 6 }} />
)}
</Modal> </Modal>
</TabsContextProvider> </TabsContextProvider>
</zIndexContext.Provider> </zIndexContext.Provider>