Add option for "dead space"

I am using both react-swipeable-views and react-sidebar in a project. There is an issue where swiping open the sidebar also swipes the views. I am not sure what the best solution would be in this case, but I was thinking it would be nice with there was an option for left, right, top, and bottom “dead space” in react-swipeable-views. This way react-sidebar’s touch would occupy the disabled space the two wouldn’t interfere.

I am open for suggestions if there is a better way of going about this. Thanks!

[tuoxiansp]

Met the same problem: react-swipeable-views + react-slider.

Because these two libs all need to ensure keep on swiping/sliding while user’s finger/mouse left target element, so they all used document.addEventListener('touchmove', handler) rather than onTouchMove.

Attemping to stop bubbling between swipeable view and slider will break both of them.

My solution was forking react-slider and modify the add event method with useCapture: true:

addEventListener('touchmove', handler, true) //use capture

This will ensure the slider could receive touch events.

Then create a ‘DeadSpace’ component to stop bubbling events:

const DeadSpace: FC = ({ children }) => {
  const ref = useRef<HTMLDivElement>(null);
  useLayoutEffect(() => {
    const stopBubble = (e) => e.stopPropagation();
    ref.current?.addEventListener("touchmove", stopBubble);

    return () => {
      ref.current?.removeEventListener("touchmove", stopBubble);
    };
  }, []);

  return <div ref={ref}>{children}</div>;
};

And use it to wrap slider like this:

<SwipeableView>
  <DeadSpace>
    <Slider />
  </DeadSpace>
</SwipeableView>

[henryhs97]

Was someone able to figure this out? I’m trying to also make some ‘dead space’ within a SwipeableViews component because I’m adding a MaterialUI slider (and dragging the slider causes the whole view to be swiped instead).

This is what I have:

<Box display="flex" justifyContent="center" alignItems="center" minHeight="15vh" id={'sliderBox'}>
						<Slider
								defaultValue={7}
								valueLabelDisplay="auto"
								step={1}
								marks
								min={1}
								max={10}
						/>
</Box>

A level above it, I have the SwipeableViews, so I want to be able to move the slider without moving the swipeable views. I added this according to @oliviertassinari 's suggestion in componentDidMount:

		document.getElementById('sliderBox').addEventListener('mousemove',function(e){
			// e.preventDefault(); // Cancel the native event
			e.stopPropagation();// Don't bubble/capture the event any further
		});
		document.getElementById('sliderBox').addEventListener('touchend',function(e){
			// e.preventDefault(); // Cancel the native event
			e.stopPropagation();// Don't bubble/capture the event any further
		});

which does disable the swipeable views but it also disables the slider… (of course since it’s not propagating the events to the slider now)

Any ideas?