azuqua/react-dnd-scrollzone

A smooth scrolling container for draggable items

react-dnd-scrollzone's Issues

Scroll window

Hello everyone!

Can somebody please explain if it's possible to scroll window element?
I mean in basic example if I delete .App styles and make list use all width and height lib changes behavior.
Scroll still here, but it's default browser's scroll and I cant control size and strength of scroll zone.

preserve Ref set on virtualized List component?

So im trying to use your component with react-virtualized but i need to keep the ref i set on the List item. is there a sane way to do this?

Does not work with mouse

The scrollzone is currently only activated by touch events; it would be nice if it also responds to mouse events.

support for touch?

I'm this along with https://github.com/yahoo/react-dnd-touch-backend and it doesn't seem to scroll.

Does this actually support touch events?

Lazy loading capabilities

It would be nice to have lazy loading included in this lib, to avoid to have to render all items in the scrollzone.

Mouse backend support

There's also this mouse backend which is not currently supported by this library.

Seems that the only change required to support it would be to add event handlers for mousemove, similar to the existing ones for dragover and touchmove. I tried and it works as expected.

Any insights, other things to be aware of? It would be great to have this backend also supported.

Scrollzone passes invalid props to child tag

  return _react2.default.createElement(Tag, _extends({}, this.props, {
    className: compClass,
    onDragOver: this.handleDragOver,
    ref: 'container'
  }));

Leads to:

Warning: Unknown props tag, buffer on <div> tag. Remove these props from the element. For details, see https://fb.me/react-unknown-prop
in div (created by Scrollzone)

TypeError: Cannot read properties of undefined (reading 'getMonitor')

When I add a withScrolling-element, I start getting errors:

react-dom.development.js:22839 Uncaught TypeError: Cannot read properties of undefined (reading 'getMonitor')
    at ScrollingComponent.componentDidMount (index.js:163:1)
    at commitLayoutEffectOnFiber (react-dom.development.js:23305:1)
    at commitLayoutMountEffects_complete (react-dom.development.js:24688:1)
    at commitLayoutEffects_begin (react-dom.development.js:24674:1)
    at commitLayoutEffects (react-dom.development.js:24612:1)
    at commitRootImpl (react-dom.development.js:26823:1)
    at commitRoot (react-dom.development.js:26682:1)
    at finishConcurrentRender (react-dom.development.js:25981:1)
    at performConcurrentWorkOnRoot (react-dom.development.js:25809:1)
    at workLoop (scheduler.development.js:266:1)
    at flushWork (scheduler.development.js:239:1)
    at MessagePort.performWorkUntilDeadline (scheduler.development.js:533:1)
componentDidMount @ index.js:163
commitLayoutEffectOnFiber @ react-dom.development.js:23305
commitLayoutMountEffects_complete @ react-dom.development.js:24688
commitLayoutEffects_begin @ react-dom.development.js:24674
commitLayoutEffects @ react-dom.development.js:24612
commitRootImpl @ react-dom.development.js:26823
commitRoot @ react-dom.development.js:26682
finishConcurrentRender @ react-dom.development.js:25981
performConcurrentWorkOnRoot @ react-dom.development.js:25809
workLoop @ scheduler.development.js:266
flushWork @ scheduler.development.js:239
performWorkUntilDeadline @ scheduler.development.js:533

react-dom.development.js:22839 Uncaught TypeError: this.clearMonitorSubscription is not a function
    at ScrollingComponent.componentWillUnmount (index.js:172:1)
    at callComponentWillUnmountWithTimer (react-dom.development.js:22852:1)
    at safelyCallComponentWillUnmount (react-dom.development.js:22873:1)
    at commitDeletionEffectsOnFiber (react-dom.development.js:24129:1)
    at recursivelyTraverseDeletionEffects (react-dom.development.js:23989:1)
    at commitDeletionEffectsOnFiber (react-dom.development.js:24170:1)
    ...
    at commitDeletionEffectsOnFiber (react-dom.development.js:24118:1)
componentWillUnmount @ index.js:172
callComponentWillUnmountWithTimer @ react-dom.development.js:22852
...
finishConcurrentRender @ react-dom.development.js:25981
performConcurrentWorkOnRoot @ react-dom.development.js:25809
workLoop @ scheduler.development.js:266
flushWork @ scheduler.development.js:239
performWorkUntilDeadline @ scheduler.development.js:533


