Merge pull request #13 from oslabs-beta/jon

Revise clicking & dragging functionality of bottom panel

Author: johnwage

app/src/components/bottom/BottomPanel.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import BottomTabs from './BottomTabs';
 import { ExpandLess, ExpandMore } from '@mui/icons-material';
 
@@ -7,6 +7,8 @@ const BottomPanel = (props): JSX.Element => {
   let h: number = 0;
   const node = useRef() as React.MutableRefObject<HTMLDivElement>;
 
+  const [isDragging, setIsDragging] = useState(false);
+
   const mouseDownHandler = (e): void => {
     y = e.clientY;
 
@@ -28,6 +30,7 @@ const BottomPanel = (props): JSX.Element => {
   };
 
   const mouseMoveHandler = function (e: MouseEvent): void {
+    if (!props.bottomShow) return; // prevent drag calculation to occur when bottom menu is not showing
 
     const dy = y - e.clientY;
 
@@ -38,6 +41,8 @@ const BottomPanel = (props): JSX.Element => {
   };
 
   const mouseUpHandler = function () {
+    // puts false in callback queue after OnDragStart sets to true (b/c react 17 doesn't have onDragEnd)
+    setTimeout(() => setIsDragging(false), 0);
     document.removeEventListener('mousemove', mouseMoveHandler);
     document.removeEventListener('mouseup', mouseUpHandler);
     window.removeEventListener('message', handleIframeMessage);
@@ -54,7 +59,9 @@ const BottomPanel = (props): JSX.Element => {
         <div
           id="resize-drag"
           onMouseDown={mouseDownHandler}
-          onClick={() => props.setBottomShow(true)}
+          draggable
+          onDragStart={() => setIsDragging(true)}
+          onClick={() => !isDragging && props.setBottomShow(!props.bottomShow)}
           tabIndex={0}
         >
           {props.bottomShow ? <ExpandMore /> : <ExpandLess />}

app/src/components/bottom/BottomTabs.tsx

@@ -41,6 +41,10 @@ const BottomTabs = (props): JSX.Element => {
 
   arrow.renderArrow(state.canvasFocus?.childId);
 
+  const showBottomPanel = () => {
+    props.setBottomShow(true);
+  };
+
   return (
     <div
       className={`${classes.root} ${classes.rootLight}`}
@@ -49,9 +53,6 @@ const BottomTabs = (props): JSX.Element => {
         zIndex: 1,
         borderTop: '2px solid grey'
       }}
-      onClick={() => {
-        props.setBottomShow(true);
-      }}
     >
       <Box
         display="flex"
@@ -71,31 +72,37 @@ const BottomTabs = (props): JSX.Element => {
             disableRipple
             classes={{ root: classes.tabRoot, selected: classes.tabSelected }}
             label="Creation Panel"
+            onClick={showBottomPanel}
           />
           <Tab
             disableRipple
             classes={{ root: classes.tabRoot, selected: classes.tabSelected }}
             label="Customization"
+            onClick={showBottomPanel}
           />
           <Tab
             disableRipple
             classes={{ root: classes.tabRoot, selected: classes.tabSelected }}
             label="CSS Editor"
+            onClick={showBottomPanel}
           />
           <Tab
             disableRipple
             classes={{ root: classes.tabRoot, selected: classes.tabSelected }}
             label="Component Tree"
+            onClick={showBottomPanel}
           />
           <Tab
             disableRipple
             classes={{ root: classes.tabRoot, selected: classes.tabSelected }}
             label="Context Manager"
+            onClick={showBottomPanel}
           />
           <Tab
             disableRipple
             classes={{ root: classes.tabRoot, selected: classes.tabSelected }}
             label="State Manager"
+            onClick={showBottomPanel}
           />
           <Tab
             disableRipple

app/src/containers/MainContainer.tsx

@@ -109,15 +109,27 @@ const MainContainer = (props): JSX.Element => {
     setBottomShow(false);
   };
 
-  let showPanel = bottomShow ? 'bottom-show' : 'bottom-hide';
+  const hideBottomPanelStyles = {
+    maxHeight: '64px',
+    boxSizing: 'border-box',
+    transition: 'all 0.5s ease-in-out'
+  };
+
+  const showBottomPanelStyles = {
+    maxHeight: '100%',
+    transition: 'all 0.5s ease-in-out'
+  };
 
   return (
     <div className="main-container" style={style} ref={containerRef}>
       <div className="main">
         <CanvasContainer isThemeLight={props.isThemeLight} />
         <DemoRender />
       </div>
-      <div className={showPanel} ref={ref}>
+      <div
+        ref={ref}
+        style={bottomShow ? showBottomPanelStyles : hideBottomPanelStyles}
+      >
         <BottomPanel
           bottomShow={bottomShow}
           setBottomShow={setBottomShow}

app/src/public/styles/style.css

@@ -502,25 +502,6 @@ BOTTOM PANEL
 /////////////////////////////////////////////////////
 */
 
-.bottom-hide {
-  max-height: 64px;
-  box-sizing: border-box;
-  transition: all 0.5s ease-in-out;
-}
-
-.bottom-show {
-  max-height: 100%;
-  transition: all 0.5s ease-in-out;
-}
-
-.bottom-hide:focus-within {
-  max-height: 100%;
-}
-/* 
-.bottom-hide:hover {
-  max-height: 100%;
-} */
-
 .tab-content {
   height: calc(100% - 76px);
   width: 100%;