client: scroll active label into view

This commit is contained in:
fantasticit 2022-06-17 21:53:00 +08:00
parent 1785e7a220
commit ae373fbe48
1 changed files with 25 additions and 3 deletions

View File

@ -5,7 +5,8 @@ import { DocumentCreator as DocumenCreatorForm } from 'components/document/creat
import { CREATE_DOCUMENT, event, triggerCreateDocument } from 'event'; import { CREATE_DOCUMENT, event, triggerCreateDocument } from 'event';
import { useToggle } from 'hooks/use-toggle'; import { useToggle } from 'hooks/use-toggle';
import Link from 'next/link'; import Link from 'next/link';
import React, { useCallback, useEffect, useState } from 'react'; import React, { useCallback, useEffect, useRef, useState } from 'react';
import scrollIntoView from 'scroll-into-view-if-needed';
import styles from './index.module.scss'; import styles from './index.module.scss';
@ -64,14 +65,17 @@ const AddDocument = () => {
); );
}; };
let scrollTimer;
export const Tree = ({ data, docAsLink, getDocLink, parentIds, activeId, isShareMode = false }) => { export const Tree = ({ data, docAsLink, getDocLink, parentIds, activeId, isShareMode = false }) => {
const $container = useRef<HTMLDivElement>(null);
const [expandedKeys, setExpandedKeys] = useState(parentIds); const [expandedKeys, setExpandedKeys] = useState(parentIds);
const renderBtn = useCallback((node) => <Actions key={node.id} node={node} />, []); const renderBtn = useCallback((node) => <Actions key={node.id} node={node} />, []);
const renderLabel = useCallback( const renderLabel = useCallback(
(label, item) => ( (label, item) => (
<div className={styles.treeItemWrap}> <div className={styles.treeItemWrap} id={`item-${item.id}`}>
<Link href={docAsLink} as={getDocLink(item.id)}> <Link href={docAsLink} as={getDocLink(item.id)}>
<a className={styles.left}> <a className={styles.left}>
<Typography.Text <Typography.Text
@ -95,8 +99,26 @@ export const Tree = ({ data, docAsLink, getDocLink, parentIds, activeId, isShare
setExpandedKeys(parentIds); setExpandedKeys(parentIds);
}, [parentIds]); }, [parentIds]);
useEffect(() => {
clearTimeout(scrollTimer);
scrollTimer = setTimeout(() => {
const target = $container.current.querySelector(`#item-${activeId}`);
if (!target) return;
target.scrollIntoView();
scrollIntoView(target, {
behavior: 'smooth',
scrollMode: 'if-needed',
block: 'center',
});
}, 500);
return () => {
clearTimeout(scrollTimer);
};
}, [activeId]);
return ( return (
<div className={styles.treeInnerWrap}> <div className={styles.treeInnerWrap} ref={$container}>
<SemiTree <SemiTree
treeData={data} treeData={data}
renderLabel={renderLabel} renderLabel={renderLabel}