parent
f70a289cdf
commit
f12029eae9
4 changed files with 13 additions and 40 deletions
|
@ -52,7 +52,6 @@
|
||||||
"react-native-safe-area-context": "0.7.3",
|
"react-native-safe-area-context": "0.7.3",
|
||||||
"react-native-screens": "~2.2.0",
|
"react-native-screens": "~2.2.0",
|
||||||
"react-native-webview": "8.1.1",
|
"react-native-webview": "8.1.1",
|
||||||
"react-navigation-collapsible": "^5.4.0",
|
|
||||||
"react-navigation-header-buttons": "^3.0.5"
|
"react-navigation-header-buttons": "^3.0.5"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
|
|
|
@ -13,12 +13,12 @@ import ProximoAboutScreen from "../screens/Proximo/ProximoAboutScreen";
|
||||||
import PlanexScreen from '../screens/Websites/PlanexScreen';
|
import PlanexScreen from '../screens/Websites/PlanexScreen';
|
||||||
import {MaterialCommunityIcons} from "@expo/vector-icons";
|
import {MaterialCommunityIcons} from "@expo/vector-icons";
|
||||||
import AsyncStorageManager from "../managers/AsyncStorageManager";
|
import AsyncStorageManager from "../managers/AsyncStorageManager";
|
||||||
import {useTheme, withTheme} from 'react-native-paper';
|
import {withTheme} from 'react-native-paper';
|
||||||
import i18n from "i18n-js";
|
import i18n from "i18n-js";
|
||||||
import ClubDisplayScreen from "../screens/Amicale/Clubs/ClubDisplayScreen";
|
import ClubDisplayScreen from "../screens/Amicale/Clubs/ClubDisplayScreen";
|
||||||
import ScannerScreen from "../screens/ScannerScreen";
|
import ScannerScreen from "../screens/ScannerScreen";
|
||||||
import MaterialHeaderButtons, {Item} from "../components/Custom/HeaderButton";
|
import MaterialHeaderButtons, {Item} from "../components/Custom/HeaderButton";
|
||||||
import {createCollapsibleStack} from 'react-navigation-collapsible';
|
|
||||||
|
|
||||||
const TAB_ICONS = {
|
const TAB_ICONS = {
|
||||||
home: 'triangle',
|
home: 'triangle',
|
||||||
|
@ -44,9 +44,7 @@ function getDrawerButton(navigation: Object) {
|
||||||
|
|
||||||
const ProximoStack = createStackNavigator();
|
const ProximoStack = createStackNavigator();
|
||||||
|
|
||||||
function ProximoStackComponent(props: Object) {
|
function ProximoStackComponent() {
|
||||||
|
|
||||||
const {colors} = useTheme();
|
|
||||||
return (
|
return (
|
||||||
<ProximoStack.Navigator
|
<ProximoStack.Navigator
|
||||||
initialRouteName="index"
|
initialRouteName="index"
|
||||||
|
@ -64,19 +62,13 @@ function ProximoStackComponent(props: Object) {
|
||||||
}}
|
}}
|
||||||
component={ProximoMainScreen}
|
component={ProximoMainScreen}
|
||||||
/>
|
/>
|
||||||
{createCollapsibleStack(
|
<ProximoStack.Screen
|
||||||
<ProximoStack.Screen
|
name="proximo-list"
|
||||||
name="proximo-list"
|
options={{
|
||||||
options={{
|
title: i18n.t('screens.proximoArticles')
|
||||||
title: i18n.t('screens.proximoArticles')
|
}}
|
||||||
}}
|
component={ProximoListScreen}
|
||||||
component={ProximoListScreen}
|
/>
|
||||||
/>,
|
|
||||||
{
|
|
||||||
collapsedColor: colors.surface,
|
|
||||||
useNativeDriver: true /* Optional, default: true */,
|
|
||||||
}
|
|
||||||
)}
|
|
||||||
<ProximoStack.Screen
|
<ProximoStack.Screen
|
||||||
name="proximo-about"
|
name="proximo-about"
|
||||||
component={ProximoAboutScreen}
|
component={ProximoAboutScreen}
|
||||||
|
|
|
@ -1,16 +1,13 @@
|
||||||
// @flow
|
// @flow
|
||||||
|
|
||||||
import * as React from 'react';
|
import * as React from 'react';
|
||||||
import {Animated, FlatList, Image, Platform, ScrollView, View} from "react-native";
|
import {FlatList, Image, Platform, ScrollView, View} from "react-native";
|
||||||
import i18n from "i18n-js";
|
import i18n from "i18n-js";
|
||||||
import CustomModal from "../../components/Custom/CustomModal";
|
import CustomModal from "../../components/Custom/CustomModal";
|
||||||
import {RadioButton, Searchbar, Subheading, Text, Title, withTheme} from "react-native-paper";
|
import {RadioButton, Searchbar, Subheading, Text, Title, withTheme} from "react-native-paper";
|
||||||
import {stringMatchQuery} from "../../utils/Search";
|
import {stringMatchQuery} from "../../utils/Search";
|
||||||
import ProximoListItem from "../../components/Lists/ProximoListItem";
|
import ProximoListItem from "../../components/Lists/ProximoListItem";
|
||||||
import MaterialHeaderButtons, {Item} from "../../components/Custom/HeaderButton";
|
import MaterialHeaderButtons, {Item} from "../../components/Custom/HeaderButton";
|
||||||
import {withCollapsible} from "../../utils/withCollapsible";
|
|
||||||
|
|
||||||
const AnimatedFlatList = Animated.createAnimatedComponent(FlatList);
|
|
||||||
|
|
||||||
function sortPrice(a, b) {
|
function sortPrice(a, b) {
|
||||||
return a.price - b.price;
|
return a.price - b.price;
|
||||||
|
@ -42,7 +39,6 @@ type Props = {
|
||||||
navigation: Object,
|
navigation: Object,
|
||||||
route: Object,
|
route: Object,
|
||||||
theme: Object,
|
theme: Object,
|
||||||
collapsibleStack: Object,
|
|
||||||
}
|
}
|
||||||
|
|
||||||
type State = {
|
type State = {
|
||||||
|
@ -326,9 +322,7 @@ class ProximoListScreen extends React.Component<Props, State> {
|
||||||
|
|
||||||
itemLayout = (data, index) => ({length: LIST_ITEM_HEIGHT, offset: LIST_ITEM_HEIGHT * index, index});
|
itemLayout = (data, index) => ({length: LIST_ITEM_HEIGHT, offset: LIST_ITEM_HEIGHT * index, index});
|
||||||
|
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
const {containerPaddingTop, scrollIndicatorInsetTop, onScroll} = this.props.collapsibleStack;
|
|
||||||
return (
|
return (
|
||||||
<View style={{
|
<View style={{
|
||||||
height: '100%'
|
height: '100%'
|
||||||
|
@ -337,7 +331,7 @@ class ProximoListScreen extends React.Component<Props, State> {
|
||||||
{this.state.modalCurrentDisplayItem}
|
{this.state.modalCurrentDisplayItem}
|
||||||
</CustomModal>
|
</CustomModal>
|
||||||
{/*$FlowFixMe*/}
|
{/*$FlowFixMe*/}
|
||||||
<AnimatedFlatList
|
<FlatList
|
||||||
data={this.listData}
|
data={this.listData}
|
||||||
extraData={this.state.currentSearchString + this.state.currentSortMode}
|
extraData={this.state.currentSearchString + this.state.currentSortMode}
|
||||||
keyExtractor={this.keyExtractor}
|
keyExtractor={this.keyExtractor}
|
||||||
|
@ -346,14 +340,10 @@ class ProximoListScreen extends React.Component<Props, State> {
|
||||||
removeClippedSubviews={true}
|
removeClippedSubviews={true}
|
||||||
getItemLayout={this.itemLayout}
|
getItemLayout={this.itemLayout}
|
||||||
initialNumToRender={10}
|
initialNumToRender={10}
|
||||||
// Animations
|
|
||||||
onScroll={onScroll}
|
|
||||||
contentContainerStyle={{paddingTop: containerPaddingTop}}
|
|
||||||
scrollIndicatorInsets={{top: scrollIndicatorInsetTop}}
|
|
||||||
/>
|
/>
|
||||||
</View>
|
</View>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
export default withCollapsible(withTheme(ProximoListScreen));
|
export default withTheme(ProximoListScreen);
|
||||||
|
|
|
@ -1,8 +0,0 @@
|
||||||
import React from 'react';
|
|
||||||
import {useCollapsibleStack} from "react-navigation-collapsible";
|
|
||||||
|
|
||||||
export const withCollapsible = (Component: any) => {
|
|
||||||
return (props: any) => {
|
|
||||||
return <Component collapsibleStack={useCollapsibleStack()} {...props} />;
|
|
||||||
};
|
|
||||||
};
|
|
Loading…
Reference in a new issue