Added collapsible header to more screens and added an abstraction layer around collapsible behaviour

This commit is contained in:
Arnaud Vergnet 2020-07-22 23:54:05 +02:00
parent 22d5f61fc5
commit be33726e39
29 changed files with 393 additions and 399 deletions

View file

@ -0,0 +1,51 @@
// @flow
import * as React from 'react';
import {withCollapsible} from "../../utils/withCollapsible";
import {Collapsible} from "react-navigation-collapsible";
import CustomTabBar from "../Tabbar/CustomTabBar";
export type CollapsibleComponentProps = {
children?: React.Node,
hasTab?: boolean,
onScroll?: (event: SyntheticEvent<EventTarget>) => void,
};
type Props = {
...CollapsibleComponentProps,
collapsibleStack: Collapsible,
component: any,
}
class CollapsibleComponent extends React.Component<Props> {
static defaultProps = {
hasTab: false,
}
onScroll = (event: SyntheticEvent<EventTarget>) => {
if (this.props.onScroll)
this.props.onScroll(event);
}
render() {
const Comp = this.props.component;
const {containerPaddingTop, scrollIndicatorInsetTop, onScrollWithListener} = this.props.collapsibleStack;
return (
<Comp
{...this.props}
onScroll={onScrollWithListener(this.onScroll)}
contentContainerStyle={{
paddingTop: containerPaddingTop,
paddingBottom: this.props.hasTab ? CustomTabBar.TAB_BAR_HEIGHT : 0,
minHeight: '100%'
}}
scrollIndicatorInsets={{top: scrollIndicatorInsetTop}}
>
{this.props.children}
</Comp>
);
}
}
export default withCollapsible(CollapsibleComponent);

View file

@ -0,0 +1,26 @@
// @flow
import * as React from 'react';
import {Animated} from "react-native";
import type {CollapsibleComponentProps} from "./CollapsibleComponent";
import CollapsibleComponent from "./CollapsibleComponent";
type Props = {
...CollapsibleComponentProps
}
class CollapsibleFlatList extends React.Component<Props> {
render() {
return (
<CollapsibleComponent
{...this.props}
component={Animated.FlatList}
>
{this.props.children}
</CollapsibleComponent>
);
}
}
export default CollapsibleFlatList;

View file

@ -0,0 +1,26 @@
// @flow
import * as React from 'react';
import {Animated} from "react-native";
import type {CollapsibleComponentProps} from "./CollapsibleComponent";
import CollapsibleComponent from "./CollapsibleComponent";
type Props = {
...CollapsibleComponentProps
}
class CollapsibleScrollView extends React.Component<Props> {
render() {
return (
<CollapsibleComponent
{...this.props}
component={Animated.ScrollView}
>
{this.props.children}
</CollapsibleComponent>
);
}
}
export default CollapsibleScrollView;

View file

@ -0,0 +1,26 @@
// @flow
import * as React from 'react';
import {Animated} from "react-native";
import type {CollapsibleComponentProps} from "./CollapsibleComponent";
import CollapsibleComponent from "./CollapsibleComponent";
type Props = {
...CollapsibleComponentProps
}
class CollapsibleSectionList extends React.Component<Props> {
render() {
return (
<CollapsibleComponent
{...this.props}
component={Animated.SectionList}
>
{this.props.children}
</CollapsibleComponent>
);
}
}
export default CollapsibleSectionList;

View file

