|
@@ -1,13 +1,16 @@
|
1
|
1
|
// @flow
|
2
|
2
|
|
3
|
3
|
import * as React from 'react';
|
4
|
|
-import {FlatList, Image, Platform, ScrollView, View} from "react-native";
|
|
4
|
+import {Animated, FlatList, Image, Platform, ScrollView, View} from "react-native";
|
5
|
5
|
import i18n from "i18n-js";
|
6
|
6
|
import CustomModal from "../../components/Custom/CustomModal";
|
7
|
7
|
import {RadioButton, Searchbar, Subheading, Text, Title, withTheme} from "react-native-paper";
|
8
|
8
|
import {stringMatchQuery} from "../../utils/Search";
|
9
|
9
|
import ProximoListItem from "../../components/Lists/ProximoListItem";
|
10
|
10
|
import MaterialHeaderButtons, {Item} from "../../components/Custom/HeaderButton";
|
|
11
|
+import {withCollapsible} from "../../utils/withCollapsible";
|
|
12
|
+
|
|
13
|
+const AnimatedFlatList = Animated.createAnimatedComponent(FlatList);
|
11
|
14
|
|
12
|
15
|
function sortPrice(a, b) {
|
13
|
16
|
return a.price - b.price;
|
|
@@ -39,6 +42,7 @@ type Props = {
|
39
|
42
|
navigation: Object,
|
40
|
43
|
route: Object,
|
41
|
44
|
theme: Object,
|
|
45
|
+ collapsibleStack: Object,
|
42
|
46
|
}
|
43
|
47
|
|
44
|
48
|
type State = {
|
|
@@ -322,7 +326,9 @@ class ProximoListScreen extends React.Component<Props, State> {
|
322
|
326
|
|
323
|
327
|
itemLayout = (data, index) => ({length: LIST_ITEM_HEIGHT, offset: LIST_ITEM_HEIGHT * index, index});
|
324
|
328
|
|
|
329
|
+
|
325
|
330
|
render() {
|
|
331
|
+ const {containerPaddingTop, scrollIndicatorInsetTop, onScroll} = this.props.collapsibleStack;
|
326
|
332
|
return (
|
327
|
333
|
<View style={{
|
328
|
334
|
height: '100%'
|
|
@@ -331,7 +337,7 @@ class ProximoListScreen extends React.Component<Props, State> {
|
331
|
337
|
{this.state.modalCurrentDisplayItem}
|
332
|
338
|
</CustomModal>
|
333
|
339
|
{/*$FlowFixMe*/}
|
334
|
|
- <FlatList
|
|
340
|
+ <AnimatedFlatList
|
335
|
341
|
data={this.listData}
|
336
|
342
|
extraData={this.state.currentSearchString + this.state.currentSortMode}
|
337
|
343
|
keyExtractor={this.keyExtractor}
|
|
@@ -340,10 +346,14 @@ class ProximoListScreen extends React.Component<Props, State> {
|
340
|
346
|
removeClippedSubviews={true}
|
341
|
347
|
getItemLayout={this.itemLayout}
|
342
|
348
|
initialNumToRender={10}
|
|
349
|
+ // Animations
|
|
350
|
+ onScroll={onScroll}
|
|
351
|
+ contentContainerStyle={{paddingTop: containerPaddingTop}}
|
|
352
|
+ scrollIndicatorInsets={{top: scrollIndicatorInsetTop}}
|
343
|
353
|
/>
|
344
|
354
|
</View>
|
345
|
355
|
);
|
346
|
356
|
}
|
347
|
357
|
}
|
348
|
358
|
|
349
|
|
-export default withTheme(ProximoListScreen);
|
|
359
|
+export default withCollapsible(withTheme(ProximoListScreen));
|