refactor TreeItemLayout

apps/app/src/components/Sidebar/PageTreeItem/PageTreeItem.tsx

@@ -199,8 +199,7 @@ export const PageTreeItem: FC<TreeItemProps> = (props) => {
       mainClassName={mainClassName}
       customEndComponents={[CountBadgeForPageTreeItem]}
       customHoveredEndComponents={[Control, NewPageCreateButton]}
-      customNextComponents={[NewPageInput]}
-      customNextToChildrenComponents={[() => <CreatingNewPageSpinner show={isProcessingSubmission} />]}
+      customHeadOfChildrenComponents={[NewPageInput, () => <CreatingNewPageSpinner show={isProcessingSubmission} />]}
       showAlternativeContent={showRenameInput}
       customAlternativeComponents={[RenameInput]}
     />

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

@@ -125,12 +125,14 @@ export const TreeItemLayout: FC<TreeItemLayoutProps> = (props) => {
   const toolProps: TreeItemToolProps = {
     ...baseProps,
     itemNode,
+    stateHandlers: {
+      setIsOpen,
+    },
   };
 
   const EndComponents = props.customEndComponents;
   const HoveredEndComponents = props.customHoveredEndComponents;
-  const NextComponents = props.customNextComponents;
-  const NextToChildrenComponents = props.customNextToChildrenComponents;
+  const HeadObChildrenComponents = props.customHeadOfChildrenComponents;
   const AlternativeComponents = props.customAlternativeComponents;
 
   if (!isWipPageShown && page.wip) {
@@ -193,9 +195,9 @@ export const TreeItemLayout: FC<TreeItemLayoutProps> = (props) => {
 
       </li>
 
-      {NextComponents?.map((NextContent, index) => (
+      { isOpen && HeadObChildrenComponents?.map((HeadObChildrenContents, index) => (
         // eslint-disable-next-line react/no-array-index-key
-        <NextContent key={index} {...toolProps} />
+        <HeadObChildrenContents key={index} {...toolProps} />
       ))}
 
       {
@@ -211,12 +213,6 @@ export const TreeItemLayout: FC<TreeItemLayoutProps> = (props) => {
           return (
             <div key={node.page._id} className="tree-item-layout-children">
               <ItemClassFixed {...itemProps} />
-
-              {NextToChildrenComponents?.map((NextToChildrenContent, index) => (
-                // eslint-disable-next-line react/no-array-index-key
-                <NextToChildrenContent key={index} {...toolProps} />
-              ))}
-
             </div>
           );
         })

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

@@ -13,13 +13,13 @@ type TreeItemBaseProps = {
   onClickDuplicateMenuItem?(pageToDuplicate: IPageForPageDuplicateModal): void,
   onClickDeleteMenuItem?(pageToDelete: IPageToDeleteWithMeta): void,
   onRenamed?(fromPath: string | undefined, toPath: string): void,
+}
+
+export type TreeItemToolProps = TreeItemBaseProps & {
   stateHandlers?: {
-    isOpen: boolean,
     setIsOpen: React.Dispatch<React.SetStateAction<boolean>>,
   },
-}
-
-export type TreeItemToolProps = TreeItemBaseProps;
+};
 
 export type TreeItemProps = TreeItemBaseProps & {
   targetPathOrId?: Nullable<string>,
@@ -29,8 +29,7 @@ export type TreeItemProps = TreeItemBaseProps & {
   mainClassName?: string,
   customEndComponents?: Array<React.FunctionComponent<TreeItemToolProps>>,
   customHoveredEndComponents?: Array<React.FunctionComponent<TreeItemToolProps>>,
-  customNextComponents?: Array<React.FunctionComponent<TreeItemToolProps>>,
-  customNextToChildrenComponents?: Array<React.FunctionComponent<TreeItemToolProps>>,
+  customHeadOfChildrenComponents?: Array<React.FunctionComponent<TreeItemToolProps>>,
   showAlternativeContent?: boolean,
   customAlternativeComponents?: Array<React.FunctionComponent<TreeItemToolProps>>,
   onClick?(page: IPageForItem): void,