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);

24
screens/About/AboutScreen.js
View file

@ -5,7 +5,7 @@ import {FlatList, Linking, Platform, View} from 'react-native';
import i18n from "i18n-js";
import appJson from '../../app';
import AsyncStorageManager from "../../utils/AsyncStorageManager";
import {Modalize} from "react-native-modalize";
import CustomModal from "../../components/CustomModal";
import ThemeManager from "../../utils/ThemeManager";
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> {
debugTapCounter = 0;
modalRef: { current: null | Modalize };
modalRef: Object;
state = {
isDebugUnlocked: AsyncStorageManager.getInstance().preferences.debugUnlocked.current === '1'
@ -186,12 +186,13 @@ export default class AboutScreen extends React.Component<Props, State> {
getCardItem: Function;
getMainCard: Function;
onModalRef: Function;
constructor(props: any) {
super(props);
this.modalRef = React.createRef();
this.getCardItem = this.getCardItem.bind(this);
this.getMainCard = this.getMainCard.bind(this);
this.onModalRef = this.onModalRef.bind(this);
}
getAppCard() {
@ -309,12 +310,6 @@ export default class AboutScreen extends React.Component<Props, State> {
const onPressMail = openWebLink.bind(this, links.bugsMail);
const onPressGit = openWebLink.bind(this, links.bugsGit);
return (
<Modalize ref={this.modalRef}
adjustToContentHeight
handlePosition={'inside'}
modalStyle={{backgroundColor: ThemeManager.getCurrentThemeVariables().surface}}
handleStyle={{backgroundColor: ThemeManager.getCurrentThemeVariables().text}}
>
<View style={{
flex: 1,
padding: 20
@ -350,13 +345,12 @@ export default class AboutScreen extends React.Component<Props, State> {
<Text>{i18n.t('aboutScreen.bugsGit')}</Text>
</Button>
</View>
</Modalize>
);
}
openBugReportModal() {
if (this.modalRef.current) {
this.modalRef.current.open();
if (this.modalRef) {
this.modalRef.open();
}
}
@ -372,10 +366,16 @@ export default class AboutScreen extends React.Component<Props, State> {
return <View/>;
}
onModalRef(ref: Object) {
this.modalRef = ref;
}
render() {
return (
<View style={{padding: 5}}>
<CustomModal onRef={this.onModalRef}>
{this.getBugReportModal()}
</CustomModal>
<FlatList
style={{padding: 5}}
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 AsyncStorageManager from "../utils/AsyncStorageManager";
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';
type Props = {
@ -22,16 +22,18 @@ type State = {
*/
export default class DebugScreen extends React.Component<Props, State> {
modalRef: { current: null | Modalize };
modalRef: Object;
modalInputValue = '';
state = {
modalCurrentDisplayItem: {},
currentPreferences: JSON.parse(JSON.stringify(AsyncStorageManager.getInstance().preferences))
};
onModalRef: Function;
constructor(props: any) {
super(props);
this.modalRef = React.createRef();
this.onModalRef = this.onModalRef.bind(this);
}
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({
modalCurrentDisplayItem: item
});
if (this.modalRef.current) {
this.modalRef.current.open();
if (this.modalRef) {
this.modalRef.open();
}
}
@ -127,15 +129,16 @@ export default class DebugScreen extends React.Component<Props, State> {
AsyncStorageManager.getInstance().savePref(key, value);
}
onModalRef(ref: Object) {
this.modalRef = ref;
}
render() {
return (
<View>
<Modalize
ref={this.modalRef}
adjustToContentHeight
modalStyle={{backgroundColor: ThemeManager.getCurrentThemeVariables().surface}}>
<CustomModal onRef={this.onModalRef}>
{this.getModalContent()}
</Modalize>
</CustomModal>
<ScrollView style={{padding: 5}}>
<Card style={{margin: 5}}>
<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 i18n from "i18n-js";
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";
function sortPrice(a, b) {
@ -47,17 +47,17 @@ type State = {
*/
export default class ProximoListScreen extends React.Component<Props, State> {
modalRef: { current: null | Modalize };
modalRef: Object;
originalData: Array<Object>;
shouldFocusSearchBar: boolean;
onSearchStringChange: Function;
onSortMenuPress: Function;
renderItem: Function;
onModalRef: Function;
constructor(props: any) {
super(props);
this.modalRef = React.createRef();
this.originalData = this.props.route.params['data']['data'];
this.shouldFocusSearchBar = this.props.route.params['shouldFocusSearchBar'];
this.state = {
@ -69,6 +69,7 @@ export default class ProximoListScreen extends React.Component<Props, State> {
this.onSearchStringChange = this.onSearchStringChange.bind(this);
this.onSortMenuPress = this.onSortMenuPress.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);
break;
}
if (this.modalRef.current && mode !== this.state.currentSortMode) {
this.modalRef.current.close();
if (this.modalRef && mode !== this.state.currentSortMode) {
this.modalRef.close();
}
}
@ -250,8 +251,8 @@ export default class ProximoListScreen extends React.Component<Props, State> {
this.setState({
modalCurrentDisplayItem: this.getModalItemContent(item)
});
if (this.modalRef.current) {
this.modalRef.current.open();
if (this.modalRef) {
this.modalRef.open();
}
}
@ -259,8 +260,8 @@ export default class ProximoListScreen extends React.Component<Props, State> {
this.setState({
modalCurrentDisplayItem: this.getModalSortMenu()
});
if (this.modalRef.current) {
this.modalRef.current.open();
if (this.modalRef) {
this.modalRef.open();
}
}
@ -283,9 +284,9 @@ export default class ProximoListScreen extends React.Component<Props, State> {
description={item.quantity + ' ' + i18n.t('proximoScreen.inStock')}
descriptionStyle={{color: this.getStockColor(parseInt(item.quantity))}}
onPress={onPress}
left={props => <Avatar.Image style={{backgroundColor: 'transparent'}} size={64}
left={() => <Avatar.Image style={{backgroundColor: 'transparent'}} size={64}
source={{uri: item.image}}/>}
right={props =>
right={() =>
<Text style={{fontWeight: "bold"}}>
{item.price}€
</Text>}
@ -297,20 +298,18 @@ export default class ProximoListScreen extends React.Component<Props, State> {
return item.name + item.code;
}
onModalRef(ref: Object) {
this.modalRef = ref;
}
render() {
return (
<View style={{
height: '100%'
}}>
<Modalize
ref={this.modalRef}
adjustToContentHeight
handlePosition={'inside'}
modalStyle={{backgroundColor: ThemeManager.getCurrentThemeVariables().card}}
handleStyle={{backgroundColor: ThemeManager.getCurrentThemeVariables().text}}
>
<CustomModal onRef={this.onModalRef}>
{this.state.modalCurrentDisplayItem}
</Modalize>
</CustomModal>
<FlatList
data={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 ProxiwashListItem from "../../components/ProxiwashListItem";
import ProxiwashConstants from "../../constants/ProxiwashConstants";
import {Modalize} from "react-native-modalize";
import CustomModal from "../../components/CustomModal";
import ThemeManager from "../../utils/ThemeManager";
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> {
modalRef: { current: null | Modalize };
modalRef: Object;
onAboutPress: Function;
getRenderItem: Function;
getRenderSectionHeader: Function;
createDataset: Function;
onHideBanner: Function;
onModalRef: Function;
fetchedData: Object;
@ -66,7 +67,6 @@ export default class ProxiwashScreen extends React.Component<Props, State> {
*/
constructor() {
super();
this.modalRef = React.createRef();
stateStrings[ProxiwashConstants.machineStates.TERMINE] = i18n.t('proxiwashScreen.states.finished');
stateStrings[ProxiwashConstants.machineStates.DISPONIBLE] = i18n.t('proxiwashScreen.states.ready');
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.createDataset = this.createDataset.bind(this);
this.onHideBanner = this.onHideBanner.bind(this);
this.onModalRef = this.onModalRef.bind(this);
}
onHideBanner() {
@ -249,14 +250,14 @@ export default class ProxiwashScreen extends React.Component<Props, State> {
this.setState({
modalCurrentDisplayItem: this.getModalContent(title, item, isDryer)
});
if (this.modalRef.current) {
this.modalRef.current.open();
if (this.modalRef) {
this.modalRef.open();
}
}
onSetupNotificationsPress(machineId: string) {
if (this.modalRef.current) {
this.modalRef.current.close();
if (this.modalRef) {
this.modalRef.close();
}
this.setupNotifications(machineId)
}
@ -323,7 +324,6 @@ export default class ProxiwashScreen extends React.Component<Props, State> {
);
}
onAboutPress() {
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() {
const nav = this.props.navigation;
return (
@ -353,14 +357,9 @@ export default class ProxiwashScreen extends React.Component<Props, State> {
>
{i18n.t('proxiwashScreen.enableNotificationsTip')}
</Banner>
<Modalize ref={this.modalRef}
adjustToContentHeight
handlePosition={'inside'}
modalStyle={{backgroundColor: ThemeManager.getCurrentThemeVariables().surface}}
handleStyle={{backgroundColor: ThemeManager.getCurrentThemeVariables().text}}
>
<CustomModal onRef={this.onModalRef}>
{this.state.modalCurrentDisplayItem}
</Modalize>
</CustomModal>
<WebSectionList
createDataset={this.createDataset}
navigation={nav}