Componentize Spindicator and add to SectionListExample
Reviewed By: yungsters Differential Revision: D4688309 fbshipit-source-id: 4e1c70039050170cc0bc2eca0bba0fd077c692d2
This commit is contained in:
parent
edd5624fde
commit
7861fdd974
|
@ -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;
|
||||
|
|
|
@ -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,
|
||||
|
|
|
@ -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}
|
||||
|
|
Loading…
Reference in New Issue