refactor

apps/app/src/client/components/Common/SimplifiedItemsTree/SimplifiedItemsTree.module.scss

@@ -1,3 +0,0 @@
-.simplified-items-tree {
-  // Container for virtualized tree items
-}

apps/app/src/client/components/Common/SimplifiedItemsTree/index.ts

@@ -1,2 +0,0 @@
-export { SimplifiedItemsTree } from './SimplifiedItemsTree';
-export { SimplifiedTreeItem } from './SimplifiedTreeItem';

apps/app/src/client/components/Common/SimplifiedItemsTree/SimplifiedItemsTree.tsx → apps/app/src/client/components/ItemsTree/SimplifiedItemsTree.tsx

@@ -1,6 +1,6 @@
 import type { FC } from 'react';
 import {
-  useCallback, useEffect, useRef, useState,
+  useCallback, useEffect, useState,
 } from 'react';
 
 import { asyncDataLoaderFeature } from '@headless-tree/core';
@@ -11,9 +11,7 @@ import { apiv3Get } from '~/client/util/apiv3-client';
 import type { IPageForTreeItem } from '~/interfaces/page';
 import { useSWRxRootPage } from '~/stores/page-listing';
 
-import { SimplifiedTreeItem } from './SimplifiedTreeItem';
-
-import styles from './SimplifiedItemsTree.module.scss';
+import type { TreeItemProps } from '../TreeItem';
 
 
 const ROOT_PAGE_VIRTUAL_ID = '__virtual_root__';
