`flipOnTouch` Buttons do not work + Errors on swipe animations about react-flip-page HOT 7 CLOSED

@darenju as of version 1.5.3 I can confirm all issues have been resolved, many many thanks! Please feel free to close the issue.

from react-flip-page.

Hi,

Can you please provide the code you’re using to render? Also, please upgrade to 1.4.0, there were a few changes that might impact this issue.

If I understand correctly, the flipOnTouch buttons do not work? The examples page seem to be broken as well, I will investigate on this issue.

Edit: I found the issue for the flipOnTouch buttons not working, I am fixing it. I need more info on your second issue though.

from react-flip-page.

@yoavgurevich, the issue on flipOnTouch buttons has been resolved, and the fix is available under [email protected], as well as the swipeImmune feature.

from react-flip-page.

@darenju Thank you and sorry for the delay. The buttons are working perfectly as of the latest version but the error stacks above still occur intermittently. Here is the code I am currently using with flip-page:

export default class ArticleFlipper extends Component {
    constructor(props) {
        super(props);
        this.state = {
            currentPage: 0
        }

        this.handlePageChange.bind(this);
    }

    handlePageChange(idx) {
        this.setState({currentPage: idx});
        if (this.props.resolveBg) {
            this.props.resolveBg('articleFlipper', idx);
        }
    }

    render() {
        if (this.props.resolveBg) {
            this.props.resolveBg('articleFlipper', this.state.currentPage);
        }

        return (
            <div className='container' ref={this.props.refsList.articleFlipper}>
                <FlipPage
                    orientation='horizontal'
                    className='flipContainer'
                    flipOnTouch
                    onPageChange={(idx) => this.handlePageChange(idx)}
                    pageBackground='transparent'
                    perspective='40em'
                    responsive>
                    <SubComponentA
                        currentPage={this.state.currentPage}
                        refsList={this.props.refsList} />
                    <SubComponentB
                        currentPage={this.state.currentPage}
                        refsList={this.props.refsList} />
                    <SubComponentC
                        currentPage={this.state.currentPage}
                        refsList={this.props.refsList} />
                    <SubComponentD
                        currentPage={this.state.currentPage}
                        refsList={this.props.refsList} />
                </FlipPage>
            </div>
        );
    }
}

The subcomponents simply return article tags and some conditionally rendered html content. The resolveBg function takes strings or the current page number (optional) and maps them to an array of background colors to transition to as the focus changes between components. I also have a window event listener that triggers this function on scroll. Relatively straightforward IMO, but let me know if you would like to see those as well.

from react-flip-page.

This might probably not be related to anything you wrote in the component.

However I don’t quite see where the issue could come from in the FlipPage component… do you have any more specific action to do to show those error stacks? What you could do is download the source code of this project and use the src/index.jsx as import for FlipPage component. If the issue is react-flip-page-related, we would have a more convenient error log.

Thank you.

from react-flip-page.

Well, the cannot read property 0 of undefined does trace back to this function in the source code:

Could this be related to a build dependency or browser compatibility issue?

from react-flip-page.

I think it is the second issue. It’s weird, I thought pageX/Y were supposed to work in any browser. Which version of Chrome are you using? I will add more checks on this part.

Edit: I have published 1.5.3, would you mind testing it out?

from react-flip-page.