resizable widgets in grid

packages/web/src/datagrid/ColumnManager.js

@@ -89,17 +89,14 @@ function ColumnManagerRow(props) {
 export default function ColumnManager(props) {
   const { display } = props;
   const [columnFilter, setColumnFilter] = React.useState('');
-  const inputRef = React.useRef(null);
 
   return (
     <>
-      <WidgetTitle inputRef={inputRef}>Columns</WidgetTitle>
       <SearchBoxWrapper>
         <SearchInput
           placeholder="Search columns"
           filter={columnFilter}
           setFilter={setColumnFilter}
-          inputRef={inputRef}
         />
         <InlineButton onClick={() => display.hideAllColumns()}>Hide</InlineButton>
         <InlineButton onClick={() => display.showAllColumns()}>Show</InlineButton>

packages/web/src/datagrid/DataGrid.js

@@ -15,6 +15,7 @@ import {
 } from './ManagerStyles';
 import ReferenceManager from './ReferenceManager';
 import { HorizontalSplitter } from '../widgets/Splitter';
+import WidgetColumnBar, { WidgetColumnBarItem } from '../widgets/WidgetColumnBar';
 
 const MainContainer = styled.div`
   position: absolute;
@@ -43,21 +44,20 @@ const DataGridContainer = styled.div`
 
 export default function DataGrid(props) {
   const { GridCore } = props;
-  const Container1 = props.showReferences ? ManagerOuterContainer_60 : ManagerOuterContainerFull;
   const [managerSize, setManagerSize] = React.useState(0);
   return (
     <HorizontalSplitter initialValue="300px" size={managerSize} setSize={setManagerSize}>
       <LeftContainer>
-        <ManagerMainContainer>
-          <Container1>
+        <WidgetColumnBar>
+          <WidgetColumnBarItem title="Columns" name="columns" height="60%">
             <ColumnManager {...props} managerSize={managerSize} />
-          </Container1>
+          </WidgetColumnBarItem>
           {props.showReferences && (
-            <ManagerOuterContainer_40>
+            <WidgetColumnBarItem title="References" name="references">
               <ReferenceManager {...props} managerSize={managerSize} />
-            </ManagerOuterContainer_40>
+            </WidgetColumnBarItem>
           )}
-        </ManagerMainContainer>
+        </WidgetColumnBar>
       </LeftContainer>
 
       <DataGridContainer>

packages/web/src/datagrid/ReferenceManager.js

@@ -50,13 +50,11 @@ export default function ReferenceManager(props) {
   const { baseTable } = display || {};
   const { foreignKeys } = baseTable || {};
   const { dependencies } = baseTable || {};
-  const inputRef = React.useRef(null);
 
   return (
     <>
-      <WidgetTitle inputRef={inputRef}>References</WidgetTitle>
       <SearchBoxWrapper>
-        <SearchInput placeholder="Search references" filter={filter} setFilter={setFilter} inputRef={inputRef} />
+        <SearchInput placeholder="Search references" filter={filter} setFilter={setFilter} />
       </SearchBoxWrapper>
       <ManagerInnerContainer style={{ maxWidth: props.managerSize }}>
         {foreignKeys && foreignKeys.length > 0 && (

packages/web/src/freetable/FreeTableColumnEditor.js

@@ -134,7 +134,6 @@ export default function FreeTableColumnEditor(props) {
   const model = modelState.value;
   return (
     <>
-      <WidgetTitle>Columns</WidgetTitle>
       <ManagerInnerContainer style={{ maxWidth: props.managerSize }}>
         {model.structure.columns.map((column, index) =>
           index == editingColumn ? (

packages/web/src/freetable/FreeTableGrid.js

@@ -9,6 +9,7 @@ import FreeTableColumnEditor from './FreeTableColumnEditor';
 import FreeTableGridCore from './FreeTableGridCore';
 import MacroDetail from './MacroDetail';
 import MacroManager from './MacroManager';
+import WidgetColumnBar, { WidgetColumnBarItem } from '../widgets/WidgetColumnBar';
 
 const LeftContainer = styled.div`
   background-color: white;
@@ -50,19 +51,19 @@ export default function FreeTableGrid(props) {
   return (
     <HorizontalSplitter initialValue="300px" size={managerSize} setSize={setManagerSize}>
       <LeftContainer>
-        <ManagerMainContainer>
-          <ManagerOuterContainer_40>
+        <WidgetColumnBar>
+          <WidgetColumnBarItem title="Columns" name="columns" height="40%">
             <FreeTableColumnEditor {...props} />
-          </ManagerOuterContainer_40>
-          <ManagerOuterContainer_60>
+          </WidgetColumnBarItem>
+          <WidgetColumnBarItem title="Macros" name="macros">
             <MacroManager
               {...props}
               managerSize={managerSize}
               selectedMacro={selectedMacro}
               setSelectedMacro={setSelectedMacro}
             />
-          </ManagerOuterContainer_60>
-        </ManagerMainContainer>
+          </WidgetColumnBarItem>
+        </WidgetColumnBar>
       </LeftContainer>
 
       <DataGridContainer>

packages/web/src/freetable/MacroManager.js

@@ -26,15 +26,13 @@ const SearchBoxWrapper = styled.div`
 // }
 
 export default function MacroManager({ managerSize, selectedMacro, setSelectedMacro }) {
-  const inputRef = React.useRef(null);
   const [filter, setFilter] = React.useState('');
 
   return (
     <>
-      <WidgetTitle inputRef={inputRef}>Macros</WidgetTitle>
       <ManagerInnerContainer style={{ maxWidth: managerSize }}>
         <SearchBoxWrapper>
-          <SearchInput placeholder="Search macros" filter={filter} setFilter={setFilter} inputRef={inputRef} />
+          <SearchInput placeholder="Search macros" filter={filter} setFilter={setFilter} />
         </SearchBoxWrapper>
         <AppObjectList
           list={_.sortBy(macros, 'title')}

packages/web/src/widgets/WidgetColumnBar.js

@@ -42,7 +42,7 @@ export default function WidgetColumnBar({ children }) {
   const childArray = _.isArray(children) ? children : [children];
   const [refNode, dimensions] = useDimensions();
   const [collapsedWidgets, setCollapsedWidgets] = React.useState(() =>
-    childArray.filter((x) => x.props.collapsed).map((x) => x.props.key)
+    childArray.filter((x) => x && x.props.collapsed).map((x) => x.props.key)
   );
   const toggleCollapsed = (name) => {
     if (collapsedWidgets.includes(name)) setCollapsedWidgets(collapsedWidgets.filter((x) => x != name));
@@ -62,7 +62,7 @@ export default function WidgetColumnBar({ children }) {
               widget={widget}
               key={widget.props.name}
               initialSize={widget.props.height}
-              splitterVisible={!!childArray.slice(index + 1).find((x) => !collapsedWidgets.includes(x.props.name))}
+              splitterVisible={!!childArray.slice(index + 1).find((x) => x && !collapsedWidgets.includes(x.props.name))}
             />
           </>
         );