From 89f1b8b80fb84429b130329c3d94f791a7d0b3db Mon Sep 17 00:00:00 2001
From: Andy Rickert <andrew_rickert@brown.edu>
Date: Mon, 6 Jul 2020 18:27:34 -0400
Subject: dragging and general ui

---
 src/client/views/collections/CollectionSchemaCells.tsx |  3 ++-
 .../views/collections/CollectionSchemaHeaders.tsx      |  4 ++--
 .../collections/CollectionSchemaMovableTableHOC.tsx    | 18 +++++++++++++-----
 src/client/views/collections/CollectionSchemaView.scss | 11 ++++-------
 src/client/views/collections/CollectionSchemaView.tsx  |  7 +++++++
 src/client/views/collections/SchemaTable.tsx           |  2 +-
 6 files changed, 29 insertions(+), 16 deletions(-)

(limited to 'src')

diff --git a/src/client/views/collections/CollectionSchemaCells.tsx b/src/client/views/collections/CollectionSchemaCells.tsx
index d76b6d204..0008cfad3 100644
--- a/src/client/views/collections/CollectionSchemaCells.tsx
+++ b/src/client/views/collections/CollectionSchemaCells.tsx
@@ -194,7 +194,8 @@ export class CollectionSchemaCell extends React.Component<CellProps> {
         const fieldIsDoc = (type === "document" && typeof field === "object") || (typeof field === "object" && doc);
 
         const onItemDown = (e: React.PointerEvent) => {
-            fieldIsDoc && SetupDrag(this._focusRef,
+            //fieldIsDoc && 
+            SetupDrag(this._focusRef,
                 () => this._document[props.fieldKey] instanceof Doc ? this._document[props.fieldKey] : this._document,
                 this._document[props.fieldKey] instanceof Doc ? (doc: Doc | Doc[], target: Doc | undefined, addDoc: (newDoc: Doc | Doc[]) => any) => addDoc(doc) : this.props.moveDocument,
                 this._document[props.fieldKey] instanceof Doc ? "alias" : this.props.Document.schemaDoc ? "copy" : undefined)(e);
diff --git a/src/client/views/collections/CollectionSchemaHeaders.tsx b/src/client/views/collections/CollectionSchemaHeaders.tsx
index 213a72a85..4a9bd4aa6 100644
--- a/src/client/views/collections/CollectionSchemaHeaders.tsx
+++ b/src/client/views/collections/CollectionSchemaHeaders.tsx
@@ -396,7 +396,7 @@ export class KeysDropdown extends React.Component<KeysDropdownProps> {
 
     render() {
         return (
-            <div className="keys-dropdown" style={{ zIndex: 10, width: this.props.width, maxWidth: this.props.width, overflowX: "hidden" }}>
+            <div className="keys-dropdown" style={{ zIndex: 10, width: this.props.width, maxWidth: this.props.width }}>
                 {this._key === this._searchTerm.slice(0, this._key.length) ?
                     <div style={{ position: "absolute", marginLeft: "4px", marginTop: "3", color: "grey", pointerEvents: "none", lineHeight: 1.15 }}>
                         {this._key}
@@ -411,7 +411,7 @@ export class KeysDropdown extends React.Component<KeysDropdownProps> {
                     }} onFocus={this.onFocus} onBlur={this.onBlur}></input>
                 <div className="keys-options-wrapper" style={{
                     backgroundColor: "white",
-                    width: this.props.width, maxWidth: this.props.width, overflowX: "hidden"
+                    width: this.props.width, maxWidth: this.props.width,
                 }}
                     onPointerEnter={this.onPointerEnter} onPointerLeave={this.onPointerOut}>
                     {this.renderOptions()}
diff --git a/src/client/views/collections/CollectionSchemaMovableTableHOC.tsx b/src/client/views/collections/CollectionSchemaMovableTableHOC.tsx
index b77173b25..dade4f2f2 100644
--- a/src/client/views/collections/CollectionSchemaMovableTableHOC.tsx
+++ b/src/client/views/collections/CollectionSchemaMovableTableHOC.tsx
@@ -209,6 +209,14 @@ export class MovableRow extends React.Component<MovableRowProps> {
         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));
+        }
+    }
+
     render() {
         const { children = null, rowInfo } = this.props;
         if (!rowInfo) {
@@ -227,14 +235,14 @@ export class MovableRow extends React.Component<MovableRowProps> {
         if (this.props.rowWrapped) className += " row-wrapped";
 
         return (
-            <div className={className} ref={this.createRowDropTarget} onContextMenu={this.onRowContextMenu}>
-                <div className="collectionSchema-row-wrapper" ref={this._header} onPointerEnter={this.onPointerEnter} onPointerLeave={this.onPointerLeave}>
-                    <ReactTableDefaults.TrComponent>
-                        <div className="row-dragger">
+            <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, "onRight")}><FontAwesomeIcon icon="external-link-alt" size="sm" /></div>
-                        </div>
+                        </div> */}
                         {children}
                     </ReactTableDefaults.TrComponent>
                 </div>
diff --git a/src/client/views/collections/CollectionSchemaView.scss b/src/client/views/collections/CollectionSchemaView.scss
index 688099b6c..f844cf8bf 100644
--- a/src/client/views/collections/CollectionSchemaView.scss
+++ b/src/client/views/collections/CollectionSchemaView.scss
@@ -59,9 +59,7 @@
     }
 
     .rt-thead {
-        width: calc(100% - 52px);
-        margin-left: 50px;
-
+        width: 100%;
         z-index: 100;
         overflow-y: visible;
 
@@ -165,7 +163,7 @@
 .collectionSchema-col {
     height: 100%;
 
-    .collectionSchema-col-wrapper {
+    .collectionSchema-apper {
         &.col-before {
             border-left: 2px solid red;
         }
@@ -297,7 +295,6 @@ button.add-column {
                 background-color: white;
                 border: 1px solid lightgray;
                 padding: 2px 3px;
-                overflow-x: hidden;
 
                 &:not(:first-child) {
                     border-top: 0;
@@ -531,8 +528,8 @@ button.add-column {
 .reactTable-sub {
     padding: 10px 30px;
     background-color: rgb(252, 252, 252);
-    width: calc(100% - 50px);
-    margin-left: 50px;
+    width: 100%;
+ 
 
     .row-dragger {
         background-color: rgb(252, 252, 252);
diff --git a/src/client/views/collections/CollectionSchemaView.tsx b/src/client/views/collections/CollectionSchemaView.tsx
index 688313951..fde3993f9 100644
--- a/src/client/views/collections/CollectionSchemaView.tsx
+++ b/src/client/views/collections/CollectionSchemaView.tsx
@@ -456,6 +456,7 @@ export class CollectionSchemaView extends CollectionSubView(doc => doc) {
                 this.props.select(false);
             }
         }
+        console.log("yeeeet");
     }
 
     @computed
@@ -605,6 +606,11 @@ export class CollectionSchemaView extends CollectionSubView(doc => doc) {
         }
     }
 
+
+
+    onKeyPress = (e: React.KeyboardEvent<HTMLInputElement>) => {
+        console.log("yeet2");
+    }
     render() {
         TraceMobx();
         const menuContent = this.renderMenuContent;
@@ -630,6 +636,7 @@ export class CollectionSchemaView extends CollectionSubView(doc => doc) {
             }}  >
             <div className="collectionSchemaView-tableContainer"
                 style={{ width: `calc(100% - ${this.previewWidth()}px)` }}
+                onKeyPress={this.onKeyPress}
                 onPointerDown={this.onPointerDown}
                 onWheel={e => this.props.active(true) && e.stopPropagation()}
                 onDrop={e => this.onExternalDrop(e, {})}
diff --git a/src/client/views/collections/SchemaTable.tsx b/src/client/views/collections/SchemaTable.tsx
index 5a73e7501..878cc6f6d 100644
--- a/src/client/views/collections/SchemaTable.tsx
+++ b/src/client/views/collections/SchemaTable.tsx
@@ -217,7 +217,7 @@ export class SchemaTable extends React.Component<SchemaTableProps> {
                     className="collectionSchemaView-menuOptions-wrapper"
                     style={{
                         background: col.color, padding: "2px",
-                        display: "flex", cursor: "default"
+                        display: "flex", cursor: "default", height: "100%",
                     }}>
                     <FontAwesomeIcon icon={icon} size="lg" style={{ display: "inline", paddingLeft: "7px" }} />
                     {/* <div className="keys-dropdown"
-- 
cgit v1.2.3-70-g09d2