tachybase_todo/packages/client/src/schemas/menu/demos/demo4.tsx
2021-10-14 00:08:16 +08:00

97 lines
2.6 KiB
TypeScript

import React, { useRef } from 'react';
import { SchemaRenderer } from '@nocobase/client';
import { Layout } from 'antd';
import { uid } from '@formily/shared';
const schema = {
type: 'object',
properties: {
[uid()]: {
type: 'void',
'x-component': 'Menu',
'x-designable-bar': 'Menu.DesignableBar',
'x-component-props': {
sideMenuRef: '{{ sideMenuRef }}',
mode: 'mix',
theme: 'dark',
},
properties: {
[uid()]: {
type: 'void',
title: `菜单1`,
'x-designable-bar': 'Menu.DesignableBar',
'x-component': 'Menu.Item',
},
[uid()]: {
type: 'void',
title: `菜单2`,
'x-designable-bar': 'Menu.DesignableBar',
'x-component': 'Menu.Item',
},
[uid()]: {
type: 'void',
title: '菜单组3',
'x-designable-bar': 'Menu.DesignableBar',
'x-component': 'Menu.SubMenu',
properties: {
[uid()]: {
type: 'void',
title: `子菜单5`,
'x-designable-bar': 'Menu.DesignableBar',
'x-component': 'Menu.SubMenu',
properties: {
[uid()]: {
type: 'void',
title: `子菜单8`,
'x-designable-bar': 'Menu.DesignableBar',
'x-component': 'Menu.Item',
},
[uid()]: {
type: 'void',
title: `子菜单9`,
'x-designable-bar': 'Menu.DesignableBar',
'x-component': 'Menu.Item',
},
},
},
},
},
[uid()]: {
type: 'void',
title: '菜单组4',
'x-designable-bar': 'Menu.DesignableBar',
'x-component': 'Menu.SubMenu',
properties: {
[uid()]: {
type: 'void',
title: `子菜单6`,
'x-designable-bar': 'Menu.DesignableBar',
'x-component': 'Menu.Item',
},
[uid()]: {
type: 'void',
title: `子菜单7`,
'x-designable-bar': 'Menu.DesignableBar',
'x-component': 'Menu.Item',
},
},
},
},
},
},
};
export default () => {
const sideMenuRef = useRef();
return (
<Layout>
<Layout.Header>
<SchemaRenderer debug={true} scope={{ sideMenuRef }} schema={schema} />
</Layout.Header>
<Layout>
<Layout.Sider theme={'light'} ref={sideMenuRef}></Layout.Sider>
</Layout>
</Layout>
);
};