Page skip and cancelled animation on page navigation multiple press about react-flip-page HOT 7 CLOSED

Hello @mcarreon, you can use the onPageChange callback to re-enable your button. On click, use a state entry that holds either the button can be clicked (e.g. canClick), set it to false, and assign your disabled prop on button accordingly (!canClick). On the onPageChange callback, re-enable the button by setting canClick state member to true.

from react-flip-page.

from react-flip-page.

@mcarreon Just put it in an actual button tag, it's better for UX anyway.

But I agree there should be a state property inside the FlipPage component that says if you can move or not. Going to work on that.

from react-flip-page.

I made a fix for this in v1.2.2. @mcarreon Care to check out?

from react-flip-page.

I haven't converted them to buttons yet, will do that soon, thanks for the suggestion.

I tried it out, the issue still seems to happen. Is there a way to block the page index changing on method spam? The pages are double incrementing on double click

I think the animation bug might be due to these lines in index.jsx, as the animation seems to cancel on a second method press.

    const gotoPreviousPage = (e) => {
      this.stopMoving(e);
      this.gotoPreviousPage();
    };
    const gotoNextPage = (e) => {
      this.stopMoving(e);
      this.gotoNextPage();
    };

I'll be working on it, I'll let you know if I figure out anything

from react-flip-page.

So, has the behavior actually changed? Is there any evolution from what was done before?

The index shouldn't even change before the previous animation has completed.

from react-flip-page.

Visually the behavior is the same as before, I did see the added canAnimate state toggle from true to false.
It seemed like the index changed after the animation completed, but the spammed increments still went through

from react-flip-page.