made stateless components functional and added typeCheck

config/webpack.config.flask.js

@@ -134,7 +134,10 @@ module.exports = {
           test: /\.(ts|tsx)$/,
           loader: require.resolve('tslint-loader'),
           enforce: 'pre',
-          include: paths.appSrc
+          include: paths.appSrc,
+          options: {
+            typeCheck:true
+          }
         }, {
           test: /\.js$/,
           loader: require.resolve('source-map-loader'),

config/webpack.config.prod.js

@@ -83,7 +83,7 @@ module.exports = {
     // https://github.com/facebookincubator/create-react-app/issues/290
     extensions: ['.ts', '.tsx', '.js', '.json', '.jsx'],
     alias: {
-      
+
       // Support React Native Web
       // https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/
       'react-native': 'react-native-web',
@@ -111,6 +111,9 @@ module.exports = {
         loader: require.resolve('tslint-loader'),
         enforce: 'pre',
         include: paths.appSrc,
+        options: {
+          typeCheck:true
+        }
       },
       {
         test: /\.js$/,

src/LexEditor.tsx

@@ -9,66 +9,37 @@ import {
 } from 'semantic-ui-react';
 const { Flex } = require('reflexbox');
 
-export class LexEditor extends React.Component<any, any> {
+function LexSearch(props: any) {
-  public render() {
+  let dropOptions = _.keys(props.fieldMetaMap).map((k, i, c) => {
-    let searchMeta = this.props.fieldMetaMap[this.props.searchState.searchType];
+    return { key: i, value: k, text: _.capitalize(k) };
-    let searchText = this.props.searchState.searchValue;
+  });
-    let matchedEntries = _.chain(this.props.allEntries)
+  function handleChange(e: any, t: boolean) {
-      .filter((q: any) => searchMeta.get(q) === searchText)
-      .take(10)
-      .value();
-    let { fieldMetaMap, save, markDirty, newGuid } = this.props;
-    return (
-      <div>
-        <LexSearch
-          {...this.props}
-        />
-        <LexMatches
-          {...{ fieldMetaMap, save, markDirty, newGuid }}
-          matchedEntries={matchedEntries}
-          selectionMeta={this.props.selectFields}
-          searchText={searchText}
-          searchMeta={searchMeta}
-        />
-      </div>
-    );
-  }
-}
-
-class LexSearch extends React.Component<any, any> {
-  public render() {
-    let dropOptions = _.keys(this.props.fieldMetaMap).map((k, i, c) => {
-      return { key: i, value: k, text: _.capitalize(k) };
-    });
-    return (
-      <Container textAlign="center">
-        <Dropdown
-          options={dropOptions}
-          onChange={(e, d) => this.handleChange(d, true)}
-          value={this.props.searchState.searchType}
-          compact={true}
-          selection={true}
-          style={{ width: '10em' }}
-        />
-        <Input
-          type="text"
-          placeholder="Search input"
-          dir="auto"
-          value={this.props.searchState.searchValue}
-          icon="filter"
-          onChange={(e, d) => this.handleChange(d, false)}
-        />
-      </Container>
-    );
-  }
-
-  private handleChange(e: any, t: boolean) {
     if (t) {
-      this.props.searchForType(e.value);
+      props.searchForType(e.value);
     } else {
-      this.props.searchForValue(e.value);
+      props.searchForValue(e.value);
     }
   }
+  return (
+    <Container textAlign="center">
+      <Dropdown
+        options={dropOptions}
+        onChange={(e, d) => handleChange(d, true)}
+        value={props.searchState.searchType}
+        compact={true}
+        selection={true}
+        style={{ width: '10em' }}
+      />
+      <Input
+        type="text"
+        placeholder="Search input"
+        dir="auto"
+        value={props.searchState.searchValue}
+        icon="filter"
+        onChange={(e, d) => handleChange(d, false)}
+      />
+    </Container>
+  );
 }
 
 function LexMatches(params: any) {
@@ -116,3 +87,27 @@ function LexMatches(params: any) {
     </Flex>
   );
 }
+
+export function LexEditor(props: any) {
+  let searchMeta = props.fieldMetaMap[props.searchState.searchType];
+  let searchText = props.searchState.searchValue;
+  let matchedEntries = _.chain(props.allEntries)
+    .filter((q: any) => searchMeta.get(q) === searchText)
+    .take(10)
+    .value();
+  let { fieldMetaMap, save, markDirty, newGuid } = props;
+  return (
+    <div>
+      <LexSearch
+        {...props}
+      />
+      <LexMatches
+        {...{ fieldMetaMap, save, markDirty, newGuid }}
+        matchedEntries={matchedEntries}
+        selectionMeta={props.selectFields}
+        searchText={searchText}
+        searchMeta={searchMeta}
+      />
+    </div>
+  );
+}

src/LexInputContainer.tsx

@@ -9,23 +9,21 @@ import {
 } from 'semantic-ui-react';
 import PropListInput from './PropListInput';
 
-class LexInputContainer extends React.Component<any, any> {
+function LexInputContainer(props: any) {
-  public render() {
+  return (
-    return (
+    <div>
-      <div>
+      <Form>
-        <Form>
+        <Form.Group as={Flex} inline={true} style={{ margin: '0 0 5px 5px' }}>
-          <Form.Group as={Flex} inline={true} style={{ margin: '0 0 5px 5px' }}>
+          <Form.Field as={Box} w={2 / 5} style={{ textAlign: 'right' }}>
-            <Form.Field as={Box} w={2 / 5} style={{ textAlign: 'right' }}>
+            {props.label}
-              {this.props.label}
+          </Form.Field>
-            </Form.Field>
+          <Form.Field as={Box} w={3 / 5} >
-            <Form.Field as={Box} w={3 / 5} >
+            {props.children}
-              {this.props.children}
+          </Form.Field>
-            </Form.Field>
+        </Form.Group>
-          </Form.Group>
+      </Form>
-        </Form>
+    </div>
-      </div>
+  );
-    );
-  }
 }
 
 function changedLabel(changed: boolean, text: string) {

tslint.json

@@ -16,7 +16,6 @@
     "curly": true,
     "eofline": false,
     "forin": true,
-    "type-check": true,
     "indent": [true, "spaces"],
     "interface-name": [true, "never-prefix"],
     "jsdoc-format": true,