added input components

src/LexComponents.tsx

@@ -3,7 +3,9 @@ import * as _ from 'lodash';
 import {
   FocusStyleManager,
 } from '@blueprintjs/core';
+// import { Image } from 'semantic-ui-react';
 import * as XML from 'xml2js';
+import { LexSingleInput } from './LexInputComponents';
 const { Flex, Box } = require('reflexbox');
 
 FocusStyleManager.onlyShowFocusOnTabs();
@@ -11,33 +13,59 @@ FocusStyleManager.onlyShowFocusOnTabs();
 interface LexEditorProps {
   fileName: RequestInfo;
 }
-
+const imageRoot = 'https://s3-us-west-2.amazonaws.com/aac-buddy/static/img/png/';
-const searchLensMap = {
+const fieldMetaMap = {
-  'label': 'label[0]',
+  'label': { lens: 'label[0]', type: 'text' },
-  'unl': 'unl[0]',
+  'unl': { lens: 'unl[0]', type: 'text' },
-  'synset': 'lexprops[0].wnsynset[0]',
+  'synset': { lens: 'lexprops[0].wnsynset[0]', type: 'text' },
-  'guid': 'guid[0]',
+  'guid': { lens: 'guid[0]', type: 'text' },
-  'pos': 'pos[0]',
+  'pos': { lens: 'pos[0]', type: 'select' },
-  'image': 'image[0]',
+  'image': { lens: 'image[0]', type: 'preview' },
-  'relations': 'relations[0]',
+  'relations': { lens: 'relations[0]', type: 'text' },
-  'frame': 'syntacticprops[0].property[0]._',
+  'frame': { lens: 'syntacticprops[0].property[0]._', type: 'select' },
-  'morphclass': 'lexprops[0].morphology[0].morph[0]._',
+  'morphclass': {
-  'stats': 'stats[0].property[0]._',
+    lens: 'lexprops[0].morphology[0].morph[0]._',
-  'lang': '$.id',
+    type: 'select'
+  },
+  'stats': { lens: 'stats[0].property[0]._', type: 'text' },
+  'lang': { lens: '$.id', type: 'select' },
 };
 
 class LexEditor extends React.Component<LexEditorProps, any> {
+  lexData: any;
+  allEntries: any;
+  selectFields: any;
   constructor(props: LexEditorProps) {
     super(props);
-    this.state = { lexData: {}, matchedEntries: [], searchText: '' };
+    this.state = { matchedEntries: [], searchText: '' };
   }
 
   public componentDidMount() {
-    return fetch(this.props.fileName)
+    fetch(this.props.fileName)
       .then((response) => response.text())
       .then((xmlString) => {
         XML.parseString(xmlString, (err, lexData) => {
-          this.setState({ ...this.state, lexData });
+          this.lexData = lexData;
+          this.allEntries = _.chain(lexData)
+            .get<any>('document.lexicon[0].item')
+            .flatMap((o: any) => _.chain(o)
+              .get<any>('entry')
+              .map((p: any) => _.chain(p)
+                .get<any>('lang[0]')
+                .set('guid[0]', o.$.guid)
+                .value())
+              .value()
+            )
+            .value();
+          this.selectFields = _.fromPairs(_.keys(fieldMetaMap).filter((s) => {
+            return fieldMetaMap[s].type === 'select';
+          }).map((s) => {
+            let lens = fieldMetaMap[s].lens;
+            let selectOptions = _.uniq(this.allEntries.map((q: any) => {
+              return _.get<any>(q, lens, '');
+            }));
+            return [s, selectOptions];
+          }));
         });
       })
       .catch((e) => {
@@ -51,7 +79,7 @@ class LexEditor extends React.Component<LexEditorProps, any> {
         <LexSearch handleOnSearch={(e: any) => this.handleOnSearch(e)} />
         <LexMatches
           matchedEntries={this.state.matchedEntries}
-          mode={this.state.mode}
+          selectionMeta={this.selectFields}
           searchText={this.state.searchText}
           searchLens={this.state.searchLens}
         />
@@ -61,17 +89,8 @@ class LexEditor extends React.Component<LexEditorProps, any> {
 
   private handleOnSearch(searchEvent: any): void {
     let searchText = searchEvent.searchValue;
-    let searchLens = searchLensMap[searchEvent.searchType];
+    let searchLens = fieldMetaMap[searchEvent.searchType].lens;
-    let matchedEntries = _.chain(this.state.lexData)
+    let matchedEntries = _.chain(this.allEntries)
-      .get<any>('document.lexicon[0].item')
-      .flatMap((o: any) => _.chain(o)
-        .get<any>('entry')
-        .map((p: any) => _.chain(p)
-          .get<any>('lang[0]')
-          .set('guid[0]', o.$.guid)
-          .value())
-        .value()
-      )
       .filter((q: any) => _.get<any>(q, searchLens, '') === searchText)
       .value();
     this.setState({ ...this.state, matchedEntries, searchText, searchLens });
@@ -89,7 +108,7 @@ class LexSearch extends React.Component<any, any> {
           onChange={e => this.handleTypeChange(e)}
         >
           <select>
-            {_.keys(searchLensMap).map((k, i, c) => {
+            {_.keys(fieldMetaMap).map((k, i, c) => {
               return <option key={i} value={k}> {_.capitalize(k)}</option>;
             })}
           </select>
@@ -141,11 +160,24 @@ function selectMode(props: any) {
   } else {
     let editEntries = props.matchedEntries.map((mObj: any) => {
       let uniqueKey = mObj.guid[0] + '#' + mObj.$.id;
-      return (<LexEdit key={uniqueKey} lexItem={mObj} />);
+      return (
+        <LexEdit
+          key={uniqueKey}
+          lexItem={mObj}
+          selectionMeta={props.selectionMeta}
+        />
+      );
     });
     let addProps = {};
     _.set(addProps, props.searchLens, props.searchText);
-    editEntries.push(<LexEdit key={props.searchText} lexItem={addProps} />);
+    let addEntry = (
+      <LexEdit
+        key={props.searchText}
+        lexItem={addProps}
+        selectionMeta={props.selectionMeta}
+      />
+    );
+    editEntries.push(addEntry);
     return editEntries;
   }
 }
@@ -161,8 +193,54 @@ function LexMatches(props: any) {
 class LexEdit extends React.Component<any, any> {
   public render() {
     let li = this.props.lexItem;
-    let lexFields = _.keys(searchLensMap).map(e => {
+    let lexFields = _.keys(fieldMetaMap).map(ft => {
-      return this.getLabelField(e, searchLensMap[e], li);
+      let defaultText = _.get<any>(li, fieldMetaMap[ft].lens, '');
+      let sh = (e: any) => {
+        let eventData = {};
+        eventData[ft] = e.target.value;
+        this.handleOnChange(eventData);
+      };
+      // let pred = (x: any) => _.isEqual(fieldMetaMap[ft].type, x);
+      // _.findIndex(['text', 'number'], pred) !== -1
+      if (fieldMetaMap[ft].type === 'text') {
+        return (
+          <LexSingleInput key={ft} labelText={_.capitalize(ft)}>
+            <input
+              onChange={sh}
+              style={{ width: '110px' }}
+              className="pt-input"
+              defaultValue={defaultText}
+              placeholder={ft}
+              type="text"
+              dir="auto"
+            />
+          </LexSingleInput>
+        );
+      } else if (fieldMetaMap[ft].type === 'select') {
+        return (
+          <LexSingleInput key={ft} labelText={_.capitalize(ft)}>
+            <select
+              onChange={sh}
+              style={{ width: '110px' }}
+              className="pt-select"
+              defaultValue={defaultText}
+            >
+              {this.props.selectionMeta[ft].map((k: any, i: any, c: any) => {
+                return <option key={i} value={k}> {k}</option>;
+              })}
+            </select>
+          </LexSingleInput>
+        );
+      } else if (fieldMetaMap[ft].type === 'preview' && defaultText !== '') {
+        let imageSrc = imageRoot + defaultText;
+        return (
+          <LexSingleInput key={ft} labelText={_.capitalize(ft)}>
+            <img src={imageSrc} width="70px"/>
+          </LexSingleInput>
+        );
+      } else {
+        return null;
+      }
     });
     return (
       <Box
@@ -184,70 +262,9 @@ class LexEdit extends React.Component<any, any> {
     );
   }
 
-  private getLabelField(text: string, labelLens: string, li: any) {
-    return (
-      <LexField
-        key={text}
-        labelText={_.capitalize(text)}
-        fieldType={text}
-        fieldText={_.get<any>(li, labelLens, '')}
-        fieldHandler={(e: any) => this.handleOnChange(e)}
-      />
-    );
-  }
-
   private handleOnChange(event: any) {
     this.setState(event);
   }
 }
 
-class LexField extends React.Component<any, any> {
-  constructor(props: any) {
-    super(props);
-    this.state = { fieldText: this.props.fieldText };
-  }
-  public render() {
-    return (
-      <div className="pt-form-group pt-inline">
-        <Box w={2 / 5}>
-          <label
-            style={{ textAlign: 'right' }}
-            className="pt-label"
-            htmlFor="example-form-group-input-a"
-          >
-            {this.props.labelText}
-          </label>
-        </Box>
-        <Box w={3 / 5}>
-          <input
-            id="example-form-group-input-a"
-            className="pt-input"
-            style={{ width: '110px' }}
-            placeholder={this.props.fieldType}
-            value={this.state.fieldText}
-            type="text"
-            dir="auto"
-            onChange={(e: any) => this.onFieldChange(e)}
-          />
-        </Box>
-      </div>
-    );
-  }
-
-  public componentWillReceiveProps(nextProps: any) {
-    if (this.props.fieldText !== nextProps.fieldText) {
-      let fieldText = nextProps.fieldText;
-      this.setState({ ...this.state, fieldText });
-    }
-  }
-
-  private onFieldChange(e: any) {
-    let fieldText = e.target.value;
-    let eventData = {};
-    eventData[this.props.fieldType] = fieldText;
-    this.setState({ ...this.state, fieldText });
-    this.props.fieldHandler(eventData);
-  }
-}
-
 export default LexEditor;

src/LexInputComponents.tsx

@@ -0,0 +1,22 @@
+import * as React from 'react';
+const { Box } = require('reflexbox');
+
+export class LexSingleInput extends React.Component<any, any> {
+  public render() {
+    return (
+      <div className="pt-form-group pt-inline">
+        <Box w={2 / 5}>
+          <label
+            style={{ textAlign: 'right' }}
+            className="pt-label"
+          >
+            {this.props.labelText}
+          </label>
+        </Box>
+        <Box w={3 / 5}>
+          {this.props.children}
+        </Box>
+      </div>
+    );
+  }
+}