@startlibs/components 1.0.3 → 1.1.0

package/src/Draggable.jsx

@@ -0,0 +1,801 @@
+import React from 'react'
+import ReactDOM from 'react-dom'
+import _ from 'lodash/fp'
+import styled from 'styled-components'
+import {getScrollParent, normalizeMouse, normalizeTouch} from '@startlibs/utils'
+import {FlipList} from './FlipList'
+
+const {Provider, Consumer} = React.createContext({})
+
+const areComponentsEqual = (a,b) => a === b
+
+const DropPosition = styled.div`
+  border: 2px dashed rgba(0,0,0,0.1);
+  background-color: rgba(0,0,0,0.025);
+  border-radius: 18px;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  left: 0;
+  visibility: visible;
+  display: block;
+  border-radius: inherit;
+  ${props => props.rounded && `
+    border-radius: 1000rem;
+  `}
+`
+const EmptyPlaceholder = styled.div`
+  position:absolute;
+`
+
+const HORIZONTAL_DIMENSIONS = {
+  min: 'left',
+  max: 'right',
+  axis: 'x',
+  size: 'Width'
+}
+const VERTICAL_DIMENSIONS = {
+  min: 'top',
+  max: 'bottom',
+  axis: 'y',
+  size: 'Height'
+}
+
+
+const AUTO_SCROLL_BORDER_SIZE = 30
+const AUTO_SCROLL_MAX_VELOCITY = 20
+const AUTO_SCROLL_OVERFLOW_BUFFER = 100
+
+function easeInCubic(t) { return Math.ceil(t * t * t / (AUTO_SCROLL_MAX_VELOCITY * AUTO_SCROLL_MAX_VELOCITY)) }
+
+const disableWillChange = (el) => {
+  const willChange = el?.closest(".JS-has-wc")
+  if (willChange) {
+    willChange.classList.add('JS-wc-off')
+    disableWillChange(willChange.parentNode)
+  }
+}
+const reenableWillChange = (el) => {
+  const willChange = el?.closest(".JS-has-wc")
+  if (willChange) {
+    willChange.classList.remove('JS-wc-off')
+    reenableWillChange(willChange.parentNode)
+  }
+}
+
+
+const shouldPreventDrag = (e) => !(e.target).closest('body,.drag-drop-item,[data-drag="false"],input,textarea,button').matches('body,.drag-drop-item,[data-drag="true"]')
+
+export class DraggableItem extends React.Component {
+
+  events = this.props.eventHandlers(this)
+
+  render() {
+    const {DragTag, as = 'div', eventHandlers, className, isDragging, droppable, dragIndex,roundedPlaceholder, inheritRadius, children, ...props} = this.props
+    const Wrapper = DragTag || as
+    const extraClassName = (isDragging ? ' drag-drop-placeholder' : '') + ' drag-drop-item'
+    return typeof children === 'function' ?
+           children({className: extraClassName, ...this.events, children: isDragging && <DropPosition rounded={roundedPlaceholder} inheritRadius={inheritRadius}/>}) :
+           <Wrapper
+             className={className + extraClassName}
+             isDragging={isDragging}
+             {...props}
+             {...this.events}
+           >
+             {children}
+             {
+               isDragging &&
+               <DropPosition rounded={roundedPlaceholder} inheritRadius={inheritRadius}/>
+             }
+
+           </Wrapper>
+  }
+}
+
+DraggableItem.a = (props) => <DraggableItem {...props} DragTag='a'/>
+
+export const DroppableContainer = (props) =>
+  <Consumer>
+    {(dragProps) =>
+      <DroppableContainerComponent {...props} {...dragProps} />
+    }
+  </Consumer>
+
+
+class DroppableContainerComponent extends React.Component {
+
+  static defaultProps = {
+    placeholder: () => <EmptyPlaceholder/>
+  }
+
+  draggables = []
+  emptyPlaceholder
+
+  addProps = (children, eventHandlers, activeIndex, extraProps) =>
+    children.map((c, index) =>
+      c.type === DraggableItem ? React.cloneElement(c, {
+        isDragging: activeIndex === index,
+        dragIndex: index,
+        droppable: this,
+        ref: (el) => this.draggables[index] = el,
+        eventHandlers: eventHandlers
+      }) : c
+    )
+
+  toPosition = (parentRect, {scrollTop, scrollLeft}) => (el, i) => {
+    if (el) {
+      const domNode = ReactDOM.__DOM_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE.findDOMNode(el)
+      const {width, height} = domNode.getBoundingClientRect()
+      return {
+        droppable: this,
+        index: i,
+        width,
+        height,
+        y: parentRect.top + domNode.offsetTop + (height / 2) + (scrollTop || 0),
+        x: parentRect.left + domNode.offsetLeft + (width / 2) + (scrollLeft || 0)
+      }
+    }
+  }
+
+  getPosition = (i, scrollXY) => {
+    const el = this.draggables[i]
+    if (el) {
+      const parent = ReactDOM.__DOM_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE.findDOMNode(this).offsetParent
+      const parentRect = parent.getBoundingClientRect()
+      return this.toPosition(parentRect, 0)(el, i)
+    }
+  }
+
+  getPositions = (scrollXY, dragInfo) => {
+    if (this.props.allowDrop && !this.props.allowDrop(_.map(dragInfo, v => v && v.props ? v.props.id : v))) {
+      return []
+    }
+    const parent = ReactDOM.__DOM_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE.findDOMNode(this).offsetParent
+    if (!parent) { return []}
+    const parentRect = parent.getBoundingClientRect()
+    const toPosition = this.toPosition(parentRect, scrollXY)
+    const existing = this.draggables.map(toPosition).filter(_ => _)
+    if (existing.length || !this.props.placeholder) return existing
+    return [ReactDOM.__DOM_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE.findDOMNode(this)].map(toPosition).filter(_ => _)
+  }
+
+
+  componentDidMount() {
+    this.props.addDroppable(this)
+  }
+
+  componentWillUnmount() {
+    this.props.removeDroppable(this)
+  }
+
+  repositionDragged = (array, {active, startIndex, startDroppable, activeIndex, activeDroppable}, getActiveElement) => {
+    // Repositioning dereferences startDroppable.props further down. Rendering with an
+    // activeDroppable but no startDroppable would take the whole tree down, so render
+    // the list untouched instead and let the next commit reconcile it.
+    if (!startDroppable) { return array }
+    if (activeDroppable && (activeDroppable === this || startDroppable === this)) {
+      // remove
+      const removedOrInserted = _.pullAt(startDroppable === this ? startIndex : [], array)
+      if (activeDroppable === this) {
+        // insert
+        removedOrInserted.splice(activeIndex, 0, getActiveElement())
+      }
+      return removedOrInserted
+    }
+    return array
+  }
+
+
+  getPlaceholder = (childArray, dragInfo) => childArray.find(_ => _.props.droppable) || dragInfo.startDroppable.props.children[dragInfo.startIndex]
+
+  getDragged = (childArray, dragInfo) => dragInfo.startDroppable === this ?
+                                         childArray[dragInfo.startIndex] :
+                                         React.cloneElement(this.getPlaceholder(childArray, dragInfo), {key: childArray[0].key + 'si' + dragInfo.startIndex})
+
+
+  childrenToarray = ({children, list, dragInfo}) => {
+    const {startDroppable, startIndex} = dragInfo
+    if (list) {
+      return React.Children.toArray(children(this.repositionDragged(list, dragInfo, () => startDroppable.props.list[startIndex])))
+    } else {
+      const childArray = React.Children.toArray(children)
+      return this.repositionDragged(childArray, dragInfo, () => this.getDragged(childArray, dragInfo))
+    }
+  }
+
+  render() {
+    const {group, placeholder, dragInfo, animation, timing, eventHandlers} = this.props
+    const {active, activeIndex, activeDroppable} = dragInfo
+    const childArray = this.childrenToarray(this.props)
+    if (!childArray.length && placeholder) {
+      return placeholder()
+    }
+    return <FlipList animation={animation} timing={timing} play={active}>{
+      this.addProps(childArray, eventHandlers, active && activeDroppable === this && activeIndex)
+    }</FlipList>
+  }
+}
+
+
+export class DraggableContainer extends React.Component {
+
+  static defaultProps = {
+    holdTouchTimer: 500,
+    scrollOnDrag: true,
+    setDragRef: () => {}
+  }
+
+  props/*: {
+    scrollContainer,
+    setItemOrder,
+    children,
+    noResistance,
+    holdTouchTimer
+  }*/
+
+  ghost
+  // dragEnd animates the ghost out over 300ms, so the tail of a drag is asynchronous
+  // and a new drag can start before the previous one has finished. Each drag therefore
+  // gets its own session holding everything its completion needs (ghost, dragInfo),
+  // instead of reading the shared slots a newer drag may already have taken over.
+  // dragToken identifies the drag that currently owns the shared state.
+  dragToken = 0
+  activeSession = null
+  positions = {}
+  passedResistance = false
+  pressedEnough = false
+  holdTouchTimer//: number
+
+  preventScroll//: boolean
+  state = {dragInfo: {}}
+
+  droppables = {}
+  offsetParent//: HTMLElement
+  parent//: HTMLElement
+  ghostDimensions//: GhostDimensions
+  itemsPositions//: Array<{ index: number, y: number, x: number }>
+  scrollContainer//: HTMLElement & any
+
+  lastScrollTop//: number
+  lastScrollLeft//: number
+
+  settedDragRef = false
+
+  preventDefault = (e) => {
+    if (!shouldPreventDrag(e) && this.preventScroll)
+      e.preventDefault()
+  }
+
+  getScrollContainer = () => {
+    return this.scrollContainer = this.scrollContainer || (this.props.scrollContainer ? this.props.scrollContainer : getScrollParent((ReactDOM.__DOM_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE.findDOMNode(this))))
+  }
+
+  componentDidMount() {
+    this.parent.addEventListener('touchmove', this.preventDefault)
+  }
+
+  componentWillUnmount() {
+    this.parent.removeEventListener('touchmove', this.preventDefault)
+  }
+
+  componentDidUpdate(_, prevState) {
+    if (!isNaN(this.lastScrollTop) || !isNaN(this.lastScrollLeft)) {
+      this.getScrollContainer().scroll(this.lastScrollLeft, this.lastScrollTop)
+      this.lastScrollLeft = this.lastScrollTop = undefined
+    }
+    if (this.ghost && this.ghost.parentNode) {
+      this.ghost.parentNode.appendChild(this.ghost)
+    }
+    if (this.state.dragInfo !== prevState.dragInfo) {
+      this.resetPositions()
+    }
+  }
+
+
+  removeItem = (el) => {
+    this.domItems = this.domItems.filter(e => e !== el)
+  }
+
+  setOffsetParent = (e) => {
+    this.parent = e
+    this.offsetParent = e && (window.getComputedStyle(e).position !== 'static' ? e : e.offsetParent)
+  }
+
+  getConstraintDimensions = () => {
+    if (!this.offsetParent)
+      return {left: 0, top: 0, bottom: 0, right: 0, width: 0, height: 0}
+    return this.offsetParent.getBoundingClientRect()
+  }
+
+
+  dragStart = (draggable) => (e, {pageX, pageY, clientX, clientY}) => {
+    const currentTarget = e.currentTarget
+    if (shouldPreventDrag(e) || this.props.disabled) {
+      return
+    }
+    if (e.type === 'mousedown' && e.button !== 0) {
+      return
+    }
+    e.stopPropagation()
+    this.passedResistance = false
+    const holdTouchTimer = this.props.holdTouchTimer
+    this.pressedEnough = !holdTouchTimer
+    if (holdTouchTimer) {
+      e.persist()
+      this.holdTouchTimer = setTimeout(() => {
+        this.pressedEnough = true
+        if (window.navigator.vibrate)
+          window.navigator.vibrate([65])
+        if (!this.state.dragInfo.active) {
+          this.dragMove(e, {pageX, pageY, clientX, clientY}, )
+        }
+      }, holdTouchTimer)
+    }
+    const {width, height, top, left} = currentTarget.getBoundingClientRect()
+    const targetStyle = window.getComputedStyle(currentTarget)
+    const {top: parentTop, left: parentLeft} = this.getConstraintDimensions()
+    const offsetTop = parentTop + pageY - top + parseInt(targetStyle['margin-top'], 10)
+    const offsetLeft = parentLeft + pageX - left + parseInt(targetStyle['margin-left'], 10)
+    const {scrollTop, scrollLeft, scrollY, scrollX} = this.getScrollContainer()
+    this.positions = {
+      originalX: pageX, originalY: pageY,
+      offsetTop, offsetLeft, ghostHeight: height, ghostWidth: width,
+      ghostMarginTop: parseInt(targetStyle['margin-top'], 10),
+      ghostMarginLeft: parseInt(targetStyle['margin-left'], 10),
+      scrollLeft: scrollLeft || 0, scrollTop: scrollTop || 0,
+      scrollY: scrollY || 0, scrollX: scrollX || 0
+    }
+
+
+    const ghost = currentTarget.cloneNode(true)
+    ghost.className += ' dragging'
+    Object.assign(ghost.style, {
+      transition: '',
+      position: 'fixed', display: 'none', zIndex: '10', width: width + 'px', height: height + 'px', margin: '0',
+      top: (top - clientY) + 'px', left: (left - clientX) + 'px'
+    })
+
+    this.setupMove(ghost, currentTarget.offsetParent, draggable, {
+      width,
+      height,
+      offsetX: pageX - left,
+      offsetY: pageY - top
+    })
+    window.addEventListener('mousemove', this.mouseMove)
+    window.addEventListener('touchmove', this.touchMove, {passive: false})
+    window.addEventListener('mouseup', this.dragEnd)
+    window.addEventListener('touchend', this.dragEnd)
+    window.addEventListener('visibilitychange', this.dragEnd)
+    window.addEventListener('blur', this.dragEnd, false)
+    window.addEventListener('selectstart', this.disableSelect)
+  }
+
+
+  setupMove = (el, parent, item, ghostDimensions) => {
+    this.ghostDimensions = ghostDimensions
+    parent.click() // close popups
+    this.ghost = el
+    // Open this drag's session and take ownership of the shared state. Any previous
+    // session is now superseded: it still holds its own ghost and dragInfo, so it can
+    // finish animating and clean itself up without touching anything below.
+    this.dragToken++
+    this.activeSession = {
+      token: this.dragToken,
+      ghost: el,
+      dragInfo: null,
+      ended: false,
+      endTimeout: null,
+      onTransitionEnd: null
+    }
+    parent.appendChild(this.ghost)
+    disableWillChange(this.ghost)
+    this.setState({
+      dragInfo: {
+        active: false,
+        startIndex: item.props.dragIndex,
+        activeGroup: item.props.droppable.props.group,
+        startDroppable: item.props.droppable
+      }
+    })
+    this.settedDragRef = false
+  }
+
+  getScrollPosition = () => {
+    const {scrollY, scrollX, scrollLeft, scrollTop} = this.getScrollContainer()
+    const left = (scrollX || 0 + scrollLeft || 0) - this.positions.scrollX - this.positions.scrollLeft
+    const top = (scrollY || 0 + scrollTop || 0) - this.positions.scrollY - this.positions.scrollTop
+    return {scrollLeft: left, scrollTop: top}
+  }
+
+  resetPositions = (group = this.state.dragInfo.activeGroup) => {
+    this.itemsPositions =
+      this.droppables[group]
+        .reduce((acc, _) => acc.concat(_.getPositions(this.getScrollPosition(), this.state.dragInfo)), [])
+        .sort((a, b) => a.y - b.y || a.x - b.x)
+  }
+
+  move = (x, y) => {
+    if (!this.settedDragRef && this.props.setDragRef) {
+      this.props.setDragRef(this.ghost)
+      this.settedDragRef = true
+    }
+    const {scrollTop, scrollLeft} = this.getScrollPosition()
+    this.preventScroll = true
+    let item = this.findGhostIndex(x - this.ghostDimensions.offsetX + (scrollLeft || 0), y - this.ghostDimensions.offsetY + (scrollTop || 0), this.ghostDimensions.width, this.ghostDimensions.height)
+    if (!item) {
+      return
+    }
+    const dragInfo = this.state.dragInfo
+    if (item.index !== dragInfo.activeIndex || item.droppable !== dragInfo.activeDroppable) {
+      this.setState({
+        dragInfo: _.assign(dragInfo, {
+          active: true,
+          activePosition: item,
+          activeIndex: item.index,
+          activeDroppable: item.droppable
+        })
+      })
+    }
+  }
+
+  findGhostIndex = (ghostX1, ghostY1, ghostWidth, ghostHeight) => {
+    const ghostY2 = ghostY1 + ghostHeight
+    const ghostX2 = ghostX1 + ghostWidth
+    const centerInsideGhost = this.itemsPositions.filter(position =>
+      position.y >= ghostY1 &&
+      position.x >= ghostX1 &&
+      position.y <= ghostY2 &&
+      position.x <= ghostX2
+    )
+    const ghostX = ghostX1 + (ghostWidth / 2)
+    const ghostY = ghostY1 + (ghostHeight / 2)
+    const rectanglesIntersection = (a, b) => Math.max(0, Math.min(a.x2, b.x2) - Math.max(a.x1, b.x1)) * Math.max(0, Math.min(a.y2, b.y2) - Math.max(a.y1, b.y1))
+    const closestIndex = centerInsideGhost
+      .map((item) => {
+        const {x, y, width, height} = item
+        const area = width * height
+        const intersectionArea = rectanglesIntersection(
+          //at least 1px wide
+          {
+            x1: x - (Math.max(1, width) / 2),
+            x2: x + (width / 2),
+            y1: y - (Math.max(1, height) / 2),
+            y2: y + (height / 2)
+          },
+          {x1: ghostX1, x2: ghostX2, y1: ghostY1, y2: ghostY2}
+        )
+        const distance = Math.sqrt(Math.pow(x - ghostX, 2) + Math.pow(y - ghostY, 2))
+        return {area: intersectionArea / area, distance}
+      }).reduce((iMax, {area, distance}, i, arr) => area > arr[iMax].area || (area === arr[iMax].area && distance < arr[iMax].distance) ? i : iMax, 0)
+    return centerInsideGhost[closestIndex]
+  }
+
+  stopMoving = (session) => {
+    // Completion runs from mouseup, from a transitionend, or from the 300ms fallback
+    // timer, so it can be reached more than once for the same drag.
+    if (!session || session.ended) { return }
+    session.ended = true
+
+    const {token, ghost, dragInfo} = session
+    const {activeIndex, startIndex, activeGroup, activeDroppable, startDroppable} = dragInfo || {}
+    if (session.endTimeout) {
+      clearTimeout(session.endTimeout)
+      session.endTimeout = null
+    }
+    if (ghost && session.onTransitionEnd) {
+      ghost.removeEventListener('transitionend', session.onTransitionEnd)
+      session.onTransitionEnd = null
+    }
+
+    // Everything below acts on this session's own ghost and dragInfo, so it stays
+    // correct even once a newer drag has replaced this.ghost and this.state.dragInfo.
+    const finish = () => {
+      if (ghost?.parentNode) {
+        reenableWillChange(ghost)
+        ghost.parentNode.removeChild(ghost)
+      }
+      if ((activeIndex !== startIndex && activeIndex !== undefined) || (activeDroppable !== startDroppable && activeDroppable !== undefined)) {
+        const promise = this.props.setItemOrder(startIndex, activeIndex, startDroppable?.props?.id, activeDroppable?.props?.id, activeGroup)
+        if (promise && promise.then) {
+          promise.then(() => this.clearChangedOrder(token), () => this.clearChangedOrder(token))
+        } else {
+          this.clearChangedOrder(token)
+        }
+      } else {
+        this.clearChangedOrder(token)
+      }
+    }
+
+    if (token !== this.dragToken) {
+      // Superseded: a newer drag owns the shared state and the render output. Drop
+      // our ghost and commit our reorder, but leave that drag's state alone.
+      finish()
+      return
+    }
+
+    this.setState({
+      saving: {
+        list: this.props.list,
+        children: this.props.children,
+        dragInfo: _.set('active', false, dragInfo || {})
+      }
+    }, () => {
+      this.preventScroll = false
+      this.props.setDragRef(null)
+      this.settedDragRef = false
+      finish()
+    })
+  }
+
+  clearChangedOrder = (token) => {
+    // Only the drag that still owns the shared state may reset it — a superseded
+    // session clearing dragInfo here would wipe the drag currently in progress.
+    if (token !== undefined && token !== this.dragToken) { return }
+    this.setState({dragInfo: {}, saving: false})
+  }
+
+  dragMove = (e, {pageX, pageY, clientX, clientY}) => {
+    const distance = Math.sqrt((this.positions.originalX - pageX) ** 2 + (this.positions.originalY - pageY) ** 2)
+    if (e.type === 'mousemove') { // get touchstart and touchmove
+      if (!this.passedResistance && !this.props.noResistance && distance < 5) {
+        return
+      }
+    } else {
+      if (!this.pressedEnough) {
+        if (distance > 5) {
+          this.dragEnd()
+        }
+        return
+      }
+      e.preventDefault()
+    }
+    this.passedResistance = true
+
+    this.processAutoScroll(pageX, pageY, clientX, clientY)
+  }
+
+  completeMove = (pageX, pageY) => {
+    const {scrollTop, scrollLeft} = this.getScrollContainer()
+    const scrollYDelta = this.positions.scrollTop - (scrollTop || 0)
+    const scrollXDelta = this.positions.scrollLeft - (scrollLeft || 0)
+    const ghostLeft = pageX - this.positions.offsetLeft
+    const ghostTop = pageY - this.positions.offsetTop
+    const {height: parentHeight, width: parentWidth} = this.getConstraintDimensions()
+    const normalizedLeft = Math.max(Math.min(ghostLeft, parentWidth - this.positions.ghostWidth - this.positions.ghostMarginLeft + scrollXDelta), 0 - this.positions.ghostMarginLeft + scrollXDelta)
+    const normalizedTop = Math.max(Math.min(ghostTop, parentHeight - this.positions.ghostHeight - this.positions.ghostMarginTop + scrollYDelta), 0 - this.positions.ghostMarginTop + scrollYDelta)
+    const x = (normalizedLeft - ghostLeft) + pageX - window.scrollX
+    const y = (normalizedTop - ghostTop) + pageY - window.scrollY
+
+    if (this.ghost) {
+      this.ghost.style.transform = `translate(${x}px,${y}px)` + (this.props.ghostScale ? ' scale(' + this.props.ghostScale + ')' : '')
+      this.ghost.style.display = ''
+    }
+    this.move(pageX - (ghostLeft - normalizedLeft), pageY - (ghostTop - normalizedTop))
+    if (!this.state.dragInfo.active) {
+      this.setState({
+          dragInfo: _.assign(this.state.dragInfo,
+            {
+              activeIndex: this.state.dragInfo.startIndex,
+              activeDroppable: this.state.dragInfo.startDroppable,
+              active: true
+            })
+        }
+      )
+    }
+  }
+
+  autoScrollAnimation
+  autoScrollX
+  autoScrollY
+
+  getFixedParentRect = (node, not) => {
+    if (node) {
+      if (window.getComputedStyle(node)['position'].toLowerCase() === 'fixed' && not !== node)
+        return node.getBoundingClientRect()
+      else
+        return this.getFixedParentRect((node).offsetParent, not)
+    } else {
+      return {}
+    }
+  }
+
+  calculateDistanceFromBorder = (ghost, position, getElementBeforeBorder, scrollContainer, parentRect, keys) => {
+    const fixedUnderMouse = scrollContainer === window ? this.getFixedParentRect(getElementBeforeBorder(+AUTO_SCROLL_BORDER_SIZE), ghost) : {}
+    const min = scrollContainer !== window ? scrollContainer.getBoundingClientRect()[keys.min] :
+                (fixedUnderMouse)[keys.max] || (this.getFixedParentRect(getElementBeforeBorder(-AUTO_SCROLL_BORDER_SIZE), ghost))[keys.max] || 0
+    const max = scrollContainer !== window ? scrollContainer.getBoundingClientRect()[keys.max] :
+                (fixedUnderMouse)[keys.min] || (this.getFixedParentRect(getElementBeforeBorder(+AUTO_SCROLL_BORDER_SIZE), ghost))[keys.min] || window['inner' + keys.size]
+    const distanceMin = position - AUTO_SCROLL_BORDER_SIZE - min
+    const distanceMax = position + AUTO_SCROLL_BORDER_SIZE - max
+
+    const containerMin = scrollContainer === window ? 0 : Math.max(scrollContainer.getBoundingClientRect()[keys.min], 0)
+    const containerMax = scrollContainer === window ? window['inner' + keys.size] : Math.min(scrollContainer.getBoundingClientRect()[keys.max], window['inner' + keys.size])
+    const afterCenter = ((position - containerMin) * 2 / (containerMax - containerMin)) > 1
+    if (distanceMin < 0 && !afterCenter) return distanceMin
+    if (distanceMax > 0) return distanceMax
+    return 0
+  }
+
+  processAutoScroll = (pageX, pageY, clientX, clientY) => {
+    const scrollContainer = this.getScrollContainer()
+    const parentRect = this.getConstraintDimensions()
+    this.autoScrollY = this.calculateDistanceFromBorder(this.ghost, clientY, (diff) => document.elementFromPoint(clientX, clientY + diff), scrollContainer, parentRect, VERTICAL_DIMENSIONS)
+    // this.autoScrollX = this.calculateDistanceFromBorder(clientX, (diff) => document.elementFromPoint(clientX + diff, clientY), scrollContainer, parentRect, HORIZONTAL_DIMENSIONS)
+    this.autoScrollX = 0
+    // noinspection JSSuspiciousNameCombination
+    const keepY = this.autoScrollX === 0 || (this.autoScrollY !== 0 && Math.abs(this.autoScrollY) < Math.abs(this.autoScrollX))
+
+    this.autoScrollY = this.props.scrollOnDrag && keepY ? this.autoScrollY : 0
+    this.autoScrollX = this.props.scrollOnDrag && !keepY ? this.autoScrollX : 0
+
+    if (this.autoScrollX || this.autoScrollY) {
+
+      this.startAutoScroll(pageX, pageY, scrollContainer)
+    } else {
+      if (this.autoScrollAnimation) {
+        this.stopAutoScroll()
+      }
+      this.completeMove(pageX, pageY)
+    }
+  }
+
+  checkLimits = (delta, boundRect, constraintRect, scrollRect, keys) => {
+    if (delta > 0) {
+      if (constraintRect[keys.max] + AUTO_SCROLL_OVERFLOW_BUFFER < scrollRect[keys.max]) {
+        return 0
+      }
+    }
+    if (delta < 0) {
+      if (constraintRect[keys.min] - AUTO_SCROLL_OVERFLOW_BUFFER > scrollRect[keys.min]) {
+        return 0
+      }
+    }
+    return delta
+  }
+
+  startAutoScroll = (pageX, pageY, scrollContainer) => {
+    if (!this.autoScrollAnimation) {
+      this.autoScrollAnimation = window.requestAnimationFrame((timestamp) => {
+          const ghostRect = (this.ghost).getBoundingClientRect()
+          const parentRect = this.getConstraintDimensions()
+          const scrollRect = scrollContainer === window ?
+            {top: 0, bottom: window.innerHeight, left: 0, right: window.innerWidth} :
+                             scrollContainer.getBoundingClientRect()
+          const deltaScrollX = easeInCubic(this.checkLimits(
+            this.autoScrollX < 0 ? Math.max(this.autoScrollX, -AUTO_SCROLL_MAX_VELOCITY) : Math.min(this.autoScrollX, AUTO_SCROLL_MAX_VELOCITY),
+            ghostRect,
+            parentRect,
+            scrollRect,
+            HORIZONTAL_DIMENSIONS
+          ))
+          const deltaScrollY = easeInCubic(this.checkLimits(
+            this.autoScrollY < 0 ? Math.max(this.autoScrollY, -AUTO_SCROLL_MAX_VELOCITY) : Math.min(this.autoScrollY, AUTO_SCROLL_MAX_VELOCITY),
+            ghostRect,
+            parentRect,
+            scrollRect,
+            VERTICAL_DIMENSIONS
+          ))
+
+          const willScroll = deltaScrollX !== 0 || deltaScrollY !== 0
+          if (willScroll) {
+
+            scrollContainer.scroll(
+              (isNaN(scrollContainer.scrollLeft) ? scrollContainer.pageXOffset : scrollContainer.scrollLeft) + deltaScrollX,
+              (isNaN(scrollContainer.scrollTop) ? scrollContainer.pageYOffset : scrollContainer.scrollTop) + deltaScrollY
+            )
+          }
+
+          this.autoScrollAnimation = 0
+          this.completeMove(pageX, pageY)
+          if (willScroll) {
+            this.startAutoScroll(pageX + (scrollContainer === window ? deltaScrollX : 0), pageY + (scrollContainer === window ? deltaScrollY : 0), scrollContainer)
+          }
+        }
+      )
+    } else {
+      this.completeMove(pageX, pageY)
+    }
+  }
+
+  stopAutoScroll = () => {
+    window.cancelAnimationFrame(this.autoScrollAnimation)
+    this.autoScrollAnimation = 0
+  }
+
+  dragEnd = () => {
+    window.removeEventListener('touchmove', this.touchMove)
+    window.removeEventListener('mousemove', this.mouseMove)
+    window.removeEventListener('mouseup', this.dragEnd)
+    window.removeEventListener('touchend', this.dragEnd)
+    window.removeEventListener('visibilitychange', this.dragEnd)
+    window.removeEventListener('blur', this.dragEnd)
+    window.removeEventListener('selectstart', this.disableSelect)
+    this.stopAutoScroll()
+    this.props.setDragRef && this.props.setDragRef(null)
+    clearTimeout(this.holdTouchTimer)
+    // Wired to mouseup, touchend, visibilitychange and blur, so this can fire several
+    // times for one drag. Only the first call owns the session and completes it.
+    const session = this.activeSession
+    if (!session) { return }
+    this.activeSession = null
+    session.dragInfo = this.state.dragInfo
+
+    const ghost = session.ghost
+    const {activeDroppable, activeIndex} = session.dragInfo
+    const finalPosition = activeDroppable && activeDroppable.getPosition(activeIndex, this.getScrollPosition())
+    if (activeDroppable && ghost && finalPosition) {
+      const {marginTop, marginLeft, left, top} = window.getComputedStyle(ghost)
+      const finalLeft = finalPosition.x - (Math.max(1, finalPosition.width) / 2) - parseInt(left) - parseInt(marginLeft)
+      const finalTop = finalPosition.y - (Math.max(1, finalPosition.height) / 2) - parseInt(top) - parseInt(marginTop)
+      ghost.style.transition = `transform 300ms ease-in-out 0ms, opacity 300ms ease-in-out 0ms`
+      const newTransform = `translate(${finalLeft}px,${finalTop}px)`
+      if ((ghost.style.transform||"").replace(/\s/g,'') === newTransform) {
+        this.stopMoving(session)
+      } else {
+        ghost.style.transform = newTransform
+        session.onTransitionEnd = () => this.stopMoving(session)
+        ghost.addEventListener('transitionend', session.onTransitionEnd)
+        session.endTimeout = setTimeout(session.onTransitionEnd, 300)
+      }
+    } else {
+      this.stopMoving(session)
+    }
+  }
+
+  disableSelect(event) {
+    event.preventDefault()
+  }
+
+
+  addDroppable = (el) => {
+    this.droppables[el.props.group] = (this.droppables[el.props.group] || []).concat(el)
+  }
+
+  remoevDroppable = (el) => {
+    this.droppables[el.props.group] = this.droppables[el.props.group].filter(_ => _ !== el)
+  }
+
+  mouseDown = (draggable) => normalizeMouse(this.dragStart(draggable),this.dragEnd)
+  mouseMove = normalizeMouse(this.dragMove,this.dragEnd)
+  touchStart = (draggable) => normalizeTouch(this.dragStart(draggable), this.dragEnd)
+  touchMove = normalizeTouch(this.dragMove, this.dragEnd)
+
+  providerValue = {}
+
+  providerEvents = (draggable) => ({
+    onMouseDown: this.mouseDown(draggable),
+    onTouchStart: this.touchStart(draggable)
+  })
+
+  render() {
+    const {setItemOrder, noResistance, animation, timing, disabled, list, ghostScale, setDragRef, scrollOnDrag, holdTouchTimer, children, ...rest} = this.props
+    const {saving, dragInfo} = this.state
+    this.providerValue = _.assign(
+      this.providerValue,
+      {
+        addDroppable: this.addDroppable,
+        removeDroppable: this.remoevDroppable,
+        dragInfo: saving ? saving.dragInfo : dragInfo,
+        eventHandlers: this.providerEvents
+      }
+    )
+    if (this.scrollContainer) {
+      const scrollContainer = this.getScrollContainer()
+      this.lastScrollTop = (isNaN(scrollContainer['scrollTop']) ? scrollContainer['pageYOffset'] : scrollContainer['scrollTop']) || undefined
+      this.lastScrollLeft = (isNaN(scrollContainer['scrollLeft']) ? scrollContainer['pageXOffset'] : scrollContainer['scrollLeft']) || undefined
+    }
+    return (
+      <Provider value={this.providerValue}>
+        <div {...rest} ref={this.setOffsetParent}>
+          <DroppableContainer animation={animation} timing={timing}  list={saving ? saving.list : list} placeholder={false}>
+            {saving ? saving.children : children}
+          </DroppableContainer>
+        </div>
+      </Provider>
+    )
+  }
+}
+
+
+// type GhostDimensions = { offsetX: number, offsetY: number, width: number, height: number }