1. split lex components to a module

2. added editor for lex dictid

src/App.tsx

@@ -1,25 +1,6 @@
 import * as React from 'react';
-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 LexEditor from './LexComponents';
 // import { Table } from '@blueprintjs/table';
-
-FocusStyleManager.onlyShowFocusOnTabs();
-
 // const logo = require('./logo.svg');
 
 class App extends React.Component<{}, null> {
@@ -38,111 +19,4 @@ class App extends React.Component<{}, null> {
   }
 }
 
-type ReactEvent = React.ChangeEvent<HTMLInputElement>;
-
-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 componentDidMount() {
-    return fetch(this.props.fileName)
-      .then((response) => response.text())
-      .then((xmlString) => {
-        XML.parseString(xmlString, (err, lexData) => {
-          this.setState({ ...this.state, lexData });
-        });
-      });
-    // .catch((error) => {
-    //   console.error(error);
-    // });
-  }
-
-  public render() {
-    return (
-      <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.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 (
-      <div className="pt-form-group">
-        <label className="pt-label" htmlFor="example-form-group-input-a">
-          UNL
-        </label>
-        <div className="pt-form-content">
-          <input
-            id="example-form-group-input-a"
-            className="pt-input"
-            style={{ width: '300px' }}
-            placeholder="UNL Value"
-            value={this.props.lexItem.unl}
-            type="text"
-            dir="auto"
-          />
-        </div>
-      </div>
-    );
-  }
-}
-
 export default App;

src/LexComponents.tsx

@@ -0,0 +1,129 @@
+import * as React from 'react';
+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';
+
+FocusStyleManager.onlyShowFocusOnTabs();
+
+type ReactEvent = React.ChangeEvent<HTMLInputElement>;
+
+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 componentDidMount() {
+    return fetch(this.props.fileName)
+      .then((response) => response.text())
+      .then((xmlString) => {
+        XML.parseString(xmlString, (err, lexData) => {
+          this.setState({ ...this.state, lexData });
+        });
+      });
+    // .catch((error) => {
+    //   console.error(error);
+    // });
+  }
+
+  public render() {
+    return (
+      <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.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 (
+      <div className="pt-form-group">
+        <label className="pt-label" htmlFor="example-form-group-input-a">
+          UNL
+        </label>
+        <div className="pt-form-content">
+          <input
+            id="example-form-group-input-a"
+            className="pt-input"
+            style={{ width: '300px' }}
+            placeholder="UNL Value"
+            value={this.props.lexItem.unl}
+            type="text"
+            dir="auto"
+          />
+        </div>
+      </div>
+    );
+  }
+}
+
+export default LexEditor;