src/client/views/collections/collectionGrid/Grid.tsx


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52

import { observer } from 'mobx-react';
import * as React from 'react';

import '../../../../../node_modules/react-grid-layout/css/styles.css';
import '../../../../../node_modules/react-resizable/css/styles.css';

import * as GridLayout from 'react-grid-layout';
import { Layout } from 'react-grid-layout';
export { Layout } from 'react-grid-layout';

interface GridProps {
    width: number;
    nodeList: JSX.Element[] | null;
    layout: Layout[] | undefined;
    numCols: number;
    rowHeight: number;
    setLayout: (layout: Layout[]) => void;
    transformScale: number;
    childrenDraggable: boolean;
    preventCollision: boolean;
    compactType: string;
    margin: number;
}

/**
 * Wrapper around the actual GridLayout of `react-grid-layout`.
 */
@observer
export default class Grid extends React.Component<GridProps> {
    render() {
        const compactType = this.props.compactType === 'vertical' || this.props.compactType === 'horizontal' ? this.props.compactType : null;
        return (
            <GridLayout
                className="layout"
                layout={this.props.layout}
                cols={this.props.numCols}
                rowHeight={this.props.rowHeight}
                width={this.props.width}
                compactType={compactType}
                isDroppable={true}
                isDraggable={this.props.childrenDraggable}
                isResizable={this.props.childrenDraggable}
                useCSSTransforms={true}
                onLayoutChange={this.props.setLayout}
                preventCollision={this.props.preventCollision}
                transformScale={1 / this.props.transformScale} // still doesn't work :(  ??
                margin={[this.props.margin, this.props.margin]}>
                {this.props.nodeList}
            </GridLayout>
        );
    }
}