Merge pull request #5066 from weseek/imprv/85173

show children

packages/app/src/components/Sidebar/PageTree/Item.tsx

@@ -1,5 +1,5 @@
 import React, {
-  useCallback, useState, FC, useEffect, memo,
+  useCallback, useState, FC, useEffect, memo, useRef,
 } from 'react';
 import nodePath from 'path';
 import { useTranslation } from 'react-i18next';
@@ -125,12 +125,19 @@ const Item: FC<ItemProps> = (props: ItemProps) => {
     console.log('pageItem was droped!!');
   };
 
-  const [{ isOver }, drop] = useDrop(() => ({
+  const [, drop] = useDrop(() => ({
     accept: 'PAGE_TREE',
     drop: pageItemDropHandler,
-    collect: monitor => ({
-      isOver: monitor.isOver(),
-    }),
+    hover: (item, monitor) => {
+      // when a drag item is overlapped more than 1 sec, the drop target item will be opened.
+      if (monitor.isOver()) {
+        setTimeout(() => {
+          if (monitor.isOver()) {
+            setIsOpen(true);
+          }
+        }, 1000);
+      }
+    },
   }));
 
   const hasChildren = useCallback((): boolean => {