managers sizing

packages/web/src/datagrid/ColumnManager.js

@@ -14,6 +14,7 @@ const Row = styled.div`
   margin-left: 5px;
   margin-right: 5px;
   cursor: pointer;
+  white-space: nowrap;
   &:hover {
     background-color: lightblue;
   }
@@ -103,7 +104,7 @@ export default function ColumnManager(props) {
         <InlineButton onClick={() => display.hideAllColumns()}>Hide</InlineButton>
         <InlineButton onClick={() => display.showAllColumns()}>Show</InlineButton>
       </SearchBoxWrapper>
-      <ManagerInnerContainer>
+      <ManagerInnerContainer style={{ maxWidth: props.managerSize }}>
         {display
           .getColumns(columnFilter)
           .filter((column) => filterName(columnFilter, column.columnName))

packages/web/src/datagrid/DataGrid.js

@@ -14,6 +14,7 @@ import {
   WidgetTitle,
 } from './ManagerStyles';
 import ReferenceManager from './ReferenceManager';
+import { HorizontalSplitter } from '../widgets/Splitter';
 
 const MainContainer = styled.div`
   position: absolute;
@@ -32,6 +33,7 @@ const ColumnManagerContainer = styled.div`
 const LeftContainer = styled.div`
   background-color: white;
   display: flex;
+  flex: 1;
 `;
 
 const DataGridContainer = styled.div`
@@ -42,27 +44,47 @@ const DataGridContainer = styled.div`
 /** @param props {import('./types').DataGridProps} */
 export default function DataGrid(props) {
   const Container1 = props.showReferences ? ManagerOuterContainer1 : ManagerOuterContainerFull;
+  const [managerSize, setManagerSize] = React.useState(0);
   return (
-    <MainContainer>
+    <HorizontalSplitter initialValue="300px" size={managerSize} setSize={setManagerSize}>
       <LeftContainer>
         <ManagerMainContainer>
           <Container1>
-            <ColumnManager {...props} />
+            <ColumnManager {...props} managerSize={managerSize}/>
           </Container1>
           {props.showReferences && (
             <ManagerOuterContainer2>
-              <ReferenceManager {...props} />
+              <ReferenceManager {...props} managerSize={managerSize}/>
             </ManagerOuterContainer2>
           )}
         </ManagerMainContainer>
       </LeftContainer>
 
-      {/* <ColumnManagerContainer>
-        <ColumnManager {...props} />
-      </ColumnManagerContainer> */}
       <DataGridContainer>
         <DataGridCore {...props} />
       </DataGridContainer>
-    </MainContainer>
+    </HorizontalSplitter>
+
+    // <MainContainer>
+    //   <LeftContainer style={{ width: 300 }}>
+    //     <ManagerMainContainer>
+    //       <Container1>
+    //         <ColumnManager {...props} />
+    //       </Container1>
+    //       {props.showReferences && (
+    //         <ManagerOuterContainer2>
+    //           <ReferenceManager {...props} />
+    //         </ManagerOuterContainer2>
+    //       )}
+    //     </ManagerMainContainer>
+    //   </LeftContainer>
+
+    //   {/* <ColumnManagerContainer>
+    //     <ColumnManager {...props} />
+    //   </ColumnManagerContainer> */}
+    //   <DataGridContainer>
+    //     <DataGridCore {...props} />
+    //   </DataGridContainer>
+    // </MainContainer>
   );
 }

packages/web/src/datagrid/ManagerStyles.js

@@ -37,7 +37,8 @@ export const ManagerOuterContainerFull = styled(ManagerOuterContainer)`
 
 export const ManagerInnerContainer = styled.div`
   flex: 1 1;
-  overflow-y: scroll;
+  overflow-y: auto;
+  overflow-x: auto;
 `;
 
 export const Input = styled.input`

packages/web/src/datagrid/ReferenceManager.js

@@ -23,10 +23,12 @@ const LinkContainer = styled.div`
   }
   cursor: pointer;
   display: flex;
+  flex-wrap: nowrap;
 `;
 
 const NameContainer = styled.div`
   margin-left: 5px;
