blob: 9ba812ba0208a9cc496aaebbff1bfb32f48f3e1f (
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
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
|
import { observer } from "mobx-react";
import { Document } from "../../fields/Document";
import { KeyStore } from "../../fields/KeyStore";
import { ListField } from "../../fields/ListField";
import React = require("react")
import { TextField } from "../../fields/TextField";
import { observable, action } from "mobx";
import "./CollectionTreeView.scss";
export interface PresViewProps {
Document: Document;
}
@observer
/**
* Component that takes in a document prop and a boolean whether it's collapsed or not.
*/
class PresentationViewItem extends React.Component<PresViewProps> {
//observable means render is re-called every time variable is changed
@observable
collapsed: boolean = false;
/**
* Renders a single child document. It will just append a list element.
* @param document The document to render.
*/
renderChild(document: Document) {
let title = document.GetT<TextField>(KeyStore.Title, TextField);
// if the title hasn't loaded, immediately return the div
if (!title || title === "<Waiting>") {
return <div key={document.Id}></div>;
}
// finally, if it's a normal document, then render it as such.
else {
return <li key={document.Id}>{title.Data}</li>;
}
}
render() {
var children = this.props.Document.GetT<ListField<Document>>(KeyStore.Data, ListField);
if (children && children !== "<Waiting>") {
return (<div>
{children.Data.map(value => this.renderChild(value))}
</div>)
} else {
return <div></div>;
}
}
}
@observer
export class PresentationView extends React.Component<PresViewProps> {
render() {
let titleStr = "";
let title = this.props.Document.GetT<TextField>(KeyStore.Title, TextField);
if (title && title !== "<Waiting>") {
titleStr = title.Data;
}
return (
<div>
<h3>{titleStr}</h3>
<ul className="no-indent">
<PresentationViewItem
Document={this.props.Document}
/>
</ul>
</div>
);
}
}
|
