Added test and docs for search field

CHANGELOG.md

@@ -1,5 +1,10 @@
 # CHANGELOG
 
+## 0.2.9 (August 11th, 2016)
+
+- Added macOS search field component
+- Added centerPlaceholder, focusRing, icon and onEnter properties to the macOS text input component
+
 ## 0.2.8 (August 8th, 2016)
 
 - Added macOS toolbar nav component

docs/README.md

@@ -19,6 +19,7 @@ can be used in any JavaScript powered project!
   * [Pin](/docs/mac-os/pin.md)
   * [Progress Circle](/docs/mac-os/progress-circle.md)
   * [Radio](/docs/mac-os/radio.md)
+  * [Search Field](/docs/mac-os/search-field.md)
   * [Segmented Control](/docs/mac-os/segmented-control.md)
   * [Text](/docs/mac-os/text.md)
   * [Text Input](/docs/mac-os/text-input.md)

docs/mac-os/search-field.md

@@ -0,0 +1,51 @@
+# SearchField
+
+### Properties
+
+Property            | Type                 | Description
+:------------------ | :-------------------:| :----------
+cancel              | bool                 | Sets whether the cancel button is visible.
+centerPlaceholder   | bool                 | Sets whether the placeholder is animated and centered when the input is not focused.
+defaultValue        | string               | Sets the default value of the input.
+focusRing           | bool                 | Sets the visibility of the focus ring around the input.
+hidden              | bool                 | Sets the visibility of a component.
+icon                | element, array       | Adds an icon to the input.
+label               | string               | Adds a label to the input.
+margin              | string, number       | Sets the outer margin of a component.<br/>__E.G.__ _"30px 20px"_
+marginBottom        | string, number       | Sets the outer margin bottom of a component.
+marginLeft          | string, number       | Sets the outer margin left of a component.
+marginRight         | string, number       | Sets the outer margin right of a component.
+marginTop           | string, number       | Sets the outer margin top of a component.
+onCancel            | function             | Callback function when the user press the cancel button.
+onChange            | function             | Callback function when the input changes.
+onEnter             | function             | Callback function when the enter key is pressed.
+placeholder         | function             | Adds a placeholder to the input.
+rounded             | bool, number, string | Sets the roundness of the input border
+size                | string, number       | Sets the font size of a component.
+value               | string               | Sets the value of the input.
+width               | number               | Sets the width of a component.
+
+### Examples
+
+```jsx
+import React, { Component } from 'react';
+import { TitleBar, Toolbar, SearchField } from 'react-desktop/macOs';
+
+export default class extends Component {
+  handleChange = e => console.log(e.target.value);
+
+  render() {
+    return (
+      <TitleBar inset>
+        <Toolbar height="43" horizontalAlignment="right">
+          <SearchField
+            placeholder="Search"
+            defaultValue=""
+            onChange={this.handleChange}
+          />
+        </Toolbar>
+      </TitleBar>
+    );
+  }
+}
+```

docs/mac-os/text-input.md

@@ -4,15 +4,19 @@
 
 Property            | Type                 | Description
 :------------------ | :-------------------:| :----------
+centerPlaceholder   | bool                 | Sets whether the placeholder is animated and centered when the input is not focused.
 defaultValue        | string               | Sets the default value of the input.
+focusRing           | bool                 | Sets the visibility of the focus ring around the input.
 hidden              | bool                 | Sets the visibility of a component.
+icon                | element, array       | Adds an icon to the input.
 label               | string               | Adds a label to the input.
 margin              | string, number       | Sets the outer margin of a component.<br/>__E.G.__ _"30px 20px"_
 marginBottom        | string, number       | Sets the outer margin bottom of a component.
 marginLeft          | string, number       | Sets the outer margin left of a component.
 marginRight         | string, number       | Sets the outer margin right of a component.
 marginTop           | string, number       | Sets the outer margin top of a component.
 onChange            | function             | Callback function when the input changes.
+onEnter             | function             | Callback function when the enter key is pressed.
 placeholder         | function             | Adds a placeholder to the input.
 rounded             | bool, number, string | Sets the roundness of the input border
 size                | string, number       | Sets the font size of a component.
@@ -40,4 +44,3 @@ export default class extends Component {
   }
 }
 ```
-

examples/macOs/components/searchField.js

@@ -11,10 +11,10 @@ export default class extends Component {
           <SearchField
             placeholder="Search"
             defaultValue=""
+            onChange={this.handleChange}
           />
         </Toolbar>
       </TitleBar>
     );
   }
 }
-//            onChange={this.handleChange}

package.json

@@ -1,7 +1,7 @@
 {
   "name": "react-desktop",
   "author": "Gabriel Bull",
-  "version": "0.2.8",
+  "version": "0.2.9",
   "description": "React UI Components for macOS Sierra and Windows 10",
   "main": "./index.js",
   "keywords": [

src/searchField/macOs/searchField.js

@@ -60,6 +60,8 @@ class SearchInput extends Component {
         this.setState({ showCancel: false });
       }
     }
+
+    if (typeof this.props.onChange === 'function') this.props.onChange(e);
   };
 
   handleKeyDown = e => {

test/tests/macOs.js

@@ -9,6 +9,7 @@ import {
   Pin,
   ProgressCircle,
   Radio,
+  SearchField,
   SegmentedControl,
   SegmentedControlItem,
   Text,
@@ -32,6 +33,7 @@ describe('OSX', () => {
     expect(Pin).to.exist;
     expect(ProgressCircle).to.exist;
     expect(Radio).to.exist;
+    expect(SearchField).to.exist;
     expect(SegmentedControl).to.exist;
     expect(SegmentedControlItem).to.exist;
     expect(Text).to.exist;

test/tests/searchField.js

@@ -0,0 +1,11 @@
+import { expect } from 'chai';
+import React from 'react';
+import { renderToString } from 'react-dom/server';
+import SearchField from '../../src/searchField/macOs/searchField';
+
+describe('SearchField', () => {
+  it('create search field component', () => {
+    const string = renderToString(<SearchField/>);
+    expect(string).to.match(/<input/);
+  });
+});