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
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
|
import React = require("react")
import ReactTable, { ReactTableDefaults, CellInfo, ComponentPropsGetterRC, ComponentPropsGetterR } from "react-table";
import { observer } from "mobx-react";
import { KeyStore as KS, Key } from "../../fields/Key";
import { Document } from "../../fields/Document";
import { FieldView, FieldViewProps } from "../nodes/FieldView";
import "react-table/react-table.css"
import { observable, action, computed } from "mobx";
import SplitPane from "react-split-pane"
import "./CollectionSchemaView.scss"
import { ScrollBox } from "../../util/ScrollBox";
import { CollectionViewBase } from "./CollectionViewBase";
import { DocumentView } from "../nodes/DocumentView";
@observer
export class CollectionSchemaView extends CollectionViewBase {
public static LayoutString() { return CollectionViewBase.LayoutString("CollectionSchemaView"); }
@observable
selectedIndex = 0;
renderCell = (rowProps: CellInfo) => {
let props: FieldViewProps = {
doc: rowProps.value[0],
fieldKey: rowProps.value[1],
DocumentViewForField: undefined
}
return (
<FieldView {...props} />
)
}
private getTrProps: ComponentPropsGetterR = (state, rowInfo) => {
const that = this;
if (!rowInfo) {
return {};
}
return {
onClick: action((e: React.MouseEvent, handleOriginal: Function) => {
that.selectedIndex = rowInfo.index;
const doc: Document = rowInfo.original;
console.log("Row clicked: ", doc.Title)
if (handleOriginal) {
handleOriginal()
}
}),
style: {
background: rowInfo.index == this.selectedIndex ? "#00afec" : "white",
color: rowInfo.index == this.selectedIndex ? "white" : "black"
}
};
}
onPointerDown = (e: React.PointerEvent) => {
let target = e.target as HTMLElement;
if (target.tagName == "SPAN" && target.className.includes("Resizer")) {
e.stopPropagation();
}
if (e.button === 2 && this.active) {
e.stopPropagation();
e.preventDefault();
} else {
if (e.buttons === 1 && this.active) {
e.stopPropagation();
}
}
}
render() {
const { DocumentForCollection: Document, CollectionFieldKey: fieldKey } = this.props;
const children = Document.GetListField<Document>(fieldKey, []);
const columns = Document.GetListField(KS.ColumnsKey,
[KS.Title, KS.Data, KS.Author])
let content;
if (this.selectedIndex != -1) {
content = (<DocumentView Document={children[this.selectedIndex]} DocumentView={undefined} ContainingCollectionView={this} />)
} else {
content = <div />
}
return (
<div onPointerDown={this.onPointerDown} >
<SplitPane split={"vertical"} defaultSize="60%">
<ScrollBox>
<ReactTable
data={children}
pageSize={children.length}
page={0}
showPagination={false}
style={{
display: "inline-block"
}}
columns={columns.map(col => {
return (
{
Header: col.Name,
accessor: (doc: Document) => [doc, col],
id: col.Id
})
})}
column={{
...ReactTableDefaults.column,
Cell: this.renderCell
}}
getTrProps={this.getTrProps}
/>
</ScrollBox>
{content}
</SplitPane>
</div>
)
}
}
|
