(null);
const isDesktop = currentDeviceType === DeviceType.desktop;
const infoPanelIsVisible = React.useMemo(
() => isDesktop && (!isEmptyPage || (isEmptyPage && isRoom)),
- [isDesktop, isEmptyPage, isRoom]
+ [isDesktop, isEmptyPage, isRoom],
);
- const onMissClick = React.useCallback(
- (e) => {
- e.preventDefault;
- const path = e.path || (e.composedPath && e.composedPath());
-
- if (!firstClick) {
- !path.includes(dropBoxRef.current) ? toggleDropBox() : null;
- } else {
- setFirstClick((prev) => !prev);
- }
- },
- [firstClick, toggleDropBox, setFirstClick]
- );
-
- const onClickAvailable = React.useCallback(
- (id, isRootRoom) => {
- onClickFolder && onClickFolder(id, isRootRoom);
- toggleDropBox();
- },
- [onClickFolder, toggleDropBox]
- );
-
- const toggleDropBox = () => {
+ const toggleDropBox = useCallback(() => {
if (navigationItems.length === 0) return;
if (isRootFolder) return setIsOpen(false);
setIsOpen((prev) => !prev);
- setDropBoxWidth(DomHelpers.getOuterWidth(containerRef.current));
+ if (containerRef.current)
+ setDropBoxWidth(DomHelpers.getOuterWidth(containerRef.current));
- const { top } = DomHelpers.getOffset(containerRef.current);
+ // const { top } = DomHelpers.getOffset(containerRef.current);
- setMaxHeight(`calc(100vh - ${top}px)`);
+ // setMaxHeight(`calc(100vh - ${top}px)`);
setFirstClick(true);
- };
+ }, [isRootFolder, navigationItems?.length]);
+
+ const onMissClick = React.useCallback(
+ (e: MouseEvent) => {
+ e.preventDefault();
+ const path = e.composedPath && e.composedPath();
+
+ if (!firstClick) {
+ if (dropBoxRef.current && !path.includes(dropBoxRef.current))
+ toggleDropBox();
+ } else {
+ setFirstClick((prev) => !prev);
+ }
+ },
+ [firstClick, toggleDropBox, setFirstClick],
+ );
+
+ const onClickAvailable = React.useCallback(
+ (id: number | string, isRootRoom: boolean) => {
+ onClickFolder?.(id, isRootRoom);
+ toggleDropBox();
+ },
+ [onClickFolder, toggleDropBox],
+ );
const onResize = React.useCallback(() => {
- setDropBoxWidth(DomHelpers.getOuterWidth(containerRef.current));
- }, [containerRef.current]);
+ if (containerRef.current)
+ setDropBoxWidth(DomHelpers.getOuterWidth(containerRef.current));
+ }, []);
React.useEffect(() => {
if (isOpen) {
@@ -129,7 +131,7 @@ const Navigation = ({
const onBackToParentFolderAction = React.useCallback(() => {
setIsOpen((val) => !val);
- onBackToParentFolder && onBackToParentFolder();
+ onBackToParentFolder?.();
}, [onBackToParentFolder]);
const showRootFolderNavigation =
@@ -146,10 +148,16 @@ const Navigation = ({
isOpen={isOpen}
isRootFolder={isRootFolder}
onClick={toggleDropBox}
+ isRootFolderTitle={false}
/>
);
+ const onTextClick = React.useCallback(() => {
+ onClickFolder(navigationItems[navigationItems.length - 2].id, false);
+ setIsOpen(false);
+ }, [navigationItems, onClickFolder]);
+
const navigationTitleContainerNode = showRootFolderNavigation ? (
{
- {
- onClickFolder(
- navigationItems[navigationItems.length - 2].id,
- false
- );
- setIsOpen(false);
- }
- }}
+ onClick={onTextClick}
/>
{navigationTitleNode}
@@ -185,7 +185,7 @@ const Navigation = ({
@@ -193,14 +193,10 @@ const Navigation = ({
{...rest}
isDesktop={isDesktop}
ref={dropBoxRef}
- maxHeight={maxHeight}
dropBoxWidth={dropBoxWidth}
- sectionHeight={context.sectionHeight}
- showText={showText}
+ sectionHeight={context.sectionHeight || 0}
isRootFolder={isRootFolder}
onBackToParentFolder={onBackToParentFolderAction}
- title={title}
- personal={personal}
canCreate={canCreate}
navigationItems={navigationItems}
getContextOptionsFolder={getContextOptionsFolder}
@@ -210,10 +206,8 @@ const Navigation = ({
isInfoPanelVisible={isInfoPanelVisible}
onClickAvailable={onClickAvailable}
isDesktopClient={isDesktopClient}
- showRootFolderNavigation={showRootFolderNavigation}
withLogo={withLogo}
burgerLogo={burgerLogo}
- titleIcon={titleIcon}
currentDeviceType={currentDeviceType}
navigationTitleContainerNode={navigationTitleContainerNode}
/>
@@ -221,10 +215,8 @@ const Navigation = ({
)}
)}
@@ -247,13 +238,11 @@ const Navigation = ({
{navigationTitleContainerNode}
{isDesktop && isTrashFolder && !isEmptyPage && (
-
+
)}
{infoPanelIsVisible && !hideInfoPanel && (
void;
+
+export type TTitles = {
+ infoPanel?: string;
+ actions?: string;
+ contextMenu?: string;
+ trashWarning?: string;
+};
+
+export interface IArrowButtonProps {
+ isRootFolder: boolean;
+ onBackToParentFolder: TOnBackToParenFolder;
+}
+
+export interface IContextButtonProps {
+ className: string;
+ getData: TGetContextMenuModel;
+ withMenu?: boolean;
+ isTrashFolder?: boolean;
+ isMobile: boolean;
+ id: string;
+ title?: string;
+}
+
+export interface IPlusButtonProps {
+ className: string;
+ getData: TGetContextMenuModel;
+ withMenu?: boolean;
+ id?: string;
+ title?: string;
+ onPlusClick?: () => void;
+ isFrame?: boolean;
+}
+
+export interface IToggleInfoPanelButtonProps {
+ isRootFolder: boolean;
+ isInfoPanelVisible: boolean;
+ toggleInfoPanel: (e: React.MouseEvent) => void;
+ id?: string;
+ titles?: TTitles;
+}
+
+export interface IControlButtonProps {
+ isRootFolder: boolean;
+ canCreate: boolean;
+ getContextOptionsFolder: TGetContextMenuModel;
+ getContextOptionsPlus: TGetContextMenuModel;
+ isEmptyFilesList?: boolean;
+ isInfoPanelVisible: boolean;
+ toggleInfoPanel: () => void;
+ toggleDropBox?: () => void;
+ isDesktop: boolean;
+ titles?: TTitles;
+ withMenu?: boolean;
+ onPlusClick?: () => void;
+ isFrame?: boolean;
+ isPublicRoom?: boolean;
+ isTrashFolder?: boolean;
+ isMobile?: boolean;
+}
+
+export interface ITextProps {
+ title: string;
+ isOpen: boolean;
+ isRootFolder: boolean;
+ isRootFolderTitle: boolean;
+ onClick: () => void;
+ className?: string;
+}
+
+export interface INavigationLogoProps {
+ logo?: string;
+ burgerLogo: string;
+ className: string;
+}
+
+export type TOnNavigationItemClick = (
+ id: string | number,
+ isRootRoom: boolean,
+) => void;
+
+export interface INavigationItemProps {
+ id: string | number;
+ title: string;
+ isRoot: boolean;
+ isRootRoom: boolean;
+ onClick: TOnNavigationItemClick;
+ withLogo: boolean;
+ currentDeviceType: DeviceType;
+ style?: React.CSSProperties;
+}
+
+export type TNavigationItem = {
+ id: string | number;
+ title: string;
+ isRootRoom: boolean;
+};
+
+export type TRowData = [
+ TNavigationItem[],
+ TOnNavigationItemClick,
+ { withLogo: boolean; currentDeviceType: DeviceType },
+];
+
+export interface IDropBoxProps {
+ sectionHeight: number;
+ dropBoxWidth: number;
+ isRootFolder: boolean;
+ onBackToParentFolder: TOnBackToParenFolder;
+ canCreate: boolean;
+ navigationItems: TNavigationItem[];
+ getContextOptionsFolder: TGetContextMenuModel;
+ getContextOptionsPlus: TGetContextMenuModel;
+ toggleInfoPanel: () => void;
+ toggleDropBox: () => void;
+ onClickAvailable: TOnNavigationItemClick;
+ isInfoPanelVisible: boolean;
+ isDesktop: boolean;
+ isDesktopClient: boolean;
+ withLogo: boolean;
+ burgerLogo: string;
+ currentDeviceType: DeviceType;
+ navigationTitleContainerNode: React.ReactNode;
+}
+
+export interface INavigationProps {
+ tReady: boolean;
+ showText: boolean;
+ isRootFolder: boolean;
+ title: string;
+ canCreate: boolean;
+ isTabletView: boolean;
+ onClickFolder: TOnNavigationItemClick;
+ navigationItems: TNavigationItem[];
+ onBackToParentFolder: TOnBackToParenFolder;
+ getContextOptionsFolder: TGetContextMenuModel;
+ getContextOptionsPlus: TGetContextMenuModel;
+ isTrashFolder: boolean;
+ isEmptyFilesList: boolean;
+ clearTrash: () => void;
+ showFolderInfo: () => void;
+ isCurrentFolderInfo: boolean;
+ toggleInfoPanel: () => void;
+ isInfoPanelVisible: boolean;
+ titles: TTitles;
+ withMenu: boolean;
+ onPlusClick: () => void;
+ isEmptyPage: boolean;
+ isDesktop: boolean;
+ isRoom: boolean;
+ isFrame: boolean;
+ hideInfoPanel: () => void;
+ withLogo: boolean;
+ burgerLogo: string;
+ showRootFolderTitle: boolean;
+ isPublicRoom: boolean;
+ titleIcon: string;
+ currentDeviceType: DeviceType;
+ rootRoomTitle: string;
+}
diff --git a/packages/shared/components/navigation/index.ts b/packages/shared/components/navigation/index.ts
new file mode 100644
index 0000000000..76067c7e0a
--- /dev/null
+++ b/packages/shared/components/navigation/index.ts
@@ -0,0 +1,7 @@
+import Navigation from "./Navigation";
+
+import { TTitles, TNavigationItem } from "./Navigation.types";
+
+export type { TTitles, TNavigationItem };
+
+export default Navigation;
diff --git a/packages/shared/components/navigation/sub-components/ArrowBtn.tsx b/packages/shared/components/navigation/sub-components/ArrowBtn.tsx
new file mode 100644
index 0000000000..44cd8d3393
--- /dev/null
+++ b/packages/shared/components/navigation/sub-components/ArrowBtn.tsx
@@ -0,0 +1,27 @@
+import React from "react";
+
+import ArrowPathReactSvgUrl from "PUBLIC_DIR/images/arrow.path.react.svg?url";
+
+import { IconButton } from "../../icon-button";
+
+import { IArrowButtonProps } from "../Navigation.types";
+
+const ArrowButton = ({
+ isRootFolder,
+ onBackToParentFolder,
+}: IArrowButtonProps) => {
+ return !isRootFolder ? (
+
+ ) : null;
+};
+
+export default React.memo(ArrowButton);
diff --git a/packages/common/components/Navigation/sub-components/context-btn.js b/packages/shared/components/navigation/sub-components/ContextBtn.tsx
similarity index 52%
rename from packages/common/components/Navigation/sub-components/context-btn.js
rename to packages/shared/components/navigation/sub-components/ContextBtn.tsx
index ceab91c17f..156f6e3a7e 100644
--- a/packages/common/components/Navigation/sub-components/context-btn.js
+++ b/packages/shared/components/navigation/sub-components/ContextBtn.tsx
@@ -1,23 +1,36 @@
import React, { useState, useRef } from "react";
-import PropTypes from "prop-types";
+
import VerticalDotsReactSvgUrl from "PUBLIC_DIR/images/icons/17/vertical-dots.react.svg?url";
-import { IconButton } from "@docspace/shared/components/icon-button";
-import { ContextMenu } from "@docspace/shared/components/context-menu";
-const ContextButton = (props) => {
+import { IconButton } from "../../icon-button";
+import { ContextMenu, TContextMenuRef } from "../../context-menu";
+
+import { IContextButtonProps } from "../Navigation.types";
+
+const ContextButton = ({
+ className,
+ getData,
+ withMenu = true,
+ isTrashFolder,
+ isMobile,
+ id,
+ ...rest
+}: IContextButtonProps) => {
const [isOpen, setIsOpen] = useState(false);
- const ref = useRef(null);
- const menuRef = useRef(null);
+ const ref = useRef(null);
+ const menuRef = useRef(null);
- const { className, getData, withMenu, isTrashFolder, isMobile, ...rest } =
- props;
+ const toggle = (e: React.MouseEvent, open: boolean) => {
+ if (open) {
+ menuRef.current?.show(e);
+ } else {
+ menuRef.current?.hide(e);
+ }
- const toggle = (e, isOpen) => {
- isOpen ? menuRef.current.show(e) : menuRef.current.hide(e);
- setIsOpen(isOpen);
+ setIsOpen(open);
};
- const onClick = (e) => {
+ const onClick = (e: React.MouseEvent) => {
if (withMenu) toggle(e, !isOpen);
};
@@ -32,7 +45,7 @@ const ContextButton = (props) => {
@@ -48,14 +61,4 @@ const ContextButton = (props) => {
);
};
-ContextButton.propTypes = {
- className: PropTypes.string,
- getData: PropTypes.func.isRequired,
- id: PropTypes.string,
-};
-
-ContextButton.defaultProps = {
- withMenu: true,
-};
-
export default ContextButton;
diff --git a/packages/shared/components/navigation/sub-components/ControlBtn.tsx b/packages/shared/components/navigation/sub-components/ControlBtn.tsx
new file mode 100644
index 0000000000..616eb3a848
--- /dev/null
+++ b/packages/shared/components/navigation/sub-components/ControlBtn.tsx
@@ -0,0 +1,131 @@
+import React from "react";
+
+import { StyledControlButtonContainer } from "../Navigation.styled";
+import { IControlButtonProps } from "../Navigation.types";
+
+import ToggleInfoPanelButton from "./ToggleInfoPanelBtn";
+import PlusButton from "./PlusBtn";
+import ContextButton from "./ContextBtn";
+
+const ControlButtons = ({
+ isRootFolder,
+ canCreate,
+ getContextOptionsFolder,
+ getContextOptionsPlus,
+ isEmptyFilesList,
+ isInfoPanelVisible,
+ toggleInfoPanel,
+ toggleDropBox,
+ isDesktop,
+ titles,
+ withMenu,
+ onPlusClick,
+ isFrame,
+ isPublicRoom,
+ isTrashFolder,
+ isMobile,
+}: IControlButtonProps) => {
+ const toggleInfoPanelAction = () => {
+ toggleInfoPanel?.();
+ toggleDropBox?.();
+ };
+
+ return (
+
+ {!isRootFolder || (isTrashFolder && !isEmptyFilesList) ? (
+ <>
+ {!isMobile && canCreate && (
+
+ )}
+
+ {/* */}
+
+
+
+ {!isDesktop && (
+
+ )}
+
+ ) : canCreate ? (
+ <>
+ {!isMobile && (
+
+ )}
+ {!isDesktop && (
+
+ )}
+
+ ) : (
+ <>
+ {!isDesktop && (
+
+ )}
+
+ {isPublicRoom && (
+
+ )}
+
+ )}
+
+ );
+};
+
+export default React.memo(ControlButtons);
diff --git a/packages/shared/components/navigation/sub-components/DropBox.tsx b/packages/shared/components/navigation/sub-components/DropBox.tsx
new file mode 100644
index 0000000000..cffd8944a3
--- /dev/null
+++ b/packages/shared/components/navigation/sub-components/DropBox.tsx
@@ -0,0 +1,146 @@
+import React, { useCallback } from "react";
+import { useTheme } from "styled-components";
+import { Direction, VariableSizeList } from "react-window";
+
+import { DeviceType } from "../../../enums";
+
+import { CustomScrollbarsVirtualList } from "../../scrollbar";
+
+import { StyledBox, StyledContainer } from "../Navigation.styled";
+import { IDropBoxProps } from "../Navigation.types";
+
+import NavigationLogo from "./LogoBlock";
+import ArrowButton from "./ArrowBtn";
+import ControlButtons from "./ControlBtn";
+import Row from "./Row";
+
+const DropBox = React.forwardRef(
+ (
+ {
+ sectionHeight,
+
+ dropBoxWidth,
+ isRootFolder,
+ onBackToParentFolder,
+
+ canCreate,
+ navigationItems,
+ getContextOptionsFolder,
+ getContextOptionsPlus,
+ toggleDropBox,
+ toggleInfoPanel,
+ onClickAvailable,
+ isInfoPanelVisible,
+
+ isDesktop,
+ isDesktopClient,
+
+ withLogo,
+ burgerLogo,
+
+ currentDeviceType,
+ navigationTitleContainerNode,
+ },
+ ref,
+ ) => {
+ const [dropBoxHeight, setDropBoxHeight] = React.useState(0);
+ const countItems = navigationItems.length;
+
+ const getItemSize = useCallback(
+ (index: number): number => {
+ if (index === countItems - 1) return 51;
+ return currentDeviceType !== DeviceType.desktop ? 36 : 30;
+ },
+ [countItems, currentDeviceType],
+ );
+
+ const { interfaceDirection } = useTheme();
+ React.useEffect(() => {
+ const itemsHeight = navigationItems.map((item, index) =>
+ getItemSize(index),
+ );
+
+ const currentHeight = itemsHeight.reduce((a, b) => a + b);
+
+ let navHeight = 41;
+
+ if (currentDeviceType === DeviceType.tablet) {
+ navHeight = 49;
+ }
+
+ if (currentDeviceType === DeviceType.mobile) {
+ navHeight = 45;
+ }
+
+ setDropBoxHeight(
+ currentHeight + navHeight > sectionHeight
+ ? sectionHeight - navHeight - 20
+ : currentHeight,
+ );
+ }, [sectionHeight, currentDeviceType, navigationItems, getItemSize]);
+
+ const isTabletView = currentDeviceType === DeviceType.tablet;
+
+ return (
+
+
+ {withLogo && (
+
+ )}
+
+
+ {navigationTitleContainerNode}
+
+
+
+
+
+ {Row}
+
+
+ );
+ },
+);
+
+DropBox.displayName = "DropBox";
+
+export default React.memo(DropBox);
diff --git a/packages/shared/components/navigation/sub-components/Item.tsx b/packages/shared/components/navigation/sub-components/Item.tsx
new file mode 100644
index 0000000000..4e2995bcb6
--- /dev/null
+++ b/packages/shared/components/navigation/sub-components/Item.tsx
@@ -0,0 +1,63 @@
+import React from "react";
+
+import DefaultIcon from "PUBLIC_DIR/images/default.react.svg";
+import RootIcon from "PUBLIC_DIR/images/root.react.svg";
+import DefaultTabletIcon from "PUBLIC_DIR/images/default.tablet.react.svg";
+import RootTabletIcon from "PUBLIC_DIR/images/root.tablet.react.svg";
+
+import { DeviceType } from "../../../enums";
+
+import { ColorTheme, ThemeId } from "../../color-theme";
+import { StyledItem, StyledText } from "../Navigation.styled";
+import { INavigationItemProps } from "../Navigation.types";
+
+const Item = ({
+ id,
+ title,
+ isRoot,
+ isRootRoom,
+ onClick,
+ withLogo,
+ currentDeviceType,
+ ...rest
+}: INavigationItemProps) => {
+ const onClickAvailable = () => {
+ onClick?.(id, isRootRoom);
+ };
+
+ return (
+
+
+ {currentDeviceType !== DeviceType.desktop ? (
+ isRoot ? (
+
+ ) : (
+
+ )
+ ) : isRoot ? (
+
+ ) : (
+
+ )}
+
+
+
+ {title}
+
+
+ );
+};
+
+export default React.memo(Item);
diff --git a/packages/shared/components/navigation/sub-components/LogoBlock.tsx b/packages/shared/components/navigation/sub-components/LogoBlock.tsx
new file mode 100644
index 0000000000..954ff4f3fb
--- /dev/null
+++ b/packages/shared/components/navigation/sub-components/LogoBlock.tsx
@@ -0,0 +1,20 @@
+import React from "react";
+import { INavigationLogoProps } from "../Navigation.types";
+
+const NavigationLogo = ({
+ logo,
+ burgerLogo,
+ ...rest
+}: INavigationLogoProps) => {
+ return (
+
+
+
+
+
+
+
+
+
+
+ );
+};
+
+export default PlusButton;
diff --git a/packages/shared/components/navigation/sub-components/Row.tsx b/packages/shared/components/navigation/sub-components/Row.tsx
new file mode 100644
index 0000000000..c477832d69
--- /dev/null
+++ b/packages/shared/components/navigation/sub-components/Row.tsx
@@ -0,0 +1,35 @@
+import React from "react";
+import Item from "./Item";
+
+import { TRowData } from "../Navigation.types";
+
+const Row = React.memo(
+ ({
+ data,
+ index,
+ style,
+ }: {
+ data: TRowData;
+ index: number;
+ style: React.CSSProperties;
+ }) => {
+ const isRoot = index === data[0].length - 1;
+ return (
+
+
+
+
+ );
+};
+
+export default ToggleInfoPanelButton;
diff --git a/packages/shared/components/navigation/sub-components/TrashWarning.tsx b/packages/shared/components/navigation/sub-components/TrashWarning.tsx
new file mode 100644
index 0000000000..4e2226f458
--- /dev/null
+++ b/packages/shared/components/navigation/sub-components/TrashWarning.tsx
@@ -0,0 +1,10 @@
+import React from "react";
+import { StyledTrashWarning } from "../Navigation.styled";
+
+const TrashWarning = ({ title }: { title?: string }) => {
+ return (
+ {title}
+ );
+};
+
+export default TrashWarning;
diff --git a/packages/shared/utils/context.ts b/packages/shared/utils/context.ts
index 17ae0faba7..5b7d8dee39 100644
--- a/packages/shared/utils/context.ts
+++ b/packages/shared/utils/context.ts
@@ -1,6 +1,6 @@
import React from "react";
-const defaultValue = {};
+const defaultValue: { sectionWidth?: number; sectionHeight?: number } = {};
export const Context = React.createContext(defaultValue);