feat(style) allow custom hidden list class and active item class

Closes #223

README.md

@@ -229,6 +229,18 @@ Default: `null`
 
 If the `label` and a `id` prop (see "Others") were supplied, a `<label>` tag with the passed label text will be rendered. The `<label>` element's `for` attribute will correctly point to the `id` of the `<input>` element.
 
+#### suggestsHiddenClassName
+Type: `String`
+Default: `null`
+
+Additional `className` to toggle as the list of suggestions changes visibility.
+
+#### suggestItemActiveClassName
+Type: `String`,
+Default: `null`
+
+Additional `className` to add when a suggestion item is active.
+
 #### Others
 
 All [allowed attributes for `input[type="text"]`](https://github.com/ubilabs/react-geosuggest/blob/master/src/filter-input-attributes.js#L4)

src/Geosuggest.jsx

@@ -401,6 +401,8 @@ class Geosuggest extends React.Component {
         style={this.props.style.suggests}
         suggestItemStyle={this.props.style.suggestItem}
         suggests={this.state.suggests}
+        hiddenClassName={this.props.suggestsHiddenClassName}
+        suggestItemActiveClassName={this.props.suggestItemActiveClassName}
         activeSuggest={this.state.activeSuggest}
         onSuggestNoResults={this.onSuggestNoResults}
         onSuggestMouseDown={this.onSuggestMouseDown}

src/prop-types.js

@@ -10,6 +10,8 @@ export default {
   disabled: React.PropTypes.bool,
   className: React.PropTypes.string,
   inputClassName: React.PropTypes.string,
+  suggestsHiddenClassName: React.PropTypes.string,
+  suggestItemActiveClassName: React.PropTypes.string,
   location: React.PropTypes.object,
   radius: React.PropTypes.oneOfType([
     React.PropTypes.string,

src/suggest-item.jsx

@@ -35,7 +35,9 @@ export default class SuggestItem extends React.Component {
     const classes = classnames(
       'geosuggest__item',
       this.props.className,
-      {'geosuggest__item--active': this.props.isActive}
+      {'geosuggest__item--active': this.props.isActive},
+      {[this.props.activeClassname]: this.props.activeClassname ?
+        this.props.isActive : null}
     );
 
     return <li className={classes}

src/suggest-list.jsx

@@ -46,7 +46,9 @@ export default class SuggestList extends React.Component {
   render() {
     const classes = classnames(
       'geosuggest__suggests',
-      {'geosuggest__suggests--hidden': this.isHidden()}
+      {'geosuggest__suggests--hidden': this.isHidden()},
+      {[this.props.hiddenClassName]: this.props.hiddenClassName ?
+        this.isHidden() : null}
     );
 
     return <ul className={classes} style={this.props.style}>
@@ -59,6 +61,7 @@ export default class SuggestList extends React.Component {
           suggest={suggest}
           style={this.props.suggestItemStyle}
           isActive={isActive}
+          activeClassname={this.props.suggestItemActiveClassName}
           onMouseDown={this.props.onSuggestMouseDown}
           onMouseOut={this.props.onSuggestMouseOut}
           onSelect={this.props.onSuggestSelect} />;

test/Geosuggest_spec.jsx

@@ -458,4 +458,37 @@ describe('Component: Geosuggest', () => {
       ).to.throw(Error);
     });
   });
+
+  describe('with suggestsHiddenClassName and suggestItemActiveClassName', () => { // eslint-disable-line max-len
+    const props = {
+      suggestsHiddenClassName: 'suggests-hidden-class',
+      suggestItemActiveClassName: 'suggest-item-active',
+      autoActivateFirstSuggest: true
+    };
+
+    beforeEach(() => render(props));
+
+    it('should apply suggestsHiddenClassName when the list is hidden', () => {
+      const geoSuggestInput = TestUtils.findRenderedDOMComponentWithClass(component, 'geosuggest__input'); // eslint-disable-line max-len
+      TestUtils.Simulate.focus(geoSuggestInput);
+
+      const suggests = TestUtils.scryRenderedDOMComponentsWithClass(component, 'geosuggest__suggests'); // eslint-disable-line max-len, one-var
+      expect(suggests[0].classList.contains('suggests-hidden-class')).to.be.true; // eslint-disable-line no-unused-expressions, max-len
+      expect(suggests[0].classList.contains('geosuggest__suggests--hidden')).to.be.true; // eslint-disable-line no-unused-expressions, max-len
+    });
+
+    it('should apply suggestItemActiveClassName when a list item is active', done => { // eslint-disable-line max-len
+      const geoSuggestInput = TestUtils.findRenderedDOMComponentWithClass(component, 'geosuggest__input'); // eslint-disable-line max-len
+      geoSuggestInput.value = 'New';
+      TestUtils.Simulate.change(geoSuggestInput);
+      TestUtils.Simulate.focus(geoSuggestInput);
+
+      setImmediate(() => {
+        const activeItems = TestUtils.scryRenderedDOMComponentsWithClass(component, 'suggest-item-active'); // eslint-disable-line max-len
+        expect(activeItems.length).to.be.equal(1);
+        expect(activeItems[0].classList.contains('geosuggest__item--active')).to.be.true; // eslint-disable-line no-unused-expressions, max-len
+        done();
+      });
+    });
+  });
 });