Skip to content

Commit

Permalink
ensure onMomentumScrollEnd synchronous update this.index
Browse files Browse the repository at this point in the history 
Note: `this.setState` is async, so I call the `onMomentumScrollEnd` in
setTimeout to ensure synchronous update `this.index`.
  • Loading branch information
yuji committed May 2, 2015
1 parent fb60a22 commit 890c0ce
Show file tree
Hide file tree
Showing 4 changed files with 43 additions and 23 deletions.
25 changes: 16 additions & 9 deletions dist/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -219,20 +219,24 @@ exports['default'] = _React$StyleSheet$Text$View$ScrollView$TouchableOpacity2['d
* @param {object} e native event
*/
onScrollBegin: function onScrollBegin(e) {
var _this2 = this;

// update scroll state
this.setState({
isScrolling: true
});

this.props.onScrollBeginDrag && this.props.onScrollBeginDrag.call(this, e);
this.setTimeout(function () {
_this2.props.onScrollBeginDrag && _this2.props.onScrollBeginDrag.call(_this2, e);
});
},

/**
* Scroll end handle
* @param {object} e native event
*/
onScrollEnd: function onScrollEnd(e) {
var _this2 = this;
var _this3 = this;

// update scroll state
this.setState({
Expand All @@ -241,12 +245,14 @@ exports['default'] = _React$StyleSheet$Text$View$ScrollView$TouchableOpacity2['d

this.updateIndex(e.nativeEvent.contentOffset, this.state.dir);

// Note: `this.setState` is async, so I call the `onMomentumScrollEnd`
// in setTimeout to ensure synchronous update `index`
this.setTimeout(function () {
_this2.autoplay();
});
_this3.autoplay();

// if `onMomentumScrollEnd` registered will be called here
this.props.onMomentumScrollEnd && this.props.onMomentumScrollEnd.call(this, e);
// if `onMomentumScrollEnd` registered will be called here
_this3.props.onMomentumScrollEnd && _this3.props.onMomentumScrollEnd.call(_this3, e);
});
},

/**
Expand All @@ -267,6 +273,7 @@ exports['default'] = _React$StyleSheet$Text$View$ScrollView$TouchableOpacity2['d
} // Note: if touch very very quickly and continuous,
// the variation of `index` more than 1.
index = index + diff / step;

if (this.props.loop) {
if (index <= -1) {
index = state.total - 1;
Expand Down Expand Up @@ -351,7 +358,7 @@ exports['default'] = _React$StyleSheet$Text$View$ScrollView$TouchableOpacity2['d
},

renderButtons: function renderButtons() {
var _this3 = this;
var _this4 = this;

var nextButton = this.props.nextButton || _React$StyleSheet$Text$View$ScrollView$TouchableOpacity2['default'].createElement(
_React$StyleSheet$Text$View$ScrollView$TouchableOpacity.Text,
Expand All @@ -371,7 +378,7 @@ exports['default'] = _React$StyleSheet$Text$View$ScrollView$TouchableOpacity2['d
_React$StyleSheet$Text$View$ScrollView$TouchableOpacity2['default'].createElement(
_React$StyleSheet$Text$View$ScrollView$TouchableOpacity.TouchableOpacity,
{ onPress: function () {
return !(!_this3.props.loop && _this3.state.index == 0) && _this3.scrollTo.call(_this3, -1);
return !(!_this4.props.loop && _this4.state.index == 0) && _this4.scrollTo.call(_this4, -1);
} },
_React$StyleSheet$Text$View$ScrollView$TouchableOpacity2['default'].createElement(
_React$StyleSheet$Text$View$ScrollView$TouchableOpacity.View,
Expand All @@ -382,7 +389,7 @@ exports['default'] = _React$StyleSheet$Text$View$ScrollView$TouchableOpacity2['d
_React$StyleSheet$Text$View$ScrollView$TouchableOpacity2['default'].createElement(
_React$StyleSheet$Text$View$ScrollView$TouchableOpacity.TouchableOpacity,
{ onPress: function () {
return !(!_this3.props.loop && _this3.state.index == _this3.state.total - 1) && _this3.scrollTo.call(_this3, 1);
return !(!_this4.props.loop && _this4.state.index == _this4.state.total - 1) && _this4.scrollTo.call(_this4, 1);
} },
_React$StyleSheet$Text$View$ScrollView$TouchableOpacity2['default'].createElement(
_React$StyleSheet$Text$View$ScrollView$TouchableOpacity.View,
Expand Down
25 changes: 16 additions & 9 deletions examples/examples/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -219,20 +219,24 @@ exports['default'] = _React$StyleSheet$Text$View$ScrollView$TouchableOpacity2['d
* @param {object} e native event
*/
onScrollBegin: function onScrollBegin(e) {
var _this2 = this;

// update scroll state
this.setState({
isScrolling: true
});

this.props.onScrollBeginDrag && this.props.onScrollBeginDrag.call(this, e);
this.setTimeout(function () {
_this2.props.onScrollBeginDrag && _this2.props.onScrollBeginDrag.call(_this2, e);
});
},

/**
* Scroll end handle
* @param {object} e native event
*/
onScrollEnd: function onScrollEnd(e) {
var _this2 = this;
var _this3 = this;

// update scroll state
this.setState({
Expand All @@ -241,12 +245,14 @@ exports['default'] = _React$StyleSheet$Text$View$ScrollView$TouchableOpacity2['d

this.updateIndex(e.nativeEvent.contentOffset, this.state.dir);

// Note: `this.setState` is async, so I call the `onMomentumScrollEnd`
// in setTimeout to ensure synchronous update `index`
this.setTimeout(function () {
_this2.autoplay();
});
_this3.autoplay();

// if `onMomentumScrollEnd` registered will be called here
this.props.onMomentumScrollEnd && this.props.onMomentumScrollEnd.call(this, e);
// if `onMomentumScrollEnd` registered will be called here
_this3.props.onMomentumScrollEnd && _this3.props.onMomentumScrollEnd.call(_this3, e);
});
},

/**
Expand All @@ -267,6 +273,7 @@ exports['default'] = _React$StyleSheet$Text$View$ScrollView$TouchableOpacity2['d
} // Note: if touch very very quickly and continuous,
// the variation of `index` more than 1.
index = index + diff / step;

if (this.props.loop) {
if (index <= -1) {
index = state.total - 1;
Expand Down Expand Up @@ -351,7 +358,7 @@ exports['default'] = _React$StyleSheet$Text$View$ScrollView$TouchableOpacity2['d
},

renderButtons: function renderButtons() {
var _this3 = this;
var _this4 = this;

var nextButton = this.props.nextButton || _React$StyleSheet$Text$View$ScrollView$TouchableOpacity2['default'].createElement(
_React$StyleSheet$Text$View$ScrollView$TouchableOpacity.Text,
Expand All @@ -371,7 +378,7 @@ exports['default'] = _React$StyleSheet$Text$View$ScrollView$TouchableOpacity2['d
_React$StyleSheet$Text$View$ScrollView$TouchableOpacity2['default'].createElement(
_React$StyleSheet$Text$View$ScrollView$TouchableOpacity.TouchableOpacity,
{ onPress: function () {
return !(!_this3.props.loop && _this3.state.index == 0) && _this3.scrollTo.call(_this3, -1);
return !(!_this4.props.loop && _this4.state.index == 0) && _this4.scrollTo.call(_this4, -1);
} },
_React$StyleSheet$Text$View$ScrollView$TouchableOpacity2['default'].createElement(
_React$StyleSheet$Text$View$ScrollView$TouchableOpacity.View,
Expand All @@ -382,7 +389,7 @@ exports['default'] = _React$StyleSheet$Text$View$ScrollView$TouchableOpacity2['d
_React$StyleSheet$Text$View$ScrollView$TouchableOpacity2['default'].createElement(
_React$StyleSheet$Text$View$ScrollView$TouchableOpacity.TouchableOpacity,
{ onPress: function () {
return !(!_this3.props.loop && _this3.state.index == _this3.state.total - 1) && _this3.scrollTo.call(_this3, 1);
return !(!_this4.props.loop && _this4.state.index == _this4.state.total - 1) && _this4.scrollTo.call(_this4, 1);
} },
_React$StyleSheet$Text$View$ScrollView$TouchableOpacity2['default'].createElement(
_React$StyleSheet$Text$View$ScrollView$TouchableOpacity.View,
Expand Down
3 changes: 2 additions & 1 deletion examples/examples/swiper.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -60,11 +60,12 @@ var swiper = React.createClass({
</Swiper>

<Swiper style={styles.wrapper} height={240}
onMomentumScrollEnd={function(){console.log('this.state.index:', this.state.index)}}
dot={<View style={{backgroundColor:'rgba(0,0,0,.2)', width: 5, height: 5,borderRadius: 4, marginLeft: 3, marginRight: 3, marginTop: 3, marginBottom: 3,}} />}
activeDot={<View style={{backgroundColor: '#000', width: 8, height: 8, borderRadius: 4, marginLeft: 3, marginRight: 3, marginTop: 3, marginBottom: 3,}} />}
paginationStyle={{
bottom: -23, left: null, right: 10,
}} loop={false}>
}} loop={true}>
<View style={styles.slide} title={<Text numberOfLines={1}>Aussie tourist dies at Bali hotel</Text>}>
<Image style={styles.image} source={{uri: 'http://c.hiphotos.baidu.com/image/w%3D310/sign=0dff10a81c30e924cfa49a307c096e66/7acb0a46f21fbe096194ceb468600c338644ad43.jpg'}} />
</View>
Expand Down
13 changes: 9 additions & 4 deletions src/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -226,7 +226,9 @@ export default React.createClass({
isScrolling: true
})

this.props.onScrollBeginDrag && this.props.onScrollBeginDrag.call(this, e)
this.setTimeout(() => {
this.props.onScrollBeginDrag && this.props.onScrollBeginDrag.call(this, e)
})
},

/**
Expand All @@ -242,12 +244,14 @@ export default React.createClass({

this.updateIndex(e.nativeEvent.contentOffset, this.state.dir)

// Note: `this.setState` is async, so I call the `onMomentumScrollEnd`
// in setTimeout to ensure synchronous update `index`
this.setTimeout(() => {
this.autoplay()
})

// if `onMomentumScrollEnd` registered will be called here
this.props.onMomentumScrollEnd && this.props.onMomentumScrollEnd.call(this, e)
// if `onMomentumScrollEnd` registered will be called here
this.props.onMomentumScrollEnd && this.props.onMomentumScrollEnd.call(this, e)
})
},

/**
Expand All @@ -268,6 +272,7 @@ export default React.createClass({
// Note: if touch very very quickly and continuous,
// the variation of `index` more than 1.
index = index + diff / step

if(this.props.loop) {
if(index <= -1) {
index = state.total - 1
Expand Down

0 comments on commit 890c0ce

Please sign in to comment.