add function to ChildPageCreateButton

apps/app/src/components/Sidebar/PageTree/ItemsTree.tsx

@@ -30,6 +30,7 @@ import PageTreeContentSkeleton from '../Skeleton/PageTreeContentSkeleton';
 
 import { ItemNode } from './ItemNode';
 import { PageTreeItem } from './PageTreeItem';
+import { PageTreeItemForModal } from './PageTreeItemForModal';
 
 import styles from './ItemsTree.module.scss';
 
@@ -273,7 +274,7 @@ const ItemsTree = (props: ItemsTreeProps): JSX.Element => {
   if (initialItemNode != null) {
     return (
       <ul className={`grw-pagetree ${styles['grw-pagetree']} list-group py-3`} ref={rootElemRef}>
-        <PageTreeItem
+        <PageTreeItemForModal
           key={initialItemNode.page.path}
           targetPathOrId={targetPathOrId}
           itemNode={initialItemNode}

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

@@ -27,6 +27,9 @@ import ClosableTextInput from '../../Common/ClosableTextInput';
 import { PageItemControl } from '../../Common/Dropdown/PageItemControl';
 
 import { ItemNode } from './ItemNode';
+// import {
+//   SimpleItem, SimpleItemProps, SimpleItemToolProps, NotDraggableForClosableTextInput, SimpleItemTool,
+// } from './SimpleItem';
 import SimpleItem, {
   SimpleItemProps, SimpleItemToolProps, NotDraggableForClosableTextInput, SimpleItemTool,
 } from './SimpleItem';

apps/app/src/components/Sidebar/PageTree/PageTreeItemForModal.tsx

@@ -11,6 +11,8 @@ import { useDrag, useDrop } from 'react-dnd';
 import { apiv3Put, apiv3Post } from '~/client/util/apiv3-client';
 import { ValidationTarget } from '~/client/util/input-validator';
 import { toastWarning, toastError, toastSuccess } from '~/client/util/toastr';
+import { NotAvailableForGuest } from '~/components/NotAvailableForGuest';
+import { NotAvailableForReadOnlyUser } from '~/components/NotAvailableForReadOnlyUser';
 import { IPageHasId } from '~/interfaces/page';
 import { mutatePageTree, useSWRxPageChildren } from '~/stores/page-listing';
 import { usePageTreeDescCountMap } from '~/stores/ui';
@@ -19,7 +21,8 @@ import loggerFactory from '~/utils/logger';
 import ClosableTextInput from '../../Common/ClosableTextInput';
 
 import { ItemNode } from './ItemNode';
-import SimpleItem, { SimpleItemProps } from './SimpleItem';
+// import { SimpleItem, SimpleItemProps } from './SimpleItem';
+import SimpleItem, { SimpleItemProps, SimpleItemTool } from './SimpleItem';
 
 const logger = loggerFactory('growi:cli:Item');
 
@@ -34,9 +37,11 @@ const ChildPageCreateButton = (props) => {
   const { t } = useTranslation();
 
   const {
-    page, isOpen: _isOpen = false, isEnableActions, children,
+    page, isOpen: _isOpen = false, isEnableActions, itemNode, children,
   } = props;
 
+  // const { page, children } = itemNode;
+
   const [currentChildren, setCurrentChildren] = useState(children);
   const [isNewPageInputShown, setNewPageInputShown] = useState(false);
   const [isCreating, setCreating] = useState(false);
@@ -51,6 +56,14 @@ const ChildPageCreateButton = (props) => {
   const isChildrenLoaded = currentChildren?.length > 0;
   const hasDescendants = descendantCount > 0 || isChildrenLoaded;
 
+  const onClickPlusButton = useCallback(() => {
+    setNewPageInputShown(true);
+
+    if (hasDescendants) {
+      setIsOpen(true);
+    }
+  }, [hasDescendants]);
+
   const onPressEnterForCreateHandler = async(inputText: string) => {
     setNewPageInputShown(false);
     const parentPath = pathUtils.addTrailingSlash(page.path as string);
@@ -88,19 +101,25 @@ const ChildPageCreateButton = (props) => {
     }
   };
 
+  console.log(!pagePathUtils.isUsersTopPage(page.path ?? ''));
+
   return (
     <>
-      {isEnableActions && isNewPageInputShown && (
-        <div className="flex-fill">
-          <NotDraggableForClosableTextInput>
-            <ClosableTextInput
-              placeholder={t('Input page name')}
-              onClickOutside={() => { setNewPageInputShown(false) }}
-              onPressEnter={onPressEnterForCreateHandler}
-              validationTarget={ValidationTarget.PAGE}
-            />
-          </NotDraggableForClosableTextInput>
-        </div>
+      <SimpleItemTool page={page} isEnableActions={false} isReadOnlyUser={false}/>
+
+      {!pagePathUtils.isUsersTopPage(page.path ?? '') && (
+        <NotAvailableForGuest>
+          <NotAvailableForReadOnlyUser>
+            <button
+              id='page-create-button-in-page-tree'
+              type="button"
+              className="border-0 rounded btn btn-page-item-control p-0 grw-visible-on-hover"
+              onClick={onClickPlusButton}
+            >
+              <i className="icon-plus d-block p-0" />
+            </button>
+          </NotAvailableForReadOnlyUser>
+        </NotAvailableForGuest>
       )}
     </>
   );
@@ -129,6 +148,8 @@ export const PageTreeItemForModal = (props) => {
       onRenamed={props.onRenamed}
       onClickDuplicateMenuItem={props.onClickDuplicateMenuItem}
       onClickDeleteMenuItem={props.onClickDeleteMenuItem}
+      // customComponentUnderItem={ChildPageCreateButton}
+      customComponent={ChildPageCreateButton}
     />
   );
 };

apps/app/src/components/Sidebar/PageTree/SimpleItem.tsx

@@ -42,6 +42,7 @@ export type SimpleItemProps = {
   itemClass?: React.FunctionComponent<SimpleItemProps>
   mainClassName?: string
   customComponent?: React.FunctionComponent<SimpleItemToolProps>
+  customComponentUnderItem?
 };
 
 // Utility to mark target
@@ -86,7 +87,7 @@ export const NotDraggableForClosableTextInput = (props: NotDraggableProps): JSX.
 };
 
 type SimpleItemToolPropsOptional = 'itemNode' | 'targetPathOrId' | 'isOpen' | 'itemRef' | 'itemClass' | 'mainClassName';
-export type SimpleItemToolProps = Omit<SimpleItemProps, SimpleItemToolPropsOptional> & {page: IPageForItem};
+export type SimpleItemToolProps = Omit<SimpleItemProps, SimpleItemToolPropsOptional> & {page: IPageForItem, children};
 
 export const SimpleItemTool: FC<SimpleItemToolProps> = (props) => {
   const { t } = useTranslation();
@@ -260,14 +261,18 @@ const SimpleItem: FC<SimpleItemProps> = (props) => {
   const SimpleItemContent = CustomComponent ?? SimpleItemTool;
 
   const SimpleItemContentProps = {
+    itemNode,
     page,
     onRenamed,
     onClickDuplicateMenuItem,
     onClickDeleteMenuItem,
     isEnableActions,
     isReadOnlyUser,
+    children,
   };
 
+  const CustomComponentUnderItem = props.customComponentUnderItem;
+
   return (
     <div
       id={`pagetree-item-${page._id}`}
@@ -296,7 +301,7 @@ const SimpleItem: FC<SimpleItemProps> = (props) => {
 
         <SimpleItemContent {...SimpleItemContentProps}/>
 
-        {!pagePathUtils.isUsersTopPage(page.path ?? '') && (
+        {/* {!pagePathUtils.isUsersTopPage(page.path ?? '') && (
           <NotAvailableForGuest>
             <NotAvailableForReadOnlyUser>
               <button
@@ -309,10 +314,10 @@ const SimpleItem: FC<SimpleItemProps> = (props) => {
               </button>
             </NotAvailableForReadOnlyUser>
           </NotAvailableForGuest>
-        )}
+        )} */}
       </li>
 
-      {isEnableActions && isNewPageInputShown && (
+      {/* {isEnableActions && isNewPageInputShown && (
         <div className="flex-fill">
           <NotDraggableForClosableTextInput>
             <ClosableTextInput
@@ -323,7 +328,15 @@ const SimpleItem: FC<SimpleItemProps> = (props) => {
             />
           </NotDraggableForClosableTextInput>
         </div>
-      )}
+      )} */}
+
+      {/* <CustomComponentUnderItem
+        page={page}
+        isOpen
+        isEnableActions={isEnableActions}
+        itemNode={itemNode}
+      /> */}
+
       {
         isOpen && hasChildren() && currentChildren.map((node, index) => (
           <div key={node.page._id} className="grw-pagetree-item-children">
@@ -340,7 +353,6 @@ const SimpleItem: FC<SimpleItemProps> = (props) => {
       }
     </div>
   );
-
 };
 
 export default SimpleItem;