updated to search for word and included semantic-ui

package-lock.json

@@ -363,12 +363,10 @@
     "babel-runtime": {
       "version": "https://registry.npmjs.org/babel-runtime/-/babel-runtime-6.23.0.tgz",
       "integrity": "sha1-CpSJ8UTecO+zzkMArM2zKeL8VDs=",
-      "dev": true,
       "dependencies": {
         "core-js": {
           "version": "https://registry.npmjs.org/core-js/-/core-js-2.4.1.tgz",
-          "integrity": "sha1-TekR5mew6ukSTjQlS1OupvxhjT4=",
-          "dev": true
+          "integrity": "sha1-TekR5mew6ukSTjQlS1OupvxhjT4="
         }
       }
     },
@@ -1002,8 +1000,7 @@
     },
     "debug": {
       "version": "https://registry.npmjs.org/debug/-/debug-2.6.8.tgz",
-      "integrity": "sha1-5zFTHKLt4n0YgiJCfaF4IdaP9Pw=",
-      "dev": true
+      "integrity": "sha1-5zFTHKLt4n0YgiJCfaF4IdaP9Pw="
     },
     "decamelize": {
       "version": "https://registry.npmjs.org/decamelize/-/decamelize-1.2.0.tgz",
@@ -2969,6 +2966,11 @@
       "integrity": "sha1-0M/R3k9XnymEhJJcKA+PHZTsPKs=",
       "dev": true
     },
+    "jquery": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.2.1.tgz",
+      "integrity": "sha1-XE2d5lKvbNCncBVKYxu6ErAVx4c="
+    },
     "js-base64": {
       "version": "https://registry.npmjs.org/js-base64/-/js-base64-2.1.9.tgz",
       "integrity": "sha1-8OgK4DmkvWVLXygfyT8EqRSn/M4=",
@@ -3332,8 +3334,7 @@
     },
     "ms": {
       "version": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
-      "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=",
-      "dev": true
+      "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g="
     },
     "mute-stream": {
       "version": "https://registry.npmjs.org/mute-stream/-/mute-stream-0.0.7.tgz",
@@ -4376,8 +4377,7 @@
     },
     "regenerator-runtime": {
       "version": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.10.5.tgz",
-      "integrity": "sha1-M2w+/BIgrc7dosn6tntaeVWjNlg=",
-      "dev": true
+      "integrity": "sha1-M2w+/BIgrc7dosn6tntaeVWjNlg="
     },
     "regex-cache": {
       "version": "https://registry.npmjs.org/regex-cache/-/regex-cache-0.4.3.tgz",
@@ -4554,6 +4554,23 @@
       "integrity": "sha1-Yl2GWPhlr0Psliv8N2o3NZpJlMo=",
       "dev": true
     },
+    "semantic-ui-css": {
+      "version": "2.2.10",
+      "resolved": "https://registry.npmjs.org/semantic-ui-css/-/semantic-ui-css-2.2.10.tgz",
+      "integrity": "sha1-+PRHDb7/yg8PP/T7caNcceiK2Jw="
+    },
+    "semantic-ui-react": {
+      "version": "0.68.5",
+      "resolved": "https://registry.npmjs.org/semantic-ui-react/-/semantic-ui-react-0.68.5.tgz",
+      "integrity": "sha1-F5u4nDh/gRcCbKAfboSQ2x/Y5xM=",
+      "dependencies": {
+        "prop-types": {
+          "version": "15.5.8",
+          "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.5.8.tgz",
+          "integrity": "sha1-a3suFBCDvjjIWVqlH8VXdccZk5Q="
+        }
+      }
+    },
     "semver": {
       "version": "https://registry.npmjs.org/semver/-/semver-5.3.0.tgz",
       "integrity": "sha1-myzl094C0XxgEq0yaqa00M9U+U8=",

package.json

@@ -18,6 +18,8 @@
     "react-addons-css-transition-group": "^15.5.2",
     "react-dom": "^15.5.4",
     "react-transition-group": "^1.1.3",
+    "semantic-ui-css": "^2.2.10",
+    "semantic-ui-react": "^0.68.5",
     "xml2js": "^0.4.17",
     "xml2js-xpath": "^0.8.0"
   },

src/App.tsx

@@ -1,6 +1,21 @@
 import * as React from 'react';
-import { FocusStyleManager } from '@blueprintjs/core';
+import {
+  // Button,
+  // Classes,
+  // InputGroup,
+  // Intent,
+  // Menu,
+  // MenuItem,
+  // Popover,
+  // Position,
+  // Spinner,
+  // Switch,
+  // Tag,
+  // Tooltip,
+  FocusStyleManager,
+} from '@blueprintjs/core';
 import * as XML from 'xml2js';
