Page skip and cancelled animation on page navigation multiple press

[mcarreon]

Background

I have gotoNext() and gotoPrevious() as onClick events for buttons.

Issue

When either button is pressed multiple times before the animation completes on a unique page, the page index skips in the respective direction.

Effects

• Page index skips
• When moving backwards or forward, if clicked enough to reach past the end of the index, it loops back to the beginning.
  * This occurs even when looping is disabled
• If the buttons are spamclicked the animation bugs out

Possible solution

If this is cause by the events being called multiple times before they can process, is there a way to disable further click events until completion of the animation after the function is called?

[darenju]

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.

[mcarreon]

Is there any way to do it without using disabled? I'm using a custom icon component that doesn't recognize the disabled property

…

On Mon, Oct 29, 2018, 9:48 AM Julien Fradin ***@***.***> wrote: Hello @mcarreon <https://github.com/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. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#77 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AMuQ-Z_JcDIGMe3dIgw6HHPJClAacoJzks5upzF3gaJpZM4X-PFB> .

[darenju]

@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.

[darenju]

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

[mcarreon]

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

[darenju]

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.

[mcarreon]

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