Merge branch 'master' of https://github.com/browngraphicslab/Dash-Web into improveText

1 files changed, 17 insertions, 2 deletions

diff --git a/src/client/views/ContextMenu.tsx b/src/client/views/ContextMenu.tsx
index 4f26a75d2..fcb934860 100644
--- a/src/client/views/ContextMenu.tsx
+++ b/src/client/views/ContextMenu.tsx
@@ -1,6 +1,6 @@
 import React = require("react");
 import { ContextMenuItem, ContextMenuProps } from "./ContextMenuItem";
-import { observable } from "mobx";
+import { observable, action } from "mobx";
 import { observer } from "mobx-react";
 import "./ContextMenu.scss"
 
@@ -12,6 +12,8 @@ export class ContextMenu extends React.Component {
     @observable private _pageX: number = 0;
     @observable private _pageY: number = 0;
     @observable private _display: string = "none";
+    @observable private _searchString: string = "";
+
 
     private ref: React.RefObject<HTMLDivElement>;
 
@@ -23,11 +25,13 @@ export class ContextMenu extends React.Component {
         ContextMenu.Instance = this;
     }
 
+    @action
     clearItems() {
         this._items = []
         this._display = "none"
     }
 
+    @action
     addItem(item: ContextMenuProps) {
         if (this._items.indexOf(item) === -1) {
             this._items.push(item);
@@ -38,10 +42,13 @@ export class ContextMenu extends React.Component {
         return this._items;
     }
 
+    @action
     displayMenu(x: number, y: number) {
         this._pageX = x
         this._pageY = y
 
+        this._searchString = "";
+
         this._display = "flex"
     }
 
@@ -59,10 +66,18 @@ export class ContextMenu extends React.Component {
     render() {
         return (
             <div className="contextMenu-cont" style={{ left: this._pageX, top: this._pageY, display: this._display }} ref={this.ref}>
-                {this._items.map(prop => {
+                <input className="contextMenu-item" type="text" placeholder="Search . . ." value={this._searchString} onChange={this.onChange}></input>
+                {this._items.filter(prop => {
+                    return prop.description.toLowerCase().indexOf(this._searchString.toLowerCase()) !== -1;
+                }).map(prop => {
                     return <ContextMenuItem {...prop} key={prop.description} />
                 })}
             </div>
         )
     }
+
+    @action
+    onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        this._searchString = e.target.value;
+    }
 }
\ No newline at end of file