mirrors/nocobase
1
0
Fork 0
mirror of https://github.com/nocobase/nocobase synced 2024-11-15 13:46:45 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

fix(client): get sideMenuRef from context

Browse Source
This commit is contained in:
chenos 2022-01-24 15:47:45 +08:00
parent 1238f1ee8c
commit 6ba2d6b5e5
3 changed files with 15 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/client/src/application/demos/demo2/mock.ts
View File

@ -18,7 +18,7 @@ export default (apiClient: APIClient) => {
theme: 'dark', theme: 'dark',
// defaultSelectedUid: 'u8', // defaultSelectedUid: 'u8',
onSelect: '{{ onSelect }}', onSelect: '{{ onSelect }}',
sideMenuRef: '{{ sideMenuRef }}', sideMenuRefScopeKey: 'sideMenuRef',
}, },
properties: { properties: {
item3: { item3: {

16
packages/client/src/schema-component/antd/menu/Menu.tsx
View File

@ -1,5 +1,5 @@
import { DesktopOutlined } from '@ant-design/icons'; import { DesktopOutlined } from '@ant-design/icons';
import { observer, RecursionField, Schema, useFieldSchema } from '@formily/react'; import { observer, RecursionField, Schema, SchemaExpressionScopeContext, useFieldSchema } from '@formily/react';
import { Menu as AntdMenu } from 'antd'; import { Menu as AntdMenu } from 'antd';
import React, { createContext, useContext, useEffect, useState } from 'react'; import React, { createContext, useContext, useEffect, useState } from 'react';
import { createPortal } from 'react-dom'; import { createPortal } from 'react-dom';
@ -12,10 +12,19 @@ type ComposedMenu = React.FC<any> & {
const MenuModeContext = createContext(null); const MenuModeContext = createContext(null);
const useSideMenuRef = () => {
const schema = useFieldSchema();
const scope = useContext(SchemaExpressionScopeContext);
const scopeKey = schema?.['x-component-props']?.['sideMenuRefScopeKey'];
if (!scopeKey) {
return;
}
return scope[scopeKey];
}
export const Menu: ComposedMenu = observer((props) => { export const Menu: ComposedMenu = observer((props) => {
let { let {
onSelect, onSelect,
sideMenuRef,
mode, mode,
defaultSelectedUid, defaultSelectedUid,
defaultSelectedKeys: dSelectedKeys, defaultSelectedKeys: dSelectedKeys,
@ -24,6 +33,7 @@ export const Menu: ComposedMenu = observer((props) => {
} = props; } = props;
console.log('defaultSelectedUid', defaultSelectedUid) console.log('defaultSelectedUid', defaultSelectedUid)
const schema = useFieldSchema(); const schema = useFieldSchema();
const sideMenuRef = useSideMenuRef();
const [defaultSelectedKeys, setDefaultSelectedKeys] = useState(() => { const [defaultSelectedKeys, setDefaultSelectedKeys] = useState(() => {
if (dSelectedKeys) { if (dSelectedKeys) {
return dSelectedKeys; return dSelectedKeys;
@ -107,7 +117,7 @@ export const Menu: ComposedMenu = observer((props) => {
? null ? null
: mode === 'mix' && : mode === 'mix' &&
sideMenuSchema?.properties && sideMenuSchema?.properties &&
sideMenuRef.current?.firstChild && sideMenuRef?.current?.firstChild &&
createPortal( createPortal(
<MenuModeContext.Provider value={'inline'}> <MenuModeContext.Provider value={'inline'}>
<AntdMenu <AntdMenu

2
packages/client/src/schema-component/antd/menu/demos/demo3.tsx
View File

@ -16,7 +16,7 @@ const schema: ISchema = {
mode: 'mix', mode: 'mix',
theme: 'dark', theme: 'dark',
defaultSelectedUid: 'u8', defaultSelectedUid: 'u8',
sideMenuRef: '{{ sideMenuRef }}', sideMenuRefScopeKey: 'sideMenuRef',
}, },
properties: { properties: {
item1: { item1: {