Merge pull request #1453 from intljusticemission/upgrade-dom-helpers

Upgrade dom-helpers
jquense · Sep 13, 2019 · 3e21056 · 3e21056
2 parents 033ce1a + eefdb4a
commit 3e21056
Show file tree

Hide file tree

Showing 10 changed files with 101 additions and 86 deletions.
diff --git a/.size-snapshot.json b/.size-snapshot.json
@@ -1,25 +1,25 @@
 {
   "./dist/react-big-calendar.js": {
-    "bundled": 515451,
-    "minified": 152551,
-    "gzipped": 46110
+    "bundled": 501317,
+    "minified": 146786,
+    "gzipped": 44762
   },
   "./dist/react-big-calendar.min.js": {
-    "bundled": 453138,
-    "minified": 133737,
-    "gzipped": 41753
+    "bundled": 439004,
+    "minified": 127972,
+    "gzipped": 40409
   },
   "dist/react-big-calendar.esm.js": {
-    "bundled": 168747,
-    "minified": 80626,
-    "gzipped": 19927,
+    "bundled": 168678,
+    "minified": 80552,
+    "gzipped": 19913,
     "treeshaked": {
       "rollup": {
-        "code": 58340,
-        "import_statements": 1584
+        "code": 58283,
+        "import_statements": 1578
       },
       "webpack": {
-        "code": 62815
+        "code": 62787
       }
     }
   }

diff --git a/package.json b/package.json
@@ -124,7 +124,7 @@
     "@babel/runtime": "^7.1.5",
     "clsx": "^1.0.4",
     "date-arithmetic": "^4.0.1",
-    "dom-helpers": "^3.4.0",
+    "dom-helpers": "^5.1.0",
     "invariant": "^2.2.4",
     "lodash": "^4.17.11",
     "lodash-es": "^4.17.11",

diff --git a/src/Agenda.js b/src/Agenda.js
@@ -1,8 +1,9 @@
 import PropTypes from 'prop-types'
 import React from 'react'
-import classes from 'dom-helpers/class'
-import getWidth from 'dom-helpers/query/width'
-import scrollbarSize from 'dom-helpers/util/scrollbarSize'
+import addClass from 'dom-helpers/addClass'
+import removeClass from 'dom-helpers/removeClass'
+import getWidth from 'dom-helpers/width'
+import scrollbarSize from 'dom-helpers/scrollbarSize'
 
 import * as dates from './utils/dates'
 import { navigate } from './utils/constants'
@@ -187,10 +188,10 @@ class Agenda extends React.Component {
     }
 
     if (isOverflowing) {
-      classes.addClass(header, 'rbc-header-overflowing')
+      addClass(header, 'rbc-header-overflowing')
       header.style.marginRight = scrollbarSize() + 'px'
     } else {
-      classes.removeClass(header, 'rbc-header-overflowing')
+      removeClass(header, 'rbc-header-overflowing')
     }
   }
 }

diff --git a/src/DateContentRow.js b/src/DateContentRow.js
@@ -1,6 +1,6 @@
 import clsx from 'clsx'
-import getHeight from 'dom-helpers/query/height'
-import qsa from 'dom-helpers/query/querySelectorAll'
+import getHeight from 'dom-helpers/height'
+import qsa from 'dom-helpers/querySelectorAll'
 import PropTypes from 'prop-types'
 import React from 'react'
 import { findDOMNode } from 'react-dom'

diff --git a/src/Month.js b/src/Month.js
@@ -8,8 +8,8 @@ import chunk from 'lodash/chunk'
 
 import { navigate, views } from './utils/constants'
 import { notify } from './utils/helpers'
-import getPosition from 'dom-helpers/query/position'
-import raf from 'dom-helpers/util/requestAnimationFrame'
+import getPosition from 'dom-helpers/position'
+import * as animationFrame from 'dom-helpers/animationFrame'
 
 import Popup from './Popup'
 import Overlay from 'react-overlays/Overlay'
