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=",
+          "integrity": "sha1-TekR5mew6ukSTjQlS1OupvxhjT4="
-          "dev": true
         }
       }
     },
@@ -1002,8 +1000,7 @@
     },
     "debug": {
       "version": "https://registry.npmjs.org/debug/-/debug-2.6.8.tgz",
-      "integrity": "sha1-5zFTHKLt4n0YgiJCfaF4IdaP9Pw=",
+      "integrity": "sha1-5zFTHKLt4n0YgiJCfaF4IdaP9Pw="
-      "dev": true
     },
     "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=",
+      "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g="
-      "dev": true
     },
     "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=",
+      "integrity": "sha1-M2w+/BIgrc7dosn6tntaeVWjNlg="
-      "dev": true
     },
     "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();
@@ -13,55 +28,104 @@ class App extends React.Component<{}, null> {
       <div>
         <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"/>
+            <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"/>
+        <LexEditor fileName="/new_es.xml" />
       </div>
     );
   }
 }
 
-// interface LexEditorProps {
+type ReactEvent = React.ChangeEvent<HTMLInputElement>;
-//   fileName: string;
-// }
 
-class LexEditor extends React.Component<any, null> {
+interface LexEditorProps {
-  constructor(props: any) {
+  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 {
+  public componentDidMount() {
-      this.setState({ searchWord : event.target.value });
-  }
-
-  componentDidMount() {
     return fetch(this.props.fileName)
-    .then((response) => response.text())
+      .then((response) => response.text())
-    .then((xmlString) => {
+      .then((xmlString) => {
-      XML.parseString(xmlString, (err, jsObj) => {
+        XML.parseString(xmlString, (err, lexData) => {
-        this.setState({'lexdata': jsObj});
+          this.setState({ ...this.state, lexData });
+        });
       });
-    })
+    // .catch((error) => {
-    .catch((error) => {
+    //   console.error(error);
-      console.error(error);
+    // });
-    });
   }
-  render() {
+
+  public render() {
     return (
-      <div className="pt-input-group">
+      <div>
-        <span className="pt-icon pt-icon-search"/>
+        <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

@@ -1,99 +1,99 @@
 {
-    "extends": ["tslint-react"],
+  "extends": ["tslint-react"],
-    "rules": {
+  "rules": {
-        "align": [
+    "align": [
-            true,
+      true,
-            "parameters",
+      "parameters",
-            "arguments",
+      "arguments",
-            "statements"
+      "statements"
-        ],
+    ],
-        "ban": false,
+    "ban": false,
-        "class-name": true,
+    "class-name": true,
-        "comment-format": [
+    "comment-format": [
-            true,
+      true,
-            "check-space"
+      "check-space"
-        ],
+    ],
-        "curly": true,
+    "curly": true,
-        "eofline": false,
+    "eofline": false,
-        "forin": true,
+    "forin": true,
-        "indent": [ true, "spaces" ],
+    "indent": [true, "spaces"],
-        "interface-name": [true, "never-prefix"],
+    "interface-name": [true, "never-prefix"],
-        "jsdoc-format": true,
+    "jsdoc-format": true,
-        "jsx-no-lambda": false,
+    "jsx-no-lambda": false,
-        "jsx-no-multiline-js": false,
+    "jsx-no-multiline-js": false,
-        "label-position": true,
+    "label-position": true,
-        "max-line-length": [ true, 120 ],
+    "max-line-length": [true, 120],
-        "member-ordering": [
+    "member-ordering": [
-            true,
+      true,
-            "public-before-private",
+      "public-before-private",
-            "static-before-instance",
+      "static-before-instance",
-            "variables-before-functions"
+      "variables-before-functions"
-        ],
+    ],
-        "no-any": true,
+    "no-any": false,
-        "no-arg": true,
+    "no-arg": true,
-        "no-bitwise": true,
+    "no-bitwise": true,
-        "no-console": [
+    "no-console": [
-            true,
+      false,
-            "log",
+      "log",
-            "error",
+      "error",
-            "debug",
+      "debug",
-            "info",
+      "info",
-            "time",
+      "time",
-            "timeEnd",
+      "timeEnd",
-            "trace"
+      "trace"
-        ],
+    ],
-        "no-consecutive-blank-lines": true,
+    "no-consecutive-blank-lines": true,
-        "no-construct": true,
+    "no-construct": true,
-        "no-debugger": true,
+    "no-debugger": true,
-        "no-duplicate-variable": true,
+    "no-duplicate-variable": true,
-        "no-empty": true,
+    "no-empty": true,
-        "no-eval": true,
+    "no-eval": true,
-        "no-shadowed-variable": true,
+    "no-shadowed-variable": true,
-        "no-string-literal": true,
+    "no-string-literal": true,
-        "no-switch-case-fall-through": true,
+    "no-switch-case-fall-through": true,
-        "no-trailing-whitespace": false,
+    "no-trailing-whitespace": false,
-        "no-unused-expression": true,
+    "no-unused-expression": true,
-        "no-use-before-declare": true,
+    "no-use-before-declare": true,
-        "one-line": [
+    "one-line": [
-            true,
+      true,
-            "check-catch",
+      "check-catch",
-            "check-else",
+      "check-else",
-            "check-open-brace",
+      "check-open-brace",
-            "check-whitespace"
+      "check-whitespace"
-        ],
+    ],
-        "quotemark": [true, "single", "jsx-double"],
+    "quotemark": [true, "single", "jsx-double"],
-        "radix": true,
+    "radix": true,
-        "semicolon": [true, "always"],
+    "semicolon": [true, "always"],
-        "switch-default": true,
+    "switch-default": true,
 
-        "trailing-comma": false,
+    "trailing-comma": false,
 
-        "triple-equals": [ true, "allow-null-check" ],
+    "triple-equals": [true, "allow-null-check"],
-        "typedef": [
+    "typedef": [
-            true,
+      true,
-            "parameter",
+      "parameter",
-            "property-declaration"
+      "property-declaration"
-        ],
+    ],
-        "typedef-whitespace": [
+    "typedef-whitespace": [
-            true,
+      true,
-            {
+      {
-                "call-signature": "nospace",
+        "call-signature": "nospace",
-                "index-signature": "nospace",
+        "index-signature": "nospace",
-                "parameter": "nospace",
+        "parameter": "nospace",
-                "property-declaration": "nospace",
+        "property-declaration": "nospace",
-                "variable-declaration": "nospace"
+        "variable-declaration": "nospace"
-            }
+      }
-        ],
+    ],
-        "variable-name": [true, "ban-keywords", "check-format", "allow-leading-underscore", "allow-pascal-case"],
+    "variable-name": [true, "ban-keywords", "check-format", "allow-leading-underscore", "allow-pascal-case"],
-        "whitespace": [
+    "whitespace": [
-            true,
+      true,
-            "check-branch",
+      "check-branch",
-            "check-decl",
+      "check-decl",
-            "check-module",
+      "check-module",
-            "check-operator",
+      "check-operator",
-            "check-separator",
+      "check-separator",
-            "check-type",
+      "check-type",
-            "check-typecast"
+      "check-typecast"
-        ]
+    ]
-    }
+  }
 }