patternfly · jeff-phillips-18 · Apr 23, 2018 · Apr 18, 2018
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
@@ -135,6 +135,7 @@ when possible and accept [props](https://facebook.github.io/react/docs/component
 * If you need a constant file, it should be called `{Component_Name}Constants.js` (Component_Name with PascalCase)
 * Each component should treat as a standalone package and live under its own folder
 * Single file per component with **default export**
+* Avoid using the bindMethods syntax for attaching methods to a class.  Instead use class properties for example ```testMethod = () => { return 'test'} ```
 * When component is a set of components (e.g., ListGroup and ListGroupItem),
   they should live in the same folder named on the parent component (e.g., ListGroup)
 * Each component folder should have an `index.js` file with **named exports** of all the relevant components in the folder

diff --git a/src/common/controlled.js b/src/common/controlled.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { nullValues, bindMethods, selectKeys, filterKeys } from './helpers';
+import { nullValues, selectKeys, filterKeys } from './helpers';
 
 /*
   controlled(stateTypes, defaults)(WrappedComponent)
@@ -35,16 +35,7 @@ import { nullValues, bindMethods, selectKeys, filterKeys } from './helpers';
 */
 const controlled = ({ types, defaults = {}, persist }) => WrappedComponent => {
   class ControlledComponent extends React.Component {
-    constructor() {
-      super();
-      this.state = { ...nullValues(types), ...defaults };
-      bindMethods(this, [
-        'sessionKey',
-        'savePersistent',
-        'loadPersistent',
-        'setControlledState'
-      ]);
-    }
+    state = { ...nullValues(types), ...defaults };
 
     componentDidMount() {
       this.loadPersistent();
@@ -60,21 +51,21 @@ const controlled = ({ types, defaults = {}, persist }) => WrappedComponent => {
         window.removeEventListener('beforeunload', this.savePersistent);
     }
 
-    setControlledState(updater) {
+    setControlledState = updater => {
       this.setState(updater);
-    }
+    };
 
-    loadPersistent() {
+    loadPersistent = () => {
       if (persist && persist.length > 0) {
         const fromPersisted =
           window &&
           window.sessionStorage &&
           window.sessionStorage.getItem(this.sessionKey());
         fromPersisted && this.setState(JSON.parse(fromPersisted));
       }
-    }
+    };
 
-    savePersistent() {
+    savePersistent = () => {
       if (persist && persist.length > 0) {
         const toPersist = selectKeys(this.state, persist);
         window &&
@@ -84,11 +75,9 @@ const controlled = ({ types, defaults = {}, persist }) => WrappedComponent => {
             JSON.stringify(toPersist)
           );
       }
-    }
+    };
 
-    sessionKey() {
-      return this.props.sessionKey || JSON.stringify(persist);
-    }
+    sessionKey = () => this.props.sessionKey || JSON.stringify(persist);
 
     render() {
       const controlledStateProps = filterKeys(

diff --git a/src/common/helpers.js b/src/common/helpers.js
@@ -2,6 +2,11 @@ import React from 'react';
 
 /** Equivalent to calling `this.someMethod = this.someMethod.bind(this)` for every method name in the methods array. */
 export const bindMethods = (context, methods) => {
+  // eslint-disable-next-line no-console
+  console.warn(`
+   bindMethods usage is deprecated in favor of class methods.
+   bindMethods will be removed in the next major release
+   `);
   methods.forEach(method => {
     context[method] = context[method].bind(context);
   });

diff --git a/src/components/Filter/__mocks__/mockFilterExample.js b/src/components/Filter/__mocks__/mockFilterExample.js
@@ -1,6 +1,5 @@
 import React from 'react';
 import { Filter, FormControl, Toolbar } from '../../../index';
-import { bindMethods } from '../../../common/helpers';
 
 export const mockFilterExampleFields = [
   {
@@ -72,28 +71,13 @@ export const mockFilterExampleFields = [
 ];
 
 export class MockFilterExample extends React.Component {
-  constructor() {
-    super();
-
-    bindMethods(this, [
-      'updateCurrentValue',
-      'onValueKeyPress',
-      'selectFilterType',
-      'filterValueSelected',
-      'filterCategorySelected',
-      'categoryValueSelected',
-      'removeFilter',
-      'clearFilters'
-    ]);
-
-    this.state = {
-      currentFilterType: mockFilterExampleFields[0],
-      activeFilters: [],
-      currentValue: ''
-    };
-  }
+  state = {
+    currentFilterType: mockFilterExampleFields[0],
+    activeFilters: [],
+    currentValue: ''
+  };
 
-  onValueKeyPress(keyEvent) {
+  onValueKeyPress = keyEvent => {
     const { currentValue, currentFilterType } = this.state;
 
     if (keyEvent.key === 'Enter' && currentValue && currentValue.length > 0) {
@@ -102,9 +86,9 @@ export class MockFilterExample extends React.Component {
       keyEvent.stopPropagation();
       keyEvent.preventDefault();
     }
-  }
+  };
 
-  categoryValueSelected(value) {
+  categoryValueSelected = value => {
     const { currentValue, currentFilterType, filterCategory } = this.state;
 
     if (filterCategory && currentValue !== value) {
@@ -117,11 +101,11 @@ export class MockFilterExample extends React.Component {
         this.filterAdded(currentFilterType, filterValue);
       }
     }
-  }
+  };
 
-  clearFilters() {
+  clearFilters = () => {
     this.setState({ activeFilters: [] });
-  }
+  };
 
   filterAdded = (field, value) => {
     let filterText = '';
@@ -145,14 +129,14 @@ export class MockFilterExample extends React.Component {
     this.setState({ activeFilters });
   };
 
-  filterCategorySelected(category) {
+  filterCategorySelected = category => {
     const { filterCategory } = this.state;
     if (filterCategory !== category) {
       this.setState({ filterCategory: category, currentValue: '' });
     }
-  }
+  };
 
-  filterValueSelected(filterValue) {
+  filterValueSelected = filterValue => {
     const { currentFilterType, currentValue } = this.state;
 
     if (filterValue !== currentValue) {
@@ -161,9 +145,9 @@ export class MockFilterExample extends React.Component {
         this.filterAdded(currentFilterType, filterValue);
       }
     }
-  }
+  };
 
-  removeFilter(filter) {
+  removeFilter = filter => {
     const { activeFilters } = this.state;
 
     const index = activeFilters.indexOf(filter);
@@ -174,9 +158,9 @@ export class MockFilterExample extends React.Component {
       ];
       this.setState({ activeFilters: updated });
     }
-  }
+  };
 
-  selectFilterType(filterType) {
+  selectFilterType = filterType => {
     const { currentFilterType } = this.state;
     if (currentFilterType !== filterType) {
       this.setState(prevState => ({
@@ -192,11 +176,11 @@ export class MockFilterExample extends React.Component {
             : prevState.categoryValue
       }));
     }
-  }
+  };
 
-  updateCurrentValue(event) {
+  updateCurrentValue = event => {
     this.setState({ currentValue: event.target.value });
-  }
+  };
 
   renderInput() {
     const { currentFilterType, currentValue, filterCategory } = this.state;
@@ -290,7 +274,6 @@ export class MockFilterExample extends React.Component {
 export const mockFilterExampleSource = `
 import React from 'react';
 import { Filter, FormControl, Toolbar } from '../../../index';
-import { bindMethods } from '../../../common/helpers';
 
 export const mockFilterExampleFields = [
   {
@@ -362,26 +345,12 @@ export const mockFilterExampleFields = [
 ];
 
 export class MockFilterExample extends React.Component {
-  constructor() {
-    super();
-
-    bindMethods(this, [
-      'updateCurrentValue',
-      'onValueKeyPress',
-      'selectFilterType',
-      'filterValueSelected',
-      'filterCategorySelected',
-      'categoryValueSelected',
-      'removeFilter',
-      'clearFilters'
-    ]);
-
-    this.state = {
+
+    state = {
       currentFilterType: mockFilterExampleFields[0],
       activeFilters: [],
       currentValue: ''
     };
-  }
 
   filterAdded = (field, value) => {
     let filterText = '';
@@ -407,7 +376,7 @@ export class MockFilterExample extends React.Component {
     this.setState({ activeFilters: activeFilters });
   };
 
-  selectFilterType(filterType) {
+  selectFilterType = filterType => {
     const { currentFilterType } = this.state;
     if (currentFilterType !== filterType) {
       this.setState(prevState => {
@@ -427,7 +396,7 @@ export class MockFilterExample extends React.Component {
     }
   }
 
-  filterValueSelected(filterValue) {
+  filterValueSelected = filterValue => {
     const { currentFilterType, currentValue } = this.state;
 
     if (filterValue !== currentValue) {
@@ -438,14 +407,14 @@ export class MockFilterExample extends React.Component {
     }
   }
 
-  filterCategorySelected(category) {
+  filterCategorySelected = category => {
     const { filterCategory } = this.state;
     if (filterCategory !== category) {
       this.setState({ filterCategory: category, currentValue: '' });
     }
   }
 
-  categoryValueSelected(value) {
+  categoryValueSelected = value => {
     const { currentValue, currentFilterType, filterCategory } = this.state;
 
     if (filterCategory && currentValue !== value) {
@@ -460,11 +429,11 @@ export class MockFilterExample extends React.Component {
     }
   }
 
-  updateCurrentValue(event) {
+  updateCurrentValue = event => {
     this.setState({ currentValue: event.target.value });
   }
 
-  onValueKeyPress(keyEvent) {
+  onValueKeyPress = keyEvent => {
     const { currentValue, currentFilterType } = this.state;
 
     if (keyEvent.key === 'Enter' && currentValue && currentValue.length > 0) {
@@ -475,7 +444,7 @@ export class MockFilterExample extends React.Component {
     }
   }
 
-  removeFilter(filter) {
+  removeFilter = filter => {
     const { activeFilters } = this.state;
 
     let index = activeFilters.indexOf(filter);
@@ -488,7 +457,7 @@ export class MockFilterExample extends React.Component {
     }
   }
 
-  clearFilters() {
+  clearFilters = () => {
     this.setState({ activeFilters: [] });
   }
 

diff --git a/src/components/InfoTip/InfoTip.js b/src/components/InfoTip/InfoTip.js
@@ -1,36 +1,27 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Dropdown } from '../Dropdown';
-import { bindMethods, KEY_CODES } from '../../common/helpers';
+import { KEY_CODES } from '../../common/helpers';
 
 class InfoTip extends React.Component {
-  constructor(props) {
-    super(props);
-    bindMethods(this, [
-      'handleKeyDown',
-      'handleClick',
-      'handleBackFocus',
-      'handleBlur'
-    ]);
-    this.state = { open: false, footerFocused: false };
-  }
+  state = { open: false, footerFocused: false };
 
-  handleEnterKeyDown(event) {
+  handleEnterKeyDown = event => {
     this.setState({ open: !this.state.open });
     event.preventDefault();
-  }
+  };
 
-  handleTabKeyDown(event) {
+  handleTabKeyDown = event => {
     if (this.state.footerFocused) {
       this.setState({ open: false, footerFocused: false });
     } else {
       this.setState({ footerFocused: true });
     }
     event.stopPropagation();
     event.nativeEvent.stopImmediatePropagation();
-  }
+  };
 
-  handleKeyDown(event) {
+  handleKeyDown = event => {
     if (event.shiftKey && event.keyCode) {
       return this.handleBackFocus();
     }
@@ -44,24 +35,24 @@ class InfoTip extends React.Component {
       default:
         return null;
     }
-  }
+  };
 
-  handleBackFocus() {
+  handleBackFocus = () => {
     if (this.state.open) {
       this.setState({ open: false });
     }
-  }
+  };
 
-  handleClick(event) {
+  handleClick = event => {
     event.preventDefault();
     this.setState({ open: !this.state.open });
-  }
-  handleBlur(event) {
+  };
+  handleBlur = event => {
     if (event && event.relatedTarget) {
       event.relatedTarget.click();
     }
     this.setState({ open: false });
-  }
+  };
 
   render() {
     const { children, onToggle, ...props } = this.props;