change to use customcomponent

apps/app/src/components/PageHeader/PageHeader.tsx

@@ -2,8 +2,8 @@ import { FC } from 'react';
 
 import { useCurrentPagePath, useSWRxCurrentPage } from '~/stores/page';
 
-import { PagePath } from './PagePath';
-import { PageTitle } from './PageTitle';
+import { PagePathHeader } from './PagePathHeader';
+import { PageTitleHeader } from './PageTitleHeader';
 
 export const PageHeader: FC = () => {
   const { data: currentPagePath } = useCurrentPagePath();
@@ -16,11 +16,11 @@ export const PageHeader: FC = () => {
   return (
     <>
       <div>
-        <PagePath
+        <PagePathHeader
           currentPagePath={currentPagePath}
           currentPage={currentPage}
         />
-        <PageTitle
+        <PageTitleHeader
           currentPagePath={currentPagePath}
           currentPage={currentPage}
         />

apps/app/src/components/PageHeader/PagePathHeader.tsx

@@ -0,0 +1,85 @@
+import { FC, useCallback, useState } from 'react';
+
+import type { IPagePopulatedToShowRevision } from '@growi/core';
+
+import { usePageSelectModal } from '~/stores/modal';
+import { EditorMode, useEditorMode } from '~/stores/ui';
+
+import { PagePathNav } from '../Common/PagePathNav';
+import { PageSelectModal } from '../PageSelectModal/PageSelectModal';
+
+import { TextInputForPageTitleAndPath } from './TextInputForPageTitleAndPath';
+
+
+type Props = {
+  currentPagePath: string
+  currentPage: IPagePopulatedToShowRevision
+}
+
+export const PagePathHeader: FC<Props> = (props) => {
+  const { currentPagePath, currentPage } = props;
+
+  const [isRenameInputShown, setRenameInputShown] = useState(false);
+  const [isButtonsShown, setButtonShown] = useState(false);
+
+  const { data: editorMode } = useEditorMode();
+  const { data: PageSelectModalData, open: openPageSelectModal } = usePageSelectModal();
+
+  const stateHandler = { isRenameInputShown, setRenameInputShown };
+
+  const isOpened = PageSelectModalData?.isOpened ?? false;
+
+  const isViewMode = editorMode === EditorMode.View;
+  const isEditorMode = !isViewMode;
+
+  const PagePath = useCallback(() => {
+    return (
+      <>
+        { currentPagePath != null && (
+          <PagePathNav
+            pageId={currentPage._id}
+            pagePath={currentPagePath}
+            isSingleLineMode={isEditorMode}
+          />
+        )}
+      </>
+    );
+  }, []);
+
+  return (
+    <>
+      <div className="container">
+        <div
+          className="row"
+          onMouseEnter={() => setButtonShown(true)}
+          onMouseLeave={() => setButtonShown(false)}
+        >
+          <div className="col-4">
+            <TextInputForPageTitleAndPath
+              currentPagePath={currentPagePath}
+              currentPage={currentPage}
+              stateHandler={stateHandler}
+              inputValue={currentPagePath}
+              CustomComponent={PagePath}
+            />
+          </div>
+          { isButtonsShown
+          && (
+            <>
+              <div className="col-4">
+                <button type="button" onClick={() => setRenameInputShown(true)}>編集ボタン</button>
+              </div>
+              <div className="col-4">
+                <button type="button" onClick={openPageSelectModal}>ページツリーボタン</button>
+              </div>
+            </>
+          )}
+          { isOpened
+          && (
+            <PageSelectModal />
+          )}
+        </div>
+      </div>
+    </>
+  );
+};

apps/app/src/components/PageHeader/PageTitleHeader.tsx

@@ -0,0 +1,38 @@
+import { FC, useState, useCallback } from 'react';
+
+import nodePath from 'path';
+
+import type { IPagePopulatedToShowRevision } from '@growi/core';
+
+import { TextInputForPageTitleAndPath } from './TextInputForPageTitleAndPath';
+
+type Props = {
+  currentPagePath: string,
+  currentPage: IPagePopulatedToShowRevision;
+}
+
+
+export const PageTitleHeader: FC<Props> = (props) => {
+  const { currentPagePath, currentPage } = props;
+
+  const [isRenameInputShown, setRenameInputShown] = useState(false);
+  const pageName = nodePath.basename(currentPagePath ?? '') || '/';
+
+  const stateHandler = { isRenameInputShown, setRenameInputShown };
+
+  const PageTitle = useCallback(() => {
+    return (
+      <div onClick={() => setRenameInputShown(true)}>{pageName}</div>
+    );
+  }, []);
+
+  return (
+    <TextInputForPageTitleAndPath
+      currentPagePath={currentPagePath}
+      currentPage={currentPage}
+      stateHandler={stateHandler}
+      inputValue={pageName}
+      CustomComponent={PageTitle}
+    />
+  );
+};

apps/app/src/components/PageHeader/TextInputForPageTitleAndPath.tsx

@@ -20,11 +20,12 @@ type Props = {
   currentPage
   stateHandler
   inputValue
+  CustomComponent
 }
 
 export const TextInputForPageTitleAndPath: FC<Props> = (props) => {
   const {
-    currentPagePath, currentPage, stateHandler, inputValue,
+    currentPagePath, currentPage, stateHandler, inputValue, CustomComponent
   } = props;
 
   const { t } = useTranslation();
@@ -95,7 +96,7 @@ export const TextInputForPageTitleAndPath: FC<Props> = (props) => {
           />
         </div>
       ) : (
-        <div onClick={onClickInputValueHandler}>{inputValue}</div>
+        <CustomComponent />
       )}
     </>
   );