Merge pull request #18 from 5rabbits/release/0.5.0

Release/0.5.0

.travis.yml

@@ -0,0 +1,15 @@
+language: node_js
+cache: yarn
+node_js:
+  - "6"
+  - "node"
+notifications:
+  email: false
+install:
+  - yarn
+  - yarn global add codecov
+script:
+  - yarn run lint
+  - yarn test
+after_success:
+  - codecov

package.json

@@ -1,6 +1,6 @@
 {
   "name": "portrait",
-  "version": "0.5.0-beta.4",
+  "version": "0.5.0",
   "description": "Base design for all 5Rabbits products",
   "keywords": [
     "commonjs",
@@ -36,7 +36,7 @@
     "dev": "NODE_ENV=development webpack-dev-server --config webpack/webpack.config.js --hot --inline --content-base lib/docs",
     "lint": "eslint --color --ext .js src docs",
     "prepublish": "npm run build",
-    "test": "NODE_ENV=test jest",
+    "test": "NODE_ENV=test jest --ci",
     "test-watch": "NODE_ENV=test jest --watch",
     "preversion": "npm run lint && SINGLE_RUN=true npm test"
   },
@@ -118,7 +118,8 @@
     "coverageDirectory": "coverage",
     "coverageReporters": [
       "html",
-      "text-summary"
+      "text-summary",
+      "lcov"
     ]
   }
 }

src/components/controls/SearchInput/SearchInput-test.js

@@ -8,6 +8,30 @@ describe('SearchInput', () => {
     expect(toJSON(component)).toMatchSnapshot()
   })
 
+  describe('componentWillReceiveProps', () => {
+    it('should update state with new values', () => {
+      const component = mount(<SearchInput value="test" />)
+      const instance = component.instance()
+
+      component.setProps({
+        value: 'search',
+      })
+
+      expect(instance.state.value).toBe('search')
+    })
+
+    it('should not update state when props have the same value', () => {
+      const component = mount(<SearchInput value="test" />)
+      const instance = component.instance()
+
+      component.setProps({
+        value: 'test',
+      })
+
+      expect(instance.state.value).toBe('test')
+    })
+  })
+
   describe('setValue(value)', () => {
     describe('if props.onChange is defined', () => {
       it('should call props.onChange passing the new value', () => {
@@ -32,6 +56,24 @@ describe('SearchInput', () => {
         }).not.toThrow()
       })
     })
+
+    describe('if props.value is != ""', () => {
+      it('should not call to onChange', () => {
+        const onClick = jest.fn()
+        const component = mount(
+          <SearchInput
+            value="test"
+            onChange={onClick}
+          />,
+        )
+        const instance = component.instance()
+
+        instance.setValue('aa')
+
+        expect(onClick).toHaveBeenCalled()
+        expect(instance.state.value).toBe('test')
+      })
+    })
   })
 
   describe('focus()', () => {

src/components/controls/SearchInput/SearchInput.js

@@ -14,6 +14,11 @@ export default class SearchInput extends Component {
      */
     className: PropTypes.string,
 
+    /**
+     * Initial search value for an uncontrolled input.
+     */
+    defaultValue: PropTypes.string,
+
     /**
      * Invoked when the input text changes, either by writing or by clicking the clear button.
      * The first argument is the current text.
@@ -35,6 +40,12 @@ export default class SearchInput extends Component {
      * `alternate` for popovers.
      */
     theme: PropTypes.oneOf(['default', 'alternate']).isRequired,
+
+    /**
+     * Controlled value for the input. Use the `onChange` callback to update
+     * the value from the parent component.
+     */
+    value: PropTypes.string,
   }
 
   static defaultProps = {
@@ -43,14 +54,26 @@ export default class SearchInput extends Component {
     onClear: null,
     onSubmit: null,
     theme: 'default',
+    defaultValue: '',
+    value: undefined,
   }
 
   state = {
-    value: '',
+    value: this.props.value === undefined
+      ? this.props.defaultValue
+      : this.props.value,
+  }
+
+  componentWillReceiveProps(nextProps) {
+    if (this.props.value !== nextProps.value) {
+      this.setState({ value: nextProps.value })
+    }
   }
 
   setValue = value => {
-    this.setState({ value })
+    if (this.props.value === undefined) {
+      this.setState({ value })
+    }
 
     if (this.props.onChange) {
       this.props.onChange(value)

src/components/controls/SearchInput/__snapshots__/SearchInput-test.js.snap

@@ -3,6 +3,7 @@
 exports[`SearchInput should render with minimum props 1`] = `
 <SearchInput
   className={null}
+  defaultValue=""
   onChange={null}
   onClear={null}
   onSubmit={null}
@@ -16,6 +17,7 @@ exports[`SearchInput should render with minimum props 1`] = `
     />
     <input
       className="form-control SearchInput__input"
+      defaultValue=""
       onChange={[Function]}
       onKeyDown={[Function]}
       type="text"

src/components/controls/SearchInput/examples.yml

@@ -27,3 +27,45 @@
         theme="alternate"
       />
     </div>
+
+-
+  description: With default value.
+  code: >
+    <div style={{ padding: 16, background: '#fff' }}>
+      <SearchInput
+        placeholder="Write to search"
+        style={{ width: '400px' }}
+        defaultValue="Some default value"
+      />
+    </div>
+
+-
+  description: Controlled input.
+  inline: false
+  code: >
+    class Example extends React.Component {
+      state = {
+        search: '',
+      }
+
+      handleSearchChange = search => {
+        this.setState({ search })
+      }
+
+      render() {
+        return (
+          <div style={{ padding: 16, background: '#fff' }}>
+            <SearchInput
+              placeholder="Write to search"
+              onChange={this.handleSearchChange}
+              style={{ width: '400px' }}
+              value={this.state.search}
+            />
+            <br />
+            The current search is: {this.state.search}
+          </div>
+        )
+      }
+    }
+
+    ReactDOM.render(<Example />, mountNode)