homeflowjs 0.12.20 → 0.12.21

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "homeflowjs",
-  "version": "0.12.20",
+  "version": "0.12.21",
   "sideEffects": [
     "modal/**/*",
     "user/default-profile/**/*",

package/search/location-input/location-input.component.jsx

@@ -93,9 +93,20 @@ class LocationInput extends Component {
     return suggestion.label;
   }
 
+  onClearButtonClick() {
+    const { setSuggestions, setSearchField } = this.props;
+    setSuggestions([]);
+    setSearchField({ q: '' });
+  }
+
   render() {
     const {
-      suggestions, search: { q = '' }, className, placeholder,
+      suggestions,
+      search: { q = '' },
+      className,
+      placeholder,
+      clearButton,
+      clearButtonClassName,
     } = this.props;
 
     const inputProps = {
@@ -105,23 +116,34 @@ class LocationInput extends Component {
     };
 
     return (
-      <Autosuggest
-        value={q}
-        suggestions={suggestions}
-        onSuggestionsFetchRequested={this.onSuggestionsFetchRequested.bind(this)}
-        onSuggestionsClearRequested={this.onSuggestionsClearRequested.bind(this)}
-        getSuggestionValue={this.getSuggestionValue.bind(this)}
-        renderSuggestion={this.renderSuggestion.bind(this)}
-        inputProps={{
-          ...inputProps,
-          className,
-          'data-testid': 'location-input',
-          id: 'search-location-input',
-          name: 'Location search',
-        }}
-        containerProps={{ 'data-testid': 'suggestions' }}
-        theme={autosuggestTheme}
-      />
+      <div>
+        <Autosuggest
+          value={q}
+          suggestions={suggestions}
+          onSuggestionsFetchRequested={this.onSuggestionsFetchRequested.bind(this)}
+          onSuggestionsClearRequested={this.onSuggestionsClearRequested.bind(this)}
+          getSuggestionValue={this.getSuggestionValue.bind(this)}
+          renderSuggestion={this.renderSuggestion.bind(this)}
+          inputProps={{
+            ...inputProps,
+            className,
+            'data-testid': 'location-input',
+            id: 'search-location-input',
+            name: 'Location search',
+          }}
+          containerProps={{ 'data-testid': 'suggestions' }}
+          theme={autosuggestTheme}
+        />
+        {(clearButton && q) && (
+          <button 
+            className={clearButtonClassName}
+            type="reset"
+            onClick={this.onClearButtonClick.bind(this)}
+          >
+            &times;
+          </button>
+        )}
+      </div>
     );
   }
 }
@@ -134,6 +156,8 @@ LocationInput.propTypes = {
   className: PropTypes.string,
   search: PropTypes.object.isRequired,
   searchOnSelection: PropTypes.bool,
+  clearButton: PropTypes.bool,
+  clearButtonClassName: PropTypes.string,
 };
 
 LocationInput.defaultProps = {
@@ -141,6 +165,8 @@ LocationInput.defaultProps = {
   className: '',
   suggestions: [],
   searchOnSelection: false,
+  clearButton: false,
+  clearButtonClassName: '',
 };
 
 const mapStateToProps = (state) => ({