mirror of
https://github.com/smartxworks/sunmao-ui.git
synced 2024-11-21 03:15:49 +08:00
feat: add the ability to hide the sidebar & remove zoom function
This commit is contained in:
xzdry
parent
65474f7c3d
commit
ea58612b8a
3
.gitignore
vendored
3
.gitignore
vendored
@ -18,3 +18,6 @@ typings
|
||||
coverage
|
||||
|
||||
stats.html
|
||||
|
||||
# vscode extensions
|
||||
.history
|
||||
@ -60,7 +60,8 @@ export const Editor: React.FC<Props> = observer(
|
||||
setExplorerMenuTab,
|
||||
} = editorStore;
|
||||
|
||||
const [scale, setScale] = useState(100);
|
||||
const [isDisplayLeftMenu, setIsDisplayLeftMenu] = useState(true);
|
||||
const [isDisplayRightMenu, setIsDisplayRightMenu] = useState(true);
|
||||
const [preview, setPreview] = useState(false);
|
||||
const [codeMode, setCodeMode] = useState(false);
|
||||
const [isDisplayApp, setIsDisplayApp] = useState(true);
|
||||
@ -124,7 +125,6 @@ export const Editor: React.FC<Props> = observer(
|
||||
flexDirection="column"
|
||||
width="full"
|
||||
height="full"
|
||||
transform={`scale(${scale / 100})`}
|
||||
position="relative"
|
||||
overflow="hidden"
|
||||
>
|
||||
@ -141,100 +141,111 @@ export const Editor: React.FC<Props> = observer(
|
||||
|
||||
return (
|
||||
<>
|
||||
<Resizable
|
||||
defaultSize={{
|
||||
width: 300,
|
||||
height: '100%',
|
||||
}}
|
||||
enable={{ right: true }}
|
||||
style={{ zIndex: 2 }}
|
||||
maxWidth={480}
|
||||
minWidth={300}
|
||||
>
|
||||
<Box
|
||||
borderRightWidth="1px"
|
||||
borderColor="gray.200"
|
||||
position="relative"
|
||||
zIndex="2"
|
||||
height="full"
|
||||
>
|
||||
<Tabs
|
||||
height="100%"
|
||||
display="flex"
|
||||
flexDirection="column"
|
||||
textAlign="left"
|
||||
lazyBehavior="keepMounted"
|
||||
isLazy
|
||||
index={explorerMenuTab}
|
||||
onChange={activatedTab => {
|
||||
setExplorerMenuTab(activatedTab);
|
||||
}}
|
||||
>
|
||||
<TabList background="gray.50" whiteSpace="nowrap" justifyContent="center">
|
||||
<Tab>Explorer</Tab>
|
||||
<Tab>UI</Tab>
|
||||
<Tab>Data</Tab>
|
||||
<Tab>State</Tab>
|
||||
</TabList>
|
||||
<TabPanels overflow="hidden" height="full" flex="1">
|
||||
<TabPanel height="full" overflow="auto" p={0}>
|
||||
<Explorer services={services} />
|
||||
</TabPanel>
|
||||
<TabPanel height="full" overflow="auto" p={0}>
|
||||
<StructureTree services={services} />
|
||||
</TabPanel>
|
||||
<TabPanel height="full" overflow="auto" p={0}>
|
||||
<DataSource active={activeDataSource?.id ?? ''} services={services} />
|
||||
</TabPanel>
|
||||
<TabPanel overflow="auto" p={0} height="100%">
|
||||
<StateViewer store={stateStore} />
|
||||
</TabPanel>
|
||||
</TabPanels>
|
||||
</Tabs>
|
||||
</Box>
|
||||
</Resizable>
|
||||
<Flex flex={1} position="relative" overflow="hidden">
|
||||
{appBox}
|
||||
{isDisplayLeftMenu ? (
|
||||
<Resizable
|
||||
defaultSize={{
|
||||
width: 360,
|
||||
width: 300,
|
||||
height: '100%',
|
||||
}}
|
||||
enable={{ left: true }}
|
||||
enable={{ right: true }}
|
||||
style={{ zIndex: 2 }}
|
||||
maxWidth={480}
|
||||
minWidth={300}
|
||||
>
|
||||
<Box
|
||||
height="full"
|
||||
borderLeftWidth="1px"
|
||||
borderColor="gray.400"
|
||||
borderRightWidth="1px"
|
||||
borderColor="gray.200"
|
||||
position="relative"
|
||||
zIndex="0"
|
||||
zIndex="2"
|
||||
height="full"
|
||||
>
|
||||
<Tabs
|
||||
align="center"
|
||||
textAlign="left"
|
||||
height="100%"
|
||||
display="flex"
|
||||
flexDirection="column"
|
||||
textAlign="left"
|
||||
lazyBehavior="keepMounted"
|
||||
isLazy
|
||||
index={toolMenuTab}
|
||||
onChange={onRightTabChange}
|
||||
index={explorerMenuTab}
|
||||
onChange={activatedTab => {
|
||||
setExplorerMenuTab(activatedTab);
|
||||
}}
|
||||
>
|
||||
<TabList background="gray.50">
|
||||
<Tab>Inspect</Tab>
|
||||
<Tab>Insert</Tab>
|
||||
<TabList
|
||||
background="gray.50"
|
||||
whiteSpace="nowrap"
|
||||
justifyContent="center"
|
||||
>
|
||||
<Tab>Explorer</Tab>
|
||||
<Tab>UI</Tab>
|
||||
<Tab>Data</Tab>
|
||||
<Tab>State</Tab>
|
||||
</TabList>
|
||||
<TabPanels flex="1" overflow="auto" background="gray.50">
|
||||
<TabPanel p={0}>{inspectForm}</TabPanel>
|
||||
<TabPanel p={0}>
|
||||
<ComponentList services={services} />
|
||||
<TabPanels overflow="hidden" height="full" flex="1">
|
||||
<TabPanel height="full" overflow="auto" p={0}>
|
||||
<Explorer services={services} />
|
||||
</TabPanel>
|
||||
<TabPanel height="full" overflow="auto" p={0}>
|
||||
<StructureTree services={services} />
|
||||
</TabPanel>
|
||||
<TabPanel height="full" overflow="auto" p={0}>
|
||||
<DataSource
|
||||
active={activeDataSource?.id ?? ''}
|
||||
services={services}
|
||||
/>
|
||||
</TabPanel>
|
||||
<TabPanel overflow="auto" p={0} height="100%">
|
||||
<StateViewer store={stateStore} />
|
||||
</TabPanel>
|
||||
</TabPanels>
|
||||
</Tabs>
|
||||
</Box>
|
||||
</Resizable>
|
||||
) : null}
|
||||
<Flex flex={1} position="relative" overflow="hidden">
|
||||
{appBox}
|
||||
{isDisplayRightMenu ? (
|
||||
<Resizable
|
||||
defaultSize={{
|
||||
width: 360,
|
||||
height: '100%',
|
||||
}}
|
||||
enable={{ left: true }}
|
||||
maxWidth={480}
|
||||
minWidth={300}
|
||||
>
|
||||
<Box
|
||||
height="full"
|
||||
borderLeftWidth="1px"
|
||||
borderColor="gray.400"
|
||||
position="relative"
|
||||
zIndex="0"
|
||||
>
|
||||
<Tabs
|
||||
align="center"
|
||||
textAlign="left"
|
||||
height="100%"
|
||||
display="flex"
|
||||
flexDirection="column"
|
||||
lazyBehavior="keepMounted"
|
||||
isLazy
|
||||
index={toolMenuTab}
|
||||
onChange={onRightTabChange}
|
||||
>
|
||||
<TabList background="gray.50">
|
||||
<Tab>Inspect</Tab>
|
||||
<Tab>Insert</Tab>
|
||||
</TabList>
|
||||
<TabPanels flex="1" overflow="auto" background="gray.50">
|
||||
<TabPanel p={0}>{inspectForm}</TabPanel>
|
||||
<TabPanel p={0}>
|
||||
<ComponentList services={services} />
|
||||
</TabPanel>
|
||||
</TabPanels>
|
||||
</Tabs>
|
||||
</Box>
|
||||
</Resizable>
|
||||
) : null}
|
||||
{activeDataSource && activeDataSourceType === DataSourceType.API ? (
|
||||
<ApiForm
|
||||
key={activeDataSource.id}
|
||||
@ -257,10 +268,12 @@ export const Editor: React.FC<Props> = observer(
|
||||
>
|
||||
<Box display="flex" height="100%" width="100%" flexDirection="column">
|
||||
<EditorHeader
|
||||
scale={scale}
|
||||
setScale={setScale}
|
||||
onPreview={onPreview}
|
||||
onRefresh={onRefresh}
|
||||
isDisplayLeftMenu={isDisplayLeftMenu}
|
||||
isDisplayRightMenu={isDisplayRightMenu}
|
||||
setIsDisplayLeftMenu={setIsDisplayLeftMenu}
|
||||
setIsDisplayRightMenu={setIsDisplayRightMenu}
|
||||
onCodeMode={() => setCodeMode(true)}
|
||||
/>
|
||||
<Box display="flex" flex="1" overflow="auto">
|
||||
|
||||
@ -1,27 +1,50 @@
|
||||
import React from 'react';
|
||||
import { Flex, Button, Box } from '@chakra-ui/react';
|
||||
import { AddIcon, MinusIcon } from '@chakra-ui/icons';
|
||||
import { Flex, Button, Icon } from '@chakra-ui/react';
|
||||
const SideBarIcon: React.FC<{
|
||||
transform?: string;
|
||||
color?: string;
|
||||
onClick?: () => void;
|
||||
}> = props => (
|
||||
<Icon cursor="pointer" {...props} viewBox="-5 -5 24 24" width="24px" height="24px">
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M13 2.5H8v11h5a.5.5 0 0 0 .5-.5V3a.5.5 0 0 0-.5-.5Zm-10 0h3.5v11H3a.5.5 0 0 1-.5-.5V3a.5.5 0 0 1 .5-.5ZM3 1a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V3a2 2 0 0 0-2-2H3Zm1.5 11.5a1 1 0 1 0 0-2 1 1 0 0 0 0 2Zm1-4.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0Zm-1-2.5a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
</Icon>
|
||||
);
|
||||
|
||||
export const EditorHeader: React.FC<{
|
||||
scale: number;
|
||||
setScale: (v: number) => void;
|
||||
isDisplayLeftMenu: boolean;
|
||||
isDisplayRightMenu: boolean;
|
||||
setIsDisplayLeftMenu: (show: boolean) => void;
|
||||
setIsDisplayRightMenu: (show: boolean) => void;
|
||||
onPreview: () => void;
|
||||
onCodeMode: () => void;
|
||||
onRefresh: () => void;
|
||||
}> = ({ scale, setScale, onPreview, onCodeMode, onRefresh }) => {
|
||||
}> = ({
|
||||
onPreview,
|
||||
onCodeMode,
|
||||
onRefresh,
|
||||
setIsDisplayLeftMenu,
|
||||
setIsDisplayRightMenu,
|
||||
isDisplayLeftMenu,
|
||||
isDisplayRightMenu,
|
||||
}) => {
|
||||
return (
|
||||
<Flex p={2} borderBottomWidth="2px" borderColor="gray.200" align="center">
|
||||
<Flex flex="1" />
|
||||
<Flex flex="1" align="center" justify="center">
|
||||
<Button size="sm" disabled={scale <= 50} onClick={() => setScale(scale - 10)}>
|
||||
<MinusIcon />
|
||||
</Button>
|
||||
<Box fontSize="sm" mx="2" width={10} textAlign="center">
|
||||
{scale}%
|
||||
</Box>
|
||||
<Button size="sm" disabled={scale >= 100} onClick={() => setScale(scale + 10)}>
|
||||
<AddIcon />
|
||||
</Button>
|
||||
<SideBarIcon
|
||||
color={isDisplayLeftMenu ? '#000' : '#eee'}
|
||||
onClick={() => setIsDisplayLeftMenu(!isDisplayLeftMenu)}
|
||||
/>
|
||||
<SideBarIcon
|
||||
transform="rotateY(180deg)"
|
||||
color={isDisplayRightMenu ? '#000' : '#eee'}
|
||||
onClick={() => setIsDisplayRightMenu(!isDisplayRightMenu)}
|
||||
/>
|
||||
</Flex>
|
||||
<Flex flex="1" justify="end">
|
||||
<Button colorScheme="blue" mr={3} onClick={onCodeMode}>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user