mirror of
https://github.com/AppFlowy-IO/AppFlowy.git
synced 2024-08-30 18:12:39 +00:00
chore: move constants
This commit is contained in:
ascarbek
parent
2d8182c503
commit
91e5219627
@ -0,0 +1,4 @@
|
||||
export const INITIAL_FOLDER_HEIGHT = 40;
|
||||
export const PAGE_ITEM_HEIGHT = 40;
|
||||
export const ANIMATION_DURATION = 300;
|
||||
export const NAV_PANEL_MINIMUM_WIDTH = 200;
|
||||
@ -1,8 +1,7 @@
|
||||
import { ReactNode, useEffect, useState } from 'react';
|
||||
import { HeaderPanel } from './HeaderPanel/HeaderPanel';
|
||||
import { FooterPanel } from './FooterPanel';
|
||||
|
||||
const ANIMATION_DURATION = 300;
|
||||
import { ANIMATION_DURATION } from '../_shared/constants';
|
||||
|
||||
export const MainPanel = ({
|
||||
left,
|
||||
|
||||
@ -9,10 +9,7 @@ import { useError } from '../../error/Error.hooks';
|
||||
import { AppObserver } from '../../../stores/effects/folder/app/app_observer';
|
||||
import { activePageIdActions } from '../../../stores/reducers/activePageId/slice';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
|
||||
const initialFolderHeight = 40;
|
||||
const initialPageHeight = 40;
|
||||
const animationDuration = 500;
|
||||
import { INITIAL_FOLDER_HEIGHT, PAGE_ITEM_HEIGHT } from '../../_shared/constants';
|
||||
|
||||
export const useFolderEvents = (folder: IFolder, pages: IPage[]) => {
|
||||
const appDispatch = useAppDispatch();
|
||||
@ -27,7 +24,7 @@ export const useFolderEvents = (folder: IFolder, pages: IPage[]) => {
|
||||
const [showRenamePopup, setShowRenamePopup] = useState(false);
|
||||
|
||||
// UI configurations
|
||||
const [folderHeight, setFolderHeight] = useState(`${initialFolderHeight}px`);
|
||||
const [folderHeight, setFolderHeight] = useState(`${INITIAL_FOLDER_HEIGHT}px`);
|
||||
|
||||
// Observers
|
||||
const appObserver = new AppObserver(folder.id);
|
||||
@ -62,15 +59,15 @@ export const useFolderEvents = (folder: IFolder, pages: IPage[]) => {
|
||||
|
||||
useEffect(() => {
|
||||
if (showPages) {
|
||||
setFolderHeight(`${initialFolderHeight + pages.length * initialPageHeight}px`);
|
||||
setFolderHeight(`${INITIAL_FOLDER_HEIGHT + pages.length * PAGE_ITEM_HEIGHT}px`);
|
||||
}
|
||||
}, [pages]);
|
||||
|
||||
const onFolderNameClick = () => {
|
||||
if (showPages) {
|
||||
setFolderHeight(`${initialFolderHeight}px`);
|
||||
setFolderHeight(`${INITIAL_FOLDER_HEIGHT}px`);
|
||||
} else {
|
||||
setFolderHeight(`${initialFolderHeight + pages.length * initialPageHeight}px`);
|
||||
setFolderHeight(`${INITIAL_FOLDER_HEIGHT + pages.length * PAGE_ITEM_HEIGHT}px`);
|
||||
}
|
||||
setShowPages(!showPages);
|
||||
};
|
||||
@ -228,7 +225,6 @@ export const useFolderEvents = (folder: IFolder, pages: IPage[]) => {
|
||||
|
||||
closePopup,
|
||||
folderHeight,
|
||||
animationDuration,
|
||||
setOffsetTop,
|
||||
};
|
||||
};
|
||||
|
||||
@ -10,6 +10,7 @@ import { Button } from '../../_shared/Button';
|
||||
import { RenamePopup } from './RenamePopup';
|
||||
import { useEffect, useRef, useState } from 'react';
|
||||
import { DropDownShowSvg } from '../../_shared/svg/DropDownShowSvg';
|
||||
import { ANIMATION_DURATION } from '../../_shared/constants';
|
||||
|
||||
let timeoutHandle: any;
|
||||
|
||||
@ -43,7 +44,6 @@ export const FolderItem = ({
|
||||
|
||||
closePopup,
|
||||
folderHeight,
|
||||
animationDuration,
|
||||
setOffsetTop,
|
||||
} = useFolderEvents(folder, pages);
|
||||
|
||||
@ -54,7 +54,7 @@ export const FolderItem = ({
|
||||
if (showPages) {
|
||||
timeoutHandle = setTimeout(() => {
|
||||
setHideOverflow(!showPages);
|
||||
}, animationDuration);
|
||||
}, ANIMATION_DURATION);
|
||||
} else {
|
||||
setHideOverflow(!showPages);
|
||||
}
|
||||
@ -70,7 +70,7 @@ export const FolderItem = ({
|
||||
<div className={'relative'} ref={el}>
|
||||
<div
|
||||
className={`relative my-2 ${hideOverflow ? 'overflow-hidden' : ''} transition-all `}
|
||||
style={{ height: folderHeight, transitionDuration: `${animationDuration}ms` }}
|
||||
style={{ height: folderHeight, transitionDuration: `${ANIMATION_DURATION}ms` }}
|
||||
>
|
||||
<div
|
||||
onClick={() => onFolderNameClick()}
|
||||
|
||||
@ -1,79 +0,0 @@
|
||||
import { AppLogo } from '../AppLogo';
|
||||
import { WorkspaceUser } from '../WorkspaceUser';
|
||||
import { FolderItem } from './FolderItem';
|
||||
import { PluginsButton } from './PluginsButton';
|
||||
import { TrashButton } from './TrashButton';
|
||||
import { NewFolderButton } from './NewFolderButton';
|
||||
import { IFolder } from '../../../stores/reducers/folders/slice';
|
||||
import { IPage } from '../../../stores/reducers/pages/slice';
|
||||
import { useEffect, useRef, useState } from 'react';
|
||||
|
||||
const animationDuration = 500;
|
||||
|
||||
export const NavigationFloatingPanel = ({
|
||||
onFixNavigationClick,
|
||||
slideInFloatingPanel,
|
||||
folders,
|
||||
pages,
|
||||
onPageClick,
|
||||
setWidth,
|
||||
}: {
|
||||
onFixNavigationClick: () => void;
|
||||
slideInFloatingPanel: boolean;
|
||||
folders: IFolder[];
|
||||
pages: IPage[];
|
||||
onPageClick: (page: IPage) => void;
|
||||
setWidth: (v: number) => void;
|
||||
}) => {
|
||||
const el = useRef<HTMLDivElement>(null);
|
||||
const [panelLeft, setPanelLeft] = useState(0);
|
||||
|
||||
useEffect(() => {
|
||||
if (!el?.current) return;
|
||||
|
||||
const { width } = el.current.getBoundingClientRect();
|
||||
setWidth(width);
|
||||
|
||||
if (slideInFloatingPanel) {
|
||||
setPanelLeft(0);
|
||||
} else {
|
||||
setPanelLeft(-width);
|
||||
}
|
||||
}, [el.current, slideInFloatingPanel]);
|
||||
|
||||
return (
|
||||
<div
|
||||
ref={el}
|
||||
className={
|
||||
'fixed top-16 z-10 flex flex-col justify-between rounded-tr rounded-br border border-l-0 border-shade-4 bg-white text-sm shadow-md transition-all'
|
||||
}
|
||||
style={{ left: panelLeft, transitionDuration: `${animationDuration}ms` }}
|
||||
>
|
||||
<div className={'flex flex-col'}>
|
||||
<AppLogo iconToShow={'show'} onShowMenuClick={onFixNavigationClick}></AppLogo>
|
||||
|
||||
<WorkspaceUser></WorkspaceUser>
|
||||
|
||||
<div className={'flex flex-col px-2'}>
|
||||
{folders.map((folder, index) => (
|
||||
<FolderItem
|
||||
key={index}
|
||||
folder={folder}
|
||||
pages={pages.filter((page) => page.folderId === folder.id)}
|
||||
onPageClick={onPageClick}
|
||||
></FolderItem>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className={'flex flex-col'}>
|
||||
<div className={'border-b border-shade-6 px-2 pb-4'}>
|
||||
<PluginsButton></PluginsButton>
|
||||
<TrashButton></TrashButton>
|
||||
</div>
|
||||
|
||||
<NewFolderButton></NewFolderButton>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@ -7,10 +7,10 @@ import { NavigationResizer } from './NavigationResizer';
|
||||
import { IFolder } from '../../../stores/reducers/folders/slice';
|
||||
import { IPage } from '../../../stores/reducers/pages/slice';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import React from 'react';
|
||||
|
||||
const MINIMUM_WIDTH = 200;
|
||||
const ANIMATION_DURATION = 300;
|
||||
import React, { useEffect, useRef } from 'react';
|
||||
import { useDispatch } from 'react-redux';
|
||||
import { useAppSelector } from '../../../stores/store';
|
||||
import { ANIMATION_DURATION, NAV_PANEL_MINIMUM_WIDTH } from '../../_shared/constants';
|
||||
|
||||
export const NavigationPanel = ({
|
||||
onHideMenuClick,
|
||||
@ -27,6 +27,12 @@ export const NavigationPanel = ({
|
||||
pages: IPage[];
|
||||
onPageClick: (page: IPage) => void;
|
||||
}) => {
|
||||
const el = useRef<HTMLDivElement>(null);
|
||||
const dispatch = useDispatch();
|
||||
const foldersStore = useAppSelector((state) => state.folders);
|
||||
const pagesStore = useAppSelector((state) => state.pages);
|
||||
const activePageId = useAppSelector((state) => state.activePageId);
|
||||
|
||||
return (
|
||||
<>
|
||||
<div
|
||||
@ -40,7 +46,9 @@ export const NavigationPanel = ({
|
||||
<div className={'flex flex-col'}>
|
||||
<AppLogo iconToShow={'hide'} onHideMenuClick={onHideMenuClick}></AppLogo>
|
||||
<WorkspaceUser></WorkspaceUser>
|
||||
<WorkspaceApps folders={folders} pages={pages} onPageClick={onPageClick} />
|
||||
<div className={'flex flex-col overflow-auto px-2'} style={{ height: 'calc(100vh - 300px)' }} ref={el}>
|
||||
<WorkspaceApps folders={folders} pages={pages} onPageClick={onPageClick} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className={'flex flex-col'}>
|
||||
@ -58,7 +66,7 @@ export const NavigationPanel = ({
|
||||
<NewFolderButton></NewFolderButton>
|
||||
</div>
|
||||
</div>
|
||||
<NavigationResizer minWidth={MINIMUM_WIDTH}></NavigationResizer>
|
||||
<NavigationResizer minWidth={NAV_PANEL_MINIMUM_WIDTH}></NavigationResizer>
|
||||
</>
|
||||
);
|
||||
};
|
||||
@ -70,7 +78,7 @@ type AppsContext = {
|
||||
};
|
||||
|
||||
const WorkspaceApps: React.FC<AppsContext> = ({ folders, pages, onPageClick }) => (
|
||||
<div className={'flex flex-col overflow-auto px-2'} style={{ height: 'calc(100vh - 300px)' }}>
|
||||
<>
|
||||
{folders.map((folder, index) => (
|
||||
<FolderItem
|
||||
key={index}
|
||||
@ -79,7 +87,7 @@ const WorkspaceApps: React.FC<AppsContext> = ({ folders, pages, onPageClick }) =
|
||||
onPageClick={onPageClick}
|
||||
></FolderItem>
|
||||
))}
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
|
||||
export const TestBackendButton = () => {
|
||||
|
||||
@ -9,6 +9,7 @@ import { usePageEvents } from './PageItem.hooks';
|
||||
import { RenamePopup } from './RenamePopup';
|
||||
import { ViewLayoutTypePB } from '../../../../services/backend';
|
||||
import { useEffect, useRef } from 'react';
|
||||
import { PAGE_ITEM_HEIGHT } from '../../_shared/constants';
|
||||
|
||||
export const PageItem = ({ page, onPageClick }: { page: IPage; onPageClick: () => void }) => {
|
||||
const {
|
||||
@ -29,15 +30,16 @@ export const PageItem = ({ page, onPageClick }: { page: IPage; onPageClick: () =
|
||||
|
||||
useEffect(() => {
|
||||
setOffsetTop(el.current?.offsetTop || 0);
|
||||
}, [el]);
|
||||
}, [el.current]);
|
||||
|
||||
return (
|
||||
<div className={'relative'} ref={el}>
|
||||
<div
|
||||
onClick={() => onPageClick()}
|
||||
className={`flex cursor-pointer items-center justify-between rounded-lg py-2 pl-8 pr-4 hover:bg-surface-2 ${
|
||||
className={`flex cursor-pointer items-center justify-between rounded-lg pl-8 pr-4 hover:bg-surface-2 ${
|
||||
activePageId === page.id ? 'bg-surface-2' : ''
|
||||
}`}
|
||||
style={{ height: PAGE_ITEM_HEIGHT }}
|
||||
>
|
||||
<button className={'flex min-w-0 flex-1 items-center'}>
|
||||
<i className={'ml-1 mr-1 h-[16px] w-[16px]'}>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user