Merge pull request #220 from open-source-labs/denton/statemanager

Denton/statemanager

Author: martins5225

Dockerrun.aws.json

@@ -12,7 +12,7 @@
   "Environment": [
     {
       "Name": "API_BASE_URL",
-      "Value": "Reactypev17-env.eba-mbvivk7k.us-east-1.elasticbeanstalk.com"
+      "Value": "Reactype-v17env.eba-sw2fhsbj.us-east-1.elasticbeanstalk.com"
     }
   ]
 }

app/src/components/StateManagement/CreateTab/components/TableParentProps.tsx

@@ -2,7 +2,7 @@ import React, { useState, useEffect } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import {
   DataGrid,
-  GridEditRowsModel,
+  GridEditRowsModel
 } from '@mui/x-data-grid';
 import Button from '@mui/material/Button';
 import makeStyles from '@mui/styles/makeStyles';
@@ -104,6 +104,7 @@ const TableParentProps = props => {
   }
   }
 
+
   return (
     <div className={'state-prop-grid'}> 
       <DataGrid
@@ -113,6 +114,7 @@ const TableParentProps = props => {
         rowsPerPageOptions={[5]}
         editRowsModel={editRowsModel}
         className={props.isThemeLight ? classes.themeLight : classes.themeDark}
+        disableColumnMenu={true}
       />
     </div>
   );

app/src/components/StateManagement/CreateTab/components/TablePassedInProps.tsx

@@ -1,7 +1,7 @@
 import React, { useState, useEffect } from 'react';
 import {
   DataGrid,
-  GridEditRowsModel,
+  GridEditRowsModel
 } from '@mui/x-data-grid';
 import Button from '@mui/material/Button';
 import ClearIcon from '@mui/icons-material/Clear';
@@ -96,6 +96,7 @@ const TablePassedInProps = props => {
   let rows: any = passedInProps?.slice();
   //let rows: readonly StateProp[] = passedInProps?.slice() || [];
 
+
   return (
     <div className={'state-prop-grid'}>
       <DataGrid
@@ -105,6 +106,7 @@ const TablePassedInProps = props => {
         rowsPerPageOptions={[5]}
         editRowsModel={editRowsModel}
         className={props.isThemeLight ? classes.themeLight : classes.themeDark}
+        disableColumnMenu={true}
       />
     </div>
   );

app/src/components/StateManagement/CreateTab/components/TableStateProps.tsx

@@ -103,8 +103,6 @@ const TableStateProps = props => {
   let rows = [];
   currentComponent.stateProps?.forEach((prop) =>{ rows.push(prop)}); 
 
-
-
   return (
     <div className={'state-prop-grid'}>
       <DataGrid
@@ -115,7 +113,7 @@ const TableStateProps = props => {
         editRowsModel={editRowsModel}
         onRowClick={selectHandler}
         className={props.isThemeLight ? classes.themeLight : classes.themeDark}
-        disableColumnMenu={false}
+        disableColumnMenu={true}
       />
     </div>
   );

app/src/components/bottom/BottomPanel.tsx

@@ -22,7 +22,10 @@ const BottomPanel = (props): JSX.Element => {
     const dy = y - e.clientY;
 
     // Adjust the dimension of element
-    node.current.style.height = `${h + dy}px`;
+    const newVal = h + dy;
+    const styles = window.getComputedStyle(node.current);
+    const min = parseInt(styles.minHeight, 10);
+    node.current.style.height = newVal > min ? `${h + dy}px` : `${min}px`;
   };
 
   const mouseUpHandler = function () {
@@ -33,6 +36,7 @@ const BottomPanel = (props): JSX.Element => {
 
   useEffect(() => {
     node.current.style.height = '50vh';
+    node.current.style.minHeight = '50vh';
   }, []);
 
   return (
@@ -41,7 +45,7 @@ const BottomPanel = (props): JSX.Element => {
       <div id="resize-drag" onMouseDown={mouseDownHandler} tabIndex={0}>
         ......
       </div>
-      <BottomTabs isThemeLight={props.isThemeLight} />
+      <BottomTabs setBottomShow = {props.setBottomShow} isThemeLight={props.isThemeLight} />
     </div></>
   );
 };

app/src/components/bottom/BottomTabs.tsx

@@ -50,6 +50,7 @@ const BottomTabs = (props): JSX.Element => {
     <div
       className={`${classes.root} ${classes.rootLight}`}
       style={{ backgroundColor: '#191919' , zIndex: 1, borderTop: '2px solid grey'}}
+      onMouseOver={()=>{props.setBottomShow(true)}}
     >
       <Box
         display="flex"

app/src/containers/MainContainer.tsx

@@ -71,10 +71,10 @@ const MainContainer = (props): JSX.Element => {
     const bottomPanelRef = useRef(null);
 
     useEffect(() => {
-      const handleClick = (event) => {
+      const handleClick = (event) => {        
         if (event.type === "click" &&
           (bottomPanelRef.current &&
-          !bottomPanelRef.current.contains(event.target)) || (event.type === "message" && event.data === 'iframeClicked')) {
+          !bottomPanelRef.current.contains(event.target) && event.target.getAttribute("role") != "menu" && !event.target.classList.contains('MuiInput-input')) || (event.type === "message" && event.data === 'iframeClicked')) {
           //menuButtonRef is to ensure that handleClose does not get invoked when the user clicks on the menu dropdown button
           handleClose();
         }
@@ -105,8 +105,8 @@ const MainContainer = (props): JSX.Element => {
         <CanvasContainer isThemeLight={props.isThemeLight} />
         <DemoRender />
       </div>
-      <div onMouseOver={()=>setBottomShow(true)} className={showPanel} ref={ref}>
-        <BottomPanel isThemeLight={props.isThemeLight} />
+      <div className={showPanel} ref = {ref}>
+        <BottomPanel setBottomShow = {setBottomShow} isThemeLight={props.isThemeLight} />
       </div>
     </div>
   );

app/src/public/styles/style.css

@@ -513,10 +513,10 @@ BOTTOM PANEL
 .bottom-hide:focus-within {
   max-height: 100%;
 }
-
+/* 
 .bottom-hide:hover {
   max-height: 100%;
-}
+} */
 
 .tab-content {
   height: calc(100% - 76px);
@@ -528,10 +528,17 @@ BOTTOM PANEL
   background-color: #191919;
 }
 
-.MuiDataGrid-menuList {
+.MuiDataGrid-menuList, .MuiDataGrid-columnsPanel, .MuiDataGrid-filterForm {
 
   background-color: #333333
 }
+.MuiDataGrid-panelHeader, .MuiDataGrid-panelFooter {
+
+  background-color: #252525
+
+}
+
+
 
 #resize-drag {