Improvements to injectTimes (Hacker0x01#1330)

* Allow multiple times to be injected between each interval

* Better format

* Tests

* Move sorting out of loop

Author: jimmynguyc

docs-site/src/examples/inject_times.jsx

@@ -27,7 +27,11 @@ export default class InjectTimes extends React.Component {
             <br />
             <strong>{`    showTimeSelect
     timeFormat="HH:mm"
-    injectTimes={[moment().hours(0).minutes(1), moment().hours(12).minutes(5), moment().hours(23).minutes(59)]}
+    injectTimes={[
+      moment().hours(0).minutes(1),
+      moment().hours(12).minutes(5),
+      moment().hours(23).minutes(59)
+    ]}
     dateFormat="LLL"
 />
 `}</strong>

src/date_utils.js

@@ -495,14 +495,15 @@ export function getHightLightDaysMap(
   return dateClasses;
 }
 
-export function timeToInjectAfter(
+export function timesToInjectAfter(
   startOfDay,
   currentTime,
   currentMultiplier,
   intervals,
   injectedTimes
 ) {
   const l = injectedTimes.length;
+  const times = [];
   for (let i = 0; i < l; i++) {
     const injectedTime = addMinutes(
       addHours(cloneDate(startOfDay), getHour(injectedTimes[i])),
@@ -514,9 +515,9 @@ export function timeToInjectAfter(
     );
 
     if (injectedTime.isBetween(currentTime, nextTime)) {
-      return injectedTimes[i];
+      times.push(injectedTimes[i]);
     }
   }
 
-  return false;
+  return times;
 }

src/time.jsx

@@ -10,7 +10,7 @@ import {
   formatDate,
   isTimeInDisabledRange,
   isTimeDisabled,
-  timeToInjectAfter
+  timesToInjectAfter
 } from "./date_utils";
 
 export default class Time extends React.Component {
@@ -97,21 +97,24 @@ export default class Time extends React.Component {
     const currM = getMinute(activeTime);
     let base = getStartOfDay(newDate());
     const multiplier = 1440 / intervals;
+    const sortedInjectTimes =
+      this.props.injectTimes &&
+      this.props.injectTimes.sort(function(a, b) {
+        return a - b;
+      });
     for (let i = 0; i < multiplier; i++) {
       const currentTime = addMinutes(cloneDate(base), i * intervals);
       times.push(currentTime);
 
-      if (this.props.injectTimes) {
-        const timeToInject = timeToInjectAfter(
+      if (sortedInjectTimes) {
+        const timesToInject = timesToInjectAfter(
           base,
           currentTime,
           i,
           intervals,
-          this.props.injectTimes
+          sortedInjectTimes
         );
-        if (timeToInject) {
-          times.push(timeToInject);
-        }
+        times = times.concat(timesToInject);
       }
     }
 

test/inject_times_test.js

@@ -31,10 +31,10 @@ describe("TimeComponent", () => {
       />
     );
 
-    const disabledItems = timeComponent.find(
+    const injectedItems = timeComponent.find(
       ".react-datepicker__time-list-item--injected"
     );
-    expect(disabledItems).to.have.length(3);
+    expect(injectedItems).to.have.length(3);
   });
 
   it("should not affect existing time intervals", () => {
@@ -50,9 +50,51 @@ describe("TimeComponent", () => {
       />
     );
 
-    const disabledItems = timeComponent.find(
+    const injectedItems = timeComponent.find(
       ".react-datepicker__time-list-item--injected"
     );
-    expect(disabledItems).to.have.length(0);
+    expect(injectedItems).to.have.length(0);
+  });
+
+  it("should allow multiple injected times per interval", () => {
+    const today = utils.getStartOfDay(utils.newDate());
+    const timeComponent = mount(
+      <TimeComponent
+        timeIntervals={60}
+        injectTimes={[
+          utils.addMinutes(cloneDate(today), 1),
+          utils.addMinutes(cloneDate(today), 2),
+          utils.addMinutes(cloneDate(today), 3)
+        ]}
+      />
+    );
+
+    const injectedItems = timeComponent.find(
+      ".react-datepicker__time-list-item--injected"
+    );
+    expect(injectedItems).to.have.length(3);
+  });
+
+  it("should sort injected times automatically", () => {
+    const today = utils.getStartOfDay(utils.newDate());
+    const timeComponent = mount(
+      <TimeComponent
+        timeIntervals={60}
+        injectTimes={[
+          utils.addMinutes(cloneDate(today), 3),
+          utils.addMinutes(cloneDate(today), 1),
+          utils.addMinutes(cloneDate(today), 2)
+        ]}
+      />
+    );
+
+    const injectedItems = timeComponent.find(
+      ".react-datepicker__time-list-item--injected"
+    );
+    expect(injectedItems.map(node => node.text())).eql([
+      "12:01 AM",
+      "12:02 AM",
+      "12:03 AM"
+    ]);
   });
 });