fixed drop down menus in schema collection view menu

4 files changed, 52 insertions, 142 deletions

diff --git a/package-lock.json b/package-lock.json
index 6c364530b..735cff1a6 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -2946,8 +2946,7 @@
                         },
                         "ansi-regex": {
                             "version": "2.1.1",
-                            "bundled": true,
-                            "optional": true
+                            "bundled": true
                         },
                         "aproba": {
                             "version": "1.2.0",
@@ -2965,13 +2964,11 @@
                         },
                         "balanced-match": {
                             "version": "1.0.0",
-                            "bundled": true,
-                            "optional": true
+                            "bundled": true
                         },
                         "brace-expansion": {
                             "version": "1.1.11",
                             "bundled": true,
-                            "optional": true,
                             "requires": {
                                 "balanced-match": "^1.0.0",
                                 "concat-map": "0.0.1"
@@ -2984,18 +2981,15 @@
                         },
                         "code-point-at": {
                             "version": "1.1.0",
-                            "bundled": true,
-                            "optional": true
+                            "bundled": true
                         },
                         "concat-map": {
                             "version": "0.0.1",
-                            "bundled": true,
-                            "optional": true
+                            "bundled": true
                         },
                         "console-control-strings": {
                             "version": "1.1.0",
-                            "bundled": true,
-                            "optional": true
+                            "bundled": true
                         },
                         "core-util-is": {
                             "version": "1.0.2",
@@ -3098,8 +3092,7 @@
                         },
                         "inherits": {
                             "version": "2.0.4",
-                            "bundled": true,
-                            "optional": true
+                            "bundled": true
                         },
                         "ini": {
                             "version": "1.3.5",
@@ -3109,7 +3102,6 @@
                         "is-fullwidth-code-point": {
                             "version": "1.0.0",
                             "bundled": true,
-                            "optional": true,
                             "requires": {
                                 "number-is-nan": "^1.0.0"
                             }
@@ -3122,20 +3114,17 @@
                         "minimatch": {
                             "version": "3.0.4",
                             "bundled": true,
-                            "optional": true,
                             "requires": {
                                 "brace-expansion": "^1.1.7"
                             }
                         },
                         "minimist": {
                             "version": "1.2.5",
-                            "bundled": true,
-                            "optional": true
+                            "bundled": true
                         },
                         "minipass": {
                             "version": "2.9.0",
                             "bundled": true,
-                            "optional": true,
                             "requires": {
                                 "safe-buffer": "^5.1.2",
                                 "yallist": "^3.0.0"
@@ -3152,7 +3141,6 @@
                         "mkdirp": {
                             "version": "0.5.3",
                             "bundled": true,
-                            "optional": true,
                             "requires": {
                                 "minimist": "^1.2.5"
                             }
@@ -3208,8 +3196,7 @@
                         },
                         "npm-normalize-package-bin": {
                             "version": "1.0.1",
-                            "bundled": true,
-                            "optional": true
+                            "bundled": true
                         },
                         "npm-packlist": {
                             "version": "1.4.8",
@@ -3234,8 +3221,7 @@
                         },
                         "number-is-nan": {
                             "version": "1.0.1",
-                            "bundled": true,
-                            "optional": true
+                            "bundled": true
                         },
                         "object-assign": {
                             "version": "4.1.1",
@@ -3245,7 +3231,6 @@
                         "once": {
                             "version": "1.4.0",
                             "bundled": true,
-                            "optional": true,
                             "requires": {
                                 "wrappy": "1"
                             }
@@ -3314,8 +3299,7 @@
                         },
                         "safe-buffer": {
                             "version": "5.1.2",
-                            "bundled": true,
-                            "optional": true
+                            "bundled": true
                         },
                         "safer-buffer": {
                             "version": "2.1.2",
@@ -3345,7 +3329,6 @@
                         "string-width": {
                             "version": "1.0.2",
                             "bundled": true,
-                            "optional": true,
                             "requires": {
                                 "code-point-at": "^1.0.0",
                                 "is-fullwidth-code-point": "^1.0.0",
@@ -3363,7 +3346,6 @@
                         "strip-ansi": {
                             "version": "3.0.1",
                             "bundled": true,
-                            "optional": true,
                             "requires": {
                                 "ansi-regex": "^2.0.0"
                             }
@@ -3402,13 +3384,11 @@
                         },
                         "wrappy": {
                             "version": "1.0.2",
-                            "bundled": true,
-                            "optional": true
+                            "bundled": true
                         },
                         "yallist": {
                             "version": "3.1.1",
-                            "bundled": true,
-                            "optional": true
+                            "bundled": true
                         }
                     }
                 }
diff --git a/src/client/views/collections/CollectionSchemaCells.tsx b/src/client/views/collections/CollectionSchemaCells.tsx
index 0026ab927..034ba27cf 100644
--- a/src/client/views/collections/CollectionSchemaCells.tsx
+++ b/src/client/views/collections/CollectionSchemaCells.tsx
@@ -26,15 +26,11 @@ import { SnappingManager } from "../../util/SnappingManager";
 import { ComputedField } from "../../../fields/ScriptField";
 import { ImageField } from "../../../fields/URLField";
 import { List } from "../../../fields/List";
-import { LinkBox } from "../nodes/LinkBox";
 import { OverlayView } from "../OverlayView";
 import { DocumentIconContainer } from "../nodes/DocumentIcon";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { ContentFittingDocumentView } from "../nodes/ContentFittingDocumentView";
-import ReactDOM from "react-dom";
 import DatePicker from "react-datepicker";
 import "react-datepicker/dist/react-datepicker.css";
-import { DateField } from "../../../fields/DateField";
 const path = require('path');
 
 library.add(faExpand);
diff --git a/src/client/views/collections/CollectionSchemaView.scss b/src/client/views/collections/CollectionSchemaView.scss
index fa1f01448..2330fcc8a 100644
--- a/src/client/views/collections/CollectionSchemaView.scss
+++ b/src/client/views/collections/CollectionSchemaView.scss
@@ -177,6 +177,26 @@
 }
 
 
+.collectionSchema-header-menu {
+    height: 100%;
+    z-index: 100;
+    position: absolute;
+    background:white;
+
+    .collectionSchema-header-toggler {
+        z-index: 100;
+        width: 100%;
+        height: 100%;
+        padding: 4px;
+        letter-spacing: 2px;
+        text-transform: uppercase;
+
+        svg {
+            margin-right: 4px;
+        }
+    }
+}
+
 .collectionSchemaView-header {
     height: 100%;
     color: gray;
@@ -185,24 +205,6 @@
     display: flex;
     justify-content: space-between;
     flex-wrap: wrap;
-
-    .collectionSchema-header-menu {
-        height: 100%;
-        z-index: 100;
-
-        .collectionSchema-header-toggler {
-            z-index: 100;
-            width: 100%;
-            height: 100%;
-            padding: 4px;
-            letter-spacing: 2px;
-            text-transform: uppercase;
-
-            svg {
-                margin-right: 4px;
-            }
-        }
-    }
 }
 
 button.add-column {
diff --git a/src/client/views/collections/CollectionSchemaView.tsx b/src/client/views/collections/CollectionSchemaView.tsx
index 7e8455149..857d8cb50 100644
--- a/src/client/views/collections/CollectionSchemaView.tsx
+++ b/src/client/views/collections/CollectionSchemaView.tsx
@@ -11,7 +11,6 @@ import { List } from "../../../fields/List";
 import { listSpec } from "../../../fields/Schema";
 import { SchemaHeaderField, PastelSchemaPalette } from "../../../fields/SchemaHeaderField";
 import { Cast, NumCast, StrCast } from "../../../fields/Types";
-import { Docs, DocumentOptions } from "../../documents/Documents";
 import { Transform } from "../../util/Transform";
 import { undoBatch } from "../../util/UndoManager";
 import { COLLECTION_BORDER_WIDTH } from '../../views/globalCssVariables.scss';
@@ -23,8 +22,8 @@ import { ContentFittingDocumentView } from "../nodes/ContentFittingDocumentView"
 import { setupMoveUpEvents, emptyFunction, returnZero, returnOne, returnFalse } from "../../../Utils";
 import { SnappingManager } from "../../util/SnappingManager";
 import Measure from "react-measure";
-import { SchemaTable } from "./SchemaTable";
-import { civicinfo } from "googleapis/build/src/apis/civicinfo";
+import { SchemaTable } from "./SchemaTable"
+import { TraceMobx } from "../../../fields/util";
 
 library.add(faCog, faPlus, faSortUp, faSortDown);
 library.add(faTable);
@@ -185,7 +184,6 @@ export class CollectionSchemaView extends CollectionSubView(doc => doc) {
         this._openTypes = bool;
     }
 
-    @action
     renderTypes = (col: any) => {
         if (columnTypes.get(col.heading)) return (null);
 
@@ -353,29 +351,6 @@ export class CollectionSchemaView extends CollectionSubView(doc => doc) {
         />;
     }
 
-    @action
-    renderContent = (col: any) => {
-        return (
-            <div className="collectionSchema-header-menuOptions">
-                <div className="collectionSchema-headerMenu-group">
-                    <label>Key:</label>
-                    {this.renderKeysDropDown(col)}
-                </div>
-                {false ? <></> :
-                    <>
-                        {this.renderTypes(col)}
-                        {this.renderSorting(col)}
-                        {this.renderColors(col)}
-                        <div className="collectionSchema-headerMenu-group">
-                            <button onClick={() => { this.deleteColumn(col.heading); }}
-                            >Delete Column</button>
-                        </div>
-                    </>
-                }
-            </div>
-        );
-    }
-
     @undoBatch
     @action
     deleteColumn = (key: string) => {
@@ -410,45 +385,22 @@ export class CollectionSchemaView extends CollectionSubView(doc => doc) {
         //this.menuCoordinates[1] -= e.screenY / scale;
     }
 
-    @action renderMenu() {
-        const scale = this.props.ScreenToLocalTransform().Scale;
-        return (
-            <div className="collectionSchema-header-menu" ref={this.setNode}
-                onWheel={e => this.props.active(true) && e.stopPropagation()}
-                onPointerDown={e => this.onHeaderClick(e)}
-                style={{
-                    position: "absolute", background: "white",
-                    transform: `translate(${this.menuCoordinates[0] * scale}px, ${this.menuCoordinates[1] / scale}px)`
-                }}>
-                <Measure offset onResize={action((r: any) => {
-                    const dim = this.props.ScreenToLocalTransform().inverse().transformDirection(r.offset.width, r.offset.height);
-                    this._menuWidth = dim[0]; this._menuHeight = dim[1];
-                })}>
-                    {({ measureRef }) => <div ref={measureRef}>
-                        <div className="collectionSchema-header-menuOptions">
-                            <div className="collectionSchema-headerMenu-group">
-                                <label>Key:</label>
-                                {this.renderKeysDropDown(this._col)}
-                            </div>
-                            {false ? <></> :
-                                <>
-                                    {this.renderTypes(this._col)}
-                                    {this.renderSorting(this._col)}
-                                    {this.renderColors(this._col)}
-                                    <div className="collectionSchema-headerMenu-group">
-                                        <button onClick={() => { this.deleteColumn(this._col.heading); }}
-                                        >Delete Column</button>
-                                    </div>
-                                </>
-                            }
-                        </div>
-
-                    </div>}
-                </Measure>
+    @computed get renderMenuContent() {
+        TraceMobx();
+        return <div className="collectionSchema-header-menuOptions">
+            <div className="collectionSchema-headerMenu-group">
+                <label>Key:</label>
+                {this.renderKeysDropDown(this._col)}
             </div>
-        );
+            {this.renderTypes(this._col)}
+            {this.renderSorting(this._col)}
+            {this.renderColors(this._col)}
+            <div className="collectionSchema-headerMenu-group">
+                <button onClick={() => { this.deleteColumn(this._col.heading); }}
+                >Delete Column</button>
+            </div>
+        </div>;
     }
-
     private createTarget = (ele: HTMLDivElement) => {
         this._previewCont = ele;
         super.CreateDropTarget(ele);
@@ -623,38 +575,18 @@ export class CollectionSchemaView extends CollectionSubView(doc => doc) {
     }
 
     render() {
+        TraceMobx();
+        const menuContent = this.renderMenuContent;
         const scale = this.props.ScreenToLocalTransform().Scale;
         const menu = <div className="collectionSchema-header-menu" ref={this.setNode}
             onWheel={e => this.props.active(true) && e.stopPropagation()}
             onPointerDown={e => this.onHeaderClick(e)}
-            style={{
-                position: "absolute", background: "white",
-                transform: `translate(${this.menuCoordinates[0] * scale}px, ${this.menuCoordinates[1] / scale}px)`
-            }}>
+            style={{ transform: `translate(${this.menuCoordinates[0] * scale}px, ${this.menuCoordinates[1] / scale}px)` }}>
             <Measure offset onResize={action((r: any) => {
                 const dim = this.props.ScreenToLocalTransform().inverse().transformDirection(r.offset.width, r.offset.height);
                 this._menuWidth = dim[0]; this._menuHeight = dim[1];
             })}>
-                {({ measureRef }) => <div ref={measureRef}>
-                    <div className="collectionSchema-header-menuOptions">
-                        <div className="collectionSchema-headerMenu-group">
-                            <label>Key:</label>
-                            {this.renderKeysDropDown(this._col)}
-                        </div>
-                        {false ? <></> :
-                            <>
-                                {this.renderTypes(this._col)}
-                                {this.renderSorting(this._col)}
-                                {this.renderColors(this._col)}
-                                <div className="collectionSchema-headerMenu-group">
-                                    <button onClick={() => { this.deleteColumn(this._col.heading); }}
-                                    >Delete Column</button>
-                                </div>
-                            </>
-                        }
-                    </div>
-
-                </div>}
+                {({ measureRef }) => <div ref={measureRef}> {menuContent} </div>}
             </Measure>
         </div>;