Merge pull request #8417 from weseek/fix/139457-fix-dropdown-of-PageCreateButton

fix: implement dropdown using reactstrap

apps/app/src/components/Sidebar/PageCreateButton/DropendMenu.tsx

@@ -1,9 +1,11 @@
 import React from 'react';
 
 import { useTranslation } from 'react-i18next';
+import { DropdownMenu, DropdownItem } from 'reactstrap';
 
 import { LabelType } from '~/interfaces/template';
 
+
 type DropendMenuProps = {
   onClickCreateNewPageButtonHandler: () => Promise<void>
   onClickCreateTodaysButtonHandler: () => Promise<void>
@@ -22,52 +24,38 @@ export const DropendMenu = React.memo((props: DropendMenuProps): JSX.Element =>
   const { t } = useTranslation('commons');
 
   return (
-    <ul className="dropdown-menu">
-      <li>
-        <button
-          className="dropdown-item"
-          onClick={onClickCreateNewPageButtonHandler}
-          type="button"
-        >
-          {t('create_page_dropdown.new_page')}
-        </button>
-      </li>
+    <DropdownMenu
+      container="body"
+    >
+      <DropdownItem
+        onClick={onClickCreateNewPageButtonHandler}
+      >
+        {t('create_page_dropdown.new_page')}
+      </DropdownItem>
       {todaysPath != null && (
         <>
-          <li><hr className="dropdown-divider" /></li>
+          <DropdownItem divider />
           <li><span className="text-muted px-3">{t('create_page_dropdown.todays.desc')}</span></li>
-          <li>
-            <button
-              className="dropdown-item"
-              onClick={onClickCreateTodaysButtonHandler}
-              type="button"
-            >
-              {todaysPath}
-            </button>
-          </li>
+          <DropdownItem
+            onClick={onClickCreateTodaysButtonHandler}
+          >
+            {todaysPath}
+          </DropdownItem>
         </>
       )}
-      <li><hr className="dropdown-divider" /></li>
+      <DropdownItem divider />
       <li><span className="text-muted text-nowrap px-3">{t('create_page_dropdown.template.desc')}</span></li>
-      <li>
-        <button
-          className="dropdown-item"
-          onClick={() => onClickTemplateButtonHandler('_template')}
-          type="button"
-        >
-          {t('create_page_dropdown.template.children')}
-        </button>
-      </li>
-      <li>
-        <button
-          className="dropdown-item"
-          onClick={() => onClickTemplateButtonHandler('__template')}
-          type="button"
-        >
-          {t('create_page_dropdown.template.descendants')}
-        </button>
-      </li>
-    </ul>
+      <DropdownItem
+        onClick={() => onClickTemplateButtonHandler('_template')}
+      >
+        {t('create_page_dropdown.template.children')}
+      </DropdownItem>
+      <DropdownItem
+        onClick={() => onClickTemplateButtonHandler('__template')}
+      >
+        {t('create_page_dropdown.template.descendants')}
+      </DropdownItem>
+    </DropdownMenu>
   );
 });
 DropendMenu.displayName = 'DropendMenu';

apps/app/src/components/Sidebar/PageCreateButton/DropendToggle.tsx

@@ -1,24 +1,23 @@
-import type { ButtonHTMLAttributes, DetailedHTMLProps } from 'react';
+import { DropdownToggle } from 'reactstrap';
 
 import { Hexagon } from './Hexagon';
 
 import styles from './DropendToggle.module.scss';
 
-const moduleClass = styles['btn-toggle'];
 
+const moduleClass = styles['btn-toggle'];
 
-type Props = DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>
 
-export const DropendToggle = (props: Props): JSX.Element => {
+export const DropendToggle = (): JSX.Element => {
   return (
-    <button
-      type="button"
-      {...props}
-      className={`${moduleClass} btn btn-primary ${props.className ?? ''}`}
+    <DropdownToggle
+      color="primary"
+      className={`position-absolute ${moduleClass}`}
+      aria-expanded={false}
     >
       <Hexagon />
       <div className="hitarea position-absolute" />
       <span className="icon material-symbols-outlined position-absolute">chevron_right</span>
-    </button>
+    </DropdownToggle>
   );
 };

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

@@ -4,6 +4,7 @@ import type { IUserHasId } from '@growi/core';
 import { pagePathUtils } from '@growi/core/dist/utils';
 import { format } from 'date-fns';
 import { useTranslation } from 'react-i18next';
+import { Dropdown } from 'reactstrap';
 
 import { useOnTemplateButtonClicked } from '~/client/services/use-on-template-button-clicked';
 import { toastError } from '~/client/util/toastr';
@@ -16,6 +17,7 @@ import { DropendMenu } from './DropendMenu';
 import { DropendToggle } from './DropendToggle';
 import { useOnNewButtonClicked, useOnTodaysButtonClicked } from './hooks';
 
+
 const generateTodaysPath = (currentUser: IUserHasId, parentDirName: string) => {
   const now = format(new Date(), 'yyyy/MM/dd');
   const userHomepagePath = pagePathUtils.userHomepagePath(currentUser);
@@ -31,6 +33,8 @@ export const PageCreateButton = React.memo((): JSX.Element => {
 
   const [isHovered, setIsHovered] = useState(false);
 
+  const [dropdownOpen, setDropdownOpen] = useState(false);
+
   const todaysPath = currentUser == null
     ? null
     : generateTodaysPath(currentUser, t('create_page_dropdown.todays.memo'));
@@ -58,8 +62,11 @@ export const PageCreateButton = React.memo((): JSX.Element => {
 
   const onMouseLeaveHandler = () => {
     setIsHovered(false);
+    setDropdownOpen(false);
   };
 
+  const toggle = () => setDropdownOpen(!dropdownOpen);
+
   return (
     <div
       className="d-flex flex-row"
@@ -74,19 +81,20 @@ export const PageCreateButton = React.memo((): JSX.Element => {
         />
       </div>
       { isHovered && (
-        <div className="btn-group dropend position-absolute">
-          <DropendToggle
-            className="dropdown-toggle dropdown-toggle-split"
-            data-bs-toggle="dropdown"
-            aria-expanded="false"
-          />
+        <Dropdown
+          isOpen={dropdownOpen}
+          toggle={toggle}
+          direction="end"
+          className="position-absolute"
+        >
+          <DropendToggle />
           <DropendMenu
             onClickCreateNewPageButtonHandler={onClickNewButton}
             onClickCreateTodaysButtonHandler={onClickTodaysButton}
             onClickTemplateButtonHandler={onClickTemplateButtonHandler}
             todaysPath={todaysPath}
           />
-        </div>
+        </Dropdown>
       )}
     </div>
   );