2next-dev.js:20 The above error occurred in the <Scrolling(div)> component:

    at ScrollingComponent (webpack-internal:///../../node_modules/react-dnd-scrollzone/lib/index.js:111:7)
    at DndProvider (webpack-internal:///../3-pages/node_modules/react-dnd/dist/cjs/core/DndProvider.js:40:11)
    at Tree
    at div
    at Styled.div

My code is as simple as:

const ScrollingComponent = withScrolling('div')

export default function Tree() {
  return (
    <DndProvider backend={HTML5Backend}>
      <ScrollingComponent>
        <TreeInternal />
      </ScrollingComponent>
    </DndProvider>
  )
}

Versions:

    "react-dnd": "15.1.2",
    "react-dnd-html5-backend": "15.1.2",
    "react-dnd-scrollzone": "^5.0.0",

Any ideas?

Allow Custom Scroll Containers

react-dnd-scrollzone should allow the scroll container to be overridden for more custom implementations, such as using a custome scrollElement with react-virtualized's `WindowScroller.

Looking for help maintaining the library?

Hello! This is a great library but it is not maintained for a long time. Are you looking for help? There are probably many people that will offer you help.

Does this library work on Firefox?

Hi there, I have tried to use this library without success on Firefox. By any chance do you have any working example?

Use higher order component pattern for better composition

I tried to combine react-dnd-scrollzone with react-virtualized to improve performance on a huge list (windowed view where only the visible rows are rendered). With the current wrapping behaviour of react-dnd-scrollzone this wasn't possible (using any custom component with tag=component doesn't work atm), so I modified react-dnd-scrollzone to utilize the higher order component pattern (HOC) - works like a charm, PR coming up if you'd like to go that route

TypeError: Cannot read property 'getMonitor' of undefined

What is this error ? I don't get it..

and this is my code..

import React, { Component } from 'react';
import { DragDropContextProvider } from 'react-dnd';
import HTML5Backend from 'react-dnd-html5-backend';
import withScrolling from 'react-dnd-scrollzone';
import DragItem from './DragItem';
import './App.css';

const ScrollingComponent = withScrolling('div');

const ITEMS = [1,2,3,4,5,6,7,8,9,10];

export default class App extends Component {
  render() {
    return (
      <DragDropContextProvider backend={HTML5Backend}>
        <ScrollingComponent className="App">
          {ITEMS.map(n => (
            <DragItem key={n} label={`Item ${n}`} />
          ))}
        </ScrollingComponent>
      </DragDropContextProvider>
    );
  }
}

yeah exactly, just like in your readme

Browserified version to use with bower

Hi!
Could you please create a browserified version to use with bower in some projects ?

thank you.

Not working on scrollingElement

This works fine on any container in the page that has width/height and overflow scroll, but the obvious case in which the scroll is on the document.scrollingElement, it doesn't. Computationally it should be easier, and for older browsers https://github.com/mathiasbynens/document.scrollingElement can be used to have document.scrollingElement available.

LE: Since there are calculation differences between versions of browsers (i.e. Chrome 59 scrollingElement differs from Chrome 61 calculations) using scrollingElement is done only to get the DOM element, viewPort calculations has been changed to use older more reliable measurements which won't change in the predictable future.

Easing Example does not work with Firefox 31.6.0

I have a user requirement to support scrolling while dragging an item using FireFox 31.6.0 browser. The easing example is what I used to test this but it failed to scroll up when dragging an item. Can you recommend how I can still use this package (if it is even possible) with the required version of FireFox?

dependency optimisation

There are many ways to optimise the dependencies of this package.

1. react-dnd uses lodash "^4.2.0" so including lodash.throttle "^4.0.1" is a duplication of code
2. react-dnd uses hoist-non-react-statics "^2.1.0" while this package requires "^1.2.0", so it's a duplicated version of the same library! Can it be upgraded to 2.x?

Unwanted scroll to top while scrolling (on infinite scroll page)

I've implemented the lib, and when I scroll (without dragging) the page automatically scrolls back to top. It looks like it's related to my infinite scroll (Packery with an async collection), as it seems to happen on the render where the new elements are added. Maybe something the lib does on componentDidMount or componentDidUpdate...

Has anyone run into a similar issue ?

the buffer props looks not used

HI,
for my understanding, more the value of the props buffer is high
more we will trigger the scroll earlier right ?
but if I change this value to an other one like with buffer={500}
the scroll start always in the same position of the draggable element

can you help me ?

thanks for this lib by the way ;)

Vertical scroll with fixed position header

I was able to wrap my entire app in the scrolling container to get the window scrolling to work. The issue I am having is because the header is fixed positioning, when you drag an item to the top of the window, nothing happens. I have tried playing around with the strength, but that doesn't seem to help. It works just fine to try and scroll down and if I remove the fixed positiong of the header it works. Is there a way to get around this? Thank you in advance.

Using native scrolling

This component seems to use its own sub-scroll bars. Is there a way to make it use the whole-window scrolling? I'm just looking for a workaround to not being able to mwheel-scroll in React dnd.

example no working

example no working , can't drag and drop any item

Error after upgrade to 3.0.0

I getting this error after upgrade to 3.0.0

Warning: createScrollingComponent: ref is not a prop. Trying to access it will result in undefined being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://fb.me/react-special-props)

Scrolling the window

Hello,

I would like to use this, but it only supports scrolling a container rather than the whole window. Would this be an easy change to make?

Scrollzone does not scroll up.

I can see that the vertical strength/scaleY is getting set to a negative float in updateScrolling (line 163 in index.js), but the page does not respect it or scroll up. Also, what should the overflow be for the parent component?

Doesn't work with react-dnd 4+

react-dnd-scrollzone doesn't work with the latest version of react-dnd.

I suspect it is due to the changes in the react context api ( i.e. #34 ) and that react-dnd doesn't expose a way to see if the the drag is occurring ( react-dnd/react-dnd#583 )

New React Context Api compatibility ?

Hi there !

From what i could read/test, I believe this library is not compliant with new React Context API.

If it is, could you please update the documentation ?

Thanks a lot.