+  white-space: nowrap;
 `;
 
 function ManagerRow({ tableName, columns, Icon, onClick }) {
@@ -55,7 +57,7 @@ export default function ReferenceManager(props) {
       <SearchBoxWrapper>
         <SearchInput placeholder="Search references" filter={filter} setFilter={setFilter} inputRef={inputRef} />
       </SearchBoxWrapper>
-      <ManagerInnerContainer>
+      <ManagerInnerContainer style={{ maxWidth: props.managerSize }}>
         {foreignKeys && foreignKeys.length > 0 && (
           <>
             <Header>References tables ({foreignKeys.length})</Header>

packages/web/src/datagrid/types.ts

@@ -13,5 +13,6 @@ export interface DataGridProps {
   onReferenceClick?: (def: GridReferenceDefinition) => void;
   onReferenceSourceChanged?: Function;
   refReloadToken?: string;
-  masterLoadedTime?: number
+  masterLoadedTime?: number;
+  managerSize?: number;
 }

packages/web/src/widgets/Splitter.js

@@ -4,12 +4,17 @@ import styled from 'styled-components';
 import useDimensions from '../utility/useDimensions';
 import theme from '../theme';
 
-const MainContainer = styled.div`
+const VerticalMainContainer = styled.div`
   flex: 1;
   display: flex;
   flex-direction: column;
 `;
 
+const HorizontalMainContainer = styled.div`
+  flex: 1;
+  display: flex;
+`;
+
 export const VerticalSplitHandle = styled.div`
   background-color: #ccc;
   height: ${theme.splitter.thickness}px;
@@ -74,27 +79,72 @@ export function useSplitterDrag(axes, onResize) {
   return handleResizeDown;
 }
 
-export function VerticalSplitter({ children }) {
+function SplitterCore({
+  children,
+  eventField,
+  dimensionField,
+  styleField,
+  Handle,
+  Main,
+  initialValue = undefined,
+  size = undefined,
+  setSize = undefined,
+}) {
   const childrenArray = _.isArray(children) ? children : [children];
   if (childrenArray.length !== 1 && childrenArray.length != 2) {
     throw new Error('Splitter must have 1 or 2 children');
   }
   const [refNode, dimensions] = useDimensions();
-  const [height1, setHeight1] = React.useState(0);
+  const [mySize, setMySize] = React.useState(0);
+  const size1 = size === undefined ? mySize : size;
+  const setSize1 = setSize === undefined ? setMySize : setSize;
 
   React.useEffect(() => {
-    setHeight1(dimensions.height / 2);
+    if (_.isString(initialValue) && initialValue.endsWith('px')) setSize1(parseInt(initialValue.slice(0, -2)));
+    else if (_.isString(initialValue) && initialValue.endsWith('%'))
+      setSize1((dimensions[dimensionField] * parseFloat(initialValue.slice(0, -1))) / 100);
+    else setSize1(dimensions[dimensionField] / 2);
   }, [dimensions]);
 
-  const handleResizeDown = useSplitterDrag('clientY', (diff) => setHeight1((v) => v + diff));
+  const handleResizeDown = useSplitterDrag(eventField, (diff) => setSize1((v) => v + diff));
 
   const isSplitter = !!childrenArray[1];
 
   return (
-    <MainContainer ref={refNode}>
-      <ChildContainer1 style={isSplitter ? { height: height1 } : { flex: '1' }}>{childrenArray[0]}</ChildContainer1>
-      {isSplitter && <VerticalSplitHandle onMouseDown={handleResizeDown} />}
+    <Main ref={refNode}>
+      <ChildContainer1 style={isSplitter ? { [styleField]: size1 } : { flex: '1' }}>{childrenArray[0]}</ChildContainer1>
+      {isSplitter && <Handle onMouseDown={handleResizeDown} />}
       {isSplitter && <ChildContainer2>{childrenArray[1]}</ChildContainer2>}
-    </MainContainer>
+    </Main>
+  );
+}
+
+export function VerticalSplitter({ children, ...other }) {
+  return (
+    <SplitterCore
+      eventField="clientY"
+      dimensionField="height"
+      styleField="height"
+      Handle={VerticalSplitHandle}
+      Main={VerticalMainContainer}
+      {...other}
+    >
+      {children}
+    </SplitterCore>
+  );
+}
+
+export function HorizontalSplitter({ children, ...other }) {
+  return (
+    <SplitterCore
+      eventField="clientX"
+      dimensionField="width"
+      styleField="width"
+      Handle={HorizontalSplitHandle}
+      Main={HorizontalMainContainer}
+      {...other}
+    >
+      {children}
+    </SplitterCore>
   );
 }