Comments (7)
@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.
Related Issues (20)
- How can I hide the page shadowing? HOT 6
- Issue: Input fields and drop-downs do not work HOT 1
- Could not find declaration for Module 'react-flip-page' HOT 2
- Error when adding responsive attribute HOT 2
- Error using ref in Functional Component TypeError: flipPage.gotoNextPage is not a function HOT 2
- An in-range update of babel7 is breaking the build 🚨 HOT 11
- Update the value of startAt after the first render HOT 1
- Using gotoNextPage after flip half page correctly but the other half flips immediately without notice HOT 3
- Security vulnerability for uglifyjs-webpack-plugin/serialize-javascript HOT 9
- Using on Mobile devices gives unexpected black background HOT 2
- flipOnTouch and goto methods - uncutPages does not work, half the animation does not work HOT 3
- Background Color Split in two for Span when it sits Between Pages HOT 2
- Next JS - ReferenceError: window is not defined HOT 1
- Pages blank until after flipped HOT 10
- cannot use input element HOT 1
- Position of "middle of page" HOT 1
- Fragments HOT 4
- TypeError: Cannot set property 'FlipPage' of undefined HOT 1
- Is this supporting on react-native also ? HOT 2
- gotoPage(page) its not reflecting animation effect
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-flip-page.