(MAINT) Add onUpdate prop to filter (#344)

Author: Beth Glenfield

packages/react-components/source/react/library/filters/FilterForm.js

@@ -13,6 +13,7 @@ const propTypes = {
   removable: PropTypes.bool,
   onSubmit: PropTypes.func,
   onCancel: PropTypes.func,
+  onUpdate: PropTypes.func,
   cancellable: PropTypes.bool,
   fields: PropTypes.arrayOf(PropTypes.string),
   /** Defaults to the standard set as defined in constants. */
@@ -58,6 +59,7 @@ const defaultStrings = {
 const defaultProps = {
   onSubmit: () => {},
   onCancel: () => {},
+  onUpdate: filter => filter,
   removable: false,
   fields: [],
   filter: {},
@@ -115,14 +117,16 @@ class FilterForm extends React.Component {
   }
 
   onUpdate(field, values) {
-    const { operators } = this.props;
+    const { operators, onUpdate } = this.props;
     const value = values[field];
-    const filter = { ...values };
+    let filter = { ...values };
 
     if (isValueless(value, operators)) {
       delete filter.value;
     }
 
+    filter = onUpdate(filter);
+
     this.setState({ filter });
   }
 

packages/react-components/source/react/library/filters/Filters.js

@@ -19,6 +19,7 @@ const propTypes = {
   ),
   addCTA: PropTypes.string,
   onChange: PropTypes.func,
+  onUpdate: PropTypes.func,
   onSwitchView: PropTypes.func,
   removableToggle: PropTypes.bool,
   /** Defaults to the standard set as defined in constants. */
@@ -56,6 +57,7 @@ const defaultStrings = {
 const defaultProps = {
   fields: [],
   filters: [],
+  onUpdate: filter => filter,
   onChange: () => {},
   addCTA: 'Add filter',
   onSwitchView: () => {},
@@ -195,7 +197,14 @@ class Filters extends React.Component {
   }
 
   renderForm() {
-    const { removableToggle, fields, operators, strings, filters } = this.props;
+    const {
+      removableToggle,
+      fields,
+      operators,
+      strings,
+      filters,
+      onUpdate,
+    } = this.props;
     const { filter } = this.state;
     let cancellable = true;
 
@@ -210,6 +219,7 @@ class Filters extends React.Component {
         fields={fields}
         filter={filter}
         operators={operators}
+        onUpdate={onUpdate}
         onCancel={this.onCancel}
         onSubmit={this.onSubmitFilter}
         strings={strings}

packages/react-components/test/filters/FilterForm.js

@@ -50,4 +50,54 @@ describe('<FilterForm />', () => {
       );
     });
   });
+
+  describe('onUpdate', () => {
+    it('should default if onUpdate is not supplied', () => {
+      const fields = ['Name', 'Age'];
+      const wrapper = mount(<FilterForm fields={fields} />);
+
+      expect(wrapper.find('FilterForm').prop('onUpdate')).to.exist;
+
+      const field = wrapper.find('FormField[name="field"]');
+      field.simulate('click');
+      const value = field.find('FormFieldElement');
+      value.simulate('click');
+      const select = value.find('OptionMenuList');
+      select.simulate('click');
+      const item = select.find('ForwardRef[id*="Name"]').find('li');
+      item.simulate('click');
+
+      expect(
+        wrapper.find('form>FormField[name="field"]').prop('value'),
+        'default onUpdate is called',
+      ).to.eql('Name');
+    });
+
+    it('should override default if onUpdate supplied', () => {
+      const onUpdate = () => {
+        return {
+          field: 'Age',
+          op: '<',
+          value: 'Test value',
+        };
+      };
+      const fields = ['Name', 'Age'];
+      const wrapper = mount(<FilterForm fields={fields} onUpdate={onUpdate} />);
+      expect(wrapper.find('FilterForm').prop('onUpdate')).to.exist;
+
+      const field = wrapper.find('FormField[name="field"]');
+      field.simulate('click');
+      const value = field.find('FormFieldElement');
+      value.simulate('click');
+      const select = value.find('OptionMenuList');
+      select.simulate('click');
+      const item = select.find('ForwardRef[id*="Name"]').find('li');
+      item.simulate('click');
+
+      expect(
+        wrapper.find('form>FormField[name="field"]').prop('value'),
+        'custom onUpdate is called',
+      ).to.eql('Age');
+    });
+  });
 });