@ -4,7 +4,7 @@ import * as React from 'react';
import {ERROR_TYPE, readData} from "../../utils/WebData"; import {ERROR_TYPE, readData} from "../../utils/WebData";
import i18n from "i18n-js"; import i18n from "i18n-js";
import {Snackbar} from 'react-native-paper'; import {Snackbar} from 'react-native-paper';
import {Animated, RefreshControl, View} from "react-native"; import {RefreshControl, View} from "react-native";
import ErrorView from "./ErrorView"; import ErrorView from "./ErrorView";
import BasicLoadingScreen from "./BasicLoadingScreen"; import BasicLoadingScreen from "./BasicLoadingScreen";
import {withCollapsible} from "../../utils/withCollapsible"; import {withCollapsible} from "../../utils/withCollapsible";
@ -12,6 +12,7 @@ import * as Animatable from 'react-native-animatable';
import CustomTabBar from "../Tabbar/CustomTabBar"; import CustomTabBar from "../Tabbar/CustomTabBar";
import {Collapsible} from "react-navigation-collapsible"; import {Collapsible} from "react-navigation-collapsible";
import {StackNavigationProp} from "@react-navigation/stack"; import {StackNavigationProp} from "@react-navigation/stack";
import CollapsibleSectionList from "../Collapsible/CollapsibleSectionList";
type Props = { type Props = {
navigation: StackNavigationProp, navigation: StackNavigationProp,
@ -203,10 +204,10 @@ class WebSectionList extends React.PureComponent<Props, State> {
if (this.state.fetchedData != null || (this.state.fetchedData == null && !this.props.showError)) { if (this.state.fetchedData != null || (this.state.fetchedData == null && !this.props.showError)) {
dataset = this.props.createDataset(this.state.fetchedData, this.state.refreshing); dataset = this.props.createDataset(this.state.fetchedData, this.state.refreshing);
} }
const {containerPaddingTop, scrollIndicatorInsetTop, onScrollWithListener} = this.props.collapsibleStack; const {containerPaddingTop} = this.props.collapsibleStack;
return ( return (
<View> <View>
<Animated.SectionList <CollapsibleSectionList
sections={dataset} sections={dataset}
extraData={this.props.updateData} extraData={this.props.updateData}
refreshControl={ refreshControl={
@ -231,14 +232,8 @@ class WebSectionList extends React.PureComponent<Props, State> {
onRefresh={this.onRefresh}/> onRefresh={this.onRefresh}/>
} }
getItemLayout={this.props.itemHeight != null ? this.itemLayout : undefined} getItemLayout={this.props.itemHeight != null ? this.itemLayout : undefined}
// Animations onScroll={this.onScroll}
onScroll={onScrollWithListener(this.onScroll)} hasTab={true}
contentContainerStyle={{
paddingTop: containerPaddingTop,
paddingBottom: CustomTabBar.TAB_BAR_HEIGHT,
minHeight: '100%'
}}
scrollIndicatorInsets={{top: scrollIndicatorInsetTop}}
/> />
<Snackbar <Snackbar
visible={this.state.snackbarVisible} visible={this.state.snackbarVisible}

View file

@ -28,16 +28,13 @@ import EquipmentLendScreen from "../screens/Amicale/Equipment/EquipmentRentScree
import EquipmentConfirmScreen from "../screens/Amicale/Equipment/EquipmentConfirmScreen"; import EquipmentConfirmScreen from "../screens/Amicale/Equipment/EquipmentConfirmScreen";
import DashboardEditScreen from "../screens/Other/Settings/DashboardEditScreen"; import DashboardEditScreen from "../screens/Other/Settings/DashboardEditScreen";
import GameStartScreen from "../screens/Game/screens/GameStartScreen"; import GameStartScreen from "../screens/Game/screens/GameStartScreen";
import GameEndScreen from "../screens/Game/screens/GameEndScreen";
const modalTransition = Platform.OS === 'ios' ? TransitionPresets.ModalPresentationIOS : TransitionPresets.ModalSlideFromBottomIOS; const modalTransition = Platform.OS === 'ios' ? TransitionPresets.ModalPresentationIOS : TransitionPresets.ModalSlideFromBottomIOS;
const screenTransition = TransitionPresets.SlideFromRightIOS;
const defaultScreenOptions = { const defaultScreenOptions = {
gestureEnabled: true, gestureEnabled: true,
cardOverlayEnabled: true, cardOverlayEnabled: true,
...screenTransition, ...TransitionPresets.SlideFromRightIOS,
}; };
@ -58,48 +55,37 @@ function MainStackComponent(props: { createTabNavigator: () => React.Node }) {
title: i18n.t('screens.home.title'), title: i18n.t('screens.home.title'),
}} }}
/> />
<MainStack.Screen {createScreenCollapsibleStack(
name="settings" "settings",
component={SettingsScreen} MainStack,
options={{ SettingsScreen,
title: i18n.t('screens.settings.title'), i18n.t('screens.settings.title'))}
}} {createScreenCollapsibleStack(
/> "dashboard-edit",
<MainStack.Screen MainStack,
name="dashboard-edit" DashboardEditScreen,
component={DashboardEditScreen} i18n.t('screens.settings.dashboardEdit.title'))}
options={{ {createScreenCollapsibleStack(
title: i18n.t('screens.settings.dashboardEdit.title'), "about",
}} MainStack,
/> AboutScreen,
<MainStack.Screen i18n.t('screens.about.title'))}
name="about" {createScreenCollapsibleStack(
component={AboutScreen} "dependencies",
options={{ MainStack,
title: i18n.t('screens.about.title'), AboutDependenciesScreen,
}} i18n.t('screens.about.libs'))}
/> {createScreenCollapsibleStack(
<MainStack.Screen "debug",
name="dependencies" MainStack,
component={AboutDependenciesScreen} DebugScreen,
options={{ i18n.t('screens.about.debug'))}
title: i18n.t('screens.about.libs')
}} {createScreenCollapsibleStack(
/> "game-start",
<MainStack.Screen MainStack,
name="debug" GameStartScreen,
component={DebugScreen} i18n.t('screens.game.title'))}
options={{
title: i18n.t('screens.about.debug')
}}
/>
<MainStack.Screen
name="game-start"
component={GameStartScreen}
options={{
title: i18n.t("screens.game.title"),
}}
/>
<MainStack.Screen <MainStack.Screen
name="game-main" name="game-main"
component={GameMainScreen} component={GameMainScreen}
@ -107,73 +93,91 @@ function MainStackComponent(props: { createTabNavigator: () => React.Node }) {
title: i18n.t("screens.game.title"), title: i18n.t("screens.game.title"),
}} }}
/> />
<MainStack.Screen {createScreenCollapsibleStack(
name="game-end" "login",
component={GameEndScreen} MainStack,
options={{ LoginScreen,
title: i18n.t("screens.game.title"), i18n.t('screens.login.title'),
}} true,
/> {headerTintColor: "#fff"},
{createScreenCollapsibleStack("login", MainStack, LoginScreen, i18n.t('screens.login.title'), 'transparent')}
true, {headerTintColor: "#fff"}, 'transparent')}
{getWebsiteStack("website", MainStack, WebsiteScreen, "")} {getWebsiteStack("website", MainStack, WebsiteScreen, "")}
{createScreenCollapsibleStack("self-menu", MainStack, SelfMenuScreen, i18n.t('screens.menu.title'))} {createScreenCollapsibleStack(
{createScreenCollapsibleStack("proximo", MainStack, ProximoMainScreen, i18n.t('screens.proximo.title'))} "self-menu",
MainStack,
SelfMenuScreen,
i18n.t('screens.menu.title'))}
{createScreenCollapsibleStack(
"proximo",
MainStack,
ProximoMainScreen,
i18n.t('screens.proximo.title'))}
{createScreenCollapsibleStack( {createScreenCollapsibleStack(
"proximo-list", "proximo-list",
MainStack, MainStack,
ProximoListScreen, ProximoListScreen,
i18n.t('screens.proximo.articleList'), i18n.t('screens.proximo.articleList'),
true,
{...screenTransition},
)} )}
<MainStack.Screen {createScreenCollapsibleStack(
name="proximo-about" "proximo-about",
component={ProximoAboutScreen} MainStack,
options={{ ProximoAboutScreen,
title: i18n.t('screens.proximo.title'), i18n.t('screens.proximo.title'),
...modalTransition, true,
}} {...modalTransition},
/> )}
{createScreenCollapsibleStack("profile", MainStack, ProfileScreen, i18n.t('screens.profile.title'))} {createScreenCollapsibleStack(
{createScreenCollapsibleStack("club-list", MainStack, ClubListScreen, i18n.t('screens.clubs.title'))} "profile",
{createScreenCollapsibleStack("equipment-list", MainStack, EquipmentScreen, i18n.t('screens.equipment.title'))} MainStack,
{createScreenCollapsibleStack("equipment-rent", MainStack, EquipmentLendScreen, i18n.t('screens.equipment.book'))} ProfileScreen,
{createScreenCollapsibleStack("equipment-confirm", MainStack, EquipmentConfirmScreen, i18n.t('screens.equipment.confirm'))} i18n.t('screens.profile.title'))}
<MainStack.Screen {createScreenCollapsibleStack(
name="club-information" "club-list",
component={ClubDisplayScreen} MainStack,
options={{ ClubListScreen,
title: i18n.t('screens.clubs.details'), i18n.t('screens.clubs.title'))}
...modalTransition, {createScreenCollapsibleStack(
}} "club-information",
/> MainStack,
<MainStack.Screen ClubDisplayScreen,
name="club-about" i18n.t('screens.clubs.details'),
component={ClubAboutScreen} true,
options={{ {...modalTransition})}
title: i18n.t('screens.clubs.title'), {createScreenCollapsibleStack(
...modalTransition, "club-about",
}} MainStack,
/> ClubAboutScreen,
<MainStack.Screen i18n.t('screens.clubs.title'),
name="vote" true,
component={VoteScreen} {...modalTransition})}
options={{ {createScreenCollapsibleStack(
title: i18n.t('screens.vote.title'), "equipment-list",
}} MainStack,
/> EquipmentScreen,
i18n.t('screens.equipment.title'))}
<MainStack.Screen {createScreenCollapsibleStack(
name="feedback" "equipment-rent",
component={BugReportScreen} MainStack,
options={{ EquipmentLendScreen,
title: i18n.t('screens.feedback.title'), i18n.t('screens.equipment.book'))}
}} {createScreenCollapsibleStack(
/> "equipment-confirm",
MainStack,
EquipmentConfirmScreen,
i18n.t('screens.equipment.confirm'))}
{createScreenCollapsibleStack(
"vote",
MainStack,
VoteScreen,
i18n.t('screens.vote.title'))}
{createScreenCollapsibleStack(
"feedback",
MainStack,
BugReportScreen,
i18n.t('screens.feedback.title'))}
</MainStack.Navigator> </MainStack.Navigator>
); );
} }

View file

