Merge pull request #3 from intljusticemission/master

merging latest from base project
noloco-io · May 7, 2019 · 50f71cb · 50f71cb
2 parents f7b48fe + b436017
commit 50f71cb
Show file tree

Hide file tree

Showing 7 changed files with 140 additions and 50 deletions.
diff --git a/src/Agenda.js b/src/Agenda.js
@@ -10,6 +10,15 @@ import { inRange } from './utils/eventLevels'
 import { isSelected } from './utils/selection'
 
 class Agenda extends React.Component {
+  constructor(props) {
+    super(props)
+    this.headerRef = React.createRef()
+    this.dateColRef = React.createRef()
+    this.timeColRef = React.createRef()
+    this.contentRef = React.createRef()
+    this.tbodyRef = React.createRef()
+  }
+
   componentDidMount() {
     this._adjustHeader()
   }
@@ -33,22 +42,22 @@ class Agenda extends React.Component {
       <div className="rbc-agenda-view">
         {events.length !== 0 ? (
           <React.Fragment>
-            <table ref="header" className="rbc-agenda-table">
+            <table ref={this.headerRef} className="rbc-agenda-table">
               <thead>
                 <tr>
-                  <th className="rbc-header" ref="dateCol">
+                  <th className="rbc-header" ref={this.dateColRef}>
                     {messages.date}
                   </th>
-                  <th className="rbc-header" ref="timeCol">
+                  <th className="rbc-header" ref={this.timeColRef}>
                     {messages.time}
                   </th>
                   <th className="rbc-header">{messages.event}</th>
                 </tr>
               </thead>
             </table>
-            <div className="rbc-agenda-content" ref="content">
+            <div className="rbc-agenda-content" ref={this.contentRef}>
               <table className="rbc-agenda-table">
-                <tbody ref="tbody">
+                <tbody ref={this.tbodyRef}>
                   {range.map((day, idx) => this.renderDay(day, events, idx))}
                 </tbody>
               </table>
@@ -155,15 +164,16 @@ class Agenda extends React.Component {
   }
 
   _adjustHeader = () => {
-    if (!this.refs.tbody) return
+    if (!this.tbodyRef.current) return
 
-    let header = this.refs.header
-    let firstRow = this.refs.tbody.firstChild
+    let header = this.headerRef.current
+    let firstRow = this.tbodyRef.current.firstChild
 
     if (!firstRow) return
 
     let isOverflowing =
-      this.refs.content.scrollHeight > this.refs.content.clientHeight
+      this.contentRef.current.scrollHeight >
+      this.contentRef.current.clientHeight
     let widths = this._widths || []
 
     this._widths = [
@@ -172,8 +182,8 @@ class Agenda extends React.Component {
     ]
 
     if (widths[0] !== this._widths[0] || widths[1] !== this._widths[1]) {
-      this.refs.dateCol.style.width = this._widths[0] + 'px'
-      this.refs.timeCol.style.width = this._widths[1] + 'px'
+      this.dateColRef.current.style.width = this._widths[0] + 'px'
+      this.timeColRef.current.style.width = this._widths[1] + 'px'
     }
 
     if (isOverflowing) {

diff --git a/src/Calendar.js b/src/Calendar.js
@@ -897,7 +897,6 @@ class Calendar extends React.Component {
           />
         )}
         <View
-          ref="view"
           {...props}
           events={events}
           date={current}

diff --git a/src/Month.js b/src/Month.js
@@ -28,6 +28,7 @@ class MonthView extends React.Component {
 
     this._bgRows = []
     this._pendingSelection = []
+    this.slotRowRef = React.createRef()
     this.state = {
       rowLimit: 5,
       needLimitMeasure: true,
@@ -112,7 +113,7 @@ class MonthView extends React.Component {
     return (
       <DateContentRow
         key={weekIdx}
-        ref={weekIdx === 0 ? 'slotRow' : undefined}
+        ref={weekIdx === 0 ? this.slotRowRef : undefined}
         container={this.getContainer}
         className="rbc-month-row"
         getNow={getNow}
@@ -216,7 +217,7 @@ class MonthView extends React.Component {
   measureRowLimit() {
     this.setState({
       needLimitMeasure: false,
-      rowLimit: this.refs.slotRow.getRowLimit(),
+      rowLimit: this.slotRowRef.current.getRowLimit(),
     })
   }
 

diff --git a/src/Popup.js b/src/Popup.js
@@ -9,9 +9,15 @@ import EventCell from './EventCell'
 import { isSelected } from './utils/selection'
 
 class Popup extends React.Component {
+  constructor(props) {
+    super(props)
+
+    this.rootRef = React.createRef()
+  }
+
   componentDidMount() {
     let { popupOffset = 5 } = this.props,
-      { top, left, width, height } = getOffset(this.refs.root),
+      { top, left, width, height } = getOffset(this.rootRef.current),
       viewBottom = window.innerHeight + getScrollTop(window),
       viewRight = window.innerWidth + getScrollLeft(window),
       bottom = top + height,
@@ -54,7 +60,7 @@ class Popup extends React.Component {
     }
 
     return (
-      <div ref="root" style={style} className="rbc-overlay">
+      <div ref={this.rootRef} style={style} className="rbc-overlay">
         <div className="rbc-overlay-header">
           {localizer.format(slotStart, 'dayHeaderFormat')}
         </div>

diff --git a/src/TimeGrid.js b/src/TimeGrid.js
@@ -22,6 +22,7 @@ export default class TimeGrid extends Component {
     this.state = { gutterWidth: undefined, isOverflowing: null }
 
     this.scrollRef = React.createRef()
+    this.contentRef = React.createRef()
   }
 
   componentWillMount() {
@@ -209,7 +210,7 @@ export default class TimeGrid extends Component {
           getDrilldownView={this.props.getDrilldownView}
         />
         <div
-          ref="content"
+          ref={this.contentRef}
           className="rbc-time-content"
           onScroll={this.handleScroll}
         >
@@ -253,7 +254,7 @@ export default class TimeGrid extends Component {
 
   applyScroll() {
     if (this._scrollRatio) {
-      const { content } = this.refs
+      const content = this.contentRef.current
       content.scrollTop = content.scrollHeight * this._scrollRatio
       // Only do this once
       this._scrollRatio = null
@@ -272,8 +273,8 @@ export default class TimeGrid extends Component {
   checkOverflow = () => {
     if (this._updatingOverflow) return
 
-    let isOverflowing =
-      this.refs.content.scrollHeight > this.refs.content.clientHeight
+    const content = this.contentRef.current
+    let isOverflowing = content.scrollHeight > content.clientHeight
 
     if (this.state.isOverflowing !== isOverflowing) {
       this._updatingOverflow = true

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)}
+      />
+    )
+  })