free table infrastructure

packages/web/src/freetable/FreeTableGrid.js

@@ -0,0 +1,37 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import { ManagerMainContainer, ManagerOuterContainerFull } from '../datagrid/ManagerStyles';
+import { HorizontalSplitter } from '../widgets/Splitter';
+import FreeTableGridCore from './FreeTableGridCore';
+
+const LeftContainer = styled.div`
+  background-color: white;
+  display: flex;
+  flex: 1;
+`;
+
+const DataGridContainer = styled.div`
+  position: relative;
+  flex-grow: 1;
+`;
+
+export default function FreeTableGrid(props) {
+  const [managerSize, setManagerSize] = React.useState(0);
+  return (
+    <HorizontalSplitter initialValue="300px" size={managerSize} setSize={setManagerSize}>
+      <LeftContainer>
+        <ManagerMainContainer>
+          <ManagerOuterContainerFull>
+            COLUMNS
+            {/* <ColumnManager {...props} managerSize={managerSize} /> */}
+          </ManagerOuterContainerFull>
+        </ManagerMainContainer>
+      </LeftContainer>
+
+      <DataGridContainer>
+        <FreeTableGridCore {...props} />
+      </DataGridContainer>
+    </HorizontalSplitter>
+  );
+}

packages/web/src/freetable/FreeTableGridCore.js

@@ -0,0 +1,17 @@
+import { createGridCache, FreeTableGridDisplay } from '@dbgate/datalib';
+import React from 'react';
+import DataGridCore from '../datagrid/DataGridCore';
+import FreeTableGrider from './FreeTableGrider';
+
+export default function FreeTableGridCore(props) {
+  const { modelState, dispatchModel, config, setConfig } = props;
+  const grider = React.useMemo(() => FreeTableGrider.factory(props), FreeTableGrider.factoryDeps(props));
+  const [cache, setCache] = React.useState(createGridCache());
+  const display = React.useMemo(() => new FreeTableGridDisplay(modelState.value, config, setConfig, cache, setCache), [
+    modelState.value,
+    config,
+    cache,
+  ]);
+
+  return <DataGridCore {...props} grider={grider} display={display} />;
+}

packages/web/src/freetable/FreeTableGrider.ts

@@ -0,0 +1,25 @@
+import { FreeTableModel } from '@dbgate/datalib';
+import Grider, { GriderRowStatus } from '../datagrid/Grider';
+
+export default class FreeTableGrider extends Grider {
+  public model: FreeTableModel;
+  public rows: any[];
+  constructor(public modelState, public dispatchModel) {
+    super();
+    this.model = modelState && modelState.value;
+    this.rows = this.model.rows;
+  }
+  getRowData(index: any) {
+    return this.rows[index];
+  }
+  get rowCount() {
+    return this.rows.length;
+  }
+
+  static factory({ modelState, dispatchModel }): FreeTableGrider {
+    return new FreeTableGrider(modelState, dispatchModel);
+  }
+  static factoryDeps({ modelState, dispatchModel }) {
+    return [modelState, dispatchModel];
+  }
+}

packages/web/src/freetable/useNewFreeTable.js

@@ -0,0 +1,15 @@
+import _ from 'lodash';
+import { useSetOpenedTabs, useCurrentDatabase } from '../utility/globalState';
+import { openNewTab } from '../utility/common';
+
+export default function useNewFreeTable() {
+  const setOpenedTabs = useSetOpenedTabs();
+
+  return ({ title = undefined, ...props } = {}) =>
+    openNewTab(setOpenedTabs, {
+      title: title || 'Table',
+      icon: 'freetable.svg',
+      tabComponent: 'FreeTableTab',
+      props: {},
+    });
+}