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

Merge pull request #542 from smartxworks/fix/scroll

Browse Source 
fix(structureTree): if a component item is already in viewport, then don't scroll it into view
This commit is contained in:
tanbowensg 2022-08-01 14:05:06 +08:00 committed by GitHub
commit 158613d97e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 21 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -35,8 +35,7 @@ export const StructureTree: React.FC<Props> = props => {
const [search, setSearch] = useState('');
const { components, onSelectComponent, services } = props;
const { editorStore } = services;
const wrapperRef = useRef<HTMLDivElement>(null);
const scrollWrapper = useRef<HTMLDivElement>(null);
const onSelectOption = useCallback(
({ item }: { item: Item }) => {
onSelectComponent(item.value);
@ -49,10 +48,19 @@ export const StructureTree: React.FC<Props> = props => {
// wait the component tree to be expanded
setTimeout(() => {
const selectedElement: HTMLElement | undefined | null =
wrapperRef.current?.querySelector(`#tree-item-${selectedId}`);
scrollWrapper.current?.querySelector(`#tree-item-${selectedId}`);
if (selectedElement) {
scrollIntoView(selectedElement, { time: 0, align: { lockX: true } });
const wrapperRect = scrollWrapper.current?.getBoundingClientRect();
const eleRect = selectedElement?.getBoundingClientRect();
if (
selectedElement &&
eleRect &&
wrapperRect &&
(eleRect.top < wrapperRect.top ||
eleRect.top > wrapperRect.top + wrapperRect?.height)
) {
// check selected element is outside of view
scrollIntoView(selectedElement, { time: 300, align: { lockX: true } });
}
});
}
@ -90,7 +98,6 @@ export const StructureTree: React.FC<Props> = props => {
return (
<VStack
ref={wrapperRef}
height="full"
paddingY="4"
alignItems="start"
@ -123,7 +130,14 @@ export const StructureTree: React.FC<Props> = props => {
</AutoCompleteList>
</AutoComplete>
</VStack>
<Box width="full" flex={1} minHeight={0} overflowY="auto" overflowX="hidden">
<Box
ref={scrollWrapper}
width="full"
flex={1}
minHeight={0}
overflowY="auto"
overflowX="hidden"
>
{componentEles.length > 0 ? (
componentEles
) : (