Merge pull request #262 from karanjthakkar/feat/suggest-custom-classname

Allow adding custom classes to the suggest list and suggest item

README.md

@@ -229,12 +229,24 @@ 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.
 
+#### suggestsClassName
+Type: `String`
+Default: `''`
+
+Add an additional class to suggest list.
+
 #### suggestsHiddenClassName
 Type: `String`
 Default: `null`
 
 Additional `className` to toggle as the list of suggestions changes visibility.
 
+#### suggestItemClassName
+Type: `String`
+Default: `''`
+
+Add an additional class to suggest item.
+
 #### suggestItemActiveClassName
 Type: `String`,
 Default: `null`

src/Geosuggest.jsx

@@ -404,6 +404,8 @@ class Geosuggest extends React.Component {
       suggestionsList = <SuggestList isHidden={this.state.isSuggestsHidden}
         style={this.props.style.suggests}
         suggestItemStyle={this.props.style.suggestItem}
+        suggestsClassName={this.props.suggestsClassName}
+        suggestItemClassName={this.props.suggestItemClassName}
         suggests={this.state.suggests}
         hiddenClassName={this.props.suggestsHiddenClassName}
         suggestItemActiveClassName={this.props.suggestItemActiveClassName}

src/prop-types.js

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

src/suggest-item.jsx

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

src/suggest-list.jsx

@@ -46,6 +46,7 @@ export default class SuggestList extends React.Component {
   render() {
     const classes = classnames(
       'geosuggest__suggests',
+      this.props.suggestsClassName,
       {'geosuggest__suggests--hidden': this.isHidden()},
       {[this.props.hiddenClassName]: this.props.hiddenClassName ?
         this.isHidden() : null}
@@ -60,6 +61,7 @@ export default class SuggestList extends React.Component {
           className={suggest.className}
           suggest={suggest}
           style={this.props.suggestItemStyle}
+          suggestItemClassName={this.props.suggestItemClassName}
           isActive={isActive}
           activeClassname={this.props.suggestItemActiveClassName}
           onMouseDown={this.props.onSuggestMouseDown}

test/Geosuggest_spec.jsx

@@ -498,4 +498,36 @@ describe('Component: Geosuggest', () => {
       });
     });
   });
+
+  describe('with suggestsClassName and suggestItemClassName', () => { // eslint-disable-line max-len
+    const props = {
+      suggestsClassName: 'suggests-class',
+      suggestItemClassName: 'suggest-item'
+    };
+
+    beforeEach(() => render(props));
+
+    it('should apply suggestsClassName to the list', () => {
+      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-class')).to.be.true; // eslint-disable-line no-unused-expressions, max-len
+    });
+
+    it('should apply suggestItemClassName to each list item', 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 totalItems = TestUtils.scryRenderedDOMComponentsWithClass(component, 'suggest-item'), // eslint-disable-line max-len
+          itemsWithItemClass = TestUtils.scryRenderedDOMComponentsWithClass(component, 'geosuggest__item'); // eslint-disable-line max-len
+
+        expect(totalItems.length).to.be.equal(itemsWithItemClass.length);
+        done();
+      });
+    });
+  });
 });