Calculate scroll of TimeSelect (Hacker0x01#1331)

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.

Add tests

Author: honzajerabek

src/calendar.jsx

@@ -132,7 +132,7 @@ export default class Calendar extends React.Component {
     this.state = {
       date: this.localizeDate(this.getDateInView()),
       selectingDate: null,
-      monthContainer: this.monthContainer
+      monthContainer: null
     };
   }
 
@@ -607,7 +607,10 @@ export default class Calendar extends React.Component {
   };
 
   renderTimeSection = () => {
-    if (this.props.showTimeSelect) {
+    if (
+      this.props.showTimeSelect &&
+      (this.state.monthContainer || this.props.showTimeSelectOnly)
+    ) {
       return (
         <Time
           selected={this.props.selected}

src/time.jsx

@@ -38,13 +38,20 @@ export default class Time extends React.Component {
     };
   }
 
+  static calcCenterPosition = (listHeight, centerLiRef) => {
+    return (
+      centerLiRef.offsetTop - (listHeight / 2 - centerLiRef.clientHeight / 2)
+    );
+  };
+
   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 = Time.calcCenterPosition(
+      this.props.monthRef
+        ? this.props.monthRef.clientHeight - this.header.clientHeight
+        : this.list.clientHeight,
+      this.centerLi
+    );
   }
 
   handleClick = time => {
@@ -123,6 +130,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>
@@ -131,8 +146,8 @@ export default class Time extends React.Component {
 
   render() {
     let height = null;
-    if (this.props.monthRef) {
-      height = this.props.monthRef.clientHeight - 39;
+    if (this.props.monthRef && this.header) {
+      height = this.props.monthRef.clientHeight - this.header.clientHeight;
     }
 
     return (
@@ -143,7 +158,12 @@ export default class Time extends React.Component {
             : ""
         }`}
       >
-        <div className="react-datepicker__header react-datepicker__header--time">
+        <div
+          className="react-datepicker__header react-datepicker__header--time"
+          ref={header => {
+            this.header = header;
+          }}
+        >
           <div className="react-datepicker-time__header">
             {this.props.timeCaption}
           </div>

test/time_format_test.js

@@ -1,22 +1,100 @@
 import React from "react";
 import { mount } from "enzyme";
 import TimeComponent from "../src/time";
+import moment from "moment";
 
 describe("TimeComponent", () => {
   let sandbox;
 
   beforeEach(() => {
     sandbox = sinon.sandbox.create();
+    // mock global time to June 14, 1990 13:28:12, so test results will be constant
+    sandbox.useFakeTimers({
+      now: moment("1990-06-14 13:28").valueOf(),
+      toFake: ["Date"]
+    });
   });
 
   afterEach(() => {
     sandbox.restore();
   });
 
-  it("should forward the time format provided in timeFormat props", () => {
-    var timeComponent = mount(<TimeComponent format="HH:mm" />);
+  describe("Format", () => {
+    it("should forward the time format provided in timeFormat props", () => {
+      var timeComponent = mount(<TimeComponent format="HH:mm" />);
 
-    var timeListItem = timeComponent.find(".react-datepicker__time-list-item");
-    expect(timeListItem.at(0).text()).to.eq("00:00");
+      var timeListItem = timeComponent.find(
+        ".react-datepicker__time-list-item"
+      );
+      expect(timeListItem.at(0).text()).to.eq("00:00");
+    });
+  });
+
+  describe("Initial position", () => {
+    let spy;
+    beforeEach(() => {
+      spy = sandbox.spy(TimeComponent, "calcCenterPosition");
+    });
+
+    it("should call calcCenterPosition once", () => {
+      mount(<TimeComponent format="HH:mm" />);
+      expect(spy.calledOnce).to.eq(true);
+    });
+
+    it("should call calcCenterPosition with centerLi ref, closest to the current time", () => {
+      mount(<TimeComponent format="HH:mm" />);
+      expect(spy.args[0][1].innerHTML).to.eq("13:00");
+    });
+
+    it("should call calcCenterPosition with centerLi ref, closest to the selected time", () => {
+      mount(
+        <TimeComponent format="HH:mm" selected={moment("1990-06-14 08:11")} />
+      );
+      expect(spy.args[0][1].innerHTML).to.eq("08:00");
+    });
+
+    it("should call calcCenterPosition with centerLi ref, which is selected", () => {
+      mount(
+        <TimeComponent format="HH:mm" selected={moment("1990-06-14 08:00")} />
+      );
+      expect(
+        spy.args[0][1].classList.contains(
+          "react-datepicker__time-list-item--selected"
+        )
+      ).to.be.true;
+    });
+
+    it("should calculate scroll for the first item of 4 (even) items list", () => {
+      expect(
+        TimeComponent.calcCenterPosition(200, {
+          offsetTop: 0,
+          clientHeight: 50
+        })
+      ).to.be.eq(-75);
+    });
+
+    it("should calculate scroll for the last item of 4 (even) items list", () => {
+      expect(
+        TimeComponent.calcCenterPosition(200, {
+          offsetTop: 150,
+          clientHeight: 50
+        })
+      ).to.be.eq(75);
+    });
+
+    it("should calculate scroll for the first item of 3 (odd) items list", () => {
+      expect(
+        TimeComponent.calcCenterPosition(90, { offsetTop: 0, clientHeight: 30 })
+      ).to.be.eq(-30);
+    });
+
+    it("should calculate scroll for the last item of 3 (odd) items list", () => {
+      expect(
+        TimeComponent.calcCenterPosition(90, {
+          offsetTop: 60,
+          clientHeight: 30
+        })
+      ).to.be.eq(30);
+    });
   });
 });