[feature] Support for wheel event (mvieracanive)

lib/DatePicker.js

@@ -24,6 +24,7 @@ type Props = {
     onChange: Function,
     onSelect: Function,
     onCancel: Function,
+    themeColor?: String,
 }
 
 type State = {
@@ -198,7 +199,8 @@ class DatePicker extends Component<void, Props, State> {
                             step={item.step}
                             type={item.type}
                             format={item.format}
-                            onSelect={this.handleDateSelect} />
+                            onSelect={this.handleDateSelect}
+                            themeColor={ this.props.themeColor } />
                     ))}
                 </div>
                 {showFooter && <div className="datepicker-navbar">

lib/DatePickerItem.js

@@ -24,6 +24,7 @@ type Props = {
     format: string | Array<*>,
     step: number,
     onSelect: Function,
+    themeColor?: String,
 }
 
 type State = {
@@ -360,12 +361,18 @@ class DatePickerItem extends Component<void, Props, State> {
             marginTop: this.state.marginTop,
         });
 
+        const style = {}
+        if (this.props.themeColor) {
+            style.borderTopColor = this.props.themeColor
+            style.borderBottomColor = this.props.themeColor
+        }
+
         return (
             <div className="datepicker-col-1">
                 <div
                     ref={viewport => this.viewport = viewport} // eslint-disable-line
                     className="datepicker-viewport">
-                    <div className="datepicker-wheel">
+                    <div className="datepicker-wheel" style = { style }>
                         <ul
                             ref="scroll"
                             className="datepicker-scroll"

lib/index.css

@@ -38,10 +38,10 @@
 }
 
 .datepicker {
-    position: absolute;
+    position: relative;
     left: 0;
     bottom: 0;
-    width: 100%;
+    width: 300px;
     z-index: 1;
     font-size: 16px;
     text-align: center;