tachybase_todo/packages/client/src/route-switch/antd/admin-layout/index.tsx
2022-03-09 21:11:40 +08:00

122 lines
3.9 KiB
TypeScript

import { css } from '@emotion/css';
import { Layout } from 'antd';
import React, { useRef, useState } from 'react';
import { useHistory, useRouteMatch } from 'react-router-dom';
import {
CurrentUser,
CurrentUserProvider,
findByUid,
findMenuItem,
PluginManager,
RemoteCollectionManagerProvider,
RemoteSchemaComponent,
useDocumentTitle,
useRoute,
useSystemSettings
} from '../../../';
const InternalAdminLayout = (props: any) => {
const route = useRoute();
const history = useHistory();
const match = useRouteMatch<any>();
const { setTitle } = useDocumentTitle();
const sideMenuRef = useRef();
const defaultSelectedUid = match.params.name;
const [schema, setSchema] = useState({});
const onSelect = ({ item }) => {
const schema = item.props.schema;
console.log('onSelect', schema);
setSchema(schema);
setTitle(schema.title);
history.push(`/admin/${schema['x-uid']}`);
};
const [hidden, setHidden] = useState(false);
const result = useSystemSettings();
return (
<Layout>
<Layout.Header
className={css`
.ant-menu.ant-menu-dark .ant-menu-item-selected,
.ant-menu-submenu-popup.ant-menu-dark .ant-menu-item-selected {
background-color: rgba(255, 255, 255, 0.1);
}
.ant-menu-dark.ant-menu-horizontal > .ant-menu-item:hover {
background-color: rgba(255, 255, 255, 0.1);
}
`}
style={{ height: 46, lineHeight: '46px', position: 'relative', paddingLeft: 0 }}
>
<div style={{ display: 'flex', height: '100%' }}>
<div style={{ width: 200, display: 'inline-flex', color: '#fff', padding: '0', alignItems: 'center' }}>
<img
className={css`
height: 20px;
padding: 0 16px;
`}
src={result?.data?.data?.logo?.url}
/>
{/* {result?.data?.data?.title} */}
</div>
<RemoteSchemaComponent
hidden={hidden}
uid={route.uiSchemaUid}
scope={{ onSelect, sideMenuRef, defaultSelectedUid }}
schemaTransform={(data) => {
if (!data) {
return data;
}
data['x-component-props'] = data['x-component-props'] || {};
data['x-component-props']['defaultSelectedUid'] = defaultSelectedUid;
return data;
}}
onSuccess={(data) => {
if (defaultSelectedUid) {
const s = findByUid(data?.data, defaultSelectedUid);
if (s) {
setTitle(s.title);
}
return;
}
setHidden(true);
setTimeout(() => setHidden(false), 11);
const s = findMenuItem(data?.data);
if (s) {
setSchema(s);
setTitle(s.title);
history.push(`/admin/${s['x-uid']}`);
}
}}
/>
</div>
<div style={{ position: 'absolute', top: 0, right: 0 }}>
<PluginManager.Toolbar
items={[
{ component: 'DesignableSwitch', pin: true },
{ component: 'CollectionManagerShortcut', pin: true },
{ component: 'ACLShortcut', pin: true },
{ component: 'SystemSettingsShortcut' },
]}
/>
<CurrentUser />
</div>
</Layout.Header>
<Layout>
<Layout.Sider style={{ display: 'none' }} theme={'light'} ref={sideMenuRef}></Layout.Sider>
<Layout.Content style={{ minHeight: 'calc(100vh - 46px)' }}>{props.children}</Layout.Content>
</Layout>
</Layout>
);
};
export const AdminLayout = (props) => {
return (
<RemoteCollectionManagerProvider>
<CurrentUserProvider>
<InternalAdminLayout {...props} />
</CurrentUserProvider>
</RemoteCollectionManagerProvider>
);
};
export default AdminLayout;