@@ -31,10 +29,12 @@ function constructRootPageForVirtualRoot(rootPageId: string, allPagesCount: numb
 
 type Props = {
   targetPath: string;
-  targetPathOrId?: string | null;
+  targetPathOrId?: string;
   isWipPageShown?: boolean;
   isEnableActions?: boolean;
   isReadOnlyUser?: boolean;
+  CustomTreeItem: React.FunctionComponent<TreeItemProps>
+  estimateTreeItemSize: () => number;
   scrollerElem?: HTMLElement | null;
 };
 
@@ -42,6 +42,7 @@ export const SimplifiedItemsTree: FC<Props> = (props: Props) => {
   const {
     targetPath, targetPathOrId,
     isWipPageShown = true, isEnableActions = false, isReadOnlyUser = false,
+    CustomTreeItem, estimateTreeItemSize,
     scrollerElem,
   } = props;
 
@@ -109,7 +110,7 @@ export const SimplifiedItemsTree: FC<Props> = (props: Props) => {
   const virtualizer = useVirtualizer({
     count: items.length,
     getScrollElement: () => scrollerElem ?? null,
-    estimateSize: () => 24,
+    estimateSize: estimateTreeItemSize,
     overscan: 5,
   });
 
@@ -146,7 +147,6 @@ export const SimplifiedItemsTree: FC<Props> = (props: Props) => {
           return null;
         }
 
-        const isSelected = targetPathOrId === itemData._id || targetPathOrId === itemData.path;
         const props = item.getProps();
 
         return (
@@ -160,12 +160,10 @@ export const SimplifiedItemsTree: FC<Props> = (props: Props) => {
               }
             }}
           >
-            <SimplifiedTreeItem
+            <CustomTreeItem
               item={itemData}
-              isSelected={isSelected}
-              level={item.getItemMeta().level}
+              itemLevel={item.getItemMeta().level}
               isExpanded={item.isExpanded()}
-              isFolder={item.isFolder()}
               targetPath={targetPath}
               targetPathOrId={targetPathOrId}
               isWipPageShown={isWipPageShown}

apps/app/src/client/components/ItemsTree/index.ts

@@ -1,2 +1,3 @@
 export { ItemNode } from './ItemNode';
 export * from './ItemsTree';
+export * from './SimplifiedItemsTree';

apps/app/src/client/components/Sidebar/PageTree/PageTreeSubstance.tsx

@@ -1,9 +1,8 @@
 import React, {
-  memo, useCallback, useEffect, useMemo, useRef, useState,
+  memo, useCallback,
 } from 'react';
 
 import { useTranslation } from 'next-i18next';
-import { debounce } from 'throttle-debounce';
 
 import { useIsGuestUser, useIsReadOnlyUser } from '~/states/context';
 import { useCurrentPageId, useCurrentPagePath } from '~/states/page';
@@ -13,7 +12,8 @@ import {
 } from '~/stores/page-listing';
 import loggerFactory from '~/utils/logger';
 
-import { SimplifiedItemsTree } from '../../Common/SimplifiedItemsTree';
+import { SimplifiedItemsTree } from '../../ItemsTree';
+import { SimplifiedPageTreeItem, simplifiedPageTreeItemSize } from '../PageTreeItem';
 import { SidebarHeaderReloadButton } from '../SidebarHeaderReloadButton';
 
 import { PrivateLegacyPagesLink } from './PrivateLegacyPagesLink';
@@ -117,22 +117,14 @@ export const PageTreeContent = memo(({ isWipPageShown }: PageTreeContentProps) =
 
   return (
     <div className="pt-4">
-      {/*
-      <ItemsTree
-        isEnableActions={!isGuestUser}
-        isReadOnlyUser={!!isReadOnlyUser}
-        isWipPageShown={isWipPageShown}
-        targetPath={path}
-        targetPathOrId={targetPathOrId}
-        CustomTreeItem={PageTreeItem}
-      />
-      */}
       <SimplifiedItemsTree
         isEnableActions={!isGuestUser}
         isReadOnlyUser={!!isReadOnlyUser}
         isWipPageShown={isWipPageShown}
         targetPath={path}
         targetPathOrId={targetPathOrId}
+        CustomTreeItem={SimplifiedPageTreeItem}
+        estimateTreeItemSize={() => simplifiedPageTreeItemSize}
         scrollerElem={sidebarScrollerElem}
       />
 

apps/app/src/client/components/Common/SimplifiedItemsTree/SimplifiedTreeItem.tsx → apps/app/src/client/components/Sidebar/PageTreeItem/SimplifiedPageTreeItem.tsx

@@ -1,32 +1,28 @@
 import type { FC } from 'react';
 import { useCallback } from 'react';
 
+import { pagePathUtils, pathUtils } from '@growi/core/dist/utils';
 import { useRouter } from 'next/router';
 
-import type { IPageForTreeItem } from '~/interfaces/page';
+import type { IPageForItem } from '~/interfaces/page';
 
-import { CountBadgeForPageTreeItem } from '../../Sidebar/PageTreeItem/CountBadgeForPageTreeItem';
-import { usePageItemControl } from '../../Sidebar/PageTreeItem/use-page-item-control';
+import type { TreeItemProps } from '../../TreeItem';
 import { TreeItemLayout } from '../../TreeItem';
 
+import { CountBadgeForPageTreeItem } from './CountBadgeForPageTreeItem';
+import { usePageItemControl } from './use-page-item-control';
+
+import styles from './PageTreeItem.module.scss';
+
+const moduleClass = styles['page-tree-item'] ?? '';
+
+
+export const simplifiedPageTreeItemSize = 40; // in px
 
-type Props = {
-  item: IPageForTreeItem;
-  isSelected: boolean;
-  level: number;
-  isExpanded: boolean;
-  isFolder: boolean;
-  targetPath: string;
-  targetPathOrId?: string | null;
-  isWipPageShown?: boolean;
-  isEnableActions?: boolean;
-  isReadOnlyUser?: boolean;
-  onToggle: () => void;
-};
 
-export const SimplifiedTreeItem: FC<Props> = ({
+export const SimplifiedPageTreeItem: FC<TreeItemProps> = ({
   item,
-  level,
+  itemLevel,
   isExpanded,
   targetPath,
   targetPathOrId,
@@ -50,17 +46,18 @@ export const SimplifiedTreeItem: FC<Props> = ({
 
   return (
     <TreeItemLayout
+      className={moduleClass}
       item={item}
-      itemLevel={level}
+      itemLevel={itemLevel}
       targetPath={targetPath}
       targetPathOrId={targetPathOrId ?? undefined}
-      isOpen={isExpanded}
+      isExpanded={isExpanded}
       isWipPageShown={isWipPageShown}
       isEnableActions={isEnableActions}
       isReadOnlyUser={isReadOnlyUser}
       onClick={handleClick}
       onWheelClick={handleWheelClick}
-      onToggleOpen={onToggle}
+      onToggle={onToggle}
       customEndComponents={[CountBadgeForPageTreeItem]}
       customHoveredEndComponents={[Control]}
     />

apps/app/src/client/components/Sidebar/PageTreeItem/index.ts

@@ -1 +1,2 @@
 export * from './PageTreeItem';
+export * from './SimplifiedPageTreeItem';

apps/app/src/client/components/TreeItem/TreeItemLayout.tsx

@@ -22,7 +22,6 @@ const moduleClass = styles['tree-item-layout'] ?? '';
 type TreeItemLayoutProps = TreeItemProps & {
   className?: string,
   indentSize?: number,
-  onToggleOpen?: () => void,
 }
 
 export const TreeItemLayout = (props: TreeItemLayoutProps): JSX.Element => {
@@ -31,11 +30,11 @@ export const TreeItemLayout = (props: TreeItemLayoutProps): JSX.Element => {
     indentSize = 10,
     item: page,
     itemLevel: baseItemLevel = 1,
-    targetPath, targetPathOrId, isOpen = false,
+    targetPath, targetPathOrId, isExpanded = false,
     isEnableActions, isReadOnlyUser, isWipPageShown = true,
     showAlternativeContent,
     onRenamed, onClick, onClickDuplicateMenuItem, onClickDeleteMenuItem, onWheelClick,
-    onToggleOpen,
+    onToggle,
   } = props;
 
   const itemClickHandler = useCallback((e: MouseEvent) => {
@@ -71,14 +70,14 @@ export const TreeItemLayout = (props: TreeItemLayoutProps): JSX.Element => {
 
   // auto open if targetPath is descendant of this page
   useEffect(() => {
-    if (isOpen) return;
+    if (isExpanded) return;
 
     const isPathToTarget = page.path != null
       && targetPath.startsWith(addTrailingSlash(page.path))
       && targetPath !== page.path; // Target Page does not need to be opened
 
-    if (isPathToTarget) onToggleOpen?.();
-  }, [targetPath, page.path, isOpen, onToggleOpen]);
+    if (isPathToTarget) onToggle?.();
+  }, [targetPath, page.path, isExpanded, onToggle]);
 
   const isSelected = useMemo(() => {
     return page._id === targetPathOrId || page.path === targetPathOrId;
@@ -125,8 +124,8 @@ export const TreeItemLayout = (props: TreeItemLayoutProps): JSX.Element => {
           {hasDescendants && (
             <button
               type="button"
-              className={`btn btn-triangle p-0 ${isOpen ? 'open' : ''}`}
-              onClick={onToggleOpen}
+              className={`btn btn-triangle p-0 ${isExpanded ? 'open' : ''}`}
+              onClick={onToggle}
             >
               <div className="d-flex justify-content-center">
                 <span className="material-symbols-outlined fs-5">arrow_right</span>

apps/app/src/client/components/TreeItem/interfaces/index.ts

@@ -5,7 +5,7 @@ import type { IPageForPageDuplicateModal } from '~/states/ui/modal/page-duplicat
 
 type TreeItemBaseProps = {
   item: IPageForItem,
-  itemLevel?: number,
+  itemLevel: number,
   isEnableActions: boolean,
   isReadOnlyUser: boolean,
   onClickDuplicateMenuItem?(pageToDuplicate: IPageForPageDuplicateModal): void,
@@ -20,16 +20,17 @@ export type TreeItemToolProps = TreeItemBaseProps & {
 };
 
 export type TreeItemProps = TreeItemBaseProps & {
-  targetPath: string,
-  targetPathOrId?:string,
-  isOpen?: boolean,
-  isWipPageShown?: boolean,
+  isExpanded: boolean;
+  targetPath: string;
+  targetPathOrId?: string | null;
+  isWipPageShown?: boolean;
   itemClassName?: string,
   customEndComponents?: Array<React.FunctionComponent<TreeItemToolProps>>,
   customHoveredEndComponents?: Array<React.FunctionComponent<TreeItemToolProps>>,
   customHeadOfChildrenComponents?: Array<React.FunctionComponent<TreeItemToolProps>>,
   showAlternativeContent?: boolean,
   customAlternativeComponents?: Array<React.FunctionComponent<TreeItemToolProps>>,
+  onToggle: () => void;
   onClick?(page: IPageForItem): void,
   onWheelClick?(page: IPageForItem): void,
 };