forked from vergnet/application-amicale
Added collapsible header to more screens and added an abstraction layer around collapsible behaviour
This commit is contained in:
parent
22d5f61fc5
commit
be33726e39
29 changed files with 393 additions and 399 deletions
src
components
Collapsible
Screens
navigation
screens
About
Amicale
Game/screens
Other
Services
utils
51
src/components/Collapsible/CollapsibleComponent.js
Normal file
51
src/components/Collapsible/CollapsibleComponent.js
Normal 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);
|
26
src/components/Collapsible/CollapsibleFlatList.js
Normal file
26
src/components/Collapsible/CollapsibleFlatList.js
Normal 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;
|
26
src/components/Collapsible/CollapsibleScrollView.js
Normal file
26
src/components/Collapsible/CollapsibleScrollView.js
Normal 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;
|
26
src/components/Collapsible/CollapsibleSectionList.js
Normal file
26
src/components/Collapsible/CollapsibleSectionList.js
Normal 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;
|
|
@ -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}
|
||||||
|
|
|
@ -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>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
@ -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>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -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}
|
||||||
|
|
|
@ -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}
|
||||||
|
|
|
@ -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);
|
||||||
|
|
|
@ -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>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -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;
|
||||||
|
|
|
@ -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;
|
||||||
|
|
|
@ -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);
|
||||||
|
|
|
@ -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);
|
||||||
|
|
|
@ -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);
|
||||||
|
|
|
@ -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);
|
||||||
|
|
|
@ -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);
|
||||||
|
|
|
@ -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>
|
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
|
@ -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);
|
|
|
@ -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>
|
||||||
|
|
||||||
|
|
|
@ -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>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -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>
|
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -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>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -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>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -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);
|
||||||
|
|
|
@ -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);
|
||||||
|
|
|
@ -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,
|
||||||
|
|
|
@ -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}
|
||||||
/>;
|
/>;
|
||||||
|
|
Loading…
Reference in a new issue