Explicitelly pass props & Lint

springload · Jul 13, 2017 · fe0b76e · fe0b76e
1 parent 3cc1159
commit fe0b76e
Show file tree

Hide file tree

Showing 11 changed files with 318 additions and 273 deletions.
diff --git a/wagtailmodelchoosers/client/components/AutoComplete.js b/wagtailmodelchoosers/client/components/AutoComplete.js
@@ -30,6 +30,22 @@ class AutoComplete extends Component {
     this.onChange = this.onChange.bind(this);
   }
 
+  onSuggestionsUpdateRequested({ value }) {
+    const { onLoadStart } = this.props;
+    onLoadStart();
+    this.loadSuggestions(value);
+  }
+
+  onChange(event, { newValue }) {
+    const { onChange } = this.props;
+
+    this.setState({
+      value: newValue,
+    }, () => {
+      onChange(newValue);
+    });
+  }
+
   loadSuggestions(suggestionValue) {
     const { filter, endpoint, onLoadSuggestions } = this.props;
     const url = `${endpoint}/?search=${suggestionValue}${filter}`;
@@ -38,7 +54,7 @@ class AutoComplete extends Component {
       credentials: 'same-origin',
     })
       .then(res => res.json())
-      .then(json => {
+      .then((json) => {
         this.setState({
           suggestions: json.results,
           loading: false,
@@ -48,22 +64,6 @@ class AutoComplete extends Component {
       });
   }
 
-  onSuggestionsUpdateRequested({ value }) {
-    const { onLoadStart } = this.props;
-    onLoadStart();
-    this.loadSuggestions(value);
-  }
-
-  onChange(event, { newValue }) {
-    const { onChange } = this.props;
-
-    this.setState({
-      value: newValue,
-    }, () => {
-      onChange(newValue);
-    });
-  }
-
   render() {
     const { value, suggestions } = this.state;
 
@@ -76,7 +76,7 @@ class AutoComplete extends Component {
           renderSuggestion={renderSuggestion}
           inputProps={{
             placeholder: 'Type to search',
-            value: value,
+            value,
             onChange: this.onChange,
           }}
         />

diff --git a/wagtailmodelchoosers/client/components/BaseChooser.js b/wagtailmodelchoosers/client/components/BaseChooser.js
@@ -13,23 +13,26 @@ const STR = {
 const defaultProps = {
   display: 'title',
   filters: [],
-  pk_name: 'uuid',
   translations: {},
+  pk_name: 'uuid',
+  page_size: 10,
+  page_size_param: 'page_size',
 };
 
 const propTypes = {
   initialValue: PropTypes.oneOfType([PropTypes.string, PropTypes.object]).isRequired,
   updateInputValue: PropTypes.func.isRequired,
-  label: PropTypes.string.isRequired,
   initial_display_value: PropTypes.string.isRequired,
-  endpoint: PropTypes.string.isRequired,
-  value: PropTypes.any,
   required: PropTypes.bool.isRequired,
   display: PropTypes.oneOfType([PropTypes.string, PropTypes.array]).isRequired,
-  list_display: PropTypes.array.isRequired,
-  filters: PropTypes.array,
   pk_name: PropTypes.string,
   translations: PropTypes.object,
+  label: PropTypes.string.isRequired,
+  list_display: PropTypes.array.isRequired,
+  filters: PropTypes.array,
+  endpoint: PropTypes.string.isRequired,
+  page_size: PropTypes.number,
+  page_size_param: PropTypes.string,
 };
 
 class BaseChooser extends React.Component {
@@ -53,8 +56,8 @@ class BaseChooser extends React.Component {
 
     this.state = {
       pickerVisible: false,
-      selectedId: selectedId,
-      selectedItem: selectedItem,
+      selectedId,
+      selectedItem,
       initialUrl: null,
     };
 
@@ -68,12 +71,6 @@ class BaseChooser extends React.Component {
     this.clearPicker = this.clearPicker.bind(this);
   }
 
-  showPicker() {
-    this.setState({
-      pickerVisible: true,
-    });
-  }
-
   onClose() {
     this.setState({
       pickerVisible: false,
@@ -94,7 +91,7 @@ class BaseChooser extends React.Component {
   getItemPk(item) {
     const { pk_name: pkName } = this.props;
 
-    return !!item ? item[pkName] : null;
+    return item ? item[pkName] : null;
   }
 
   getItemPreview() {
@@ -107,7 +104,9 @@ class BaseChooser extends React.Component {
 
     // Return first non-empty field if `display` is an Array.
     if (Array.isArray(display)) {
-      for (const fieldName of display) {
+      let i;
+      for (i = 0; i < display.length; i + 1) {
+        const fieldName = display[i];
         if (fieldName in selectedItem && selectedItem[fieldName]) {
           return selectedItem[fieldName];
         }
@@ -123,11 +122,6 @@ class BaseChooser extends React.Component {
     return this.getItemPk(selectedItem);
   }
 
-  isOptional() {
-    const { required } = this.props;
-    return !required;
-  }
-
   getChooseButtons() {
     const { translations } = this.props;
     const { selectedId } = this.state;
@@ -157,6 +151,17 @@ class BaseChooser extends React.Component {
     );
   }
 
+  isOptional() {
+    const { required } = this.props;
+    return !required;
+  }
+
+  showPicker() {
+    this.setState({
+      pickerVisible: true,
+    });
+  }
+
   clearPicker(e) {
     e.preventDefault();
 
@@ -172,6 +177,16 @@ class BaseChooser extends React.Component {
 
   render() {
     const { pickerVisible, initialUrl } = this.state;
+    const {
+      list_display: listDisplay,
+      label,
+      endpoint,
+      filters,
+      pk_name: pkName,
+      page_size: pageSize,
+      page_size_param: pageSizeParam,
+      translations,
+    } = this.props;
 
     return (
       <div>
@@ -186,7 +201,14 @@ class BaseChooser extends React.Component {
             url={initialUrl}
             onClose={this.onClose}
             onSelect={this.onSelect}
-            {...this.props}
+            label={label}
+            endpoint={endpoint}
+            filters={filters}
+            list_display={listDisplay}
+            pk_name={pkName}
+            page_size={pageSize}
+            page_size_param={pageSizeParam}
+            translations={translations}
           />
         ) : null}
       </div>

diff --git a/wagtailmodelchoosers/client/components/Buttons.js b/wagtailmodelchoosers/client/components/Buttons.js
@@ -27,7 +27,7 @@ Button.defaultProps = {
 
 Button.propTypes = {
   isActive: PropTypes.bool,
-  classes: PropTypes.array,
+  classes: PropTypes.arrayOf(PropTypes.string),
   label: PropTypes.string.isRequired,
   onClick: PropTypes.func.isRequired,
 };

diff --git a/wagtailmodelchoosers/client/components/ModelChooser.js b/wagtailmodelchoosers/client/components/ModelChooser.js
@@ -30,23 +30,25 @@ class ModelChooser extends React.Component {
 
     // TODO: Props mutation WTF?
     input.value = newValue;
-    }
+  }
 
-    render() {
-      const { options, input } = this.props;
+  render() {
+    const { options, input } = this.props;
 
-      return (
-        <BaseChooser
-          initialValue={input.value}
-          updateInputValue={this.updateInputValue}
-          {...options}
-        />
-      );
+    return (
+      <BaseChooser
+        initialValue={input.value}
+        updateInputValue={this.updateInputValue}
+        {...options}
+      />
+    );
   }
 }
 
 ModelChooser.propTypes = {
+  // eslint-disable-next-line react/forbid-prop-types
   options: PropTypes.object.isRequired,
+  // eslint-disable-next-line react/forbid-prop-types
   input: PropTypes.object.isRequired,
 };