Implement click on bookmark menu item

https://youtrack.weseek.co.jp/issue/GW-7910
- Update position of bookmark menu item
- Add radio button in bookmark folder menu item
- Customize DropdownItem with custom element
- Implement onClick to dropdown item
- Add isSelected and onSelectedChild props to BookmarkFolderMenuItem component
- Customize dropdown item of child folder menu
- Set selected item to null of parent if child is selected

packages/app/src/components/Bookmarks/BookmarkFolderMenu.module.scss

@@ -1,5 +1,6 @@
 .grw-bookmark-folder-dropdown :global {
   .grw-bookmark-folder-menu {
+    top: 100px !important;
     .grw-bookmark-folder-menu-item {
       svg,
       .grw-bookmark-folder-menu-toggle-btn svg {

packages/app/src/components/Bookmarks/BookmarkFolderMenu.tsx

@@ -27,7 +27,7 @@ const BookmarkFolderMenu = (props: Props): JSX.Element => {
   const { children, bookmarkFolders } = props;
   const [isCreateAction, setIsCreateAction] = useState(false);
   const { mutate: mutateChildBookmarkData } = useSWRxBookamrkFolderAndChild(null);
-
+  const [selectedItem, setSelectedItem] = useState<string | null>(null);
 
   const onClickNewBookmarkFolder = useCallback(() => {
     setIsCreateAction(true);
@@ -47,6 +47,10 @@ const BookmarkFolderMenu = (props: Props): JSX.Element => {
 
   }, [mutateChildBookmarkData, t]);
 
+  const onMenuItemClickHandler = useCallback((itemId: string) => {
+    setSelectedItem(itemId);
+  }, []);
+
   return (
     <UncontrolledDropdown className={`grw-bookmark-folder-dropdown ${styles['grw-bookmark-folder-dropdown']}`}>
       {children}
@@ -68,15 +72,26 @@ const BookmarkFolderMenu = (props: Props): JSX.Element => {
         {bookmarkFolders?.map(folder => (
           <div key={folder._id} >
             { folder.children.length > 0 ? (
-              <div className='dropdown-item grw-bookmark-folder-menu-item' tabIndex={0} role="menuitem">
-                <BookmarkFolderMenuItem item={folder} />
+              <div className='dropdown-item grw-bookmark-folder-menu-item' tabIndex={0} role="menuitem" onClick={() => onMenuItemClickHandler(folder._id)}>
+                <BookmarkFolderMenuItem
+                  isSelected={selectedItem === folder._id}
+                  item={folder}
+                  onSelectedChild={() => setSelectedItem(null)}
+                />
               </div>
             ) : (
-              <DropdownItem toggle={false} className='grw-bookmark-folder-menu-item'>
-                <div className='grw-bookmark-folder-menu-item-title'>
+              <div className='dropdown-item grw-bookmark-folder-menu-item' tabIndex={0} role="menuitem" onClick={() => onMenuItemClickHandler(folder._id)}>
+                <input
+                  type="radio"
+                  checked={selectedItem === folder._id}
+                  name="bookmark-folder-menu-item"
+                  id={`bookmark-folder-menu-item-${folder._id}`}
+                  onChange={e => e.stopPropagation() }
+                />
+                <label htmlFor={`bookmark-folder-menu-item-${folder._id}`} className='p-2 m-0 grw-bookmark-folder-menu-item-title mr-auto'>
                   {folder.name}
-                </div>
-              </DropdownItem>
+                </label>
+              </div>
             )}
           </div>
         ))}

packages/app/src/components/Bookmarks/BookmarkFolderMenuItem.tsx

@@ -1,7 +1,7 @@
 import React, { useCallback, useEffect, useState } from 'react';
 
 import {
-  DropdownItem, DropdownMenu, DropdownToggle, UncontrolledDropdown, Button,
+  DropdownMenu, DropdownToggle, UncontrolledDropdown,
 } from 'reactstrap';
 
 import { BookmarkFolderItems } from '~/interfaces/bookmark-info';
@@ -12,11 +12,16 @@ import TriangleIcon from '../Icons/TriangleIcon';
 
 type Props ={
   item: BookmarkFolderItems
+  isSelected: boolean
+  onSelectedChild: () => void
 }
 const BookmarkFolderMenuItem = (props: Props):JSX.Element => {
-  const { item } = props;
+  const {
+    item, isSelected, onSelectedChild,
+  } = props;
   const [isOpen, setIsOpen] = useState(false);
   const { data: childFolders, mutate: mutateChildFolders } = useSWRxBookamrkFolderAndChild(item._id);
+  const [selectedItem, setSelectedItem] = useState<string | null>(null);
 
   useEffect(() => {
     if (isOpen) {
@@ -31,6 +36,12 @@ const BookmarkFolderMenuItem = (props: Props):JSX.Element => {
     setIsOpen(!isOpen);
   }, [isOpen]);
 
+  const onClickChildMenuItemHandler = useCallback((e, item) => {
+    e.stopPropagation();
+    setSelectedItem(item._id);
+    onSelectedChild();
+  }, [onSelectedChild]);
+
   return (
     <UncontrolledDropdown
       direction="right"
@@ -39,26 +50,46 @@ const BookmarkFolderMenuItem = (props: Props):JSX.Element => {
       toggle={toggleHandler}
       onMouseLeave={onMouseLeaveHandler}
     >
-      <Button color="transparent" className='pl-0 grw-bookmark-folder-menu-item-title'>
-        {item.name}
-      </Button>
-      <DropdownToggle color="transparent" className='grw-bookmark-folder-menu-toggle-btn'>
+      <div className='d-flex justify-content-start  grw-bookmark-folder-menu-item-title'>
+        <input
+          type="radio"
+          checked={isSelected}
+          name="bookmark-folder-menu-item"
+          id={`bookmark-folder-menu-item-${item._id}`}
+          onChange={e => e.stopPropagation() }
+        />
+        <label htmlFor={`bookmark-folder-menu-item-${item._id}`} className='p-2 m-0'>
+          {item.name}
+        </label>
+      </div>
+      <DropdownToggle color="transparent" className='grw-bookmark-folder-menu-toggle-btn ' onClick={e => e.stopPropagation()}>
         <TriangleIcon/>
       </DropdownToggle>
       { childFolders != null && (
-        <DropdownMenu>
+        <DropdownMenu className='m-0'>
           {childFolders?.map(child => (
             <div key={child._id} >
               {child.children.length > 0 ? (
-                <div className='dropdown-item grw-bookmark-folder-menu-item' tabIndex={0} role="menuitem">
-                  <BookmarkFolderMenuItem item={child} />
+                <div className='dropdown-item grw-bookmark-folder-menu-item' tabIndex={0} role="menuitem" onClick={e => onClickChildMenuItemHandler(e, child)}>
+                  <BookmarkFolderMenuItem
+                    onSelectedChild={() => setSelectedItem(null)}
+                    isSelected={selectedItem === child._id}
+                    item={child}
+                  />
                 </div>
               ) : (
-                <DropdownItem toggle={false} className='grw-bookmark-folder-menu-item'>
-                  <div className='grw-bookmark-folder-menu-item-title'>
+                <div className='dropdown-item grw-bookmark-folder-menu-item' tabIndex={0} role="menuitem" onClick={() => setSelectedItem(child._id)}>
+                  <input
+                    type="radio"
+                    checked={selectedItem === child._id}
+                    name="bookmark-folder-menu-item"
+                    id={`bookmark-folder-menu-item-${child._id}`}
+                    onChange={e => e.stopPropagation() }
+                  />
+                  <label htmlFor={`bookmark-folder-menu-item-${child._id}`} className='p-2 m-0 grw-bookmark-folder-menu-item-title mr-auto'>
                     {child.name}
-                  </div>
-                </DropdownItem>
+                  </label>
+                </div>
               )}
             </div>
           ))}