re-setup of grid view

4 files changed, 93 insertions, 1 deletions

diff --git a/src/client/views/collections/CollectionView.tsx b/src/client/views/collections/CollectionView.tsx
index 877e4355f..bedc928ad 100644
--- a/src/client/views/collections/CollectionView.tsx
+++ b/src/client/views/collections/CollectionView.tsx
@@ -46,6 +46,7 @@ import { InteractionUtils } from '../../util/InteractionUtils';
 import { ObjectField } from '../../../new_fields/ObjectField';
 import CollectionMapView from './CollectionMapView';
 import { Transform } from 'prosemirror-transform';
+import { CollectionGridView } from './collectionGrid/CollectionGridView';
 const higflyout = require("@hig/flyout");
 export const { anchorPoints } = higflyout;
 export const Flyout = higflyout.default;
@@ -67,7 +68,8 @@ export enum CollectionViewType {
     Carousel = "carousel",
     Linear = "linear",
     Staff = "staff",
-    Map = "map"
+    Map = "map",
+    Grid = "grid"
 }
 
 export interface CollectionRenderProps {
@@ -174,6 +176,7 @@ export class CollectionView extends Touchable<FieldViewProps> {
             case CollectionViewType.Masonry: { this.props.Document.singleColumn = false; return (<CollectionStackingView key="collview" {...props} />); }
             case CollectionViewType.Time: { return (<CollectionTimeView key="collview" {...props} />); }
             case CollectionViewType.Map: return (<CollectionMapView key="collview" {...props} />);
+            case CollectionViewType.Grid: return (<CollectionGridView key="gridview" {...props} />);
             case CollectionViewType.Freeform:
             default: { this.props.Document._freeformLayoutEngine = undefined; return (<CollectionFreeFormView key="collview" {...props} />); }
         }
@@ -216,6 +219,7 @@ export class CollectionView extends Touchable<FieldViewProps> {
             subItems.push({ description: "Carousel", event: () => this.props.Document._viewType = CollectionViewType.Carousel, icon: "columns" });
             subItems.push({ description: "Pivot/Time", event: () => this.props.Document._viewType = CollectionViewType.Time, icon: "columns" });
             subItems.push({ description: "Map", event: () => this.props.Document._viewType = CollectionViewType.Map, icon: "globe-americas" });
+            subItems.push({ description: "Grid", event: () => this.props.Document._viewType = CollectionViewType.Grid, icon: "rainbow" });
             switch (this.props.Document._viewType) {
                 case CollectionViewType.Freeform: {
                     subItems.push({ description: "Custom", icon: "fingerprint", event: AddCustomFreeFormLayout(this.props.Document, this.props.fieldKey) });
diff --git a/src/client/views/collections/collectionGrid/CollectionGridView.scss b/src/client/views/collections/collectionGrid/CollectionGridView.scss
new file mode 100644
index 000000000..c089585a0
--- /dev/null
+++ b/src/client/views/collections/collectionGrid/CollectionGridView.scss
@@ -0,0 +1,13 @@
+.collectionGridView_contents {
+    display: flex;
+    overflow: hidden;
+    width: 100%;
+    height: 100%;
+
+    .document-wrapper {
+        display: flex;
+        flex-direction: column;
+        width: 100px;
+        height: 100px;
+    }
+}
\ No newline at end of file
diff --git a/src/client/views/collections/collectionGrid/CollectionGridView.tsx b/src/client/views/collections/collectionGrid/CollectionGridView.tsx
new file mode 100644
index 000000000..2e496fe7f
--- /dev/null
+++ b/src/client/views/collections/collectionGrid/CollectionGridView.tsx
@@ -0,0 +1,41 @@
+import { action, computed } from 'mobx';
+import { observer } from 'mobx-react';
+import * as React from "react";
+import { Doc } from '../../../../new_fields/Doc';
+import { documentSchema } from '../../../../new_fields/documentSchemas';
+import { makeInterface } from '../../../../new_fields/Schema';
+import { BoolCast, NumCast, ScriptCast, StrCast, Cast } from '../../../../new_fields/Types';
+import { DragManager } from '../../../util/DragManager';
+import { Transform } from '../../../util/Transform';
+import { undoBatch } from '../../../util/UndoManager';
+import { ContentFittingDocumentView } from '../../nodes/ContentFittingDocumentView';
+import { CollectionSubView } from '../CollectionSubView';
+import { List } from '../../../../new_fields/List';
+import { returnZero } from '../../../../Utils';
+import Grid from "./Grid";
+
+
+type GridSchema = makeInterface<[typeof documentSchema]>;
+const GridSchema = makeInterface(documentSchema);
+
+export class CollectionGridView extends CollectionSubView(GridSchema) {
+    render(): JSX.Element {
+        const layout = [
+            { i: 'a', x: 0, y: 0, w: 1, h: 2, static: true },
+            { i: 'b', x: 1, y: 0, w: 3, h: 2, minW: 2, maxW: 4 },
+            { i: 'c', x: 4, y: 0, w: 1, h: 2 }
+        ];
+        return (
+            <div className="collectionGridView_contents"
+                style={{
+                    marginLeft: NumCast(this.props.Document._xMargin), marginRight: NumCast(this.props.Document._xMargin),
+                    marginTop: NumCast(this.props.Document._yMargin), marginBottom: NumCast(this.props.Document._yMargin)
+                }} ref={this.createDashEventsTarget}>
+
+                <Grid>
+
+                </Grid>
+            </div>
+        );
+    }
+}
diff --git a/src/client/views/collections/collectionGrid/Grid.tsx b/src/client/views/collections/collectionGrid/Grid.tsx
new file mode 100644
index 000000000..550459299
--- /dev/null
+++ b/src/client/views/collections/collectionGrid/Grid.tsx
@@ -0,0 +1,34 @@
+import * as React from 'react';
+import { observer } from "mobx-react";
+import { observable, action } from "mobx";
+
+
+interface Props {
+
+}
+
+import "../../../../../node_modules/react-grid-layout/css/styles.css";
+import "../../../../../node_modules/react-resizable/css/styles.css";
+
+import * as GridLayout from 'react-grid-layout';
+
+@observer
+export default class Grid extends React.Component {
+    render() {
+        // layout is an array of objects, see the demo for more complete usage
+        const layout = [
+            { i: 'a', x: 0, y: 0, w: 1, h: 2, static: true },
+            { i: 'b', x: 1, y: 0, w: 3, h: 2, minW: 2, maxW: 4 },
+            { i: 'c', x: 4, y: 0, w: 1, h: 2 }
+        ];
+        return (
+            // <div className="collectionGridView_contents"
+            // style={}>
+            <GridLayout className="layout" layout={layout} cols={12} rowHeight={30} width={1200}>
+                <div key="a">a</div>
+                <div key="b">b</div>
+                <div key="c">c</div>
+            </GridLayout>
+        );
+    }
+}