Merge pull request #124 from tjphopkins/master

Allow for custom suggestion component
i-like-robots · Jul 3, 2018 · c85baf5 · c85baf5
2 parents 23f7ba3 + db5ed04
commit c85baf5
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 3 deletions.
diff --git a/lib/ReactTags.js b/lib/ReactTags.js
@@ -210,7 +210,8 @@ class ReactTags extends React.Component {
             id={this.props.id}
             ref={(c) => { this.suggestions = c }}
             expanded={expanded}
-            addTag={this.addTag.bind(this)} />
+            addTag={this.addTag.bind(this)}
+            suggestionComponent={this.props.suggestionComponent} />
         </div>
       </div>
     )
@@ -228,7 +229,8 @@ ReactTags.defaultProps = {
   maxSuggestionsLength: 6,
   allowNew: false,
   allowBackspace: true,
-  tagComponent: null
+  tagComponent: null,
+  suggestionComponent: null
 }
 
 ReactTags.propTypes = {
@@ -251,6 +253,10 @@ ReactTags.propTypes = {
   tagComponent: PropTypes.oneOfType([
     PropTypes.func,
     PropTypes.element
+  ]),
+  suggestionComponent: PropTypes.oneOfType([
+    PropTypes.func,
+    PropTypes.element
   ])
 }
 

diff --git a/lib/Suggestions.js b/lib/Suggestions.js
@@ -6,6 +6,10 @@ function markIt (name, query) {
   return name.replace(regexp, '<mark>$&</mark>')
 }
 
+const DefaultSuggestionComponent = ({ item, query }) => (
+  <span dangerouslySetInnerHTML={{ __html: markIt(item.name, query) }} />
+)
+
 class Suggestions extends React.Component {
   onMouseDown (item, e) {
     // focus is shifted on mouse down but calling preventDefault prevents this
@@ -18,6 +22,8 @@ class Suggestions extends React.Component {
       return null
     }
 
+    const SuggestionComponent = this.props.suggestionComponent || DefaultSuggestionComponent
+
     const options = this.props.options.map((item, index) => {
       const key = `${this.props.id}-${index}`
       const classNames = []
@@ -38,7 +44,7 @@ class Suggestions extends React.Component {
           className={classNames.join(' ')}
           aria-disabled={item.disabled === true}
           onMouseDown={this.onMouseDown.bind(this, item)}>
-          <span dangerouslySetInnerHTML={{ __html: markIt(item.name, this.props.query) }} />
+          <SuggestionComponent item={item} query={this.props.query} />
         </li>
       )
     })

diff --git a/spec/ReactTags.spec.js b/spec/ReactTags.spec.js
@@ -325,6 +325,25 @@ describe('React Tags', () => {
       expect(input.value).toEqual('')
       expect(document.activeElement).toEqual(input)
     })
+
+    it('can render a custom suggestion component when provided', () => {
+      const CustomSuggestion = ({ item, query }) => (
+        React.createElement(
+          'div', { className: 'custom-suggestion' }, item.name)
+      )
+
+      createInstance({
+        tags: [],
+        suggestions: fixture,
+        suggestionComponent: CustomSuggestion
+      })
+
+      type(query)
+
+      expect($('ul[role="listbox"]')).toBeTruthy()
+
+      expect($$('.custom-suggestion').length).toEqual(3)
+    })
   })
 
   describe('tags', () => {