Calculate scroll of TimeSelect

Changed hardcoded 30px-per-item scroll in order to have selectedDate/currH scrolled down in the middle of the TimeSelect. Now it saves a reference of list-item of selectedDate (with fallback to currH when selectedDate not provided) and calculates list's default scroll based on list's height and the referenced item's offset.

Author: honzajerabek

src/time.jsx

@@ -40,11 +40,10 @@ export default class Time extends React.Component {
 
   componentDidMount() {
     // code to ensure selected time will always be in focus within time window when it first appears
-    const multiplier = 60 / this.props.intervals;
-    const currH = this.props.selected
-      ? getHour(this.props.selected)
-      : getHour(newDate());
-    this.list.scrollTop = 30 * (multiplier * currH);
+    this.list.scrollTop =
+      this.centerLi.offsetTop -
+      this.list.clientHeight / 2 +
+      this.centerLi.clientHeight;
   }
 
   handleClick = time => {
@@ -123,6 +122,14 @@ export default class Time extends React.Component {
         key={i}
         onClick={this.handleClick.bind(this, time)}
         className={this.liClasses(time, currH, currM)}
+        ref={li => {
+          if (
+            (currH === getHour(time) && currM === getMinute(time)) ||
+            (currH === getHour(time) && !this.centerLi)
+          ) {
+            this.centerLi = li;
+          }
+        }}
       >
         {formatDate(time, format)}
       </li>