+import * as XPath from 'xml2js-xpath';
 // import { Table } from '@blueprintjs/table';
 
 FocusStyleManager.onlyShowFocusOnTabs();
@@ -14,7 +29,7 @@ class App extends React.Component<{}, null> {
         <nav className="pt-navbar pt-dark">
           <div className="pt-navbar-group pt-align-left">
             <button className="pt-button pt-minimal pt-icon-large pt-icon-edit" />
-            <div className="pt-navbar-heading">Lex Editor</div>
+            <div className="pt-navbar-heading">Freespeech Lexicon Editor</div>
           </div>
         </nav>
         <LexEditor fileName="/new_es.xml" />
@@ -23,45 +38,94 @@ class App extends React.Component<{}, null> {
   }
 }
 
-// interface LexEditorProps {
-//   fileName: string;
-// }
+type ReactEvent = React.ChangeEvent<HTMLInputElement>;
 
-class LexEditor extends React.Component<any, null> {
-  constructor(props: any) {
+interface LexEditorProps {
+  fileName: RequestInfo;
+}
+
+class LexEditor extends React.Component<LexEditorProps, any> {
+  constructor(props: LexEditorProps) {
     super(props);
+    this.handleOnSearch = this.handleOnSearch.bind(this);
+    this.state = { lexData: {}, matchedEntries: [] };
   }
 
-  public handleOnChange(event: any): void {
-      this.setState({ searchWord : event.target.value });
-  }
-
-  componentDidMount() {
+  public componentDidMount() {
     return fetch(this.props.fileName)
       .then((response) => response.text())
       .then((xmlString) => {
-      XML.parseString(xmlString, (err, jsObj) => {
-        this.setState({'lexdata': jsObj});
+        XML.parseString(xmlString, (err, lexData) => {
+          this.setState({ ...this.state, lexData });
         });
-    })
-    .catch((error) => {
-      console.error(error);
       });
+    // .catch((error) => {
+    //   console.error(error);
+    // });
   }
-  render() {
+
+  public render() {
     return (
-      <div className="pt-input-group">
+      <div>
+        <LexSearch handleOnSearch={this.handleOnSearch} />
+        <LexMatches matchedEntries={this.state.matchedEntries} />
+      </div>
+    );
+  }
+
+  private handleOnSearch(event: ReactEvent): void {
+    let searchText = event.target.value;
+    // this.setState({ ...this.state, searchText });
+    let pathQ = './/lang';
+    let words = XPath.find(this.state.lexData.document, pathQ);
+    let matchedEntries = words.filter((obj) => {
+      if (obj.label[0] === searchText) {
+        return true;
+      }
+      return false;
+    });
+    this.setState({ ...this.state, matchedEntries });
+  }
+}
+
+interface LexSearchProps {
+  handleOnSearch: (e: ReactEvent) => void;
+}
+
+class LexSearch extends React.Component<LexSearchProps, null> {
+  public render() {
+    return (
+      <div className="pt-input-group" style={{ width: '300px' }}>
         <span className="pt-icon pt-icon-search" />
         <input
           className="pt-input"
           type="search"
           placeholder="Search input"
           dir="auto"
-          onChange = {e => this.handleOnChange(e)}
+          onChange={e => this.props.handleOnSearch(e)}
         />
       </div>
     );
   }
 }
 
+class LexMatches extends React.Component<any, any> {
+  public render() {
+    return (
+      <div>
+        {this.props.matchedEntries.map((mObj: any) => {
+          console.log('Matched ObjectEntry' + mObj);
+          return (<LexEntry key={mObj.unl} lexItem={mObj}/>);
+        })}
+      </div>
+    );
+  }
+}
+
+class LexEntry extends React.Component<any, any> {
+  public render() {
+    return null;
+  }
+}
+
 export default App;

src/index.css

@@ -1,8 +1,3 @@
-body {
-  margin: 0;
-  padding: 0;
-  font-family: sans-serif;
-}
-
 @import "~normalize.css/normalize.css";
 @import "~@blueprintjs/core/dist/blueprint.css";
+@import "~semantic-ui-css/semantic.min.css";

tslint.json

@@ -29,11 +29,11 @@
       "static-before-instance",
       "variables-before-functions"
     ],
-        "no-any": true,
+    "no-any": false,
     "no-arg": true,
     "no-bitwise": true,
     "no-console": [
-            true,
+      false,
       "log",
       "error",
       "debug",