mirror/sunmao-ui
2
0
Fork 0
mirror of https://github.com/smartxworks/sunmao-ui.git synced 2024-11-21 03:15:49 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: scroll the tree item into view when select the component

Browse Source
This commit is contained in:
MrWindlike 2022-05-10 11:32:20 +08:00
parent ece9a427b6
commit 40813e06bc
2 changed files with 14 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
packages/editor/src/components/StructureTree/ComponentItemView.tsx
View File

@ -90,6 +90,7 @@ export const ComponentItemView: React.FC<Props> = props => {
return (
<Box
id={`tree-item-${id}`}
width="full"
padding="1"
onMouseOver={() => setIsHover(true)}

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

@ -1,4 +1,4 @@
import React, { useMemo } from 'react';
import React, { useMemo, useRef, useEffect } from 'react';
import { ComponentSchema } from '@sunmao-ui/core';
import { Box, Text, VStack } from '@chakra-ui/react';
import { ComponentTree } from './ComponentTree';
@ -20,9 +20,12 @@ type Props = {
export const StructureTree: React.FC<Props> = props => {
const { components, selectedComponentId, onSelectComponent, services } = props;
const wrapperRef = useRef<HTMLDivElement>(null);
const realComponents = useMemo(() => {
return components.filter(c => c.type !== `${CORE_VERSION}/${CoreComponentName.Dummy}`);
return components.filter(
c => c.type !== `${CORE_VERSION}/${CoreComponentName.Dummy}`
);
}, [components]);
const componentEles = useMemo(() => {
@ -45,9 +48,15 @@ export const StructureTree: React.FC<Props> = props => {
));
}, [realComponents, selectedComponentId, onSelectComponent, services]);
useEffect(() => {
wrapperRef.current
?.querySelector(`#tree-item-${selectedComponentId}`)
?.scrollIntoView();
}, [selectedComponentId]);
return (
<VStack spacing="2" padding="5" alignItems="start">
<Text fontSize="lg" fontWeight="bold">
<VStack ref={wrapperRef} spacing="2" padding="4" alignItems="start" overflow="auto">
<Text fontSize="lg" fontWeight="bold" mb="0.5rem">
Components
</Text>
{componentEles.length > 0 ? componentEles : <Placeholder services={services} />}