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

fix: dashed underline caused by horizontal form layout in modal (#6639)

Browse Source 
* fix: dashed underline caused by horizontal form layout in modal

* fix: e2e test
This commit is contained in:
Katherine 2025-04-10 13:51:25 +08:00 committed by GitHub
parent 86380b2ba5
commit 7886581f08
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 21 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
packages/core/client/src/modules/blocks/data-blocks/list/__e2e__/schemaInitializer.test.ts
View File

@ -40,6 +40,7 @@ test.describe('where list block can be added', () => {
await page.getByLabel('schema-initializer-Grid-').nth(1).hover();
await page.getByRole('menuitem', { name: 'Role name' }).click();
await page.mouse.move(300, 0);
await page.reload();
await expect(page.getByLabel('block-item-CollectionField-').getByText('Root')).toBeVisible();
await expect(page.getByLabel('block-item-CollectionField-').getByText('Admin')).toBeVisible();
await expect(page.getByLabel('block-item-CollectionField-').getByText('Member')).toBeVisible();

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

@ -9,7 +9,7 @@
import { css } from '@emotion/css';
import { observer, useField, useFieldSchema } from '@formily/react';
import { Modal, ModalProps } from 'antd';
import { Modal, ModalProps, Skeleton } from 'antd';
import classNames from 'classnames';
import React, { FC, startTransition, useEffect, useState } from 'react';
import { ErrorBoundary, FallbackProps } from 'react-error-boundary';
@ -53,7 +53,6 @@ const ActionModalContent: FC<{ footerNodeName: string; field: any; schema: any }
if (!deferredVisible) {
return null;
}
return (
<NocoBaseRecursionField
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(
(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 ready = useDelayedVisible(visible, 200); // 200ms 与 Modal 动画时间一致
return (
<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>
</TabsContextProvider>
</zIndexContext.Provider>