Mirrored_Repos/AppFlowy
1
0
Fork 0
mirror of https://github.com/AppFlowy-IO/AppFlowy.git synced 2024-08-30 18:12:39 +00:00
Code Issues Packages Projects Releases Wiki Activity

chore: smooth scroll and scroll to new folder

Browse Source
This commit is contained in:
ascarbek 2023-03-10 18:58:14 +06:00
parent 67e396aadf
commit 7e3273c708
2 changed files with 22 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
frontend/appflowy_tauri/src/appflowy_app/components/layout/NavigationPanel/NavigationPanel.tsx
View File

@ -7,7 +7,7 @@ import { NavigationResizer } from './NavigationResizer';
import { IFolder } from '../../../stores/reducers/folders/slice'; import { IFolder } from '../../../stores/reducers/folders/slice';
import { IPage } from '../../../stores/reducers/pages/slice'; import { IPage } from '../../../stores/reducers/pages/slice';
import { useNavigate } from 'react-router-dom'; import { useNavigate } from 'react-router-dom';
import React, { useEffect, useRef } from 'react'; import React, { useEffect, useRef, useState } from 'react';
import { useDispatch } from 'react-redux'; import { useDispatch } from 'react-redux';
import { useAppSelector } from '../../../stores/store'; import { useAppSelector } from '../../../stores/store';
import { import {
@ -38,6 +38,7 @@ export const NavigationPanel = ({
const foldersStore = useAppSelector((state) => state.folders); const foldersStore = useAppSelector((state) => state.folders);
const pagesStore = useAppSelector((state) => state.pages); const pagesStore = useAppSelector((state) => state.pages);
const activePageId = useAppSelector((state) => state.activePageId); const activePageId = useAppSelector((state) => state.activePageId);
const [maxHeight, setMaxHeight] = useState(0);
useEffect(() => { useEffect(() => {
setTimeout(() => { setTimeout(() => {
@ -72,11 +73,21 @@ export const NavigationPanel = ({
console.log(`scrollTop: ${scrollTop}, elHeight: ${elHeight.toFixed(0)}, height: ${height}`); console.log(`scrollTop: ${scrollTop}, elHeight: ${elHeight.toFixed(0)}, height: ${height}`);
if (scrollTop + elHeight < height) { if (scrollTop + elHeight < height) {
el.current.scrollTo(0, height - elHeight); el.current.scrollTo({ top: height - elHeight, behavior: 'smooth' });
} }
}, ANIMATION_DURATION); }, ANIMATION_DURATION);
}, [activePageId]); }, [activePageId]);
useEffect(() => {
setMaxHeight(foldersStore.length * (INITIAL_FOLDER_HEIGHT + FOLDER_MARGIN) + pagesStore.length * PAGE_ITEM_HEIGHT);
}, [foldersStore, pagesStore]);
const scrollDown = () => {
setTimeout(() => {
el?.current?.scrollTo({ top: maxHeight, behavior: 'smooth' });
}, ANIMATION_DURATION);
};
return ( return (
<> <>
<div <div
@ -109,7 +120,7 @@ export const NavigationPanel = ({
</div> </div>
{/*New Folder Button*/} {/*New Folder Button*/}
<NewFolderButton></NewFolderButton> <NewFolderButton scrollDown={scrollDown}></NewFolderButton>
</div> </div>
</div> </div>
<NavigationResizer minWidth={NAV_PANEL_MINIMUM_WIDTH}></NavigationResizer> <NavigationResizer minWidth={NAV_PANEL_MINIMUM_WIDTH}></NavigationResizer>

10
frontend/appflowy_tauri/src/appflowy_app/components/layout/NavigationPanel/NewFolderButton.tsx
View File

@ -1,11 +1,17 @@
import AddSvg from '../../_shared/svg/AddSvg'; import AddSvg from '../../_shared/svg/AddSvg';
import { useNewFolder } from './NewFolderButton.hooks'; import { useNewFolder } from './NewFolderButton.hooks';
export const NewFolderButton = () => { export const NewFolderButton = ({ scrollDown }: { scrollDown: () => void }) => {
const { onNewFolder } = useNewFolder(); const { onNewFolder } = useNewFolder();
return ( return (
<button onClick={() => onNewFolder()} className={'flex h-[50px] w-full items-center px-6 hover:bg-surface-2'}> <button
onClick={() => {
void onNewFolder();
scrollDown();
}}
className={'flex h-[50px] w-full items-center px-6 hover:bg-surface-2'}
>
<div className={'mr-2 rounded-full bg-main-accent text-white'}> <div className={'mr-2 rounded-full bg-main-accent text-white'}>
<div className={'h-[24px] w-[24px] text-white'}> <div className={'h-[24px] w-[24px] text-white'}>
<AddSvg></AddSvg> <AddSvg></AddSvg>