checkpoint: schemarow as documentview functioning

1 files changed, 137 insertions, 137 deletions

diff --git a/src/client/views/collections/old_collectionSchema/OldCollectionSchemaMovableRow.tsx b/src/client/views/collections/old_collectionSchema/OldCollectionSchemaMovableRow.tsx
index 3cb2df7d3..2b39df201 100644
--- a/src/client/views/collections/old_collectionSchema/OldCollectionSchemaMovableRow.tsx
+++ b/src/client/views/collections/old_collectionSchema/OldCollectionSchemaMovableRow.tsx
@@ -1,152 +1,152 @@
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { action } from 'mobx';
-import * as React from 'react';
-import { ReactTableDefaults, RowInfo } from 'react-table';
-import { Doc } from '../../../../fields/Doc';
-import { Cast, FieldValue, StrCast } from '../../../../fields/Types';
-import { DocumentManager } from '../../../util/DocumentManager';
-import { DragManager, dropActionType, SetupDrag } from '../../../util/DragManager';
-import { SnappingManager } from '../../../util/SnappingManager';
-import { Transform } from '../../../util/Transform';
-import { undoBatch } from '../../../util/UndoManager';
-import { ContextMenu } from '../../ContextMenu';
-import { OpenWhere } from '../../nodes/DocumentView';
-import './CollectionSchemaView.scss';
+// import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+// import { action } from 'mobx';
+// import * as React from 'react';
+// import { ReactTableDefaults, RowInfo } from 'react-table';
+// import { Doc } from '../../../../fields/Doc';
+// import { Cast, FieldValue, StrCast } from '../../../../fields/Types';
+// import { DocumentManager } from '../../../util/DocumentManager';
+// import { DragManager, dropActionType, SetupDrag } from '../../../util/DragManager';
+// import { SnappingManager } from '../../../util/SnappingManager';
+// import { Transform } from '../../../util/Transform';
+// import { undoBatch } from '../../../util/UndoManager';
+// import { ContextMenu } from '../../ContextMenu';
+// import { OpenWhere } from '../../nodes/DocumentView';
+// import './CollectionSchemaView.scss';
 
-export interface MovableRowProps {
-    rowInfo: RowInfo;
-    ScreenToLocalTransform: () => Transform;
-    addDoc: (doc: Doc | Doc[], relativeTo?: Doc, before?: boolean) => boolean;
-    removeDoc: (doc: Doc | Doc[]) => boolean;
-    rowFocused: boolean;
-    textWrapRow: (doc: Doc) => void;
-    rowWrapped: boolean;
-    dropAction: string;
-    addDocTab: any;
-}
+// export interface MovableRowProps {
+//     rowInfo: RowInfo;
+//     ScreenToLocalTransform: () => Transform;
+//     addDoc: (doc: Doc | Doc[], relativeTo?: Doc, before?: boolean) => boolean;
+//     removeDoc: (doc: Doc | Doc[]) => boolean;
+//     rowFocused: boolean;
+//     textWrapRow: (doc: Doc) => void;
+//     rowWrapped: boolean;
+//     dropAction: string;
+//     addDocTab: any;
+// }
 
