bs - change searchBar to headerComponent.

appfolio · Apr 27, 2017 · db8dbe2 · db8dbe2
1 parent 1d8e2a0
commit db8dbe2
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 26 deletions.
diff --git a/src/components/CardContainer.js b/src/components/CardContainer.js
@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
 import classnames from 'classnames';
-import { Col, Icon, Input, InputGroup, InputGroupAddon, Row } from '../';
+import { Col, Icon, Row } from '../';
 import styles from './CardContainer.scss';
 
 class CardContainer extends Component {
@@ -11,10 +11,8 @@ class CardContainer extends Component {
     id: React.PropTypes.string,
     open: React.PropTypes.bool,
     expandable: React.PropTypes.bool,
-    searchBar: React.PropTypes.bool,
-    filterStr: React.PropTypes.string,
-    onSearch: React.PropTypes.func,
-    searchBarClassName: React.PropTypes.string,
+    headerComponent: React.PropTypes.bool,
+    headerComponentClassName: React.PropTypes.string,
   };
 
   constructor(props) {
@@ -28,10 +26,10 @@ class CardContainer extends Component {
   toggle = () => this.setState({ open: !this.state.open });
 
   render() {
-    const { className, title, id, children, expandable, searchBar, filterStr, onSearch, searchBarClassName } = this.props;
+    const { className, title, id, children, expandable, headerComponent, headerComponentClassName } = this.props;
     const iconName = this.state.open ? 'caret-down' : 'caret-right';
     const cursorStyle = expandable ? 'pointer' : 'default';
-    const gridNumber = searchBar ? 8 : 12;
+    const gridNumber = headerComponent ? 8 : 12;
 
     return (
       <section className={classnames(className, styles.cardContainer)} id={id}>
@@ -46,15 +44,7 @@ class CardContainer extends Component {
             >
               {expandable ? <Icon name={iconName} className={styles.iconCaretRight} /> : null} {title}
             </Col>
-            {searchBar ?
-              <Col xs={12} sm={4} className={searchBarClassName}>
-                <InputGroup>
-                  <Input placeholder='Search' onChange={onSearch} value={filterStr} />
-                  <InputGroupAddon>
-                    <Icon name='search' />
-                  </InputGroupAddon>
-                </InputGroup>
-              </Col> : null}
+            {headerComponent ? <Col xs={12} sm={4} className={headerComponentClassName}>{headerComponent}</Col> : null}
           </Row>
         </header>
         {this.state.open || !expandable ? <div className={styles.cardContainerBody}>{children}</div> : null}

diff --git a/stories/CardContainer.js b/stories/CardContainer.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import { storiesOf } from '@kadira/storybook';
 
-import { CardContainer, Row, Col, InfoBox } from '../src';
+import { CardContainer, Row, Col, InfoBox, Input, InputGroup, InputGroupAddon, Icon } from '../src';
 
 storiesOf('CardContainer', module)
   .addWithInfo('Not expandable', () => (
@@ -49,13 +49,18 @@ storiesOf('CardContainer', module)
       </Row>
     </CardContainer>
   ))
-  .addWithInfo('with searchBar', () => (
+  .addWithInfo('with headerComponent', () => (
     <CardContainer
       title="Search"
-      onSearch={(event) => alert(`The value you type: ${event.target.value}`)}
       open
       expandable
       searchBar
+      headerComponent={<InputGroup>
+                        <Input placeholder='Search' onChange={(event) => alert(`The value you type: ${event.target.value}`)} />
+                        <InputGroupAddon>
+                          <Icon name='search' />
+                        </InputGroupAddon>
+                      </InputGroup>}
     >
       <p>You found me.</p>
     </CardContainer>

diff --git a/test/components/CardContainer.spec.js b/test/components/CardContainer.spec.js
@@ -3,7 +3,7 @@
 import React from 'react';
 import assert from 'assert';
 import { shallow } from 'enzyme';
-import { Col, InputGroup } from 'reactstrap';
+import { Col } from 'reactstrap';
 
 import CardContainer from '../../src/components/CardContainer.js';
 
@@ -77,18 +77,16 @@ describe('<CardContainer />', () => {
     });
   });
 
-  context('contains searchBar', () => {
-    it('should render searchBar', () => {
+  context('contains headerComponent', () => {
+    it('should render headerComponent', () => {
       const component = shallow(
-        <CardContainer title="Open" searchBar>
+        <CardContainer title="Open" headerComponent={<p>Edit</p>}>
           <h1>Hello World!</h1>
         </CardContainer>
       );
 
       assert.equal(component.find('h1').length, 1);
-      assert.equal(component.find(InputGroup).length, 1);
-      assert.equal(component.find({placeholder: 'Search'}).length, 1);
-      assert.equal(component.find({name: 'search'}).length, 1);
+      assert.equal(component.find('p').length, 1);
     });
   });
 });