Swipe only on certain start position

[yannicsmeets]

Hi,

First of all, great library!

I would like to trigger something only if a swipe was done that started on a certain location. Is this currently possible in some way?

I was thinking it would be nice to have startX and startY arguments (similar to deltaX and deltaY) in the onSwiped functions. Would that be a good idea?

Cheers,
Yannic

[hartzis]

OOOooo, i think this is an interesting challenge!

This isn't currently possible with react-swipeable exactly how you are describing it.

But I do think a solution can be devised.

For example if you want to track that a user started swiping on the right side of something. You could put a <Swipeable /> component on the right side over the top of what you are trying to track?

Does this make sense? you'll probably have to do something crazy with css, <Swipeable style={{ float: 'right', position: 'relative', width: '33%' }}/>, /shrug?

[yannicsmeets]

Ah ofcourse, that makes so much sense! I made the entire page swipeable instead of the section I wanted to. Fixed it and it works properly now. Thanks so much for the help!

[hartzis]

rock on!

If this happens to be an open source project your working on could you link to the usage? I'd love to possibly try to add something like this to examples.

[djeeg]

Hi, your library looks interesting, I'm trying to use it to display a side menu.

Digging into the code, I see what looks like the startX/startY in an internal 'swipeable' variable (not state)

Could those values be passed as an argument into the swipe methods?
(Of course using destructing would be a lot easier, which you have mentioned in another thread)

My current workaround is to do something like this, seems to work in a few trials.
Is there something that could go wrong with this approach?

constructor(props, context) {
	super(props, context);
	this.swiping = this.swiping.bind(this);
	this.swiped = this.swiped.bind(this);
	this.state = {swipestartX: null}
}

//copied from https://github.com/dogfessional/react-swipeable/blob/master/src/Swipeable.js#L15-L20
getMovingPosition(e) {
	return 'changedTouches' in e
		? { x: e.changedTouches[0].clientX, y: e.changedTouches[0].clientY }
		: { x: e.clientX, y: e.clientY };
}

swiping(e, deltaX, deltaY, absX, absY, velocity) {
	if(this.state.swipestartX === null) {
		const { x, y } = this.getMovingPosition(e);
		this.setState({swipestartX: x});
	}
}

swiped(e, x, y, isFlick, velocity) {
	if(x < 100 && this.state.swipestartX < 100) {
		console.log("OPEN MENU");
	}
	this.setState({swipestartX: null});
}

[hartzis]

@djeeg I'd like to absolutely have all the data returned in an object you could destructure, thinking v5 😄

Why do you need to know the start position exactly? If you are setting the <Swipeable> component around the area you want to track swipes, you can limit where the 'start' is. Does that make sense?

so then you only need to know what you are doing above with the deltaX from swiped and don't need to know the start.

I'd like to make a codesandbox to demonstrate "menu swipe-ins", it is on my list. #90

also we removed tracking <Swipeable> state from this.state because when you call setState it triggers a rerender and storing internal state on this.state was not needed to track onSwipe(s/ed), #58