aboutsummaryrefslogtreecommitdiff
path: root/src/client/views/collections/CollectionTreeView.tsx
diff options
context:
space:
mode:
Diffstat (limited to 'src/client/views/collections/CollectionTreeView.tsx')
-rw-r--r--src/client/views/collections/CollectionTreeView.tsx45
1 files changed, 30 insertions, 15 deletions
diff --git a/src/client/views/collections/CollectionTreeView.tsx b/src/client/views/collections/CollectionTreeView.tsx
index e84517f40..e809bfbce 100644
--- a/src/client/views/collections/CollectionTreeView.tsx
+++ b/src/client/views/collections/CollectionTreeView.tsx
@@ -27,6 +27,7 @@ import { CollectionSubView } from "./CollectionSubView";
import "./CollectionTreeView.scss";
import { TreeView } from "./TreeView";
import React = require("react");
+import { FieldViewProps } from "../nodes/FieldView";
const _global = (window /* browser */ || global /* node */) as any;
export type collectionTreeViewProps = {
@@ -37,8 +38,18 @@ export type collectionTreeViewProps = {
treeViewSkipFields?: string[]; // prevents specific fields from being displayed (see LinkBox)
onCheckedClick?: () => ScriptField;
onChildClick?: () => ScriptField;
+ // TODO: [AL] add these fields
+ AddToMap?: (treeViewDoc: Doc, index: number[]) => Doc[];
+ RemFromMap?: (treeViewDoc: Doc, index: number[]) => Doc[];
+ hierarchyIndex?: number[];
};
+export enum TreeViewType {
+ outline = "outline",
+ fileSystem = "fileSystem",
+ default = "default"
+}
+
@observer
export class CollectionTreeView extends CollectionSubView<Partial<collectionTreeViewProps>>() {
private _treedropDisposer?: DragManager.DragDropDisposer;
@@ -54,8 +65,8 @@ export class CollectionTreeView extends CollectionSubView<Partial<collectionTree
@computed get dataDoc() { return this.props.DataDoc || this.doc; }
@computed get treeViewtruncateTitleWidth() { return NumCast(this.doc.treeViewTruncateTitleWidth, this.panelWidth()); }
@computed get treeChildren() { TraceMobx(); return this.props.childDocuments || this.childDocs; }
- @computed get outlineMode() { return this.doc.treeViewType === "outline"; }
- @computed get fileSysMode() { return this.doc.treeViewType === "fileSystem"; }
+ @computed get outlineMode() { return this.doc.treeViewType === TreeViewType.outline; }
+ @computed get fileSysMode() { return this.doc.treeViewType === TreeViewType.fileSystem; }
@computed get dashboardMode() { return this.doc === Doc.UserDoc().myDashboards; }
@observable _explainerHeight = 0; // height of the description of the tree view
@@ -88,7 +99,7 @@ export class CollectionTreeView extends CollectionSubView<Partial<collectionTree
const titleHeight = !this._titleRef ? this.marginTop() : Number(getComputedStyle(this._titleRef).height.replace("px", ""));
const bodyHeight = Array.from(this.refList).reduce((p, r) => p + Number(getComputedStyle(r).height.replace("px", "")), this.marginBot());
this.layoutDoc._autoHeightMargins = bodyHeight;
- this.props.setHeight(bodyHeight + titleHeight);
+ this.props.setHeight?.(bodyHeight + titleHeight);
}
}
unobserveHeight = (ref: any) => {
@@ -180,13 +191,20 @@ export class CollectionTreeView extends CollectionSubView<Partial<collectionTree
height={"auto"}
GetValue={() => StrCast(this.dataDoc.title)}
SetValue={undoBatch((value: string, shift: boolean, enter: boolean) => {
- if (enter && this.props.Document.treeViewType === "outline") this.makeTextCollection(this.treeChildren);
+ if (enter && this.props.Document.treeViewType === TreeViewType.outline) this.makeTextCollection(this.treeChildren);
this.dataDoc.title = value;
return true;
})} />;
}
+ onKey = (e: React.KeyboardEvent, fieldProps: FieldViewProps) => {
+ if (this.outlineMode && e.key === "Enter") {
+ e.stopPropagation();
+ this.makeTextCollection(this.treeChildren);
+ return true;
+ }
+ }
get documentTitle() {
return <FormattedTextBox
{...this.props}
@@ -199,6 +217,7 @@ export class CollectionTreeView extends CollectionSubView<Partial<collectionTree
PanelWidth={this.documentTitleWidth}
PanelHeight={this.documentTitleHeight}
scaling={returnOne}
+ onKey={this.onKey}
docFilters={returnEmptyFilter}
docRangeFilters={returnEmptyFilter}
searchFilterDocs={returnEmptyDoclist}
@@ -250,20 +269,18 @@ export class CollectionTreeView extends CollectionSubView<Partial<collectionTree
this.props.dontRegisterView || Cast(this.props.Document.childDontRegisterViews, "boolean", null),
this.observeHeight,
this.unobserveHeight,
- this.childContextMenuItems()
+ this.childContextMenuItems(),
+ //TODO: [AL] add these
+ this.props.AddToMap,
+ this.props.RemFromMap,
+ this.props.hierarchyIndex,
);
}
@computed get titleBar() {
return this.dataDoc === null ? (null) :
<div className="collectionTreeView-titleBar" key={this.doc[Id]}
style={!this.outlineMode ? { paddingLeft: this.marginX(), paddingTop: this.marginTop() } : {}}
- ref={r => this._titleRef = r}
- onKeyDown={e => {
- if (this.outlineMode) {
- e.stopPropagation();
- e.key === "Enter" && this.makeTextCollection(this.treeChildren);
- }
- }}>
+ ref={r => this._titleRef = r}>
{this.outlineMode ? this.documentTitle : this.editableTitle}
</div>;
}
@@ -296,7 +313,6 @@ export class CollectionTreeView extends CollectionSubView<Partial<collectionTree
renderDepth={this.props.renderDepth + 1}
focus={emptyFunction}
styleProvider={this.props.styleProvider}
- layerProvider={this.props.layerProvider}
docViewPath={returnEmptyDoclist}
whenChildContentsActiveChanged={emptyFunction}
bringToFront={emptyFunction}
@@ -341,14 +357,13 @@ export class CollectionTreeView extends CollectionSubView<Partial<collectionTree
<div className="collectionTreeView-contents" key="tree" style={{
...(!titleBar ? { paddingLeft: this.marginX(), paddingTop: this.marginTop() } : {}),
overflow: "auto",
- height: this.layoutDoc._autoHeight ? "max-content" : "100%"
+ height: "100%"//this.layoutDoc._autoHeight ? "max-content" : "100%"
}} >
{titleBar}
<div className="collectionTreeView-container"
style={{
transform: this.outlineMode ? `scale(${this.contentScaling})` : "",
paddingLeft: `${this.marginX()}px`,
- height: "max-content",
width: this.outlineMode ? `calc(${100 / this.contentScaling}%)` : ""
}}
onContextMenu={this.onContextMenu}>