add SearchBox.blurAction and fix url queryString change propagation

searchkit · Apr 7, 2016 · 745da07 · 745da07
1 parent 66a9d13
commit 745da07
Show file tree

Hide file tree

Showing 4 changed files with 49 additions and 14 deletions.
diff --git a/src/components/search/filters/input-filter/InputFilter.tsx b/src/components/search/filters/input-filter/InputFilter.tsx
@@ -104,7 +104,7 @@ export class InputFilter extends SearchkitComponent<InputFilterProps, any> {
       queryFields:queryFields || ["_all"],
       queryOptions:assign({}, queryOptions),
       prefixQueryOptions:assign({}, prefixQueryOptions),
-      onStateChange: () => {
+      onQueryStateChange: () => {
         if (!this.unmounted && this.state.input){
           this.setState({input: undefined})
         }
@@ -144,10 +144,10 @@ export class InputFilter extends SearchkitComponent<InputFilterProps, any> {
     if (this.props.searchOnChange) {
       this.accessor.setQueryString(query)
       this.throttledSearch()
+      this.forceUpdate()
     } else {
       this.setState({ input: query })
     }
-    this.forceUpdate()
   }
 
   onClear(){

diff --git a/src/components/search/search-box/SearchBox.tsx b/src/components/search/search-box/SearchBox.tsx
@@ -9,6 +9,7 @@ import {
 const defaults = require("lodash/defaults")
 const throttle = require("lodash/throttle")
 const assign = require("lodash/assign")
+const isUndefined = require("lodash/isUndefined")
 
 export interface SearchBoxProps extends SearchkitComponentProps {
   searchOnChange?:boolean
@@ -22,6 +23,7 @@ export interface SearchBoxProps extends SearchkitComponentProps {
   placeholder?: string
   prefixQueryFields?:Array<string>
   prefixQueryOptions?:Object
+  blurAction?:"search"|"restore"
 }
 
 export class SearchBox extends SearchkitComponent<SearchBoxProps, any> {
@@ -37,7 +39,8 @@ export class SearchBox extends SearchkitComponent<SearchBoxProps, any> {
   static defaultProps = {
     id: 'q',
     mod: 'sk-search-box',
-    searchThrottleTime:200
+    searchThrottleTime:200,
+    blurAction: "search"
   }
 
   static propTypes = defaults({
@@ -54,13 +57,15 @@ export class SearchBox extends SearchkitComponent<SearchBoxProps, any> {
       SearchBox.translations
     ),
     mod: React.PropTypes.string,
-    placeholder: React.PropTypes.string
+    placeholder: React.PropTypes.string,
+    blurAction: React.PropTypes.string
   }, SearchkitComponent.propTypes)
 
   constructor (props:SearchBoxProps) {
     super(props);
     this.state = {
-      focused:false
+      focused:false,
+      input: undefined
     }
     this.lastSearchMs = 0
     this.throttledSearch = throttle(()=> {
@@ -83,7 +88,12 @@ export class SearchBox extends SearchkitComponent<SearchBoxProps, any> {
       prefixQueryOptions:assign({}, prefixQueryOptions),
       queryFields:queryFields || ["_all"],
       queryOptions:assign({}, queryOptions),
-      queryBuilder
+      queryBuilder,
+      onQueryStateChange: () => {
+        if (!this.unmounted && this.state.input){
+          this.setState({input: undefined})
+        }
+      }
     })
   }
 
@@ -102,20 +112,44 @@ export class SearchBox extends SearchkitComponent<SearchBoxProps, any> {
   }
 
   getValue(){
+    const { input } = this.state
+    if (isUndefined(input)) {
+      return this.getAccessorValue()
+    } else {
+      return input
+    }
+  }
+
+  getAccessorValue(){
     return (this.accessor.state.getValue() || "") + ""
   }
 
   onChange(e){
     const query = e.target.value;
-    this.accessor.setQueryString(query)
     if (this.props.searchOnChange) {
+      this.accessor.setQueryString(query)
       this.throttledSearch()
+      this.forceUpdate()
+    } else {
+      this.setState({ input: query })
     }
-    this.forceUpdate()
   }
 
   setFocusState(focused:boolean) {
-    this.setState({focused:focused})
+    if (!focused){
+      const { input } = this.state
+      if (this.props.blurAction == "search"
+        && !isUndefined(input) 
+        && input != this.getAccessorValue()){
+        this.searchQuery(input)
+      }
+      this.setState({ 
+        focused,
+        input: undefined // Flush (should use accessor's state now)
+      })
+    } else {
+      this.setState({ focused })
+    }
   }
 
   render() {

diff --git a/src/core/accessors/QueryAccessor.ts b/src/core/accessors/QueryAccessor.ts
@@ -15,7 +15,7 @@ export interface SearchOptions {
   title?: string
   addToFilters?:boolean
   queryBuilder?:Function
-  onStateChange?:Function
+  onQueryStateChange?:Function
 }
 export class QueryAccessor extends BaseQueryAccessor {
   options:SearchOptions
@@ -26,9 +26,10 @@ export class QueryAccessor extends BaseQueryAccessor {
     this.options.queryFields = this.options.queryFields || ["_all"]
   }
 
-  onStateChange(oldState={}){
-    if (this.options.onStateChange){
-      this.options.onStateChange()
+  fromQueryObject(ob){
+    super.fromQueryObject(ob)
+    if (this.options.onQueryStateChange){
+      this.options.onQueryStateChange()
     }
   }
 

diff --git a/test/e2e/server/apps/playground/index.tsx b/test/e2e/server/apps/playground/index.tsx
@@ -197,7 +197,7 @@ class App extends React.Component<any, any> {
         <Layout>
 
           <TopBar>
-            <SearchBox autofocus={true} searchOnChange={true} prefixQueryFields={["actors^1","type^2","languages","title^10"]}/>
+            <SearchBox autofocus={true} searchOnChange={false} prefixQueryFields={["actors^1","type^2","languages","title^10"]}/>
           </TopBar>
 
           <LayoutBody>