diff options
| author | Sam Wilkins <abdullah_ahmed@brown.edu> | 2019-04-09 18:05:57 -0400 |
|---|---|---|
| committer | Sam Wilkins <abdullah_ahmed@brown.edu> | 2019-04-09 18:05:57 -0400 |
| commit | 79a0d8d66204868158849afda6518f6c641c826b (patch) | |
| tree | c36b6064cb8577f375107c6df4885c7a3e0dc9e0 /src/client/views/collections/CollectionTreeView.tsx | |
| parent | b7d02ec188ecf043300ed858fdb68148b3e52a71 (diff) | |
| parent | 89fd4327db1536990b4a4dc218819a1077f82445 (diff) | |
merged with master
Diffstat (limited to 'src/client/views/collections/CollectionTreeView.tsx')
| -rw-r--r-- | src/client/views/collections/CollectionTreeView.tsx | 44 |
1 files changed, 29 insertions, 15 deletions
diff --git a/src/client/views/collections/CollectionTreeView.tsx b/src/client/views/collections/CollectionTreeView.tsx index 70790af18..659cff9fe 100644 --- a/src/client/views/collections/CollectionTreeView.tsx +++ b/src/client/views/collections/CollectionTreeView.tsx @@ -7,17 +7,21 @@ 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 { setupDrag, DragManager } 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") +import { CollectionView } from "./CollectionView"; +import { CollectionSubView } from "./CollectionSubView"; +import React = require("react"); +import { COLLECTION_BORDER_WIDTH } from './CollectionBaseView'; +import { props } from 'bluebird'; export interface TreeViewProps { document: Document; deleteDoc: (doc: Document) => void; + moveDocument: DragManager.MoveFunction; + copyOnDrag: boolean; } export enum BulletType { @@ -48,6 +52,16 @@ class TreeView extends React.Component<TreeViewProps> { } } + @action + move: DragManager.MoveFunction = (document, target, addDoc) => { + if (this.props.document === target) { + return true; + } + //TODO This should check if it was removed + this.remove(document); + return addDoc(document); + } + renderBullet(type: BulletType) { let onClicked = action(() => this._collapsed = !this._collapsed); let bullet: IconProp | undefined = undefined; @@ -55,7 +69,7 @@ class TreeView extends React.Component<TreeViewProps> { 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> + return <div className="bullet" onClick={onClicked}>{bullet ? <FontAwesomeIcon icon={bullet} /> : ""} </div>; } /** @@ -63,7 +77,7 @@ class TreeView extends React.Component<TreeViewProps> { */ renderTitle() { let reference = React.createRef<HTMLDivElement>(); - let onItemDown = setupDrag(reference, () => this.props.document, (containingCollection: CollectionView) => this.props.deleteDoc(this.props.document)); + let onItemDown = setupDrag(reference, () => this.props.document, this.props.moveDocument, this.props.copyOnDrag); let editableView = (titleString: string) => (<EditableView display={"inline"} @@ -79,20 +93,19 @@ class TreeView extends React.Component<TreeViewProps> { <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 >) + </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> + {children.Data.map(value => <TreeView key={value.Id} document={value} deleteDoc={this.remove} moveDocument={this.move} copyOnDrag={this.props.copyOnDrag} />)} + </ul >; } else bulletType = BulletType.Collapsed; } @@ -102,12 +115,12 @@ class TreeView extends React.Component<TreeViewProps> { {this.renderTitle()} {childElements ? childElements : (null)} </li> - </div> + </div>; } } @observer -export class CollectionTreeView extends CollectionViewBase { +export class CollectionTreeView extends CollectionSubView { @action remove = (document: Document) => { @@ -118,11 +131,12 @@ export class CollectionTreeView extends CollectionViewBase { } render() { - var children = this.props.Document.GetT<ListField<Document>>(KeyStore.Data, ListField); + let children = this.props.Document.GetT<ListField<Document>>(KeyStore.Data, ListField); + let copyOnDrag = this.props.Document.GetBoolean(KeyStore.CopyDraggedItems, false); let childrenElement = !children || children === FieldWaiting ? (null) : (children.Data.map(value => - <TreeView document={value} key={value.Id} deleteDoc={this.remove} />) - ) + <TreeView document={value} key={value.Id} deleteDoc={this.remove} moveDocument={this.props.moveDocument} copyOnDrag={copyOnDrag} />) + ); return ( <div id="body" className="collectionTreeView-dropTarget" onWheel={(e: React.WheelEvent) => e.stopPropagation()} onDrop={(e: React.DragEvent) => this.onDrop(e, {})} ref={this.createDropTarget} style={{ borderWidth: `${COLLECTION_BORDER_WIDTH}px` }}> |
