61 lines
2.3 KiB
TypeScript
61 lines
2.3 KiB
TypeScript
import { useResourceStore } from '@kevisual/resources/pages/store/resource';
|
|
import { useResourceFileStore } from '@kevisual/resources/pages/store/resource-file';
|
|
import { Box, Divider, Drawer, Tab, Tabs } from '@mui/material';
|
|
import { useMemo, useState } from 'react';
|
|
import { QuickValues, QuickTabs } from './QuickTabs';
|
|
|
|
export const FileDrawer = () => {
|
|
const { prefix } = useResourceStore();
|
|
const { resource, openDrawer, setOpenDrawer } = useResourceFileStore();
|
|
const [tab, setTab] = useState<string>(QuickValues[0]);
|
|
const quickCom = useMemo(() => {
|
|
return QuickTabs.find((item) => item.value === tab)?.component;
|
|
}, [tab]);
|
|
return (
|
|
<>
|
|
<Drawer
|
|
// aria-label={'文件详情'}
|
|
open={openDrawer}
|
|
onClose={() => {
|
|
// document.getElementById('focus-safe-element')?.focus();
|
|
const activeElement = document.activeElement as HTMLElement;
|
|
if (activeElement) {
|
|
activeElement.blur();
|
|
}
|
|
setOpenDrawer(false);
|
|
}}
|
|
ModalProps={{
|
|
keepMounted: true,
|
|
}}
|
|
anchor='right'
|
|
style={{
|
|
zIndex: 1000,
|
|
}}>
|
|
<div className='p-4 w-[400px] max-w-[90%] overflow-hidden h-full sm:w-[600px]'>
|
|
<div style={{ height: '140px' }}>
|
|
<h2 className='text-2xl font-bold truncate py-2 pb-6 '>
|
|
{resource?.name ? resource.name.replace(prefix, '') : resource?.prefix?.replace(prefix, '')}
|
|
</h2>
|
|
<Divider />
|
|
<Box sx={{ borderBottom: 1, mt: 2, borderColor: 'divider' }}>
|
|
<Tabs value={tab} onChange={(_, value) => setTab(value)}>
|
|
{QuickTabs.map((item) => (
|
|
<Tab key={item.value} label={item.label} value={item.value} icon={item.icon} iconPosition='start' />
|
|
))}
|
|
</Tabs>
|
|
</Box>
|
|
</div>
|
|
<Box className='' sx={{ p: 2, height: 'calc(100% - 140px)', overflow: 'hidden' }}>
|
|
<div className='scrollbar' style={{ height: '100%', overflow: 'auto' }}>
|
|
{quickCom && quickCom()}
|
|
</div>
|
|
</Box>
|
|
</div>
|
|
</Drawer>
|
|
<button id='focus-safe-element' style={{ display: 'none' }}>
|
|
Focus Safe Element
|
|
</button>
|
|
</>
|
|
);
|
|
};
|