saint-lo/application-amicale
1
0
Fork 0
forked from vergnet/application-amicale
Code Issues Pull requests Releases Wiki Activity

Moved modalized component inside custom component

Browse source
This commit is contained in:
keplyx 2020-03-08 14:19:47 +01:00
parent 97d84d92f5
commit 8bf8529331
5 changed files with 116 additions and 92 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

23
components/CustomModal.js Normal file
View file

@ -0,0 +1,23 @@
// @flow
import * as React from 'react';
import {withTheme} from 'react-native-paper';
import {Modalize} from "react-native-modalize";
function CustomModal(props) {
const { colors } = props.theme;
return (
<Modalize
ref={props.onRef}
adjustToContentHeight
handlePosition={'inside'}
modalStyle={{backgroundColor: colors.card}}
handleStyle={{backgroundColor: colors.primary}}
>
{props.children}
</Modalize>
);
}
export default withTheme(CustomModal);

96
screens/About/AboutScreen.js
View file

@ -5,7 +5,7 @@ import {FlatList, Linking, Platform, View} from 'react-native';
import i18n from "i18n-js"; import i18n from "i18n-js";
import appJson from '../../app'; import appJson from '../../app';
import AsyncStorageManager from "../../utils/AsyncStorageManager"; import AsyncStorageManager from "../../utils/AsyncStorageManager";
import {Modalize} from "react-native-modalize"; import CustomModal from "../../components/CustomModal";
import ThemeManager from "../../utils/ThemeManager"; import ThemeManager from "../../utils/ThemeManager";
import {Avatar, Button, Card, List, Text, Title} from 'react-native-paper'; import {Avatar, Button, Card, List, Text, Title} from 'react-native-paper';
@ -62,7 +62,7 @@ function openWebLink(link) {
export default class AboutScreen extends React.Component<Props, State> { export default class AboutScreen extends React.Component<Props, State> {
debugTapCounter = 0; debugTapCounter = 0;
modalRef: { current: null | Modalize }; modalRef: Object;
state = { state = {
isDebugUnlocked: AsyncStorageManager.getInstance().preferences.debugUnlocked.current === '1' isDebugUnlocked: AsyncStorageManager.getInstance().preferences.debugUnlocked.current === '1'
@ -186,12 +186,13 @@ export default class AboutScreen extends React.Component<Props, State> {
getCardItem: Function; getCardItem: Function;
getMainCard: Function; getMainCard: Function;
onModalRef: Function;
constructor(props: any) { constructor(props: any) {
super(props); super(props);
this.modalRef = React.createRef();
this.getCardItem = this.getCardItem.bind(this); this.getCardItem = this.getCardItem.bind(this);
this.getMainCard = this.getMainCard.bind(this); this.getMainCard = this.getMainCard.bind(this);
this.onModalRef = this.onModalRef.bind(this);
} }
getAppCard() { getAppCard() {
@ -309,54 +310,47 @@ export default class AboutScreen extends React.Component<Props, State> {
const onPressMail = openWebLink.bind(this, links.bugsMail); const onPressMail = openWebLink.bind(this, links.bugsMail);
const onPressGit = openWebLink.bind(this, links.bugsGit); const onPressGit = openWebLink.bind(this, links.bugsGit);
return ( return (
<Modalize ref={this.modalRef} <View style={{
adjustToContentHeight flex: 1,
handlePosition={'inside'} padding: 20
modalStyle={{backgroundColor: ThemeManager.getCurrentThemeVariables().surface}} }}>
handleStyle={{backgroundColor: ThemeManager.getCurrentThemeVariables().text}} <Title>{i18n.t('aboutScreen.bugs')}</Title>
> <Text>
<View style={{ {i18n.t('aboutScreen.bugsDescription')}
flex: 1, </Text>
padding: 20 <Button
}}> icon="email"
<Title>{i18n.t('aboutScreen.bugs')}</Title> mode="contained"
<Text> dark={true}
{i18n.t('aboutScreen.bugsDescription')} color={ThemeManager.getCurrentThemeVariables().primary}
</Text> style={{
<Button marginTop: 20,
icon="email" marginLeft: 'auto',
mode="contained" marginRight: 'auto',
dark={true} }}
color={ThemeManager.getCurrentThemeVariables().primary} onPress={onPressMail}>
style={{ <Text>{i18n.t('aboutScreen.bugsMail')}</Text>
marginTop: 20, </Button>
marginLeft: 'auto', <Button
marginRight: 'auto', icon="git"
}} mode="contained"
onPress={onPressMail}> dark={true}
<Text>{i18n.t('aboutScreen.bugsMail')}</Text> color={ThemeManager.getCurrentThemeVariables().primary}
</Button> style={{
<Button marginTop: 20,
icon="git" marginLeft: 'auto',
mode="contained" marginRight: 'auto',
dark={true} }}
color={ThemeManager.getCurrentThemeVariables().primary} onPress={onPressGit}>
style={{ <Text>{i18n.t('aboutScreen.bugsGit')}</Text>
marginTop: 20, </Button>
marginLeft: 'auto', </View>
marginRight: 'auto',
}}
onPress={onPressGit}>
<Text>{i18n.t('aboutScreen.bugsGit')}</Text>
</Button>
</View>
</Modalize>
); );
} }
openBugReportModal() { openBugReportModal() {
if (this.modalRef.current) { if (this.modalRef) {
this.modalRef.current.open(); this.modalRef.open();
} }
} }
@ -372,10 +366,16 @@ export default class AboutScreen extends React.Component<Props, State> {
return <View/>; return <View/>;
} }
onModalRef(ref: Object) {
this.modalRef = ref;
}
render() { render() {
return ( return (
<View style={{padding: 5}}> <View style={{padding: 5}}>
{this.getBugReportModal()} <CustomModal onRef={this.onModalRef}>
{this.getBugReportModal()}
</CustomModal>
<FlatList <FlatList
style={{padding: 5}} style={{padding: 5}}
data={this.dataOrder} data={this.dataOrder}

23
screens/DebugScreen.js
View file

@ -5,7 +5,7 @@ import ThemeManager from '../utils/ThemeManager';
import {Alert, Clipboard, ScrollView, View} from "react-native"; import {Alert, Clipboard, ScrollView, View} from "react-native";
import AsyncStorageManager from "../utils/AsyncStorageManager"; import AsyncStorageManager from "../utils/AsyncStorageManager";
import NotificationsManager from "../utils/NotificationsManager"; import NotificationsManager from "../utils/NotificationsManager";
import {Modalize} from "react-native-modalize"; import CustomModal from "../components/CustomModal";
import {Button, Card, List, Subheading, TextInput, Title} from 'react-native-paper'; import {Button, Card, List, Subheading, TextInput, Title} from 'react-native-paper';
type Props = { type Props = {
@ -22,16 +22,18 @@ type State = {
*/ */
export default class DebugScreen extends React.Component<Props, State> { export default class DebugScreen extends React.Component<Props, State> {
modalRef: { current: null | Modalize }; modalRef: Object;
modalInputValue = ''; modalInputValue = '';
state = { state = {
modalCurrentDisplayItem: {}, modalCurrentDisplayItem: {},
currentPreferences: JSON.parse(JSON.stringify(AsyncStorageManager.getInstance().preferences)) currentPreferences: JSON.parse(JSON.stringify(AsyncStorageManager.getInstance().preferences))
}; };
onModalRef: Function;
constructor(props: any) { constructor(props: any) {
super(props); super(props);
this.modalRef = React.createRef(); this.onModalRef = this.onModalRef.bind(this);
} }
static getGeneralItem(onPressCallback: Function, icon: ?string, title: string, subtitle: string) { static getGeneralItem(onPressCallback: Function, icon: ?string, title: string, subtitle: string) {
@ -76,8 +78,8 @@ export default class DebugScreen extends React.Component<Props, State> {
this.setState({ this.setState({
modalCurrentDisplayItem: item modalCurrentDisplayItem: item
}); });
if (this.modalRef.current) { if (this.modalRef) {
this.modalRef.current.open(); this.modalRef.open();
} }
} }
@ -127,15 +129,16 @@ export default class DebugScreen extends React.Component<Props, State> {
AsyncStorageManager.getInstance().savePref(key, value); AsyncStorageManager.getInstance().savePref(key, value);
} }
onModalRef(ref: Object) {
this.modalRef = ref;
}
render() { render() {
return ( return (
<View> <View>
<Modalize <CustomModal onRef={this.onModalRef}>
ref={this.modalRef}
adjustToContentHeight
modalStyle={{backgroundColor: ThemeManager.getCurrentThemeVariables().surface}}>
{this.getModalContent()} {this.getModalContent()}
</Modalize> </CustomModal>
<ScrollView style={{padding: 5}}> <ScrollView style={{padding: 5}}>
<Card style={{margin: 5}}> <Card style={{margin: 5}}>
<Card.Title <Card.Title

37
screens/Proximo/ProximoListScreen.js
View file

@ -4,7 +4,7 @@ import * as React from 'react';
import {FlatList, Image, ScrollView, View} from "react-native"; import {FlatList, Image, ScrollView, View} from "react-native";
import i18n from "i18n-js"; import i18n from "i18n-js";
import ThemeManager from "../../utils/ThemeManager"; import ThemeManager from "../../utils/ThemeManager";
import {Modalize} from 'react-native-modalize'; import CustomModal from "../../components/CustomModal";
import {Avatar, IconButton, List, RadioButton, Searchbar, Subheading, Text, Title} from "react-native-paper"; import {Avatar, IconButton, List, RadioButton, Searchbar, Subheading, Text, Title} from "react-native-paper";
function sortPrice(a, b) { function sortPrice(a, b) {
@ -47,17 +47,17 @@ type State = {
*/ */
export default class ProximoListScreen extends React.Component<Props, State> { export default class ProximoListScreen extends React.Component<Props, State> {
modalRef: { current: null | Modalize }; modalRef: Object;
originalData: Array<Object>; originalData: Array<Object>;
shouldFocusSearchBar: boolean; shouldFocusSearchBar: boolean;
onSearchStringChange: Function; onSearchStringChange: Function;
onSortMenuPress: Function; onSortMenuPress: Function;
renderItem: Function; renderItem: Function;
onModalRef: Function;
constructor(props: any) { constructor(props: any) {
super(props); super(props);
this.modalRef = React.createRef();
this.originalData = this.props.route.params['data']['data']; this.originalData = this.props.route.params['data']['data'];
this.shouldFocusSearchBar = this.props.route.params['shouldFocusSearchBar']; this.shouldFocusSearchBar = this.props.route.params['shouldFocusSearchBar'];
this.state = { this.state = {
@ -69,6 +69,7 @@ export default class ProximoListScreen extends React.Component<Props, State> {
this.onSearchStringChange = this.onSearchStringChange.bind(this); this.onSearchStringChange = this.onSearchStringChange.bind(this);
this.onSortMenuPress = this.onSortMenuPress.bind(this); this.onSortMenuPress = this.onSortMenuPress.bind(this);
this.renderItem = this.renderItem.bind(this); this.renderItem = this.renderItem.bind(this);
this.onModalRef = this.onModalRef.bind(this);
} }
/** /**
@ -95,8 +96,8 @@ export default class ProximoListScreen extends React.Component<Props, State> {
data.sort(sortNameReverse); data.sort(sortNameReverse);
break; break;
} }
if (this.modalRef.current && mode !== this.state.currentSortMode) { if (this.modalRef && mode !== this.state.currentSortMode) {
this.modalRef.current.close(); this.modalRef.close();
} }
} }
@ -250,8 +251,8 @@ export default class ProximoListScreen extends React.Component<Props, State> {
this.setState({ this.setState({
modalCurrentDisplayItem: this.getModalItemContent(item) modalCurrentDisplayItem: this.getModalItemContent(item)
}); });
if (this.modalRef.current) { if (this.modalRef) {
this.modalRef.current.open(); this.modalRef.open();
} }
} }
@ -259,8 +260,8 @@ export default class ProximoListScreen extends React.Component<Props, State> {
this.setState({ this.setState({
modalCurrentDisplayItem: this.getModalSortMenu() modalCurrentDisplayItem: this.getModalSortMenu()
}); });
if (this.modalRef.current) { if (this.modalRef) {
this.modalRef.current.open(); this.modalRef.open();
} }
} }
@ -283,9 +284,9 @@ export default class ProximoListScreen extends React.Component<Props, State> {
description={item.quantity + ' ' + i18n.t('proximoScreen.inStock')} description={item.quantity + ' ' + i18n.t('proximoScreen.inStock')}
descriptionStyle={{color: this.getStockColor(parseInt(item.quantity))}} descriptionStyle={{color: this.getStockColor(parseInt(item.quantity))}}
onPress={onPress} onPress={onPress}
left={props => <Avatar.Image style={{backgroundColor: 'transparent'}} size={64} left={() => <Avatar.Image style={{backgroundColor: 'transparent'}} size={64}
source={{uri: item.image}}/>} source={{uri: item.image}}/>}
right={props => right={() =>
<Text style={{fontWeight: "bold"}}> <Text style={{fontWeight: "bold"}}>
{item.price}€ {item.price}€
</Text>} </Text>}
@ -297,20 +298,18 @@ export default class ProximoListScreen extends React.Component<Props, State> {
return item.name + item.code; return item.name + item.code;
} }
onModalRef(ref: Object) {
this.modalRef = ref;
}
render() { render() {
return ( return (
<View style={{ <View style={{
height: '100%' height: '100%'
}}> }}>
<Modalize <CustomModal onRef={this.onModalRef}>
ref={this.modalRef}
adjustToContentHeight
handlePosition={'inside'}
modalStyle={{backgroundColor: ThemeManager.getCurrentThemeVariables().card}}
handleStyle={{backgroundColor: ThemeManager.getCurrentThemeVariables().text}}
>
{this.state.modalCurrentDisplayItem} {this.state.modalCurrentDisplayItem}
</Modalize> </CustomModal>
<FlatList <FlatList
data={this.state.currentlyDisplayedData} data={this.state.currentlyDisplayedData}
extraData={this.state.currentlyDisplayedData} extraData={this.state.currentlyDisplayedData}

29
screens/Proxiwash/ProxiwashScreen.js
View file

@ -11,7 +11,7 @@ import {Avatar, Banner, Button, Card, Text} from 'react-native-paper';
import HeaderButton from "../../components/HeaderButton"; import HeaderButton from "../../components/HeaderButton";
import ProxiwashListItem from "../../components/ProxiwashListItem"; import ProxiwashListItem from "../../components/ProxiwashListItem";
import ProxiwashConstants from "../../constants/ProxiwashConstants"; import ProxiwashConstants from "../../constants/ProxiwashConstants";
import {Modalize} from "react-native-modalize"; import CustomModal from "../../components/CustomModal";
import ThemeManager from "../../utils/ThemeManager"; import ThemeManager from "../../utils/ThemeManager";
const DATA_URL = "https://etud.insa-toulouse.fr/~amicale_app/washinsa/washinsa.json"; const DATA_URL = "https://etud.insa-toulouse.fr/~amicale_app/washinsa/washinsa.json";
@ -41,13 +41,14 @@ type State = {
*/ */
export default class ProxiwashScreen extends React.Component<Props, State> { export default class ProxiwashScreen extends React.Component<Props, State> {
modalRef: { current: null | Modalize }; modalRef: Object;
onAboutPress: Function; onAboutPress: Function;
getRenderItem: Function; getRenderItem: Function;
getRenderSectionHeader: Function; getRenderSectionHeader: Function;
createDataset: Function; createDataset: Function;
onHideBanner: Function; onHideBanner: Function;
onModalRef: Function;
fetchedData: Object; fetchedData: Object;
@ -66,7 +67,6 @@ export default class ProxiwashScreen extends React.Component<Props, State> {
*/ */
constructor() { constructor() {
super(); super();
this.modalRef = React.createRef();
stateStrings[ProxiwashConstants.machineStates.TERMINE] = i18n.t('proxiwashScreen.states.finished'); stateStrings[ProxiwashConstants.machineStates.TERMINE] = i18n.t('proxiwashScreen.states.finished');
stateStrings[ProxiwashConstants.machineStates.DISPONIBLE] = i18n.t('proxiwashScreen.states.ready'); stateStrings[ProxiwashConstants.machineStates.DISPONIBLE] = i18n.t('proxiwashScreen.states.ready');
stateStrings[ProxiwashConstants.machineStates["EN COURS"]] = i18n.t('proxiwashScreen.states.running'); stateStrings[ProxiwashConstants.machineStates["EN COURS"]] = i18n.t('proxiwashScreen.states.running');
@ -91,6 +91,7 @@ export default class ProxiwashScreen extends React.Component<Props, State> {
this.getRenderSectionHeader = this.getRenderSectionHeader.bind(this); this.getRenderSectionHeader = this.getRenderSectionHeader.bind(this);
this.createDataset = this.createDataset.bind(this); this.createDataset = this.createDataset.bind(this);
this.onHideBanner = this.onHideBanner.bind(this); this.onHideBanner = this.onHideBanner.bind(this);
this.onModalRef = this.onModalRef.bind(this);
} }
onHideBanner() { onHideBanner() {
@ -249,14 +250,14 @@ export default class ProxiwashScreen extends React.Component<Props, State> {
this.setState({ this.setState({
modalCurrentDisplayItem: this.getModalContent(title, item, isDryer) modalCurrentDisplayItem: this.getModalContent(title, item, isDryer)
}); });
if (this.modalRef.current) { if (this.modalRef) {
this.modalRef.current.open(); this.modalRef.open();
} }
} }
onSetupNotificationsPress(machineId: string) { onSetupNotificationsPress(machineId: string) {
if (this.modalRef.current) { if (this.modalRef) {
this.modalRef.current.close(); this.modalRef.close();
} }
this.setupNotifications(machineId) this.setupNotifications(machineId)
} }
@ -323,7 +324,6 @@ export default class ProxiwashScreen extends React.Component<Props, State> {
); );
} }
onAboutPress() { onAboutPress() {
this.props.navigation.navigate('ProxiwashAboutScreen'); this.props.navigation.navigate('ProxiwashAboutScreen');
} }
@ -334,6 +334,10 @@ export default class ProxiwashScreen extends React.Component<Props, State> {
); );
} }
onModalRef(ref: Object) {
this.modalRef = ref;
}
render() { render() {
const nav = this.props.navigation; const nav = this.props.navigation;
return ( return (
@ -353,14 +357,9 @@ export default class ProxiwashScreen extends React.Component<Props, State> {
> >
{i18n.t('proxiwashScreen.enableNotificationsTip')} {i18n.t('proxiwashScreen.enableNotificationsTip')}
</Banner> </Banner>
<Modalize ref={this.modalRef} <CustomModal onRef={this.onModalRef}>
adjustToContentHeight
handlePosition={'inside'}
modalStyle={{backgroundColor: ThemeManager.getCurrentThemeVariables().surface}}
handleStyle={{backgroundColor: ThemeManager.getCurrentThemeVariables().text}}
>
{this.state.modalCurrentDisplayItem} {this.state.modalCurrentDisplayItem}
</Modalize> </CustomModal>
<WebSectionList <WebSectionList
createDataset={this.createDataset} createDataset={this.createDataset}
navigation={nav} navigation={nav}