fixed drop down menus in schema collection view menu

3 files changed, 40 insertions, 110 deletions

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>;