diff options
Diffstat (limited to 'src/client/views/collections/CollectionTreeView.tsx')
| -rw-r--r-- | src/client/views/collections/CollectionTreeView.tsx | 45 |
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}> |