mirror of
https://gitee.com/nocobase/nocobase.git
synced 2024-11-29 18:58:26 +08:00
fix: upgrade formily & side menu render with createPortal & use deep compare effect (#103)
* [Fixed] 1. ts升级4.4.4 2. 解决升级formily类型不兼容问题 * [Fixed] 1. 修复菜单混合渲染问题 * [Fixed] 1. 修复useEffect对象深度依赖比较(订单表死循环) * [update]去掉debugger
This commit is contained in:
parent
35739f9f42
commit
686474cb38
@ -75,6 +75,6 @@
|
||||
"ts-jest": "^26.5.6",
|
||||
"ts-node": "^9.1.1",
|
||||
"ts-node-dev": "^1.1.8",
|
||||
"typescript": "4.1.5"
|
||||
"typescript": "4.4.4"
|
||||
}
|
||||
}
|
||||
|
@ -21,9 +21,9 @@
|
||||
"@antv/g2plot": "^2.3.27",
|
||||
"@dnd-kit/core": "4.0.0-next-2021720152655",
|
||||
"@dnd-kit/sortable": "5.0.0-next-2021720152655",
|
||||
"@formily/antd": "2.0.0-rc.3",
|
||||
"@formily/core": "2.0.0-rc.3",
|
||||
"@formily/react": "2.0.0-rc.3",
|
||||
"@formily/antd": "2.0.0-rc.19",
|
||||
"@formily/core": "2.0.0-rc.19",
|
||||
"@formily/react": "2.0.0-rc.19",
|
||||
"@monaco-editor/react": "^4.2.1",
|
||||
"ahooks": "^2.10.2",
|
||||
"axios": "^0.21.1",
|
||||
@ -39,6 +39,7 @@
|
||||
"react-helmet": "^6.1.0",
|
||||
"react-i18next": "^11.12.0",
|
||||
"react-image-lightbox": "^5.1.4",
|
||||
"umi-request": "^1.3.5"
|
||||
"umi-request": "^1.3.5",
|
||||
"use-deep-compare-effect": "^1.8.1"
|
||||
}
|
||||
}
|
||||
|
@ -119,7 +119,7 @@ function LayoutWithMenu(props: LayoutWithMenuProps) {
|
||||
const sideMenuRef = useRef();
|
||||
const history = useHistory();
|
||||
const { title } = useSystemSettings();
|
||||
const [activeKey, setActiveKey] = useState(match.params.name);
|
||||
const [activeKey, setActiveKey] = useState('');
|
||||
const { setPageTitle } = usePageTitleContext();
|
||||
|
||||
const [selectedKeys, setSelectedKeys] = useState(defaultSelectedKeys);
|
||||
@ -183,6 +183,7 @@ function LayoutWithMenu(props: LayoutWithMenuProps) {
|
||||
history.push(`/admin/${uid()}`);
|
||||
};
|
||||
console.log({ activeKey, selectedKeys });
|
||||
|
||||
return (
|
||||
<Layout>
|
||||
<Layout.Header className={'site-header'} style={{ display: 'flex' }}>
|
||||
|
@ -131,7 +131,7 @@ const useArrayTableColumns = (
|
||||
render: (value: any, record: any) => {
|
||||
const index = dataSource.indexOf(record);
|
||||
const children = (
|
||||
<ArrayBase.Item index={index}>
|
||||
<ArrayBase.Item index={index} record={record}>
|
||||
<RecursionField schema={schema} name={index} onlyRenderProperties />
|
||||
</ArrayBase.Item>
|
||||
);
|
||||
|
@ -239,7 +239,7 @@ Filter.DynamicValue = connect((props: DynamicValuePorps) => {
|
||||
properties: {
|
||||
[fieldName]: deepmerge(fieldSchema, extra, {
|
||||
arrayMerge: (target, source) => source,
|
||||
}),
|
||||
}) as any,
|
||||
},
|
||||
}}
|
||||
/>
|
||||
|
@ -4,7 +4,16 @@
|
||||
import React from 'react';
|
||||
import { SchemaRenderer } from '@nocobase/client';
|
||||
import { uid } from '@formily/shared';
|
||||
import { ISchema } from '@formily/react';
|
||||
import { ISchema } from '../../index';
|
||||
|
||||
type TestSchema = {
|
||||
[key: `x-${string | number}` | symbol]: any;
|
||||
};
|
||||
|
||||
const a:TestSchema={
|
||||
'x-232ddd-sd': 'Menu',
|
||||
'x-key':'dd'
|
||||
};
|
||||
|
||||
const schema: ISchema = {
|
||||
type: 'object',
|
||||
|
@ -3,7 +3,7 @@
|
||||
*/
|
||||
import React from 'react';
|
||||
import { SchemaRenderer } from '@nocobase/client';
|
||||
import { ISchema } from '@formily/react';
|
||||
import { ISchema } from '../../index';
|
||||
|
||||
const schema: ISchema = {
|
||||
type: 'object',
|
||||
|
@ -158,34 +158,19 @@ export const Menu: any = observer((props: any) => {
|
||||
const [selectedKey, setSelectedKey] = useState(
|
||||
defaultSelectedKeys[0] || null,
|
||||
);
|
||||
const ref = useRef();
|
||||
const path = useSchemaPath();
|
||||
const child = schema.properties && schema.properties[selectedKey];
|
||||
const isSubMenu = child && child['x-component'] === 'Menu.SubMenu';
|
||||
const { updateSchema } = useClient();
|
||||
const { t } = useTranslation();
|
||||
|
||||
useMount(() => {
|
||||
if (mode !== 'mix') {
|
||||
return;
|
||||
}
|
||||
const sideMenuElement = sideMenuRef && (sideMenuRef.current as HTMLElement);
|
||||
if (!sideMenuElement) {
|
||||
return;
|
||||
}
|
||||
if (sideMenuElement && ref.current) {
|
||||
sideMenuElement.querySelector(':scope > div').appendChild(ref.current);
|
||||
}
|
||||
sideMenuElement.style.display = isSubMenu ? 'block' : 'none';
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
const sideMenuElement = sideMenuRef && (sideMenuRef.current as HTMLElement);
|
||||
if (!sideMenuElement) {
|
||||
return;
|
||||
}
|
||||
sideMenuElement.style.display = isSubMenu ? 'block' : 'none';
|
||||
}, [selectedKey]);
|
||||
}, [selectedKey, sideMenuRef]);
|
||||
|
||||
const [dragOverlayContent, setDragOverlayContent] = useState('');
|
||||
// console.log('defaultSelectedKeys', defaultSelectedKeys, getSelectedKeys);
|
||||
@ -246,8 +231,9 @@ export const Menu: any = observer((props: any) => {
|
||||
</Button>
|
||||
</Menu.AddNew>
|
||||
</AntdMenu>
|
||||
{mode === 'mix' && (
|
||||
<div ref={ref}>
|
||||
{mode === 'mix' &&
|
||||
sideMenuRef.current?.firstChild &&
|
||||
createPortal(
|
||||
<SideMenu
|
||||
path={path}
|
||||
onSelect={(info) => {
|
||||
@ -260,9 +246,9 @@ export const Menu: any = observer((props: any) => {
|
||||
defaultSelectedKeys={defaultSelectedKeys || []}
|
||||
selectedKey={selectedKey}
|
||||
sideMenuRef={sideMenuRef}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
/>,
|
||||
sideMenuRef.current.firstChild,
|
||||
)}
|
||||
</MenuModeContext.Provider>
|
||||
</DndContext>
|
||||
</MenuContext.Provider>
|
||||
@ -746,7 +732,10 @@ Menu.DesignableBar = (props) => {
|
||||
return;
|
||||
}
|
||||
const values = await FormDialog(
|
||||
t(`Add {{type}} ${methodLabels[method]} "{{title}}"`, { type: (config.title as string).toLowerCase(), title: schema.title }),
|
||||
t(`Add {{type}} ${methodLabels[method]} "{{title}}"`, {
|
||||
type: (config.title as string).toLowerCase(),
|
||||
title: schema.title,
|
||||
}),
|
||||
// `在「${schema.title}」${methodLabels[method]}插入${config.title}`,
|
||||
() => {
|
||||
return (
|
||||
@ -862,8 +851,14 @@ Menu.DesignableBar = (props) => {
|
||||
type: 'string',
|
||||
default: 'insertAfter',
|
||||
enum: [
|
||||
{ label: t('After'), value: 'insertAfter' },
|
||||
{ label: t('Before'), value: 'insertBefore' },
|
||||
{
|
||||
label: t('After'),
|
||||
value: 'insertAfter',
|
||||
},
|
||||
{
|
||||
label: t('Before'),
|
||||
value: 'insertBefore',
|
||||
},
|
||||
],
|
||||
'x-decorator': 'FormItem',
|
||||
'x-component': 'Radio.Group',
|
||||
@ -891,12 +886,18 @@ Menu.DesignableBar = (props) => {
|
||||
target['x-component'] === 'Menu.SubMenu'
|
||||
? [
|
||||
{ label: t('After'), value: 'insertAfter' },
|
||||
{ label: t('Before'), value: 'insertBefore' },
|
||||
{
|
||||
label: t('Before'),
|
||||
value: 'insertBefore',
|
||||
},
|
||||
{ label: t('Inner'), value: 'appendChild' },
|
||||
]
|
||||
: [
|
||||
{ label: t('After'), value: 'insertAfter' },
|
||||
{ label: t('Before'), value: 'insertBefore' },
|
||||
{
|
||||
label: t('Before'),
|
||||
value: 'insertBefore',
|
||||
},
|
||||
];
|
||||
});
|
||||
});
|
||||
|
@ -11,6 +11,7 @@ import { cloneDeep, cloneDeepWith, findIndex, forIn, range, set } from 'lodash';
|
||||
import React, { Fragment, useEffect, useState } from 'react';
|
||||
import { useContext } from 'react';
|
||||
import { createContext } from 'react';
|
||||
import { useDeepCompareEffectNoCheck } from 'use-deep-compare-effect';
|
||||
import { useDesignable, createCollectionField, ISchema } from '..';
|
||||
import { uid, merge } from '@formily/shared';
|
||||
import useRequest from '@ahooksjs/use-request';
|
||||
@ -905,7 +906,7 @@ const TableProvider = (props: any) => {
|
||||
// defaultParams: [getDefaultParams()],
|
||||
},
|
||||
);
|
||||
useEffect(() => {
|
||||
useDeepCompareEffectNoCheck(() => {
|
||||
service.run(getDefaultParams());
|
||||
}, [
|
||||
pagination?.pageSize,
|
||||
|
@ -61,7 +61,7 @@
|
||||
"temp-dir": "2.0.0",
|
||||
"through2": "3.0.1",
|
||||
"ts-loader": "^8.0.7",
|
||||
"typescript": "4.1.5",
|
||||
"typescript": "4.4.4",
|
||||
"update-notifier": "3.0.0",
|
||||
"vinyl-fs": "3.0.3",
|
||||
"yargs-parser": "13.1.2"
|
||||
|
@ -13,6 +13,7 @@
|
||||
"declaration": true,
|
||||
"experimentalDecorators": true,
|
||||
"downlevelIteration": true,
|
||||
"skipLibCheck": true,
|
||||
"baseUrl": ".",
|
||||
"paths": {
|
||||
"@nocobase/*": [
|
||||
@ -20,4 +21,4 @@
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user