blob: a5f5c724ac8a0c1ce8a1ec5bff4f911101887f3b (
plain)
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
53
54
55
|
import * as React from 'react';
import { observer } from "mobx-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';
import { CollectionGridView } from './CollectionGridView';
export { Layout } from 'react-grid-layout';
interface GridProps {
width: number;
nodeList: JSX.Element[] | null;
layout: Layout[];
numCols: number;
rowHeight: number;
setLayout: Function;
}
/**
* Wrapper around the actual GridLayout of `react-grid-layout`.
*/
@observer
export default class Grid extends React.Component<GridProps> {
/**
* If there has been a change in layout, calls a method in CollectionGridView to set the layouts on the Document.
* @param layout `Layout[]`
*/
onLayoutChange(layout: Layout[]) {
console.log("setting in grid component" + layout[0].w);
this.props.setLayout(layout);
}
render() {
console.log("In grid layout prop received value= " + this.props.layout?.[0]?.w);
return (
<GridLayout className="layout"
layout={this.props.layout}
cols={this.props.numCols}
rowHeight={this.props.rowHeight}
width={this.props.width}
compactType={null}
isDroppable={true}
margin={[10, 10]}
onLayoutChange={layout => this.onLayoutChange(layout)}
>
{this.props.nodeList}
</GridLayout >
);
}
}
|
