refactored single input components from lexedit

src/LexEdit.tsx

@@ -1,9 +1,11 @@
 import * as React from 'react';
 import * as _ from 'lodash';
-import LexSingleInput from './LexSingleInput';
 import {
-  Image,
+  textInput,
-  Input,
+  selectInput,
+  imagePreview
+} from './LexSingleInput';
+import {
   Card,
   Button
 } from 'semantic-ui-react';
@@ -22,48 +24,18 @@ export class LexEdit extends React.Component<any, any> {
     let lexFields = _.keys(this.props.fieldMetaMap).map(field => {
       let lens = this.props.fieldMetaMap[field].lens;
       let defaultText = _.get<any>(li, lens, '');
+      let options = this.props.fieldMetaMap[field].options;
       let sh = (e: any) => {
         let eventData = {};
         eventData[field] = e.target.value;
         this.handleOnChange(eventData);
       };
       if (this.props.fieldMetaMap[field].type === 'text') {
-        return (
+        return textInput({field,sh,defaultText,options,langSelOpts});
-          <LexSingleInput key={field} labelText={_.capitalize(field)}>
-            <Input
-              onChange={sh}
-              defaultValue={defaultText}
-              placeholder={field}
-              type="text"
-              dir="auto"
-              style={{ width: '10em' }}
-            />
-          </LexSingleInput>
-        );
       } else if (this.props.fieldMetaMap[field].type === 'select') {
-        let staticOpts = this.props.fieldMetaMap[field].options;
+        return selectInput({field,sh,defaultText,options,langSelOpts});
-        let fieldOpts = _.get<any>(langSelOpts, field, []);
-        let selOpts = staticOpts ? staticOpts : fieldOpts;
-        return (
-          <LexSingleInput key={field} labelText={_.capitalize(field)}>
-            <select
-              onChange={sh}
-              style={{ width: '10em' }}
-              defaultValue={defaultText}
-            >
-              {selOpts.map((k: any, i: any, c: any) => {
-                return <option key={i} value={k}> {k}</option>;
-              })}
-            </select>
-          </LexSingleInput>
-        );
       } else if (this.props.fieldMetaMap[field].type === 'preview' && defaultText !== '') {
-        let imageSrc = this.imageRoot + defaultText;
+        return imagePreview({field,sh,defaultText,options,langSelOpts});
-        return (
-          <LexSingleInput key={field} labelText={_.capitalize(field)}>
-            <Image src={imageSrc} size="tiny" bordered={true} />
-          </LexSingleInput>
-        );
       } else {
         return null;
       }

src/LexEditor.tsx

@@ -86,6 +86,7 @@ function LexMatches(params: any) {
             key={uniqueKey}
             lexItem={mObj}
             selectionMeta={props.selectionMeta}
+            new_entry={false}
           />
         );
       });
@@ -97,6 +98,7 @@ function LexMatches(params: any) {
           key={props.searchText}
           lexItem={addProps}
           selectionMeta={props.selectionMeta}
+          new_entry={true}
         />
       );
       editEntries.push(addEntry);

src/LexSingleInput.tsx

@@ -1,8 +1,13 @@
 import * as React from 'react';
+import * as _ from 'lodash';
 import { Label, Form } from 'semantic-ui-react';
 const { Flex, Box } = require('reflexbox');
+import {
+  Input,
+  Image
+} from 'semantic-ui-react';
 
-export default class LexSingleInput extends React.Component<any, any> {
+class LexSingleInput extends React.Component<any, any> {
   public render() {
     return (
       <div>
@@ -24,3 +29,51 @@ export default class LexSingleInput extends React.Component<any, any> {
     );
   }
 }
+
+const imageRoot = '/png/';
+
+export function textInput(params: any) {
+  let {field,sh,defaultText} = params;
+  return (
+    <LexSingleInput key={field} labelText={_.capitalize(field)}>
+      <Input
+        onChange={sh}
+        defaultValue={defaultText}
+        placeholder={field}
+        type="text"
+        dir="auto"
+        style={{ width: '10em' }}
+      />
+    </LexSingleInput>
+  );
+}
+
+export function selectInput(params: any) {
+  let {field,sh,defaultText,options,langSelOpts} = params;
+  let staticOpts = options;
+  let fieldOpts = _.get<any>(langSelOpts, field, []);
+  let selOpts = staticOpts ? staticOpts : fieldOpts;
+  return (
+    <LexSingleInput key={field} labelText={_.capitalize(field)}>
+      <select
+        onChange={sh}
+        style={{ width: '10em' }}
+        defaultValue={defaultText}
+      >
+        {selOpts.map((k: any, i: any, c: any) => {
+          return <option key={i} value={k}> {k}</option>;
+        })}
+      </select>
+    </LexSingleInput>
+  );
+}
+
+export function imagePreview(params: any) {
+  let {field,defaultText} = params;
+  let imageSrc = imageRoot + defaultText;
+  return (
+    <LexSingleInput key={field} labelText={_.capitalize(field)}>
+      <Image src={imageSrc} size="tiny" bordered={true} />
+    </LexSingleInput>
+  );
+}