diff options
Diffstat (limited to 'src/client/views/collections/collectionGrid')
3 files changed, 88 insertions, 0 deletions
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> + ); + } +} |