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

@@ -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,43 +9,23 @@ 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];
-    let searchText = this.props.searchState.searchValue;
-    let matchedEntries = _.chain(this.props.allEntries)
-      .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) };
   });
+  function handleChange(e: any, t: boolean) {
+    if (t) {
+      props.searchForType(e.value);
+    } else {
+      props.searchForValue(e.value);
+    }
+  }
   return (
     <Container textAlign="center">
       <Dropdown
         options={dropOptions}
-          onChange={(e, d) => this.handleChange(d, true)}
+        onChange={(e, d) => handleChange(d, true)}
-          value={this.props.searchState.searchType}
+        value={props.searchState.searchType}
         compact={true}
         selection={true}
         style={{ width: '10em' }}
@@ -54,23 +34,14 @@ class LexSearch extends React.Component<any, any> {
         type="text"
         placeholder="Search input"
         dir="auto"
-          value={this.props.searchState.searchValue}
+        value={props.searchState.searchValue}
         icon="filter"
-          onChange={(e, d) => this.handleChange(d, false)}
+        onChange={(e, d) => handleChange(d, false)}
       />
     </Container>
   );
 }
 
-  private handleChange(e: any, t: boolean) {
-    if (t) {
-      this.props.searchForType(e.value);
-    } else {
-      this.props.searchForValue(e.value);
-    }
-  }
-}
-
 function LexMatches(params: any) {
   const selectMode = (props: any) => {
     if (props.searchText === '') {
@@ -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,24 +9,22 @@ import {
 } from 'semantic-ui-react';
 import PropListInput from './PropListInput';
 
-class LexInputContainer extends React.Component<any, any> {
+function LexInputContainer(props: any) {
-  public render() {
   return (
     <div>
       <Form>
         <Form.Group as={Flex} inline={true} style={{ margin: '0 0 5px 5px' }}>
           <Form.Field as={Box} w={2 / 5} style={{ textAlign: 'right' }}>
-              {this.props.label}
+            {props.label}
           </Form.Field>
           <Form.Field as={Box} w={3 / 5} >
-              {this.props.children}
+            {props.children}
           </Form.Field>
         </Form.Group>
       </Form>
     </div>
   );
 }
-}
 
 function changedLabel(changed: boolean, text: string) {
   let labelClass = changed ? 'olive' : '';

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,