Merge pull request #2 from intljusticemission/master

fix: TimeGrid display on DST change days when min is after the transi…
cutterbl · May 7, 2019 · 42c6a9b · 42c6a9b
2 parents 7d09045 + b436017
commit 42c6a9b
Show file tree

Hide file tree

Showing 2 changed files with 103 additions and 30 deletions.
diff --git a/src/utils/TimeSlots.js b/src/utils/TimeSlots.js
@@ -11,14 +11,14 @@ const getKey = (min, max, step, slots) =>
 export function getSlotMetrics({ min: start, max: end, step, timeslots }) {
   const key = getKey(start, end, step, timeslots)
 
+  // if the start is on a DST-changing day but *after* the moment of DST
+  // transition we need to add those extra minutes to our minutesFromMidnight
+  const daystart = dates.startOf(start, 'day')
+  const daystartdstoffset = getDstOffset(daystart, start)
   const totalMin =
     1 + dates.diff(start, end, 'minutes') + getDstOffset(start, end)
-  const minutesFromMidnight = dates.diff(
-    dates.startOf(start, 'day'),
-    start,
-    'minutes'
-  )
-
+  const minutesFromMidnight =
+    dates.diff(daystart, start, 'minutes') + daystartdstoffset
   const numGroups = Math.ceil(totalMin / (step * timeslots))
   const numSlots = numGroups * timeslots
 

diff --git a/stories/Durations.js b/stories/Durations.js
@@ -4,27 +4,100 @@ import moment from 'moment'
 
 import { Calendar, DragableCalendar } from './helpers'
 
-storiesOf('Event Durations').add('Daylight savings', () => {
-  return (
-    <DragableCalendar
-      defaultView={Calendar.Views.DAY}
-      min={moment('12:00am', 'h:mma').toDate()}
-      max={moment('11:59pm', 'h:mma').toDate()}
-      events={[
-        {
-          title: 'on DST',
-          start: new Date(2017, 2, 12, 1),
-          end: new Date(2017, 2, 12, 2, 30),
-          allDay: false,
-        },
-        {
-          title: 'crosses DST',
-          start: new Date(2017, 2, 12, 1),
-          end: new Date(2017, 2, 12, 6, 30),
-          allDay: false,
-        },
-      ]}
-      defaultDate={new Date(2017, 2, 12)}
-    />
-  )
-})
+storiesOf('Event Durations')
+  .add('Daylight savings starts', () => {
+    return (
+      <DragableCalendar
+        defaultView={Calendar.Views.DAY}
+        min={moment('12:00am', 'h:mma').toDate()}
+        max={moment('11:59pm', 'h:mma').toDate()}
+        events={[
+          {
+            title: 'on DST',
+            start: new Date(2017, 2, 12, 1),
+            end: new Date(2017, 2, 12, 2, 30),
+            allDay: false,
+          },
+          {
+            title: 'crosses DST',
+            start: new Date(2017, 2, 12, 1),
+            end: new Date(2017, 2, 12, 6, 30),
+            allDay: false,
+          },
+          {
+            title: 'After DST',
+            start: new Date(2017, 2, 12, 7),
+            end: new Date(2017, 2, 12, 9, 30),
+            allDay: false,
+          },
+        ]}
+        defaultDate={new Date(2017, 2, 12)}
+      />
+    )
+  })
+  .add('Daylight savings ends', () => {
+    return (
+      <DragableCalendar
+        defaultView={Calendar.Views.DAY}
+        min={moment('12:00am', 'h:mma').toDate()}
+        max={moment('11:59pm', 'h:mma').toDate()}
+        events={[
+          {
+            title: 'on DST',
+            start: new Date(2017, 10, 5, 1),
+            end: new Date(2017, 10, 5, 3, 30),
+            allDay: false,
+          },
+          {
+            title: 'crosses DST',
+            start: new Date(2017, 10, 5, 1),
+            end: new Date(2017, 10, 5, 6, 30),
+            allDay: false,
+          },
+          {
+            title: 'After DST',
+            start: new Date(2017, 10, 5, 7),
+            end: new Date(2017, 10, 5, 7, 45),
+            allDay: false,
+          },
+        ]}
+        defaultDate={new Date(2017, 10, 5)}
+      />
+    )
+  })
+  .add('Daylight savings starts, after 2am', () => {
+    return (
+      <DragableCalendar
+        defaultView={Calendar.Views.DAY}
+        min={moment('3:00am', 'h:mma').toDate()}
+        max={moment('11:59pm', 'h:mma').toDate()}
+        events={[
+          {
+            title: 'After DST',
+            start: new Date(2017, 2, 12, 7),
+            end: new Date(2017, 2, 12, 9, 30),
+            allDay: false,
+          },
+        ]}
+        defaultDate={new Date(2017, 2, 12)}
+      />
+    )
+  })
+  .add('Daylight savings ends, after 2am', () => {
+    return (
+      <DragableCalendar
+        defaultView={Calendar.Views.DAY}
+        min={moment('3:00am', 'h:mma').toDate()}
+        max={moment('11:59pm', 'h:mma').toDate()}
+        events={[
+          {
+            title: 'After DST',
+            start: new Date(2017, 10, 5, 7),
+            end: new Date(2017, 10, 5, 9, 30),
+            allDay: false,
+          },
+        ]}
+        defaultDate={new Date(2017, 10, 5)}
+      />
+    )
+  })