Delay showing root drop targets. Fixes #156

Author: nomcopter

src/RootDropTargets.tsx

@@ -11,20 +11,50 @@ export interface RootDropTargetsProps {
   isDragging: boolean;
 }
 
-class RootDropTargetsClass extends React.PureComponent<RootDropTargetsProps> {
-  render() {
-    return (
-      <div
-        className={classNames('drop-target-container', {
-          '-dragging': this.props.isDragging,
-        })}
-      >
-        {values<MosaicDropTargetPosition>(MosaicDropTargetPosition).map((position) => (
-          <MosaicDropTarget position={position} path={[]} key={position} />
-        ))}
-      </div>
-    );
-  }
+const RootDropTargetsComponent = React.memo((props: RootDropTargetsProps) => {
+  const delayedIsDragging = useDelayedTrue(props.isDragging, 0);
+  return (
+    <div
+      className={classNames('drop-target-container', {
+        '-dragging': delayedIsDragging,
+      })}
+    >
+      {values<MosaicDropTargetPosition>(MosaicDropTargetPosition).map((position) => (
+        <MosaicDropTarget position={position} path={[]} key={position} />
+      ))}
+    </div>
+  );
+});
+RootDropTargetsComponent.displayName = 'RootDropTargetsComponent';
+
+function useDelayedTrue(currentValue: boolean, delay: number): boolean {
+  const delayedRef = React.useRef(currentValue);
+
+  const [, setCounter] = React.useState(0);
+  const setAndRender = (newValue: boolean) => {
+    delayedRef.current = newValue;
+    setCounter((count) => count + 1);
+  };
+
+  React.useEffect(() => {
+    if (delayedRef.current === currentValue) {
+      return;
+    }
+
+    let timer: number | undefined;
+    if (currentValue) {
+      timer = window.setTimeout(() => setAndRender(true), delay);
+    } else {
+      setAndRender(false);
+    }
+    return () => {
+      if (timer) {
+        window.clearTimeout(timer);
+      }
+    };
+  }, [currentValue]);
+
+  return delayedRef.current;
 }
 
 const dropTarget = {};
@@ -34,4 +64,4 @@ export const RootDropTargets = DropTarget(
   (_connect, monitor): RootDropTargetsProps => ({
     isDragging: monitor.getItem() !== null && monitor.getItemType() === MosaicDragType.WINDOW,
   }),
-)(RootDropTargetsClass as any) as React.ComponentType<{}>;
+)(RootDropTargetsComponent as any) as React.ComponentType;

styles/mosaic-window.less

@@ -25,6 +25,9 @@
   }
 
   .mosaic-window-title {
+    display: flex;
+    align-items: center;
+    height: 100%;
     padding-left: 15px;
     flex: 1;
     text-overflow: ellipsis;