Including layoutStyle by default with ability to turn off

Author: asbjornenge

src/ReactDataList.js

@@ -1,6 +1,7 @@
 import React          from 'react'
 import DataList       from './components/DataList'
 import DataListOption from './components/DataListOption'
+import layout         from './styles/react-datalist.styl'
 
 export default class ReactDataList extends React.Component {
     constructor(props) {
@@ -13,10 +14,12 @@ export default class ReactDataList extends React.Component {
         }
     }
     render() {
-        var options = this.filterOptions(this.props.options, this.state.filter, this.useNative())
+        var options      = this.filterOptions(this.props.options, this.state.filter, this.useNative())
         var extraClasses = this.props.className? ' ' + this.props.className: '';
+        var layoutstyle  = (this.props.includeLayoutStyle) ? <style>{layout}</style> : null
         return (
             <div className="react-datalist-container">
+                {layoutstyle}
                 <input ref="theInput"
                         list={this.props.list}
                         value={this.state.filter}
@@ -168,8 +171,9 @@ export default class ReactDataList extends React.Component {
     }
 }
 ReactDataList.defaultProps = {
-    blurTimeout       : 200,
-    hideOptionsOnBlur : true,
-    hideOptionsOnEsc  : true
+    blurTimeout        : 200,
+    includeLayoutStyle : true, 
+    hideOptionsOnBlur  : true,
+    hideOptionsOnEsc   : true
 }
 

src/styles/react-datalist.styl

@@ -1,4 +1,4 @@
-div.react-datalist
+.react-datalist
     margin     : 0 !important
     border     : 1px solid #A1C1E7
     max-height : 500px
@@ -16,4 +16,4 @@ div.react-datalist
             background-color #BAD4FE
 
         &.react-datalist-option-selected
-            background-color #BAD4FE
+            background-color #BAD4FE

test/spec.js

@@ -339,4 +339,20 @@ describe('DATALIST', function() {
 
     })
 
+    it('includes layout style by default', function(done) {
+        render({}, function() {
+            var style = nanodom('style')
+            assert(style.length == 1)
+            done()
+        })
+    })
+
+    it('does not include layout style if includeLayoutStyle=false is passed as prop', function(done) {
+        render({ includeLayoutStyle : false }, function() {
+            var style = nanodom('style')
+            assert(style.length == 0)
+            done()
+        })
+    })
+
 })