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
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
|
import { IconProp, library } from '@fortawesome/fontawesome-svg-core';
import { faCaretDown, faCaretRight, faTrashAlt } from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { action, observable, trace } from "mobx";
import { observer } from "mobx-react";
import { Document } from "../../../fields/Document";
import { FieldWaiting } from "../../../fields/Field";
import { KeyStore } from "../../../fields/KeyStore";
import { ListField } from "../../../fields/ListField";
import { setupDrag } from "../../util/DragManager";
import { EditableView } from "../EditableView";
import "./CollectionTreeView.scss";
import { CollectionView, COLLECTION_BORDER_WIDTH } from "./CollectionView";
import { CollectionViewBase } from "./CollectionViewBase";
import React = require("react")
export interface TreeViewProps {
document: Document;
deleteDoc: (doc: Document) => void;
}
export enum BulletType {
Collapsed,
Collapsible,
List
}
library.add(faTrashAlt);
library.add(faCaretDown);
library.add(faCaretRight);
@observer
/**
* Component that takes in a document prop and a boolean whether it's collapsed or not.
*/
class TreeView extends React.Component<TreeViewProps> {
@observable _collapsed: boolean = true;
delete = () => this.props.deleteDoc(this.props.document);
@action
remove = (document: Document) => {
var children = this.props.document.GetT<ListField<Document>>(KeyStore.Data, ListField);
if (children && children !== FieldWaiting) {
children.Data.splice(children.Data.indexOf(document), 1);
}
}
renderBullet(type: BulletType) {
let onClicked = action(() => this._collapsed = !this._collapsed);
let bullet: IconProp | undefined = undefined;
switch (type) {
case BulletType.Collapsed: bullet = "caret-right"; break;
case BulletType.Collapsible: bullet = "caret-down"; break;
}
return <div className="bullet" onClick={onClicked}>{bullet ? <FontAwesomeIcon icon={bullet} /> : ""} </div>
}
/**
* Renders the EditableView title element for placement into the tree.
*/
renderTitle() {
let reference = React.createRef<HTMLDivElement>();
let onItemDown = setupDrag(reference, () => this.props.document, (containingCollection: CollectionView) => this.props.deleteDoc(this.props.document));
let editableView = (titleString: string) =>
(<EditableView
display={"inline"}
contents={titleString}
height={36}
GetValue={() => this.props.document.Title}
SetValue={(value: string) => {
this.props.document.SetText(KeyStore.Title, value);
return true;
}}
/>);
return (
<div className="docContainer" ref={reference} onPointerDown={onItemDown}>
{editableView(this.props.document.Title)}
<div className="delete-button" onClick={this.delete}><FontAwesomeIcon icon="trash-alt" size="xs" /></div>
</div >)
}
render() {
let bulletType = BulletType.List;
let childElements: JSX.Element | undefined = undefined;
var children = this.props.document.GetT<ListField<Document>>(KeyStore.Data, ListField);
if (children && children !== FieldWaiting) { // add children for a collection
if (!this._collapsed) {
bulletType = BulletType.Collapsible;
childElements = <ul>
{children.Data.map(value => <TreeView key={value.Id} document={value} deleteDoc={this.remove} />)}
</ul>
}
else bulletType = BulletType.Collapsed;
}
return <div className="treeViewItem-container" >
<li className="collection-child">
{this.renderBullet(bulletType)}
{this.renderTitle()}
{childElements ? childElements : (null)}
</li>
</div>
}
}
@observer
export class CollectionTreeView extends CollectionViewBase {
@action
remove = (document: Document) => {
var children = this.props.Document.GetT<ListField<Document>>(KeyStore.Data, ListField);
if (children && children !== FieldWaiting) {
children.Data.splice(children.Data.indexOf(document), 1);
}
}
render() {
var children = this.props.Document.GetT<ListField<Document>>(KeyStore.Data, ListField);
let childrenElement = !children || children === FieldWaiting ? (null) :
(children.Data.map(value =>
<TreeView document={value} key={value.Id} deleteDoc={this.remove} />)
)
return (
<div id="body" className="collectionTreeView-dropTarget" onDrop={(e: React.DragEvent) => this.onDrop(e, {})} ref={this.createDropTarget} style={{ borderWidth: `${COLLECTION_BORDER_WIDTH}px` }}>
<div className="coll-title">
<EditableView
contents={this.props.Document.Title}
display={"inline"}
height={72}
GetValue={() => this.props.Document.Title}
SetValue={(value: string) => {
this.props.Document.SetText(KeyStore.Title, value);
return true;
}} />
</div>
<hr />
<ul className="no-indent">
{childrenElement}
</ul>
</div >
);
}
}
|
