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 {
;
+ 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 (