Merge pull request #192 from searchkit/container-component-fix

Fix containerComponent props for CheckboxFilter and InputFilter
searchkit · Mar 24, 2016 · b3fbdea · b3fbdea
2 parents 8a30cdb + dd5d041
commit b3fbdea
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 15 deletions.
diff --git a/src/components/search/filters/checkbox-filter/CheckboxFilter.tsx b/src/components/search/filters/checkbox-filter/CheckboxFilter.tsx
@@ -4,7 +4,8 @@ import {
   SearchkitComponent,
   SearchkitComponentProps,
   CheckboxFilterAccessor,
-  ReactComponentType
+  ReactComponentType,
+  renderComponent
 } from "../../../../core";
 
 import {
@@ -21,7 +22,6 @@ export interface CheckboxFilterProps extends SearchkitComponentProps {
   label: string
   containerComponent?: ReactComponentType<any>
   listComponent?: ReactComponentType<any>
-  collapsable?: boolean
   showCount?: boolean
 }
 
@@ -36,7 +36,6 @@ export class CheckboxFilter extends SearchkitComponent<CheckboxFilterProps, any>
     translations: SearchkitComponent.translationsPropType(
         CheckboxFilterAccessor.translations
     ),
-    collapsable: React.PropTypes.bool,
     showCount: React.PropTypes.bool,
   }, SearchkitComponent.propTypes)
 
@@ -78,14 +77,13 @@ export class CheckboxFilter extends SearchkitComponent<CheckboxFilterProps, any>
   }
 
   render() {
-    const { listComponent, containerComponent, showCount, title, id, collapsable, label } = this.props
+    const { listComponent, containerComponent, showCount, title, id, label } = this.props
 
 
-    return React.createElement(containerComponent, {
+    return renderComponent(containerComponent, {
       title,
       className: id ? `filter--${id}` : undefined,
-      disabled: false,
-      collapsable
+      disabled: false
     },
       React.createElement(listComponent, {
         items: [{ key: label, doc_count: this.accessor.getDocCount() }],

diff --git a/src/components/search/filters/input-filter/InputFilter.tsx b/src/components/search/filters/input-filter/InputFilter.tsx
@@ -4,7 +4,8 @@ import {
   QueryAccessor,
   SearchkitComponent,
   SearchkitComponentProps,
-  ReactComponentType
+  ReactComponentType, 
+  renderComponent
 } from "../../../../core";
 
 import { SearchBox } from "../../search-box/src/SearchBox"
@@ -28,7 +29,6 @@ export interface InputFilterProps extends SearchkitComponentProps {
   queryOptions?:any
   placeholder?: string
   containerComponent?: ReactComponentType<any>
-  collapsable?: boolean
 }
 
 export class InputFilter extends SearchkitComponent<InputFilterProps, any> {
@@ -132,14 +132,13 @@ export class InputFilter extends SearchkitComponent<InputFilterProps, any> {
   }
 
   render() {
-    const { containerComponent, title, id, collapsable } = this.props
+    const { containerComponent, title, id } = this.props
     const block = this.bemBlocks.container
     const value = this.getValue()
-    return React.createElement(containerComponent, {
+    return renderComponent(containerComponent, {
       title,
       className: id ? `filter--${id}` : undefined,
-      disabled: (this.searchkit.getHitsCount() == 0) && (this.getValue() == ""),
-      collapsable
+      disabled: (this.searchkit.getHitsCount() == 0) && (this.getValue() == "")
     },
       <div className={block().state({focused:this.state.focused})}>
         <form onSubmit={this.onSubmit.bind(this)}>

diff --git a/src/components/search/filters/input-filter/InputFilter.unit.tsx b/src/components/search/filters/input-filter/InputFilter.unit.tsx
@@ -7,6 +7,10 @@ import {
   fastClick, hasClass, jsxToHTML, printPrettyHtml
 } from "../../../__test__/TestHelpers"
 
+import {
+  Panel
+} from "../../../ui"
+
 import * as sinon from "sinon";
 
 describe("Searchbox tests", () => {
@@ -211,7 +215,13 @@ describe("Searchbox tests", () => {
       prefixQueryFields:["prefix"],
       "queryOptions": {}
     })
+  })
 
+  it("should accept Panel elements as containerComponent", ()=> {
+    this.createWrapper(true, ["title"], ["prefix"], {
+      containerComponent: <Panel collapsable={true} />
+    })
+    expect(hasClass(this.wrapper.find(".sk-panel__header"), "is-collapsable")).toBe(true)
   })
 
 

diff --git a/src/components/search/filters/range-filter/src/RangeFilter.tsx b/src/components/search/filters/range-filter/src/RangeFilter.tsx
@@ -38,7 +38,6 @@ export interface RangeFilterProps extends SearchkitComponentProps {
 	showHistogram?:boolean
 	containerComponent?: RenderComponentType<any>
   rangeComponent?: RenderComponentType<RangeProps>
-  collapsable?: boolean
 }
 
 
@@ -113,7 +112,7 @@ export class RangeFilter extends SearchkitComponent<RangeFilterProps, any> {
 	}
 
 	render() {
-    const { id, title, containerComponent, collapsable } = this.props
+    const { id, title, containerComponent } = this.props
 
     const maxValue = computeMaxValue(this.accessor.getBuckets(), "doc_count")