mirror/sunmao-ui
2
0
Fork 0
mirror of https://github.com/smartxworks/sunmao-ui.git synced 2025-04-12 21:50:23 +08:00
Code Issues Packages Projects Releases Wiki Activity

improve: keep the scroll bar of each panel of explore menu tabs independent

Browse Source
This commit is contained in:
xzdry 2022-05-12 09:46:04 +08:00
parent 2cfd2516ac
commit c03707ec41
2 changed files with 12 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
packages/editor/src/components/Editor.tsx
View File

@ -114,10 +114,7 @@ export const Editor: React.FC<Props> = observer(
const appComponent = useMemo(() => {
return isDisplayApp ? (
<ErrorBoundary>
<App
options={app}
gridCallbacks={gridCallbacks}
/>
<App options={app} gridCallbacks={gridCallbacks} />
</ErrorBoundary>
) : null;
}, [App, app, gridCallbacks, isDisplayApp]);
@ -198,7 +195,7 @@ export const Editor: React.FC<Props> = observer(
display="flex"
flexDirection="column"
textAlign="left"
lazyBehavior='keepMounted'
lazyBehavior="keepMounted"
isLazy
index={explorerMenuTab}
onChange={activatedTab => {
@ -211,11 +208,11 @@ export const Editor: React.FC<Props> = observer(
<Tab>Data</Tab>
<Tab>State</Tab>
</TabList>
<TabPanels flex="1" overflow="auto">
<TabPanel p={0}>
<TabPanels overflow='hidden' height="full" flex="1">
<TabPanel height="full" overflow="auto" p={0}>
<Explorer services={services} />
</TabPanel>
<TabPanel p={0}>
<TabPanel height="full" overflow="auto" p={0}>
<StructureTree
components={components}
selectedComponentId={selectedComponentId}
@ -225,10 +222,10 @@ export const Editor: React.FC<Props> = observer(
services={services}
/>
</TabPanel>
<TabPanel p={0}>
<TabPanel height="full" overflow="auto" p={0}>
<DataSource active={activeDataSource?.id ?? ''} services={services} />
</TabPanel>
<TabPanel p={0} height="100%">
<TabPanel overflow="auto" p={0} height="100%">
<StateViewer store={stateStore} />
</TabPanel>
</TabPanels>

7
packages/editor/src/components/StructureTree/StructureTree.tsx
View File

@ -51,11 +51,14 @@ export const StructureTree: React.FC<Props> = props => {
useEffect(() => {
wrapperRef.current
?.querySelector(`#tree-item-${selectedComponentId}`)
?.scrollIntoView();
?.scrollIntoView({
behavior:'smooth',
block:'center'
});
}, [selectedComponentId]);
return (
<VStack ref={wrapperRef} spacing="2" padding="4" alignItems="start" overflow="auto">
<VStack ref={wrapperRef} height='full' spacing="2" padding="4" alignItems="start" overflowWrap='break-word' overflowX='hidden' overflowY="auto">
<Text fontSize="lg" fontWeight="bold" mb="0.5rem">
Components
</Text>