@ -1,10 +1,11 @@
// @flow // @flow
import * as React from 'react'; import * as React from 'react';
import {FlatList} from "react-native";
import packageJson from '../../../package'; import packageJson from '../../../package';
import {List} from 'react-native-paper'; import {List} from 'react-native-paper';
import {StackNavigationProp} from "@react-navigation/stack"; import {StackNavigationProp} from "@react-navigation/stack";
import CollapsibleFlatList from "../../components/Collapsible/CollapsibleFlatList";
import {View} from "react-native-animatable";
type listItem = { type listItem = {
name: string, name: string,
@ -59,7 +60,8 @@ export default class AboutDependenciesScreen extends React.Component<Props> {
render() { render() {
return ( return (
<FlatList <View>
<CollapsibleFlatList
data={this.data} data={this.data}
keyExtractor={this.keyExtractor} keyExtractor={this.keyExtractor}
renderItem={this.renderItem} renderItem={this.renderItem}
@ -67,6 +69,7 @@ export default class AboutDependenciesScreen extends React.Component<Props> {
removeClippedSubviews={true} removeClippedSubviews={true}
getItemLayout={this.itemLayout} getItemLayout={this.itemLayout}
/> />
</View>
); );
} }
} }

View file

@ -6,6 +6,7 @@ import i18n from "i18n-js";
import {Avatar, Card, List, Title, withTheme} from 'react-native-paper'; import {Avatar, Card, List, Title, withTheme} from 'react-native-paper';
import packageJson from "../../../package.json"; import packageJson from "../../../package.json";
import {StackNavigationProp} from "@react-navigation/stack"; import {StackNavigationProp} from "@react-navigation/stack";
import CollapsibleFlatList from "../../components/Collapsible/CollapsibleFlatList";
type ListItem = { type ListItem = {
onPressCallback: () => void, onPressCallback: () => void,
@ -338,7 +339,7 @@ class AboutScreen extends React.Component<Props> {
render() { render() {
return ( return (
<FlatList <CollapsibleFlatList
style={{padding: 5}} style={{padding: 5}}
data={this.dataOrder} data={this.dataOrder}
renderItem={this.getMainCard} renderItem={this.getMainCard}

View file

@ -1,13 +1,14 @@
// @flow // @flow
import * as React from 'react'; import * as React from 'react';
import {FlatList, View} from "react-native"; import {View} from "react-native";
import AsyncStorageManager from "../../managers/AsyncStorageManager"; import AsyncStorageManager from "../../managers/AsyncStorageManager";
import CustomModal from "../../components/Overrides/CustomModal"; import CustomModal from "../../components/Overrides/CustomModal";
import {Button, List, Subheading, TextInput, Title, withTheme} from 'react-native-paper'; import {Button, List, Subheading, TextInput, Title, withTheme} from 'react-native-paper';
import {StackNavigationProp} from "@react-navigation/stack"; import {StackNavigationProp} from "@react-navigation/stack";
import {Modalize} from "react-native-modalize"; import {Modalize} from "react-native-modalize";
import type {CustomTheme} from "../../managers/ThemeManager"; import type {CustomTheme} from "../../managers/ThemeManager";
import CollapsibleFlatList from "../../components/Collapsible/CollapsibleFlatList";
type PreferenceItem = { type PreferenceItem = {
key: string, key: string,
@ -168,7 +169,7 @@ class DebugScreen extends React.Component<Props, State> {
{this.getModalContent()} {this.getModalContent()}
</CustomModal> </CustomModal>
{/*$FlowFixMe*/} {/*$FlowFixMe*/}
<FlatList <CollapsibleFlatList
data={this.state.currentPreferences} data={this.state.currentPreferences}
extraData={this.state.currentPreferences} extraData={this.state.currentPreferences}
renderItem={this.renderItem} renderItem={this.renderItem}

View file

@ -1,16 +1,13 @@
// @flow // @flow
import * as React from 'react'; import * as React from 'react';
import {Animated, FlatList, Image, Linking, View} from 'react-native'; import {FlatList, Image, Linking, View} from 'react-native';
import {Card, List, Text, withTheme} from 'react-native-paper'; import {Card, List, Text, withTheme} from 'react-native-paper';
import i18n from 'i18n-js'; import i18n from 'i18n-js';
import {Collapsible} from "react-navigation-collapsible";
import CustomTabBar from "../../components/Tabbar/CustomTabBar";
import {withCollapsible} from "../../utils/withCollapsible";
import type {MaterialCommunityIconsGlyphs} from "react-native-vector-icons/MaterialCommunityIcons"; import type {MaterialCommunityIconsGlyphs} from "react-native-vector-icons/MaterialCommunityIcons";
import CollapsibleFlatList from "../../components/Collapsible/CollapsibleFlatList";
type Props = { type Props = {
collapsibleStack: Collapsible
}; };
type DatasetItem = { type DatasetItem = {
@ -130,22 +127,14 @@ class AmicaleContactScreen extends React.Component<Props> {
}; };
render() { render() {
const {containerPaddingTop, scrollIndicatorInsetTop, onScroll} = this.props.collapsibleStack;
return ( return (
<Animated.FlatList <CollapsibleFlatList
data={[{key: "1"}]} data={[{key: "1"}]}
renderItem={this.getScreen} renderItem={this.getScreen}
// Animations hasTab={true}
onScroll={onScroll}
contentContainerStyle={{
paddingTop: containerPaddingTop,
paddingBottom: CustomTabBar.TAB_BAR_HEIGHT,
minHeight: '100%'
}}
scrollIndicatorInsets={{top: scrollIndicatorInsetTop}}
/> />
); );
} }
} }
export default withCollapsible(withTheme(AmicaleContactScreen)); export default withTheme(AmicaleContactScreen);

View file

@ -1,10 +1,11 @@
// @flow // @flow
import * as React from 'react'; import * as React from 'react';
import {Image, ScrollView, View} from 'react-native'; import {Image, View} from 'react-native';
import {Card, List, Text, withTheme} from 'react-native-paper'; import {Card, List, Text, withTheme} from 'react-native-paper';
import i18n from 'i18n-js'; import i18n from 'i18n-js';
import Autolink from "react-native-autolink"; import Autolink from "react-native-autolink";
import CollapsibleScrollView from "../../../components/Collapsible/CollapsibleScrollView";
type Props = {}; type Props = {};
@ -14,7 +15,7 @@ class ClubAboutScreen extends React.Component<Props> {
render() { render() {
return ( return (
<ScrollView style={{padding: 5}}> <CollapsibleScrollView style={{padding: 5}}>
<View style={{ <View style={{
width: '100%', width: '100%',
height: 100, height: 100,
@ -43,7 +44,7 @@ class ClubAboutScreen extends React.Component<Props> {
/> />
</Card.Content> </Card.Content>
</Card> </Card>
</ScrollView> </CollapsibleScrollView>
); );
} }
} }

View file

@ -1,7 +1,7 @@
// @flow // @flow
import * as React from 'react'; import * as React from 'react';
import {Linking, ScrollView, View} from 'react-native'; import {Linking, View} from 'react-native';
import {Avatar, Button, Card, Chip, Paragraph, withTheme} from 'react-native-paper'; import {Avatar, Button, Card, Chip, Paragraph, withTheme} from 'react-native-paper';
import ImageModal from 'react-native-image-modal'; import ImageModal from 'react-native-image-modal';
import i18n from "i18n-js"; import i18n from "i18n-js";
@ -12,6 +12,7 @@ import type {category, club} from "./ClubListScreen";
import type {CustomTheme} from "../../../managers/ThemeManager"; import type {CustomTheme} from "../../../managers/ThemeManager";
import {StackNavigationProp} from "@react-navigation/stack"; import {StackNavigationProp} from "@react-navigation/stack";
import {ERROR_TYPE} from "../../../utils/WebData"; import {ERROR_TYPE} from "../../../utils/WebData";
import CollapsibleScrollView from "../../../components/Collapsible/CollapsibleScrollView";
type Props = { type Props = {
navigation: StackNavigationProp, navigation: StackNavigationProp,
@ -184,7 +185,10 @@ class ClubDisplayScreen extends React.Component<Props, State> {
} }
if (data != null) { if (data != null) {
return ( return (
<ScrollView style={{paddingLeft: 5, paddingRight: 5}}> <CollapsibleScrollView
style={{paddingLeft: 5, paddingRight: 5}}
hasTab={true}
>
{this.getCategoriesRender(data.category)} {this.getCategoriesRender(data.category)}
{data.logo !== null ? {data.logo !== null ?
<View style={{ <View style={{
@ -214,7 +218,7 @@ class ClubDisplayScreen extends React.Component<Props, State> {
</Card.Content> </Card.Content>
: <View/>} : <View/>}
{this.getManagersRender(data.responsibles, data.email)} {this.getManagersRender(data.responsibles, data.email)}
</ScrollView> </CollapsibleScrollView>
); );
} else } else
return null; return null;

View file

@ -1,7 +1,7 @@
// @flow // @flow
import * as React from 'react'; import * as React from 'react';
import {Animated, Platform} from "react-native"; import {Platform} from "react-native";
import {Searchbar} from 'react-native-paper'; import {Searchbar} from 'react-native-paper';
import AuthenticatedScreen from "../../../components/Amicale/AuthenticatedScreen"; import AuthenticatedScreen from "../../../components/Amicale/AuthenticatedScreen";
import i18n from "i18n-js"; import i18n from "i18n-js";
@ -9,10 +9,9 @@ import ClubListItem from "../../../components/Lists/Clubs/ClubListItem";
import {isItemInCategoryFilter, stringMatchQuery} from "../../../utils/Search"; import {isItemInCategoryFilter, stringMatchQuery} from "../../../utils/Search";
import ClubListHeader from "../../../components/Lists/Clubs/ClubListHeader"; import ClubListHeader from "../../../components/Lists/Clubs/ClubListHeader";
import MaterialHeaderButtons, {Item} from "../../../components/Overrides/CustomHeaderButton"; import MaterialHeaderButtons, {Item} from "../../../components/Overrides/CustomHeaderButton";
import {withCollapsible} from "../../../utils/withCollapsible";
import {StackNavigationProp} from "@react-navigation/stack"; import {StackNavigationProp} from "@react-navigation/stack";
import type {CustomTheme} from "../../../managers/ThemeManager"; import type {CustomTheme} from "../../../managers/ThemeManager";
import {Collapsible} from "react-navigation-collapsible"; import CollapsibleFlatList from "../../../components/Collapsible/CollapsibleFlatList";
export type category = { export type category = {
id: number, id: number,
@ -32,7 +31,6 @@ export type club = {
type Props = { type Props = {
navigation: StackNavigationProp, navigation: StackNavigationProp,
theme: CustomTheme, theme: CustomTheme,
collapsibleStack: Collapsible,
} }
type State = { type State = {
@ -111,9 +109,8 @@ class ClubListScreen extends React.Component<Props, State> {
clubList = data[0].clubs; clubList = data[0].clubs;
} }
this.categories = categoryList; this.categories = categoryList;
const {containerPaddingTop, scrollIndicatorInsetTop, onScroll} = this.props.collapsibleStack;
return ( return (
<Animated.FlatList <CollapsibleFlatList
data={clubList} data={clubList}
keyExtractor={this.keyExtractor} keyExtractor={this.keyExtractor}
renderItem={this.getRenderItem} renderItem={this.getRenderItem}
@ -121,10 +118,6 @@ class ClubListScreen extends React.Component<Props, State> {
// Performance props, see https://reactnative.dev/docs/optimizing-flatlist-configuration // Performance props, see https://reactnative.dev/docs/optimizing-flatlist-configuration
removeClippedSubviews={true} removeClippedSubviews={true}
getItemLayout={this.itemLayout} getItemLayout={this.itemLayout}
// Animations
onScroll={onScroll}
contentContainerStyle={{paddingTop: containerPaddingTop}}
scrollIndicatorInsets={{top: scrollIndicatorInsetTop}}
/> />
) )
}; };
@ -241,4 +234,4 @@ class ClubListScreen extends React.Component<Props, State> {
} }
} }
export default withCollapsible(ClubListScreen); export default ClubListScreen;

View file

@ -2,14 +2,13 @@
import * as React from 'react'; import * as React from 'react';
import {Button, Caption, Card, Headline, Paragraph, withTheme} from 'react-native-paper'; import {Button, Caption, Card, Headline, Paragraph, withTheme} from 'react-native-paper';
import {Collapsible} from "react-navigation-collapsible";
import {withCollapsible} from "../../../utils/withCollapsible";
import {StackNavigationProp} from "@react-navigation/stack"; import {StackNavigationProp} from "@react-navigation/stack";
import type {CustomTheme} from "../../../managers/ThemeManager"; import type {CustomTheme} from "../../../managers/ThemeManager";
import type {Device} from "./EquipmentListScreen"; import type {Device} from "./EquipmentListScreen";
import {Animated, View} from "react-native"; import {View} from "react-native";
import i18n from "i18n-js"; import i18n from "i18n-js";
import {getRelativeDateString} from "../../../utils/EquipmentBooking"; import {getRelativeDateString} from "../../../utils/EquipmentBooking";
import CollapsibleScrollView from "../../../components/Collapsible/CollapsibleScrollView";
type Props = { type Props = {
navigation: StackNavigationProp, navigation: StackNavigationProp,
@ -20,7 +19,6 @@ type Props = {
}, },
}, },
theme: CustomTheme, theme: CustomTheme,
collapsibleStack: Collapsible,
} }
@ -44,21 +42,13 @@ class EquipmentConfirmScreen extends React.Component<Props> {
} }
render() { render() {
const {containerPaddingTop, scrollIndicatorInsetTop, onScroll} = this.props.collapsibleStack;
const item = this.item; const item = this.item;
const dates = this.dates; const dates = this.dates;
if (item != null && dates != null) { if (item != null && dates != null) {
const start = new Date(dates[0]); const start = new Date(dates[0]);
const end = new Date(dates[1]); const end = new Date(dates[1]);
return ( return (
<Animated.ScrollView <CollapsibleScrollView>
// Animations
onScroll={onScroll}
contentContainerStyle={{
paddingTop: containerPaddingTop,
minHeight: '100%'
}}
scrollIndicatorInsets={{top: scrollIndicatorInsetTop}}>
<Card style={{margin: 5}}> <Card style={{margin: 5}}>
<Card.Content> <Card.Content>
<View style={{flex: 1}}> <View style={{flex: 1}}>
@ -103,7 +93,7 @@ class EquipmentConfirmScreen extends React.Component<Props> {
</Paragraph> </Paragraph>
</Card.Content> </Card.Content>
</Card> </Card>
</Animated.ScrollView> </CollapsibleScrollView>
); );
} else } else
return null; return null;
@ -112,4 +102,4 @@ class EquipmentConfirmScreen extends React.Component<Props> {
} }
export default withCollapsible(withTheme(EquipmentConfirmScreen)); export default withTheme(EquipmentConfirmScreen);

View file

@ -1,11 +1,9 @@
// @flow // @flow
import * as React from 'react'; import * as React from 'react';
import {Animated, View} from "react-native"; import {View} from "react-native";
import {Button, withTheme} from 'react-native-paper'; import {Button, withTheme} from 'react-native-paper';
import AuthenticatedScreen from "../../../components/Amicale/AuthenticatedScreen"; import AuthenticatedScreen from "../../../components/Amicale/AuthenticatedScreen";
import {Collapsible} from "react-navigation-collapsible";
import {withCollapsible} from "../../../utils/withCollapsible";
import {StackNavigationProp} from "@react-navigation/stack"; import {StackNavigationProp} from "@react-navigation/stack";
import type {CustomTheme} from "../../../managers/ThemeManager"; import type {CustomTheme} from "../../../managers/ThemeManager";
import i18n from "i18n-js"; import i18n from "i18n-js";
@ -14,11 +12,11 @@ import EquipmentListItem from "../../../components/Lists/Equipment/EquipmentList
import MascotPopup from "../../../components/Mascot/MascotPopup"; import MascotPopup from "../../../components/Mascot/MascotPopup";
import {MASCOT_STYLE} from "../../../components/Mascot/Mascot"; import {MASCOT_STYLE} from "../../../components/Mascot/Mascot";
import AsyncStorageManager from "../../../managers/AsyncStorageManager"; import AsyncStorageManager from "../../../managers/AsyncStorageManager";
import CollapsibleFlatList from "../../../components/Collapsible/CollapsibleFlatList";
type Props = { type Props = {
navigation: StackNavigationProp, navigation: StackNavigationProp,
theme: CustomTheme, theme: CustomTheme,
collapsibleStack: Collapsible,
} }
type State = { type State = {
@ -29,7 +27,7 @@ export type Device = {
id: number, id: number,
name: string, name: string,
caution: number, caution: number,
booked_at: Array<{begin: string, end: string}>, booked_at: Array<{ begin: string, end: string }>,
}; };
export type RentedDevice = { export type RentedDevice = {
@ -133,20 +131,12 @@ class EquipmentListScreen extends React.Component<Props, State> {
if (fetchedData != null) if (fetchedData != null)
this.userRents = fetchedData["locations"]; this.userRents = fetchedData["locations"];
} }
const {containerPaddingTop, scrollIndicatorInsetTop, onScroll} = this.props.collapsibleStack;
return ( return (
<Animated.FlatList <CollapsibleFlatList
keyExtractor={this.keyExtractor} keyExtractor={this.keyExtractor}
renderItem={this.getRenderItem} renderItem={this.getRenderItem}
ListHeaderComponent={this.getListHeader()} ListHeaderComponent={this.getListHeader()}
data={this.data} data={this.data}
// Animations
onScroll={onScroll}
contentContainerStyle={{
paddingTop: containerPaddingTop,
minHeight: '100%'
}}
scrollIndicatorInsets={{top: scrollIndicatorInsetTop}}
/> />
) )
}; };
@ -203,4 +193,4 @@ class EquipmentListScreen extends React.Component<Props, State> {
} }
} }
export default withCollapsible(withTheme(EquipmentListScreen)); export default withTheme(EquipmentListScreen);

View file

@ -2,12 +2,10 @@
import * as React from 'react'; import * as React from 'react';
import {Button, Caption, Card, Headline, Subheading, withTheme} from 'react-native-paper'; import {Button, Caption, Card, Headline, Subheading, withTheme} from 'react-native-paper';
import {Collapsible} from "react-navigation-collapsible";
import {withCollapsible} from "../../../utils/withCollapsible";
import {StackNavigationProp} from "@react-navigation/stack"; import {StackNavigationProp} from "@react-navigation/stack";
import type {CustomTheme} from "../../../managers/ThemeManager"; import type {CustomTheme} from "../../../managers/ThemeManager";
import type {Device} from "./EquipmentListScreen"; import type {Device} from "./EquipmentListScreen";
import {Animated, BackHandler, View} from "react-native"; import {BackHandler, View} from "react-native";
import * as Animatable from "react-native-animatable"; import * as Animatable from "react-native-animatable";
import i18n from "i18n-js"; import i18n from "i18n-js";
import {CalendarList} from "react-native-calendars"; import {CalendarList} from "react-native-calendars";
@ -22,6 +20,7 @@ import {
isEquipmentAvailable isEquipmentAvailable
} from "../../../utils/EquipmentBooking"; } from "../../../utils/EquipmentBooking";
import ConnectionManager from "../../../managers/ConnectionManager"; import ConnectionManager from "../../../managers/ConnectionManager";
import CollapsibleScrollView from "../../../components/Collapsible/CollapsibleScrollView";
type Props = { type Props = {
navigation: StackNavigationProp, navigation: StackNavigationProp,
@ -31,7 +30,6 @@ type Props = {
}, },
}, },
theme: CustomTheme, theme: CustomTheme,
collapsibleStack: Collapsible,
} }
type State = { type State = {
@ -269,8 +267,6 @@ class EquipmentRentScreen extends React.Component<Props, State> {
} }
render() { render() {
const {containerPaddingTop, scrollIndicatorInsetTop, onScroll} = this.props.collapsibleStack;
const item = this.item; const item = this.item;
const start = this.getBookStartDate(); const start = this.getBookStartDate();
const end = this.getBookEndDate(); const end = this.getBookEndDate();
@ -280,14 +276,7 @@ class EquipmentRentScreen extends React.Component<Props, State> {
const firstAvailability = getFirstEquipmentAvailability(item); const firstAvailability = getFirstEquipmentAvailability(item);
return ( return (
<View style={{flex: 1}}> <View style={{flex: 1}}>
<Animated.ScrollView <CollapsibleScrollView>
// Animations
onScroll={onScroll}
contentContainerStyle={{
paddingTop: containerPaddingTop,
minHeight: '100%'
}}
scrollIndicatorInsets={{top: scrollIndicatorInsetTop}}>
<Card style={{margin: 5}}> <Card style={{margin: 5}}>
<Card.Content> <Card.Content>
<View style={{flex: 1}}> <View style={{flex: 1}}>
@ -396,7 +385,7 @@ class EquipmentRentScreen extends React.Component<Props, State> {
}} }}
style={{marginBottom: 50}} style={{marginBottom: 50}}
/> />
</Animated.ScrollView> </CollapsibleScrollView>
<LoadingConfirmDialog <LoadingConfirmDialog
visible={this.state.dialogVisible} visible={this.state.dialogVisible}
onDismiss={this.onDialogDismiss} onDismiss={this.onDialogDismiss}
@ -449,4 +438,4 @@ class EquipmentRentScreen extends React.Component<Props, State> {
} }
export default withCollapsible(withTheme(EquipmentRentScreen)); export default withTheme(EquipmentRentScreen);

View file

@ -1,13 +1,11 @@
// @flow // @flow
import * as React from 'react'; import * as React from 'react';
import {Animated, Dimensions, Image, KeyboardAvoidingView, StyleSheet, View} from "react-native"; import {Image, KeyboardAvoidingView, StyleSheet, View} from "react-native";
import {Button, Card, HelperText, TextInput, withTheme} from 'react-native-paper'; import {Button, Card, HelperText, TextInput, withTheme} from 'react-native-paper';
import ConnectionManager from "../../managers/ConnectionManager"; import ConnectionManager from "../../managers/ConnectionManager";
import i18n from 'i18n-js'; import i18n from 'i18n-js';
import ErrorDialog from "../../components/Dialogs/ErrorDialog"; import ErrorDialog from "../../components/Dialogs/ErrorDialog";
import {withCollapsible} from "../../utils/withCollapsible";
import {Collapsible} from "react-navigation-collapsible";
import type {CustomTheme} from "../../managers/ThemeManager"; import type {CustomTheme} from "../../managers/ThemeManager";
import AsyncStorageManager from "../../managers/AsyncStorageManager"; import AsyncStorageManager from "../../managers/AsyncStorageManager";
import {StackNavigationProp} from "@react-navigation/stack"; import {StackNavigationProp} from "@react-navigation/stack";
@ -15,11 +13,11 @@ import AvailableWebsites from "../../constants/AvailableWebsites";
import {MASCOT_STYLE} from "../../components/Mascot/Mascot"; import {MASCOT_STYLE} from "../../components/Mascot/Mascot";
import MascotPopup from "../../components/Mascot/MascotPopup"; import MascotPopup from "../../components/Mascot/MascotPopup";
import LinearGradient from "react-native-linear-gradient"; import LinearGradient from "react-native-linear-gradient";
import CollapsibleScrollView from "../../components/Collapsible/CollapsibleScrollView";
type Props = { type Props = {
navigation: StackNavigationProp, navigation: StackNavigationProp,
route: { params: { nextScreen: string } }, route: { params: { nextScreen: string } },
collapsibleStack: Collapsible,
theme: CustomTheme theme: CustomTheme
} }
@ -56,7 +54,6 @@ class LoginScreen extends React.Component<Props, State> {
onEmailChange: (value: string) => null; onEmailChange: (value: string) => null;
onPasswordChange: (value: string) => null; onPasswordChange: (value: string) => null;
passwordInputRef: { current: null | TextInput }; passwordInputRef: { current: null | TextInput };
windowHeight: number;
nextScreen: string | null; nextScreen: string | null;
@ -66,7 +63,6 @@ class LoginScreen extends React.Component<Props, State> {
this.onEmailChange = this.onInputChange.bind(this, true); this.onEmailChange = this.onInputChange.bind(this, true);
this.onPasswordChange = this.onInputChange.bind(this, false); this.onPasswordChange = this.onInputChange.bind(this, false);
this.props.navigation.addListener('focus', this.onScreenFocus); this.props.navigation.addListener('focus', this.onScreenFocus);
this.windowHeight = Dimensions.get('window').height;
} }
onScreenFocus = () => { onScreenFocus = () => {
@ -359,7 +355,6 @@ class LoginScreen extends React.Component<Props, State> {
} }
render() { render() {
const {containerPaddingTop, scrollIndicatorInsetTop, onScroll} = this.props.collapsibleStack;
return ( return (
<LinearGradient <LinearGradient
style={{ style={{
@ -375,16 +370,10 @@ class LoginScreen extends React.Component<Props, State> {
enabled enabled
keyboardVerticalOffset={100} keyboardVerticalOffset={100}
> >
<Animated.ScrollView <CollapsibleScrollView>
onScroll={onScroll} <View style={{height: "100%"}}>
scrollIndicatorInsets={{top: scrollIndicatorInsetTop}}
style={{flex: 1}}
>
<View style={{height: this.windowHeight - containerPaddingTop}}>
{this.getMainCard()} {this.getMainCard()}
</View> </View>
<MascotPopup <MascotPopup
visible={this.state.mascotDialogVisible} visible={this.state.mascotDialogVisible}
title={i18n.t("screens.login.mascotDialog.title")} title={i18n.t("screens.login.mascotDialog.title")}
@ -405,7 +394,7 @@ class LoginScreen extends React.Component<Props, State> {
onDismiss={this.hideErrorDialog} onDismiss={this.hideErrorDialog}
errorCode={this.state.dialogError} errorCode={this.state.dialogError}
/> />
</Animated.ScrollView> </CollapsibleScrollView>
</KeyboardAvoidingView> </KeyboardAvoidingView>
</LinearGradient> </LinearGradient>
); );
@ -431,4 +420,4 @@ const styles = StyleSheet.create({
} }
}); });
export default withCollapsible(withTheme(LoginScreen)); export default withTheme(LoginScreen);

View file

@ -1,15 +1,12 @@
// @flow // @flow
import * as React from 'react'; import * as React from 'react';
import {Animated, FlatList, StyleSheet, View} from "react-native"; import {FlatList, StyleSheet, View} from "react-native";
import {Avatar, Button, Card, Divider, List, Paragraph, withTheme} from 'react-native-paper'; import {Avatar, Button, Card, Divider, List, Paragraph, withTheme} from 'react-native-paper';
import AuthenticatedScreen from "../../components/Amicale/AuthenticatedScreen"; import AuthenticatedScreen from "../../components/Amicale/AuthenticatedScreen";
import i18n from 'i18n-js'; import i18n from 'i18n-js';
import LogoutDialog from "../../components/Amicale/LogoutDialog"; import LogoutDialog from "../../components/Amicale/LogoutDialog";
import MaterialHeaderButtons, {Item} from "../../components/Overrides/CustomHeaderButton"; import MaterialHeaderButtons, {Item} from "../../components/Overrides/CustomHeaderButton";
import CustomTabBar from "../../components/Tabbar/CustomTabBar";
import {Collapsible} from "react-navigation-collapsible";
import {withCollapsible} from "../../utils/withCollapsible";
import type {cardList} from "../../components/Lists/CardList/CardList"; import type {cardList} from "../../components/Lists/CardList/CardList";
import CardList from "../../components/Lists/CardList/CardList"; import CardList from "../../components/Lists/CardList/CardList";
import {StackNavigationProp} from "@react-navigation/stack"; import {StackNavigationProp} from "@react-navigation/stack";
@ -17,11 +14,11 @@ import type {CustomTheme} from "../../managers/ThemeManager";
import AvailableWebsites from "../../constants/AvailableWebsites"; import AvailableWebsites from "../../constants/AvailableWebsites";
import Mascot, {MASCOT_STYLE} from "../../components/Mascot/Mascot"; import Mascot, {MASCOT_STYLE} from "../../components/Mascot/Mascot";
import ServicesManager, {SERVICES_KEY} from "../../managers/ServicesManager"; import ServicesManager, {SERVICES_KEY} from "../../managers/ServicesManager";
import CollapsibleFlatList from "../../components/Collapsible/CollapsibleFlatList";
type Props = { type Props = {
navigation: StackNavigationProp, navigation: StackNavigationProp,
theme: CustomTheme, theme: CustomTheme,
collapsibleStack: Collapsible,
} }
type State = { type State = {
@ -97,20 +94,11 @@ class ProfileScreen extends React.Component<Props, State> {
if (data[0] != null) { if (data[0] != null) {
this.data = data[0]; this.data = data[0];
} }
const {containerPaddingTop, scrollIndicatorInsetTop, onScroll} = this.props.collapsibleStack;
return ( return (
<View style={{flex: 1}}> <View style={{flex: 1}}>
<Animated.FlatList <CollapsibleFlatList
renderItem={this.getRenderItem} renderItem={this.getRenderItem}
data={this.flatListData} data={this.flatListData}
// Animations
onScroll={onScroll}
contentContainerStyle={{
paddingTop: containerPaddingTop,
paddingBottom: CustomTabBar.TAB_BAR_HEIGHT,
minHeight: '100%'
}}
scrollIndicatorInsets={{top: scrollIndicatorInsetTop}}
/> />
<LogoutDialog <LogoutDialog
{...this.props} {...this.props}
@ -441,4 +429,4 @@ const styles = StyleSheet.create({
}); });
export default withCollapsible(withTheme(ProfileScreen)); export default withTheme(ProfileScreen);

View file

@ -1,7 +1,7 @@
// @flow // @flow
import * as React from 'react'; import * as React from 'react';
import {FlatList, RefreshControl, View} from "react-native"; import {RefreshControl, View} from "react-native";
import AuthenticatedScreen from "../../components/Amicale/AuthenticatedScreen"; import AuthenticatedScreen from "../../components/Amicale/AuthenticatedScreen";
import {getTimeOnlyString, stringToDate} from "../../utils/Planning"; import {getTimeOnlyString, stringToDate} from "../../utils/Planning";
import VoteTease from "../../components/Amicale/Vote/VoteTease"; import VoteTease from "../../components/Amicale/Vote/VoteTease";
@ -15,6 +15,7 @@ import MascotPopup from "../../components/Mascot/MascotPopup";
import AsyncStorageManager from "../../managers/AsyncStorageManager"; import AsyncStorageManager from "../../managers/AsyncStorageManager";
import {Button} from "react-native-paper"; import {Button} from "react-native-paper";
import VoteNotAvailable from "../../components/Amicale/Vote/VoteNotAvailable"; import VoteNotAvailable from "../../components/Amicale/Vote/VoteNotAvailable";
import CollapsibleFlatList from "../../components/Collapsible/CollapsibleFlatList";
export type team = { export type team = {
id: number, id: number,
@ -246,9 +247,7 @@ export default class VoteScreen extends React.Component<Props, State> {
this.generateDateObject(); this.generateDateObject();
return ( return (
<View> <CollapsibleFlatList
{/*$FlowFixMe*/}
<FlatList
data={this.mainFlatListData} data={this.mainFlatListData}
refreshControl={ refreshControl={
<RefreshControl <RefreshControl
@ -259,7 +258,6 @@ export default class VoteScreen extends React.Component<Props, State> {
extraData={this.state.hasVoted.toString()} extraData={this.state.hasVoted.toString()}
renderItem={this.mainRenderItem} renderItem={this.mainRenderItem}
/> />
</View>
); );
}; };

View file

@ -1,26 +0,0 @@
// @flow
import * as React from "react";
import {StackNavigationProp} from "@react-navigation/stack";
import type {CustomTheme} from "../../../managers/ThemeManager";
import {withTheme} from "react-native-paper";
type Props = {
navigation: StackNavigationProp,
theme: CustomTheme,
}
type State = {
}
class GameEndScreen extends React.Component<Props, State> {
render() {
return (
null
);
}
}
export default withTheme(GameEndScreen);

View file

@ -4,7 +4,7 @@ import * as React from "react";
import {StackNavigationProp} from "@react-navigation/stack"; import {StackNavigationProp} from "@react-navigation/stack";
import type {CustomTheme} from "../../../managers/ThemeManager"; import type {CustomTheme} from "../../../managers/ThemeManager";
import {Button, Card, Divider, Headline, Paragraph, Text, withTheme} from "react-native-paper"; import {Button, Card, Divider, Headline, Paragraph, Text, withTheme} from "react-native-paper";
import {ScrollView, View} from "react-native"; import {View} from "react-native";
import i18n from "i18n-js"; import i18n from "i18n-js";
import Mascot, {MASCOT_STYLE} from "../../../components/Mascot/Mascot"; import Mascot, {MASCOT_STYLE} from "../../../components/Mascot/Mascot";
import MascotPopup from "../../../components/Mascot/MascotPopup"; import MascotPopup from "../../../components/Mascot/MascotPopup";
@ -17,6 +17,7 @@ import * as Animatable from "react-native-animatable";
import MaterialCommunityIcons from "react-native-vector-icons/MaterialCommunityIcons"; import MaterialCommunityIcons from "react-native-vector-icons/MaterialCommunityIcons";
import LinearGradient from "react-native-linear-gradient"; import LinearGradient from "react-native-linear-gradient";
import SpeechArrow from "../../../components/Mascot/SpeechArrow"; import SpeechArrow from "../../../components/Mascot/SpeechArrow";
import CollapsibleScrollView from "../../../components/Collapsible/CollapsibleScrollView";
type GameStats = { type GameStats = {
score: number, score: number,
@ -417,7 +418,7 @@ class GameStartScreen extends React.Component<Props, State> {
start={{x: 0, y: 0}} start={{x: 0, y: 0}}
end={{x: 0, y: 1}} end={{x: 0, y: 1}}
> >
<ScrollView> <CollapsibleScrollView>
{this.getMainContent()} {this.getMainContent()}
<MascotPopup <MascotPopup
visible={this.state.mascotDialogVisible} visible={this.state.mascotDialogVisible}
@ -434,7 +435,7 @@ class GameStartScreen extends React.Component<Props, State> {
}} }}
emotion={MASCOT_STYLE.COOL} emotion={MASCOT_STYLE.COOL}
/> />
</ScrollView> </CollapsibleScrollView>
</LinearGradient> </LinearGradient>
</View> </View>

View file

@ -3,8 +3,9 @@
import * as React from 'react'; import * as React from 'react';
import {Avatar, Button, Card, Paragraph, withTheme} from "react-native-paper"; import {Avatar, Button, Card, Paragraph, withTheme} from "react-native-paper";
import i18n from "i18n-js"; import i18n from "i18n-js";
import {Linking, ScrollView} from "react-native"; import {Linking} from "react-native";
import type {CustomTheme} from "../../managers/ThemeManager"; import type {CustomTheme} from "../../managers/ThemeManager";
import CollapsibleScrollView from "../../components/Collapsible/CollapsibleScrollView";
type Props = { type Props = {
theme: CustomTheme theme: CustomTheme
@ -76,7 +77,7 @@ class FeedbackScreen extends React.Component<Props> {
render() { render() {
return ( return (
<ScrollView style={{padding: 5}}> <CollapsibleScrollView style={{padding: 5}}>
<Card> <Card>
<Card.Title <Card.Title
title={i18n.t('screens.feedback.bugs')} title={i18n.t('screens.feedback.bugs')}
@ -107,7 +108,7 @@ class FeedbackScreen extends React.Component<Props> {
</Card.Content> </Card.Content>
{this.getButtons(false)} {this.getButtons(false)}
</Card> </Card>
</ScrollView> </CollapsibleScrollView>
); );
} }
} }

View file

@ -13,6 +13,7 @@ import DashboardEditAccordion from "../../../components/Lists/DashboardEdit/Dash
import DashboardEditPreviewItem from "../../../components/Lists/DashboardEdit/DashboardEditPreviewItem"; import DashboardEditPreviewItem from "../../../components/Lists/DashboardEdit/DashboardEditPreviewItem";
import AsyncStorageManager from "../../../managers/AsyncStorageManager"; import AsyncStorageManager from "../../../managers/AsyncStorageManager";
import i18n from "i18n-js"; import i18n from "i18n-js";
import CollapsibleFlatList from "../../../components/Collapsible/CollapsibleFlatList";
type Props = { type Props = {
navigation: StackNavigationProp, navigation: StackNavigationProp,
@ -108,43 +109,43 @@ class DashboardEditScreen extends React.Component<Props, State> {
); );
} }
getListHeader() {
render() {
return ( return (
<View style={{flex: 1}}> <Card style={{margin: 5}}>
<View style={{ <Card.Content>
padding: 5 <View style={{padding: 5}}>
}}>
<Button <Button
mode={"contained"} mode={"contained"}
onPress={this.undoDashboard} onPress={this.undoDashboard}
style={{ style={{
marginLeft: "auto", marginLeft: "auto",
marginRight: "auto", marginRight: "auto",
marginBottom: 10,
}} }}
> >
{i18n.t("screens.settings.dashboardEdit.undo")} {i18n.t("screens.settings.dashboardEdit.undo")}
</Button> </Button>
<View style={{ <View style={{height: 50}}>
height: 50
}}>
{this.getDashboard(this.state.currentDashboard)} {this.getDashboard(this.state.currentDashboard)}
</View> </View>
</View> </View>
<FlatList <Paragraph style={{textAlign: "center"}}>
{i18n.t("screens.settings.dashboardEdit.message")}
</Paragraph>
</Card.Content>
</Card>
);
}
render() {
return (
<CollapsibleFlatList
data={this.content} data={this.content}
renderItem={this.renderItem} renderItem={this.renderItem}
ListHeaderComponent={<Card style={{margin: 5}}> ListHeaderComponent={this.getListHeader()}
<Card.Content>
<Paragraph
style={{textAlign: "center"}}>{i18n.t("screens.settings.dashboardEdit.message")}</Paragraph>
</Card.Content>
</Card>}
style={{}} style={{}}
/> />
</View>
); );
} }

View file

@ -1,7 +1,7 @@
// @flow // @flow
import * as React from 'react'; import * as React from 'react';
import {ScrollView, View} from "react-native"; import {View} from "react-native";
import type {CustomTheme} from "../../../managers/ThemeManager"; import type {CustomTheme} from "../../../managers/ThemeManager";
import ThemeManager from '../../../managers/ThemeManager'; import ThemeManager from '../../../managers/ThemeManager';
import i18n from "i18n-js"; import i18n from "i18n-js";
@ -10,6 +10,7 @@ import {Card, List, Switch, ToggleButton, withTheme} from 'react-native-paper';
import {Appearance} from "react-native-appearance"; import {Appearance} from "react-native-appearance";
import CustomSlider from "../../../components/Overrides/CustomSlider"; import CustomSlider from "../../../components/Overrides/CustomSlider";
import {StackNavigationProp} from "@react-navigation/stack"; import {StackNavigationProp} from "@react-navigation/stack";
import CollapsibleScrollView from "../../../components/Collapsible/CollapsibleScrollView";
type Props = { type Props = {
navigation: StackNavigationProp, navigation: StackNavigationProp,
@ -187,7 +188,7 @@ class SettingsScreen extends React.Component<Props, State> {
render() { render() {
return ( return (
<ScrollView> <CollapsibleScrollView>
<Card style={{margin: 5}}> <Card style={{margin: 5}}>
<Card.Title title={i18n.t('screens.settings.generalCard')}/> <Card.Title title={i18n.t('screens.settings.generalCard')}/>
<List.Section> <List.Section>
@ -264,7 +265,7 @@ class SettingsScreen extends React.Component<Props, State> {
)} )}
</List.Section> </List.Section>
</Card> </Card>
</ScrollView> </CollapsibleScrollView>
); );
} }
} }

View file

@ -1,11 +1,12 @@
// @flow // @flow
import * as React from 'react'; import * as React from 'react';
import {Image, ScrollView, View} from 'react-native'; import {Image, View} from 'react-native';
import i18n from "i18n-js"; import i18n from "i18n-js";
import {Card, List, Paragraph, Text} from 'react-native-paper'; import {Card, List, Paragraph, Text} from 'react-native-paper';
import CustomTabBar from "../../../components/Tabbar/CustomTabBar"; import CustomTabBar from "../../../components/Tabbar/CustomTabBar";
import {StackNavigationProp} from "@react-navigation/stack"; import {StackNavigationProp} from "@react-navigation/stack";
import CollapsibleScrollView from "../../../components/Collapsible/CollapsibleScrollView";
type Props = { type Props = {
navigation: StackNavigationProp, navigation: StackNavigationProp,
@ -20,7 +21,7 @@ export default class ProximoAboutScreen extends React.Component<Props> {
render() { render() {
return ( return (
<ScrollView style={{padding: 5}}> <CollapsibleScrollView style={{padding: 5}}>
<View style={{ <View style={{
width: '100%', width: '100%',
height: 100, height: 100,
@ -52,7 +53,7 @@ export default class ProximoAboutScreen extends React.Component<Props> {
<Paragraph>{i18n.t('screens.proximo.paymentMethodsDescription')}</Paragraph> <Paragraph>{i18n.t('screens.proximo.paymentMethodsDescription')}</Paragraph>
</Card.Content> </Card.Content>
</Card> </Card>
</ScrollView> </CollapsibleScrollView>
); );
} }
} }

View file

@ -1,17 +1,16 @@
// @flow // @flow
import * as React from 'react'; import * as React from 'react';
import {Animated, Image, Platform, ScrollView, View} from "react-native"; import {Image, Platform, ScrollView, View} from "react-native";
import i18n from "i18n-js"; import i18n from "i18n-js";
import CustomModal from "../../../components/Overrides/CustomModal"; import CustomModal from "../../../components/Overrides/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/Proximo/ProximoListItem"; import ProximoListItem from "../../../components/Lists/Proximo/ProximoListItem";
import MaterialHeaderButtons, {Item} from "../../../components/Overrides/CustomHeaderButton"; import MaterialHeaderButtons, {Item} from "../../../components/Overrides/CustomHeaderButton";
import {withCollapsible} from "../../../utils/withCollapsible";
import {StackNavigationProp} from "@react-navigation/stack"; import {StackNavigationProp} from "@react-navigation/stack";
import type {CustomTheme} from "../../../managers/ThemeManager"; import type {CustomTheme} from "../../../managers/ThemeManager";
import {Collapsible} from "react-navigation-collapsible"; import CollapsibleFlatList from "../../../components/Collapsible/CollapsibleFlatList";
function sortPrice(a, b) { function sortPrice(a, b) {
return a.price - b.price; return a.price - b.price;
@ -43,7 +42,6 @@ type Props = {
navigation: StackNavigationProp, navigation: StackNavigationProp,
route: { params: { data: { data: Object }, shouldFocusSearchBar: boolean } }, route: { params: { data: { data: Object }, shouldFocusSearchBar: boolean } },
theme: CustomTheme, theme: CustomTheme,
collapsibleStack: Collapsible,
} }
type State = { type State = {
@ -300,7 +298,6 @@ 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%'
@ -308,7 +305,7 @@ class ProximoListScreen extends React.Component<Props, State> {
<CustomModal onRef={this.onModalRef}> <CustomModal onRef={this.onModalRef}>
{this.state.modalCurrentDisplayItem} {this.state.modalCurrentDisplayItem}
</CustomModal> </CustomModal>
<Animated.FlatList <CollapsibleFlatList
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}
@ -317,16 +314,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);

View file

@ -3,24 +3,20 @@
import * as React from 'react'; import * as React from 'react';
import type {cardList} from "../../components/Lists/CardList/CardList"; import type {cardList} from "../../components/Lists/CardList/CardList";
import CardList from "../../components/Lists/CardList/CardList"; import CardList from "../../components/Lists/CardList/CardList";
import CustomTabBar from "../../components/Tabbar/CustomTabBar"; import {Image, View} from "react-native";
import {withCollapsible} from "../../utils/withCollapsible";
import {Collapsible} from "react-navigation-collapsible";
import {Animated, Image, View} from "react-native";
import {Avatar, Card, Divider, List, TouchableRipple, withTheme} from "react-native-paper"; import {Avatar, Card, Divider, List, TouchableRipple, withTheme} from "react-native-paper";
import type {CustomTheme} from "../../managers/ThemeManager"; import type {CustomTheme} from "../../managers/ThemeManager";
import i18n from 'i18n-js'; import i18n from 'i18n-js';
import MaterialHeaderButtons, {Item} from "../../components/Overrides/CustomHeaderButton"; import MaterialHeaderButtons, {Item} from "../../components/Overrides/CustomHeaderButton";
import ConnectionManager from "../../managers/ConnectionManager";
import {StackNavigationProp} from "@react-navigation/stack"; import {StackNavigationProp} from "@react-navigation/stack";
import {MASCOT_STYLE} from "../../components/Mascot/Mascot"; import {MASCOT_STYLE} from "../../components/Mascot/Mascot";
import MascotPopup from "../../components/Mascot/MascotPopup"; import MascotPopup from "../../components/Mascot/MascotPopup";
import AsyncStorageManager from "../../managers/AsyncStorageManager"; import AsyncStorageManager from "../../managers/AsyncStorageManager";
import ServicesManager, {SERVICES_CATEGORIES_KEY} from "../../managers/ServicesManager"; import ServicesManager, {SERVICES_CATEGORIES_KEY} from "../../managers/ServicesManager";
import CollapsibleFlatList from "../../components/Collapsible/CollapsibleFlatList";
type Props = { type Props = {
navigation: StackNavigationProp, navigation: StackNavigationProp,
collapsibleStack: Collapsible,
theme: CustomTheme, theme: CustomTheme,
} }
@ -106,18 +102,6 @@ class ServicesScreen extends React.Component<Props, State> {
/> />
} }
/**
* Redirects to the given route or to the login screen if user is not logged in.
*
* @param route The route to navigate to
*/
onAmicaleServicePress(route: string) {
if (ConnectionManager.getInstance().isLoggedIn())
this.props.navigation.navigate(route);
else
this.props.navigation.navigate("login", {nextScreen: route});
}
/** /**
* A list item showing a list of available services for the current category * A list item showing a list of available services for the current category
* *
@ -155,20 +139,14 @@ class ServicesScreen extends React.Component<Props, State> {
} }
render() { render() {
const {containerPaddingTop, scrollIndicatorInsetTop, onScroll} = this.props.collapsibleStack;
return ( return (
<View> <View>
<Animated.FlatList <CollapsibleFlatList
data={this.finalDataset} data={this.finalDataset}
renderItem={this.renderItem} renderItem={this.renderItem}
keyExtractor={this.keyExtractor} keyExtractor={this.keyExtractor}
onScroll={onScroll}
contentContainerStyle={{
paddingTop: containerPaddingTop,
paddingBottom: CustomTabBar.TAB_BAR_HEIGHT + 20
}}
scrollIndicatorInsets={{top: scrollIndicatorInsetTop}}
ItemSeparatorComponent={() => <Divider/>} ItemSeparatorComponent={() => <Divider/>}
hasTab={true}
/> />
<MascotPopup <MascotPopup
visible={this.state.mascotDialogVisible} visible={this.state.mascotDialogVisible}
@ -190,4 +168,4 @@ class ServicesScreen extends React.Component<Props, State> {
} }
} }
export default withCollapsible(withTheme(ServicesScreen)); export default withTheme(ServicesScreen);

View file

@ -24,7 +24,7 @@ import StackNavigator, {StackNavigationOptions} from "@react-navigation/stack";
export function createScreenCollapsibleStack( export function createScreenCollapsibleStack(
name: string, name: string,
Stack: StackNavigator, Stack: StackNavigator,
component: React.Node, component: React.ComponentType<any>,
title: string, title: string,
useNativeDriver?: boolean, useNativeDriver?: boolean,
options?: StackNavigationOptions, options?: StackNavigationOptions,

View file

@ -12,30 +12,12 @@ import {useCollapsibleStack} from "react-navigation-collapsible";
* This component will then receive the collapsibleStack prop. * This component will then receive the collapsibleStack prop.
* *
* @param Component The component to use Collapsible with * @param Component The component to use Collapsible with
* @returns {React.ComponentType<React.ClassAttributes<unknown>>} * @returns {React.ComponentType<any>}
*/ */
export const withCollapsible = (Component: any) => { export const withCollapsible = (Component: React.ComponentType<any>) => {
return React.forwardRef((props: any, ref: any) => { return React.forwardRef((props: any, ref: any) => {
const {
onScroll,
onScrollWithListener,
containerPaddingTop,
scrollIndicatorInsetTop,
translateY,
progress,
opacity,
} = useCollapsibleStack();
return <Component return <Component
collapsibleStack={{ collapsibleStack={useCollapsibleStack()}
onScroll,
onScrollWithListener,
containerPaddingTop: containerPaddingTop,
scrollIndicatorInsetTop: scrollIndicatorInsetTop,
translateY,
progress,
opacity,
}}
ref={ref} ref={ref}
{...props} {...props}
/>; />;