@@ -50,7 +50,7 @@ class MonthView extends React.Component {
       'resize',
       (this._resizeListener = () => {
         if (!running) {
-          raf(() => {
+          animationFrame.request(() => {
             running = false
             this.setState({ needLimitMeasure: true }) //eslint-disable-line
           })

diff --git a/src/Popup.js b/src/Popup.js
@@ -1,8 +1,8 @@
 import PropTypes from 'prop-types'
 import React from 'react'
-import getOffset from 'dom-helpers/query/offset'
-import getScrollTop from 'dom-helpers/query/scrollTop'
-import getScrollLeft from 'dom-helpers/query/scrollLeft'
+import getOffset from 'dom-helpers/offset'
+import getScrollTop from 'dom-helpers/scrollTop'
+import getScrollLeft from 'dom-helpers/scrollLeft'
 import * as dates from './utils/dates'
 
 import EventCell from './EventCell'

diff --git a/src/Selection.js b/src/Selection.js
@@ -1,14 +1,9 @@
-import contains from 'dom-helpers/query/contains'
-import closest from 'dom-helpers/query/closest'
-import events from 'dom-helpers/events'
+import contains from 'dom-helpers/contains'
+import closest from 'dom-helpers/closest'
+import listen from 'dom-helpers/listen'
 
 function addEventListener(type, handler, target = document) {
-  events.on(target, type, handler, { passive: false })
-  return {
-    remove() {
-      events.off(target, type, handler)
-    },
-  }
+  return listen(target, type, handler, { passive: false })
 }
 
 function isOverContainer(container, x, y) {
@@ -62,14 +57,14 @@ class Selection {
 
     // Fixes an iOS 10 bug where scrolling could not be prevented on the window.
     // https://github.com/metafizzy/flickity/issues/457#issuecomment-254501356
-    this._onTouchMoveWindowListener = addEventListener(
+    this._removeTouchMoveWindowListener = addEventListener(
       'touchmove',
       () => {},
       window
     )
-    this._onKeyDownListener = addEventListener('keydown', this._keyListener)
-    this._onKeyUpListener = addEventListener('keyup', this._keyListener)
-    this._onDropFromOutsideListener = addEventListener(
+    this._removeKeyDownListener = addEventListener('keydown', this._keyListener)
+    this._removeKeyUpListener = addEventListener('keyup', this._keyListener)
+    this._removeDropFromOutsideListener = addEventListener(
       'drop',
       this._dropFromOutsideListener
     )
@@ -105,14 +100,14 @@ class Selection {
   teardown() {
     this.isDetached = true
     this.listeners = Object.create(null)
-    this._onTouchMoveWindowListener && this._onTouchMoveWindowListener.remove()
-    this._onInitialEventListener && this._onInitialEventListener.remove()
-    this._onEndListener && this._onEndListener.remove()
-    this._onEscListener && this._onEscListener.remove()
-    this._onMoveListener && this._onMoveListener.remove()
-    this._onKeyUpListener && this._onKeyUpListener.remove()
-    this._onKeyDownListener && this._onKeyDownListener.remove()
-    this._onDropFromOutsideListener && this._onDragOverfromOutisde.remove()
+    this._removeTouchMoveWindowListener && this._removeTouchMoveWindowListener()
+    this._removeInitialEventListener && this._removeInitialEventListener()
+    this._removeEndListener && this._removeEndListener()
+    this._onEscListener && this._onEscListener()
+    this._removeMoveListener && this._removeMoveListener()
+    this._removeKeyUpListener && this._removeKeyUpListener()
+    this._removeKeyDownListener && this._removeKeyDownListener()
+    this._removeDropFromOutsideListener && this._removeDropFromOutsideListener()
   }
 
   isSelected(node) {
@@ -136,69 +131,68 @@ class Selection {
   // without moving their finger for 250ms.
   _addLongPressListener(handler, initialEvent) {
     let timer = null
-    let touchMoveListener = null
-    let touchEndListener = null
+    let removeTouchMoveListener = null
+    let removeTouchEndListener = null
     const handleTouchStart = initialEvent => {
       timer = setTimeout(() => {
         cleanup()
         handler(initialEvent)
       }, this.longPressThreshold)
-      touchMoveListener = addEventListener('touchmove', () => cleanup())
-      touchEndListener = addEventListener('touchend', () => cleanup())
+      removeTouchMoveListener = addEventListener('touchmove', () => cleanup())
+      removeTouchEndListener = addEventListener('touchend', () => cleanup())
     }
-    const touchStartListener = addEventListener('touchstart', handleTouchStart)
+    const removeTouchStartListener = addEventListener(
+      'touchstart',
+      handleTouchStart
+    )
     const cleanup = () => {
       if (timer) {
         clearTimeout(timer)
       }
-      if (touchMoveListener) {
-        touchMoveListener.remove()
+      if (removeTouchMoveListener) {
+        removeTouchMoveListener()
       }
-      if (touchEndListener) {
-        touchEndListener.remove()
+      if (removeTouchEndListener) {
+        removeTouchEndListener()
       }
 
       timer = null
-      touchMoveListener = null
-      touchEndListener = null
+      removeTouchMoveListener = null
+      removeTouchEndListener = null
     }
 
     if (initialEvent) {
       handleTouchStart(initialEvent)
     }
 
-    return {
-      remove() {
-        cleanup()
-        touchStartListener.remove()
-      },
+    return () => {
+      cleanup()
+      removeTouchStartListener()
     }
   }
 
   // Listen for mousedown and touchstart events. When one is received, disable the other and setup
   // future event handling based on the type of event.
   _addInitialEventListener() {
-    const mouseDownListener = addEventListener('mousedown', e => {
-      this._onInitialEventListener.remove()
+    const removeMouseDownListener = addEventListener('mousedown', e => {
+      this._removeInitialEventListener()
       this._handleInitialEvent(e)
-      this._onInitialEventListener = addEventListener(
+      this._removeInitialEventListener = addEventListener(
         'mousedown',
         this._handleInitialEvent
       )
     })
-    const touchStartListener = addEventListener('touchstart', e => {
-      this._onInitialEventListener.remove()
-      this._onInitialEventListener = this._addLongPressListener(
+    const removeTouchStartListener = addEventListener('touchstart', e => {
+      this._removeInitialEventListener()
+      this._removeInitialEventListener = this._addLongPressListener(
         this._handleInitialEvent,
         e
       )
     })
 
-    this._onInitialEventListener = {
-      remove() {
-        mouseDownListener.remove()
-        touchStartListener.remove()
-      },
+    this._removeInitialEventListener = () => {
+      removeMouseDownListener()
+      removeTouchStartListener()
     }
   }
 
@@ -279,26 +273,26 @@ class Selection {
 
     switch (e.type) {
       case 'mousedown':
-        this._onEndListener = addEventListener(
+        this._removeEndListener = addEventListener(
           'mouseup',
           this._handleTerminatingEvent
         )
         this._onEscListener = addEventListener(
           'keydown',
           this._handleTerminatingEvent
         )
-        this._onMoveListener = addEventListener(
+        this._removeMoveListener = addEventListener(
           'mousemove',
           this._handleMoveEvent
         )
         break
       case 'touchstart':
         this._handleMoveEvent(e)
-        this._onEndListener = addEventListener(
+        this._removeEndListener = addEventListener(
           'touchend',
           this._handleTerminatingEvent
         )
-        this._onMoveListener = addEventListener(
+        this._removeMoveListener = addEventListener(
           'touchmove',
           this._handleMoveEvent
         )
@@ -313,8 +307,8 @@ class Selection {
 
     this.selecting = false
 
-    this._onEndListener && this._onEndListener.remove()
-    this._onMoveListener && this._onMoveListener.remove()
+    this._removeEndListener && this._removeEndListener()
+    this._removeMoveListener && this._removeMoveListener()
 
     if (!this._initialEventData) return
 

diff --git a/src/TimeGrid.js b/src/TimeGrid.js
@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types'
 import clsx from 'clsx'
-import raf from 'dom-helpers/util/requestAnimationFrame'
+import * as animationFrame from 'dom-helpers/animationFrame'
 import React, { Component } from 'react'
 import { findDOMNode } from 'react-dom'
 import memoize from 'memoize-one'
@@ -9,7 +9,7 @@ import * as dates from './utils/dates'
 import DayColumn from './DayColumn'
 import TimeGutter from './TimeGutter'
 
-import getWidth from 'dom-helpers/query/width'
+import getWidth from 'dom-helpers/width'
 import TimeGridHeader from './TimeGridHeader'
 import { notify } from './utils/helpers'
 import { inRange, sortEvents } from './utils/eventLevels'
@@ -48,14 +48,14 @@ export default class TimeGrid extends Component {
   }
 
   handleResize = () => {
-    raf.cancel(this.rafHandle)
-    this.rafHandle = raf(this.checkOverflow)
+    animationFrame.cancel(this.rafHandle)
+    this.rafHandle = animationFrame.request(this.checkOverflow)
   }
 
   componentWillUnmount() {
     window.removeEventListener('resize', this.handleResize)
 
-    raf.cancel(this.rafHandle)
+    animationFrame.cancel(this.rafHandle)
 
     if (this.measureGutterAnimationFrameRequest) {
       window.cancelAnimationFrame(this.measureGutterAnimationFrameRequest)

diff --git a/src/TimeGridHeader.js b/src/TimeGridHeader.js
@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types'
 import clsx from 'clsx'
-import scrollbarSize from 'dom-helpers/util/scrollbarSize'
+import scrollbarSize from 'dom-helpers/scrollbarSize'
 import React from 'react'
 
 import * as dates from './utils/dates'

diff --git a/yarn.lock b/yarn.lock
@@ -1019,6 +1019,13 @@
   dependencies:
     regenerator-runtime "^0.13.2"
 
+"@babel/runtime@^7.5.5":
+  version "7.6.0"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.6.0.tgz#4fc1d642a9fd0299754e8b5de62c631cf5568205"
+  integrity sha512-89eSBLJsxNxOERC0Op4vd+0Bqm6wRMqMbFtV3i0/fbaWw/mJ8Q3eBvgX0G4SyrOOLCtbu98HspF8o09MRT+KzQ==
+  dependencies:
+    regenerator-runtime "^0.13.2"
+
 "@babel/template@^7.1.0", "@babel/template@^7.2.2", "@babel/template@^7.4.4":
   version "7.4.4"
   resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.4.4.tgz#f4b88d1225689a08f5bc3a17483545be9e4ed237"
@@ -4321,6 +4328,11 @@ csstype@^2.2.0, csstype@^2.5.7:
   resolved "https://registry.yarnpkg.com/csstype/-/csstype-2.6.4.tgz#d585a6062096e324e7187f80e04f92bd0f00e37f"
   integrity sha512-lAJUJP3M6HxFXbqtGRc0iZrdyeN+WzOWeY0q/VnFzI+kqVrYIzC7bWlKqCW7oCIdzoPkvfp82EVvrTlQ8zsWQg==
 
+csstype@^2.6.6:
+  version "2.6.6"
+  resolved "https://registry.yarnpkg.com/csstype/-/csstype-2.6.6.tgz#c34f8226a94bbb10c32cc0d714afdf942291fc41"
+  integrity sha512-RpFbQGUE74iyPgvr46U9t1xoQBM8T4BL8SxrN66Le2xYAPSaDJJKeztV3awugusb3g3G9iL8StmkBBXhcbbXhg==
+
 currently-unhandled@^0.4.1:
   version "0.4.1"
   resolved "https://registry.yarnpkg.com/currently-unhandled/-/currently-unhandled-0.4.1.tgz#988df33feab191ef799a61369dd76c17adf957ea"
@@ -4682,6 +4694,14 @@ dom-helpers@^3.2.0, dom-helpers@^3.2.1, dom-helpers@^3.4.0:
   dependencies:
     "@babel/runtime" "^7.1.2"
 
+dom-helpers@^5.1.0:
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/dom-helpers/-/dom-helpers-5.1.0.tgz#57a726de04abcc2a8bbfe664b3e21c584bde514e"
+  integrity sha512-zRRYDhpiKuAJHasOqCm7lBnsd22nrM4+OYI4ASWCxen+ocTMl7BIAKgGag97TlLiTl6rrau5aPe1VGUm9jQBng==
+  dependencies:
+    "@babel/runtime" "^7.5.5"
+    csstype "^2.6.6"
+
 dom-serializer@0:
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/dom-serializer/-/dom-serializer-0.1.1.tgz#1ec4059e284babed36eec2941d4a970a189ce7c0"