-export class MovableRow extends React.Component<React.PropsWithChildren<MovableRowProps>> {
-    private _header?: React.RefObject<HTMLDivElement> = React.createRef();
-    private _rowDropDisposer?: DragManager.DragDropDisposer;
+// export class MovableRow extends React.Component<React.PropsWithChildren<MovableRowProps>> {
+//     private _header?: React.RefObject<HTMLDivElement> = React.createRef();
+//     private _rowDropDisposer?: DragManager.DragDropDisposer;
 
-    // Event listeners are only necessary when the user is hovering over the table
-    // Create one when the mouse starts hovering...
-    onPointerEnter = (e: React.PointerEvent): void => {
-        if (e.buttons === 1 && SnappingManager.GetIsDragging()) {
-            this._header!.current!.className = 'collectionSchema-row-wrapper';
-            document.addEventListener('pointermove', this.onDragMove, true);
-        }
-    };
-    // ... and delete it when the mouse leaves
-    onPointerLeave = (e: React.PointerEvent): void => {
-        this._header!.current!.className = 'collectionSchema-row-wrapper';
-        document.removeEventListener('pointermove', this.onDragMove, true);
-    };
-    // The method for the event listener, reorders columns when dragged to their new locations.
-    onDragMove = (e: PointerEvent): void => {
-        const x = this.props.ScreenToLocalTransform().transformPoint(e.clientX, e.clientY);
-        const rect = this._header!.current!.getBoundingClientRect();
-        const bounds = this.props.ScreenToLocalTransform().transformPoint(rect.left, rect.top + rect.height / 2);
-        const before = x[1] < bounds[1];
-        this._header!.current!.className = 'collectionSchema-row-wrapper';
-        if (before) this._header!.current!.className += ' row-above';
-        if (!before) this._header!.current!.className += ' row-below';
-        e.stopPropagation();
-    };
-    componentWillUnmount() {
-        this._rowDropDisposer?.();
-    }
-    //
-    createRowDropTarget = (ele: HTMLDivElement) => {
-        this._rowDropDisposer?.();
-        if (ele) {
-            this._rowDropDisposer = DragManager.MakeDropTarget(ele, this.rowDrop.bind(this));
-        }
-    };
-    // Controls what hppens when a row is dragged and dropped
-    rowDrop = (e: Event, de: DragManager.DropEvent) => {
-        this.onPointerLeave(e as any);
-        const rowDoc = FieldValue(Cast(this.props.rowInfo.original, Doc));
-        if (!rowDoc) return false;
+//     // Event listeners are only necessary when the user is hovering over the table
+//     // Create one when the mouse starts hovering...
+//     onPointerEnter = (e: React.PointerEvent): void => {
+//         if (e.buttons === 1 && SnappingManager.GetIsDragging()) {
+//             this._header!.current!.className = 'collectionSchema-row-wrapper';
+//             document.addEventListener('pointermove', this.onDragMove, true);
+//         }
+//     };
+//     // ... and delete it when the mouse leaves
+//     onPointerLeave = (e: React.PointerEvent): void => {
+//         this._header!.current!.className = 'collectionSchema-row-wrapper';
+//         document.removeEventListener('pointermove', this.onDragMove, true);
+//     };
+//     // The method for the event listener, reorders columns when dragged to their new locations.
+//     onDragMove = (e: PointerEvent): void => {
+//         const x = this.props.ScreenToLocalTransform().transformPoint(e.clientX, e.clientY);
+//         const rect = this._header!.current!.getBoundingClientRect();
+//         const bounds = this.props.ScreenToLocalTransform().transformPoint(rect.left, rect.top + rect.height / 2);
+//         const before = x[1] < bounds[1];
+//         this._header!.current!.className = 'collectionSchema-row-wrapper';
+//         if (before) this._header!.current!.className += ' row-above';
+//         if (!before) this._header!.current!.className += ' row-below';
+//         e.stopPropagation();
+//     };
+//     componentWillUnmount() {
+//         this._rowDropDisposer?.();
+//     }
+//     //
+//     createRowDropTarget = (ele: HTMLDivElement) => {
+//         this._rowDropDisposer?.();
+//         if (ele) {
+//             this._rowDropDisposer = DragManager.MakeDropTarget(ele, this.rowDrop.bind(this));
+//         }
+//     };
+//     // Controls what hppens when a row is dragged and dropped
+//     rowDrop = (e: Event, de: DragManager.DropEvent) => {
+//         this.onPointerLeave(e as any);
+//         const rowDoc = FieldValue(Cast(this.props.rowInfo.original, Doc));
+//         if (!rowDoc) return false;
 
-        const x = this.props.ScreenToLocalTransform().transformPoint(de.x, de.y);
-        const rect = this._header!.current!.getBoundingClientRect();
-        const bounds = this.props.ScreenToLocalTransform().transformPoint(rect.left, rect.top + rect.height / 2);
-        const before = x[1] < bounds[1];
+//         const x = this.props.ScreenToLocalTransform().transformPoint(de.x, de.y);
+//         const rect = this._header!.current!.getBoundingClientRect();
+//         const bounds = this.props.ScreenToLocalTransform().transformPoint(rect.left, rect.top + rect.height / 2);
+//         const before = x[1] < bounds[1];
 
-        const docDragData = de.complete.docDragData;
-        if (docDragData) {
-            e.stopPropagation();
-            if (docDragData.draggedDocuments[0] === rowDoc) return true;
-            const addDocument = (doc: Doc | Doc[]) => this.props.addDoc(doc, rowDoc, before);
-            const movedDocs = docDragData.draggedDocuments;
-            return docDragData.dropAction || docDragData.userDropAction
-                ? docDragData.droppedDocuments.reduce((added: boolean, d) => this.props.addDoc(d, rowDoc, before) || added, false)
-                : docDragData.moveDocument
-                ? movedDocs.reduce((added: boolean, d) => docDragData.moveDocument?.(d, rowDoc, addDocument) || added, false)
-                : docDragData.droppedDocuments.reduce((added: boolean, d) => this.props.addDoc(d, rowDoc, before), false);
-        }
-        return false;
-    };
+//         const docDragData = de.complete.docDragData;
+//         if (docDragData) {
+//             e.stopPropagation();
+//             if (docDragData.draggedDocuments[0] === rowDoc) return true;
+//             const addDocument = (doc: Doc | Doc[]) => this.props.addDoc(doc, rowDoc, before);
+//             const movedDocs = docDragData.draggedDocuments;
+//             return docDragData.dropAction || docDragData.userDropAction
+//                 ? docDragData.droppedDocuments.reduce((added: boolean, d) => this.props.addDoc(d, rowDoc, before) || added, false)
+//                 : docDragData.moveDocument
+//                 ? movedDocs.reduce((added: boolean, d) => docDragData.moveDocument?.(d, rowDoc, addDocument) || added, false)
+//                 : docDragData.droppedDocuments.reduce((added: boolean, d) => this.props.addDoc(d, rowDoc, before), false);
+//         }
+//         return false;
+//     };
 
-    onRowContextMenu = (e: React.MouseEvent): void => {
-        const description = this.props.rowWrapped ? 'Unwrap text on row' : 'Text wrap row';
-        ContextMenu.Instance.addItem({ description: description, event: () => this.props.textWrapRow(this.props.rowInfo.original), icon: 'file-pdf' });
-    };
+//     onRowContextMenu = (e: React.MouseEvent): void => {
+//         const description = this.props.rowWrapped ? 'Unwrap text on row' : 'Text wrap row';
+//         ContextMenu.Instance.addItem({ description: description, event: () => this.props.textWrapRow(this.props.rowInfo.original), icon: 'file-pdf' });
+//     };
 
-    @undoBatch
-    @action
-    move: DragManager.MoveFunction = (doc: Doc | Doc[], targetCollection: Doc | undefined, addDoc) => {
-        const targetView = targetCollection && DocumentManager.Instance.getDocumentView(targetCollection);
-        return doc !== targetCollection && doc !== targetView?.props.ContainingCollectionDoc && this.props.removeDoc(doc) && addDoc(doc);
-    };
+//     @undoBatch
+//     @action
+//     move: DragManager.MoveFunction = (doc: Doc | Doc[], targetCollection: Doc | undefined, addDoc) => {
+//         const targetView = targetCollection && DocumentManager.Instance.getDocumentView(targetCollection);
+//         return doc !== targetCollection && doc !== targetView?.props.ContainingCollectionDoc && this.props.removeDoc(doc) && addDoc(doc);
+//     };
 
-    @action
-    onKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
-        console.log('yes');
-        if (e.key === 'Backspace' || e.key === 'Delete') {
-            undoBatch(() => this.props.removeDoc(this.props.rowInfo.original));
-        }
-    };
+//     @action
+//     onKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+//         console.log('yes');
+//         if (e.key === 'Backspace' || e.key === 'Delete') {
+//             undoBatch(() => this.props.removeDoc(this.props.rowInfo.original));
+//         }
+//     };
 
