From e267ab6ed40c7ac76cdb7bb1ac97d9a145b9a432 Mon Sep 17 00:00:00 2001
From: Maxime Janton <127086@supinfo.com>
Date: Mon, 13 Mar 2017 17:17:55 +0100
Subject: [PATCH] feat(searchBox): add event handling

the SearchBox widget has three new props:
- onSubmit (magnifying glass icon)
- onReset (clear icon)
- on*, event forwarded to the actual input, to listen for keystrokes

fixes #2017
---
 .../src/components/SearchBox.js               | 22 +++++
 .../src/components/SearchBox.test.js          | 30 +++++++
 .../src/widgets/SearchBox.js                  |  6 ++
 stories/SearchBox.stories.js                  | 80 ++++++++++++++++++-
 4 files changed, 136 insertions(+), 2 deletions(-)

diff --git a/packages/react-instantsearch/src/components/SearchBox.js b/packages/react-instantsearch/src/components/SearchBox.js
index 7480e47afb..cb2486df84 100644
--- a/packages/react-instantsearch/src/components/SearchBox.js
+++ b/packages/react-instantsearch/src/components/SearchBox.js
@@ -21,6 +21,8 @@ class SearchBox extends Component {
 
     searchAsYouType: PropTypes.bool,
     onSubmit: PropTypes.func,
+    onReset: PropTypes.func,
+    onChange: PropTypes.func,
 
     // For testing purposes
     __inputRef: PropTypes.func,
@@ -134,11 +136,19 @@ class SearchBox extends Component {
 
   onChange = e => {
     this.setQuery(e.target.value);
+
+    if (this.props.onChange) {
+      this.props.onChange(e);
+    }
   };
 
   onReset = () => {
     this.setQuery('');
     this.input.focus();
+
+    if (this.props.onReset) {
+      this.props.onReset();
+    }
   };
 
   render() {
@@ -160,6 +170,17 @@ class SearchBox extends Component {
           <use xlinkHref="#sbx-icon-clear-3" />
         </svg>;
 
+    const searchInputEvents = Object.keys(this.props).reduce((props, prop) => {
+      if (
+          ['onsubmit', 'onreset', 'onchange'].indexOf(prop.toLowerCase()) === -1 &&
+          prop.indexOf('on') === 0
+        ) {
+        return {...props, [prop]: this.props[prop]};
+      }
+
+      return props;
+    }, {});
+
     /* eslint-disable max-len */
     return (
       <form
@@ -194,6 +215,7 @@ class SearchBox extends Component {
             required
             value={query}
             onChange={this.onChange}
+            {...searchInputEvents}
             {...cx('input')}
           />
           <button type="submit" title={translate('submitTitle')} {...cx('submit')}>
diff --git a/packages/react-instantsearch/src/components/SearchBox.test.js b/packages/react-instantsearch/src/components/SearchBox.test.js
index 3051b1ff47..17825691d7 100644
--- a/packages/react-instantsearch/src/components/SearchBox.test.js
+++ b/packages/react-instantsearch/src/components/SearchBox.test.js
@@ -155,4 +155,34 @@ describe('SearchBox', () => {
     document.dispatchEvent(event3);
     expect(input.focus.mock.calls.length).toBe(2);
   });
+
+  it('should accept `onXXX` events', () => {
+    const onSubmit = jest.fn();
+    const onReset = jest.fn();
+
+    const inputEventsList = ['onChange', 'onFocus', 'onBlur', 'onSelect', 'onKeyDown', 'onKeyPress'];
+    const inputProps = inputEventsList.reduce((props, prop) => ({...props, [prop]: jest.fn()}), {});
+
+    const wrapper = mount(
+      <SearchBox
+        refine={ () => null }
+        onSubmit={ onSubmit }
+        onReset={ onReset }
+        { ...inputProps }
+      />
+    );
+
+    // simulate form events `onReset` && `onSubmit`
+    wrapper.find('form').simulate('submit');
+    expect(onSubmit).toBeCalled();
+
+    wrapper.find('form').simulate('reset');
+    expect(onReset).toBeCalled();
+
+    // simulate input search events
+    inputEventsList.forEach(eventName => {
+      wrapper.find('input').simulate(eventName.replace(/^on/, '').toLowerCase());
+      expect(inputProps[eventName]).toBeCalled();
+    });
+  });
 });
diff --git a/packages/react-instantsearch/src/widgets/SearchBox.js b/packages/react-instantsearch/src/widgets/SearchBox.js
index b31553cdf4..718da4ca0a 100644
--- a/packages/react-instantsearch/src/widgets/SearchBox.js
+++ b/packages/react-instantsearch/src/widgets/SearchBox.js
@@ -8,6 +8,12 @@ import SearchBoxComponent from '../components/SearchBox.js';
  * @propType {string[]} [focusShortcuts=['s','/']] - List of keyboard shortcuts that focus the search box. Accepts key names and key codes.
  * @propType {boolean} [autoFocus=false] - Should the search box be focused on render?
  * @propType {boolean} [searchAsYouType=true] - Should we search on every change to the query? If you disable this option, new searches will only be triggered by clicking the search button or by pressing the enter key while the search box is focused.
+ * @propType {function} [onSubmit] - Intercept submit event sent from the SearchBox form container.
+ * @propType {function} [onReset] - Listen to `reset` event sent from the SearchBox form container.
+ * @propType {function} [on*] - Listen to any events sent form the search input itself.
+ * @propType {React.Element} [submitComponent] - Change the apparence of the default submit button (magnifying glass).
+ * @propType {React.Element} [resetComponent] - Change the apparence of the default reset button (cross).
+ * @propType {string} [defaultRefinement] - Provide default refinement value when component is mounted.
  * @themeKey ais-SearchBox__root - the root of the component
  * @themeKey ais-SearchBox__wrapper - the search box wrapper
  * @themeKey ais-SearchBox__input - the search box input
diff --git a/stories/SearchBox.stories.js b/stories/SearchBox.stories.js
index 2e764ea809..f190dd87c9 100644
--- a/stories/SearchBox.stories.js
+++ b/stories/SearchBox.stories.js
@@ -1,5 +1,5 @@
-import React from 'react';
-import {storiesOf} from '@kadira/storybook';
+import React, {Component} from 'react';
+import {storiesOf, action} from '@kadira/storybook';
 import {SearchBox} from '../packages/react-instantsearch/dom';
 import {withKnobs, object} from '@kadira/storybook-addon-knobs';
 import {WrapWithHits} from './util';
@@ -43,3 +43,79 @@ stories.add('default', () =>
     />
   </WrapWithHits>
 );
+
+// with event listeners
+// --------------------
+class SearchBoxContainer extends Component {
+
+  state = {selectedEvents: {onChange: true}}
+
+  get supportedEvents() {
+    return [
+      'onChange', 'onFocus', 'onBlur',
+      'onSelect', 'onKeyDown', 'onKeyPress',
+      'onSubmit', 'onReset',
+    ];
+  }
+
+  handleSelectedEvent = eventName => ({target: {checked}}) => {
+    const {selectedEvents} = this.state;
+    this.setState({selectedEvents: {...selectedEvents, [eventName]: checked}});
+  }
+
+  handleSubmit = event => {
+    // we dont want the page to reload after the submit event
+    event.preventDefault();
+    event.stopPropagation();
+
+    this.logAction('onSubmit')(event);
+  }
+
+  logAction = eventName => event => {
+    // we dont want to log unselected event
+    if (this.state.selectedEvents[eventName]) {
+      action(eventName)(event);
+    }
+  }
+
+  render() {
+    return (
+      <WrapWithHits searchBox={ false } hasPlayground={ true } linkedStoryGroup="searchBox">
+        <div style={ {color: '#999', borderBottom: '1px solid #E4E4E4', marginBottom: 10} }>
+          {/* events checkboxes */}
+          { this.supportedEvents.map(eventName =>
+              <label key={ eventName } style={ {marginRight: 10} }>
+                <input
+                  name={ `selectEvent-${eventName}` }
+                  type="checkbox"
+                  checked={ this.state.selectedEvents[eventName] }
+                  onChange={ this.handleSelectedEvent(eventName) }
+                />
+                { eventName }
+              </label>
+          ) }
+
+          <div style={ {marginBottom: 5, marginTop: 5, fontSize: 12} }>
+            <em>
+              (Click on the "action logger" tab of the right sidebar to see events logs)
+            </em>
+          </div>
+        </div>
+
+        <SearchBox
+          onSubmit={ this.handleSubmit }
+          onReset={ this.logAction('onReset') }
+          onChange={ this.logAction('onChange') }
+          onFocus={ this.logAction('onFocus') }
+          onBlur={ this.logAction('onBlur') }
+          onSelect={ this.logAction('onSelect') }
+          onKeyDown={ this.logAction('onKeyDown') }
+          onKeyPress={ this.logAction('onKeyPress') }
+        />
+      </WrapWithHits>
+    );
+  }
+
+}
+
+stories.add('with event listeners', () => <SearchBoxContainer />);