fix(DualList): add callbacks to Controlled Dual List methods (#1901)

Author: ronlavi2412

packages/patternfly-3/patternfly-react/src/components/DualListSelector/DualListControlled.js

@@ -1,7 +1,9 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 import { isEqual } from 'lodash';
 import { DualList } from './index';
 import { adjustProps } from './helpers';
+import { noop } from '../../common/helpers';
 
 class DualListControlled extends React.Component {
   constructor(props) {
@@ -12,6 +14,11 @@ class DualListControlled extends React.Component {
     };
   }
 
+  componentDidMount() {
+    const { onComponentInit } = this.props;
+    onComponentInit(this.state);
+  }
+
   static getDerivedStateFromProps(nextProps, prevState) {
     return !isEqual(nextProps, prevState.prevProps)
       ? {
@@ -22,50 +29,55 @@ class DualListControlled extends React.Component {
   }
 
   onItemChange = ({ side, items, selectCount, isMainChecked }) => {
+    const { onItemChange } = this.props;
     this.setState({
       [side]: {
         ...this.state[side],
         items,
         selectCount,
         isMainChecked
       }
-    });
+    }, () => onItemChange(this.state));
   };
 
   onMainCheckboxChange = ({ side, checked, items, selectCount }) => {
+    const { onMainCheckboxChange } = this.props;
     this.setState({
       [side]: {
         ...this.state[side],
         items,
         selectCount,
         isMainChecked: checked
       }
-    });
+    }, () => onMainCheckboxChange(this.state));
   };
 
   onSortClick = ({ side, items, isSortAsc }) => {
+    const { onSortClick } = this.props;
     this.setState({
       [side]: {
         ...this.state[side],
         items,
         isSortAsc
       }
-    });
+    }, () => onSortClick(this.state));
   };
 
   onFilterChange = ({ side, filterTerm, items, isMainChecked }) => {
+    const { onFilterChange } = this.props;
     this.setState({
       [side]: {
         ...this.state[side],
         filterTerm,
         items,
         isMainChecked
       }
-    });
+    }, () => onFilterChange(this.state));
   };
 
   onChange = ({ left, right }) => {
-    this.setState({ left, right });
+    const { onChange } = this.props;
+    this.setState({ left, right }, () => onChange(this.state));
   };
 
   render() {
@@ -85,4 +97,46 @@ class DualListControlled extends React.Component {
   }
 }
 
+DualListControlled.propTypes = {
+  /**
+   * Function that runs after items have been moved between the lists.
+   * Receives the updated state as a callback.
+  */
+  onChange: PropTypes.func,
+  /**
+   * Function that runs after an item was clicked.
+   * Receives the updated state as a callback.
+  */
+  onItemChange: PropTypes.func,
+  /**
+   * Function that runs after the main checkbox was clicked.
+   * Receives the updated state as a callback.
+  */
+  onMainCheckboxChange: PropTypes.func,
+  /**
+   * Function that runs after the sort icon was clicked.
+   * Receives the updated state as a callback.
+  */
+  onSortClick: PropTypes.func,
+  /**
+   * Function that runs after the filter input has changed.
+   * Receives the updated state as a callback.
+  */
+  onFilterChange: PropTypes.func,
+  /**
+   * Function that runs after the component had mounted.
+   * Receives the updated state as a callback.
+  */
+  onComponentInit: PropTypes.func,
+};
+
+DualListControlled.defaultProps = {
+  onChange: noop,
+  onItemChange: noop,
+  onMainCheckboxChange: noop,
+  onSortClick: noop,
+  onFilterChange: noop,
+  onComponentInit: noop
+};
+
 export default DualListControlled;