-    render() {
-        const { children = null, rowInfo } = this.props;
+//     render() {
+//         const { children = null, rowInfo } = this.props;
 
-        if (!rowInfo) {
-            return <ReactTableDefaults.TrComponent>{children}</ReactTableDefaults.TrComponent>;
-        }
+//         if (!rowInfo) {
+//             return <ReactTableDefaults.TrComponent>{children}</ReactTableDefaults.TrComponent>;
+//         }
 
-        const { original } = rowInfo;
-        const doc = FieldValue(Cast(original, Doc));
+//         const { original } = rowInfo;
+//         const doc = FieldValue(Cast(original, Doc));
 
-        if (!doc) return null;
+//         if (!doc) return null;
 
-        const reference = React.createRef<HTMLDivElement>();
-        const onItemDown = SetupDrag(reference, () => doc, this.move, StrCast(this.props.dropAction) as dropActionType);
+//         const reference = React.createRef<HTMLDivElement>();
+//         const onItemDown = SetupDrag(reference, () => doc, this.move, StrCast(this.props.dropAction) as dropActionType);
 
-        let className = 'collectionSchema-row';
-        if (this.props.rowFocused) className += ' row-focused';
-        if (this.props.rowWrapped) className += ' row-wrapped';
+//         let className = 'collectionSchema-row';
+//         if (this.props.rowFocused) className += ' row-focused';
+//         if (this.props.rowWrapped) className += ' row-wrapped';
 
-        return (
-            <div className={className} onKeyPress={this.onKeyDown} ref={this.createRowDropTarget} onContextMenu={this.onRowContextMenu}>
-                <div className="collectionSchema-row-wrapper" onKeyPress={this.onKeyDown} ref={this._header} onPointerEnter={this.onPointerEnter} onPointerLeave={this.onPointerLeave}>
-                    <ReactTableDefaults.TrComponent onKeyPress={this.onKeyDown}>
-                        <div className="row-dragger">
-                            <div className="row-option" onClick={undoBatch(() => this.props.removeDoc(this.props.rowInfo.original))}>
-                                <FontAwesomeIcon icon="trash" size="sm" />
-                            </div>
-                            <div className="row-option" style={{ cursor: 'grab' }} ref={reference} onPointerDown={onItemDown}>
-                                <FontAwesomeIcon icon="grip-vertical" size="sm" />
-                            </div>
-                            <div className="row-option" onClick={() => this.props.addDocTab(this.props.rowInfo.original, OpenWhere.addRight)}>
-                                <FontAwesomeIcon icon="external-link-alt" size="sm" />
-                            </div>
-                        </div>
-                        {children}
-                    </ReactTableDefaults.TrComponent>
-                </div>
-            </div>
-        );
-    }
-}
+//         return (
+//             <div className={className} onKeyPress={this.onKeyDown} ref={this.createRowDropTarget} onContextMenu={this.onRowContextMenu}>
+//                 <div className="collectionSchema-row-wrapper" onKeyPress={this.onKeyDown} ref={this._header} onPointerEnter={this.onPointerEnter} onPointerLeave={this.onPointerLeave}>
+//                     <ReactTableDefaults.TrComponent onKeyPress={this.onKeyDown}>
+//                         <div className="row-dragger">
+//                             <div className="row-option" onClick={undoBatch(() => this.props.removeDoc(this.props.rowInfo.original))}>
+//                                 <FontAwesomeIcon icon="trash" size="sm" />
+//                             </div>
+//                             <div className="row-option" style={{ cursor: 'grab' }} ref={reference} onPointerDown={onItemDown}>
+//                                 <FontAwesomeIcon icon="grip-vertical" size="sm" />
+//                             </div>
+//                             <div className="row-option" onClick={() => this.props.addDocTab(this.props.rowInfo.original, OpenWhere.addRight)}>
+//                                 <FontAwesomeIcon icon="external-link-alt" size="sm" />
+//                             </div>
+//                         </div>
+//                         {children}
+//                     </ReactTableDefaults.TrComponent>
+//                 </div>
+//             </div>
+//         );
+//     }
+// }