Componentize Spindicator and add to SectionListExample

Reviewed By: yungsters

Differential Revision: D4688309

fbshipit-source-id: 4e1c70039050170cc0bc2eca0bba0fd077c692d2
This commit is contained in:
Spencer Ahrens 2017-03-21 22:19:01 -07:00 committed by Facebook Github Bot
parent edd5624fde
commit 7861fdd974
3 changed files with 41 additions and 16 deletions

View File

@ -42,6 +42,7 @@ const {
ItemComponent,
PlainInput,
SeparatorComponent,
Spindicator,
genItemData,
getItemLayout,
pressItem,
@ -120,15 +121,7 @@ class FlatListExample extends React.PureComponent {
{renderSmallSwitchOption(this, 'fixedHeight')}
{renderSmallSwitchOption(this, 'logViewable')}
{renderSmallSwitchOption(this, 'debug')}
<Animated.View style={[styles.spindicator, {
transform: [
{rotate: this._scrollPos.interpolate({
inputRange: [0, 5000],
outputRange: ['0deg', '360deg'],
extrapolate: 'extend',
})}
]
}]} />
<Spindicator value={this._scrollPos} />
</View>
</View>
<SeparatorComponent />
@ -222,12 +215,6 @@ const styles = StyleSheet.create({
searchRow: {
paddingHorizontal: 10,
},
spindicator: {
marginLeft: 'auto',
width: 2,
height: 16,
backgroundColor: 'darkgray',
},
});
module.exports = FlatListExample;

View File

@ -26,6 +26,7 @@
const React = require('react');
const ReactNative = require('react-native');
const {
Animated,
Image,
Platform,
TouchableHighlight,
@ -129,6 +130,22 @@ class SeparatorComponent extends React.PureComponent {
}
}
class Spindicator extends React.PureComponent {
render() {
return (
<Animated.View style={[styles.spindicator, {
transform: [
{rotate: this.props.value.interpolate({
inputRange: [0, 5000],
outputRange: ['0deg', '360deg'],
extrapolate: 'extend',
})}
]
}]} />
);
}
}
const THUMB_URLS = [
require('./Thumbnails/like.png'),
require('./Thumbnails/dislike.png'),
@ -266,6 +283,13 @@ const styles = StyleSheet.create({
width: 64,
height: 64,
},
spindicator: {
marginLeft: 'auto',
marginTop: 8,
width: 2,
height: 16,
backgroundColor: 'darkgray',
},
stackedText: {
padding: 4,
fontSize: 18,
@ -281,6 +305,7 @@ module.exports = {
ItemComponent,
PlainInput,
SeparatorComponent,
Spindicator,
genItemData,
getItemLayout,
pressItem,

View File

@ -26,6 +26,7 @@
const React = require('react');
const ReactNative = require('react-native');
const {
Animated,
SectionList,
StyleSheet,
Text,
@ -42,12 +43,15 @@ const {
ItemComponent,
PlainInput,
SeparatorComponent,
Spindicator,
genItemData,
pressItem,
renderSmallSwitchOption,
renderStackedItem,
} = require('./ListExampleShared');
const AnimatedSectionList = Animated.createAnimatedComponent(SectionList);
const VIEWABILITY_CONFIG = {
minimumViewTime: 3000,
viewAreaCoveragePercentThreshold: 100,
@ -79,6 +83,13 @@ class SectionListExample extends React.PureComponent {
logViewable: false,
virtualized: true,
};
_scrollPos = new Animated.Value(0);
_scrollSinkY = Animated.event(
[{nativeEvent: { contentOffset: { y: this._scrollPos } }}],
{useNativeDriver: true},
);
render() {
const filterRegex = new RegExp(String(this.state.filterText), 'i');
const filter = (item) => (
@ -100,10 +111,11 @@ class SectionListExample extends React.PureComponent {
<View style={styles.optionSection}>
{renderSmallSwitchOption(this, 'virtualized')}
{renderSmallSwitchOption(this, 'logViewable')}
<Spindicator value={this._scrollPos} />
</View>
</View>
<SeparatorComponent />
<SectionList
<AnimatedSectionList
ListHeaderComponent={HeaderComponent}
ListFooterComponent={FooterComponent}
SectionSeparatorComponent={() =>
@ -114,6 +126,7 @@ class SectionListExample extends React.PureComponent {
}
enableVirtualization={this.state.virtualized}
onRefresh={() => alert('onRefresh: nothing to refresh :P')}
onScroll={this._scrollSinkY}
onViewableItemsChanged={this._onViewableItemsChanged}
refreshing={false}
renderItem={this._renderItemComponent}