AssociationPickerWindow.jsx in lcms-engine-0.4.0

- old
+ new

@@ -1,47 +1,57 @@
-import React from 'react'
-import _ from 'lodash'
-import AssociationPickerResults from './AssociationPickerResults'
+import React from 'react';
+import _ from 'lodash';
+import PropTypes from 'prop-types';
+import AssociationPickerResults from './AssociationPickerResults';
 
 class AssociationPickerWindow extends React.Component {
   constructor(props) {
-    super(props)
+    super(props);
 
-    this.state = { ...props, selectedItems: [] }
+    this.state = { ...props, selectedItems: [] };
+
+    this.selectItem = this.selectItem.bind(this);
   }
 
   selectItem(item) {
-    const operation = this.updateSelectedItems(item)
+    const operation = this.updateSelectedItems(item);
     if ('onSelectItem' in this.props) {
-      this.props.onSelectItem(item, operation)
+      this.props.onSelectItem(item, operation);
     }
   }
 
   updateSelectedItems(item) {
-    let operation, newItems
+    let operation, newItems;
     if (item._selected) {
-      newItems = _.filter(this.state.selectedItems, r => r.id !== item.id)
-      operation = 'removed'
+      newItems = _.filter(this.state.selectedItems, r => r.id !== item.id);
+      operation = 'removed';
     } else {
-      newItems = [...this.state.selectedItems, item]
-      operation = 'added'
+      newItems = [...this.state.selectedItems, item];
+      operation = 'added';
     }
-    this.setState(...this.state, { selectedItems: newItems })
-    return operation
+    this.setState(...this.state, { selectedItems: newItems });
+    return operation;
   }
 
   render() {
-    const { q, results } = this.props
+    const { q, results } = this.props;
 
     return (
       <div className="o-assocpicker">
         <div className="o-page">
           <div className="o-page__module">
             <h4 className="text-center">Select item</h4>
             <div className="row">
-              <label className="medium-3 columns">Name
-                <input type="text" value={q || ''} onChange={ this.props.onFilterChange.bind(this, 'q') }/>
+              <label className="medium-3 columns">
+                Name
+                {/*
+                  eslint-disable react/jsx-no-bind
+                */}
+                <input type="text" value={q || ''} onChange={this.props.onFilterChange.bind(this, 'q')} />
+                {/*
+                  eslint-enable react/jsx-no-bind
+                */}
               </label>
             </div>
           </div>
         </div>
 
@@ -50,25 +60,34 @@
             <AssociationPickerResults
               value={q}
               items={results}
               selectedItems={this.state.selectedItems}
               allowCreate={this.props.allowCreate}
-              // eslint-disable-next-line react/jsx-no-bind
-              onSelectItem={this.selectItem.bind(this)}
+              onSelectItem={this.selectItem}
             />
 
-            { this.props.pagination() }
+            {this.props.pagination()}
 
-            { (this.props.allowMultiple) ?
-              <button type="button"
-                className="button c-assocpicker-submit"
-                onClick={this.props.onClickDone}>Submit</button>
-              : null
-            }
+            {this.props.allowMultiple ? (
+              <button type="button" className="button c-assocpicker-submit" onClick={this.props.onClickDone}>
+                Submit
+              </button>
+            ) : null}
           </div>
         </div>
       </div>
-    )
+    );
   }
 }
 
-export default AssociationPickerWindow
+AssociationPickerWindow.propTypes = {
+  onSelectItem: PropTypes.func,
+  q: PropTypes.string,
+  results: PropTypes.array,
+  onFilterChange: PropTypes.func,
+  allowCreate: PropTypes.bool,
+  pagination: PropTypes.func,
+  allowMultiple: PropTypes.bool,
+  onClickDone: PropTypes.func,
+};
+
+export default AssociationPickerWindow;