forked from vergnet/application-amicale
Improved planning screen: back button now close the calendar if opened + translated day and month names
This commit is contained in:
parent
eb72ea6040
commit
61d413b074
1 changed files with 53 additions and 0 deletions
|
@ -1,6 +1,7 @@
|
||||||
// @flow
|
// @flow
|
||||||
|
|
||||||
import * as React from 'react';
|
import * as React from 'react';
|
||||||
|
import { BackHandler } from 'react-native';
|
||||||
import {Content, H1, H2, H3, Text, Button} from 'native-base';
|
import {Content, H1, H2, H3, Text, Button} from 'native-base';
|
||||||
import i18n from "i18n-js";
|
import i18n from "i18n-js";
|
||||||
import {View, Image} from "react-native";
|
import {View, Image} from "react-native";
|
||||||
|
@ -8,12 +9,21 @@ import ThemeManager from "../utils/ThemeManager";
|
||||||
import {Linking} from "expo";
|
import {Linking} from "expo";
|
||||||
import BaseContainer from "../components/BaseContainer";
|
import BaseContainer from "../components/BaseContainer";
|
||||||
import {Agenda} from 'react-native-calendars';
|
import {Agenda} from 'react-native-calendars';
|
||||||
|
import {LocaleConfig} from 'react-native-calendars';
|
||||||
import HTML from 'react-native-render-html';
|
import HTML from 'react-native-render-html';
|
||||||
import Touchable from 'react-native-platform-touchable';
|
import Touchable from 'react-native-platform-touchable';
|
||||||
import Modalize from 'react-native-modalize';
|
import Modalize from 'react-native-modalize';
|
||||||
import WebDataManager from "../utils/WebDataManager";
|
import WebDataManager from "../utils/WebDataManager";
|
||||||
import CustomMaterialIcon from "../components/CustomMaterialIcon";
|
import CustomMaterialIcon from "../components/CustomMaterialIcon";
|
||||||
|
|
||||||
|
LocaleConfig.locales['fr'] = {
|
||||||
|
monthNames: ['Janvier','Février','Mars','Avril','Mai','Juin','Juillet','Août','Septembre','Octobre','Novembre','Décembre'],
|
||||||
|
monthNamesShort: ['Janv.','Févr.','Mars','Avril','Mai','Juin','Juil.','Août','Sept.','Oct.','Nov.','Déc.'],
|
||||||
|
dayNames: ['Dimanche','Lundi','Mardi','Mercredi','Jeudi','Vendredi','Samedi'],
|
||||||
|
dayNamesShort: ['Dim','Lun','Mar','Mer','Jeu','Ven','Sam'],
|
||||||
|
today: 'Aujourd\'hui'
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
type Props = {
|
type Props = {
|
||||||
navigation: Object,
|
navigation: Object,
|
||||||
|
@ -23,6 +33,7 @@ type State = {
|
||||||
modalCurrentDisplayItem: Object,
|
modalCurrentDisplayItem: Object,
|
||||||
refreshing: boolean,
|
refreshing: boolean,
|
||||||
agendaItems: Object,
|
agendaItems: Object,
|
||||||
|
calendarShowing: boolean,
|
||||||
};
|
};
|
||||||
|
|
||||||
const FETCH_URL = "https://amicale-insat.fr/event/json/list";
|
const FETCH_URL = "https://amicale-insat.fr/event/json/list";
|
||||||
|
@ -48,20 +59,56 @@ export default class PlanningScreen extends React.Component<Props, State> {
|
||||||
lastRefresh: Date;
|
lastRefresh: Date;
|
||||||
minTimeBetweenRefresh = 60;
|
minTimeBetweenRefresh = 60;
|
||||||
|
|
||||||
|
_agenda: Agenda;
|
||||||
|
|
||||||
constructor(props: any) {
|
constructor(props: any) {
|
||||||
super(props);
|
super(props);
|
||||||
this.modalRef = React.createRef();
|
this.modalRef = React.createRef();
|
||||||
this.webDataManager = new WebDataManager(FETCH_URL);
|
this.webDataManager = new WebDataManager(FETCH_URL);
|
||||||
|
this._didFocusSubscription = props.navigation.addListener(
|
||||||
|
'didFocus',
|
||||||
|
payload =>
|
||||||
|
BackHandler.addEventListener(
|
||||||
|
'hardwareBackPress',
|
||||||
|
this.onBackButtonPressAndroid
|
||||||
|
)
|
||||||
|
);
|
||||||
|
if (i18n.currentLocale().startsWith("fr")) {
|
||||||
|
LocaleConfig.defaultLocale = 'fr';
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
componentDidMount() {
|
componentDidMount() {
|
||||||
this._onRefresh();
|
this._onRefresh();
|
||||||
|
this._willBlurSubscription = this.props.navigation.addListener(
|
||||||
|
'willBlur',
|
||||||
|
payload =>
|
||||||
|
BackHandler.removeEventListener(
|
||||||
|
'hardwareBackPress',
|
||||||
|
this.onBackButtonPressAndroid
|
||||||
|
)
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
onBackButtonPressAndroid = () => {
|
||||||
|
if (this.state.calendarShowing) {
|
||||||
|
this._agenda.chooseDay(this._agenda.state.selectedDay);
|
||||||
|
return true;
|
||||||
|
} else {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
componentWillUnmount() {
|
||||||
|
this._didFocusSubscription && this._didFocusSubscription.remove();
|
||||||
|
this._willBlurSubscription && this._willBlurSubscription.remove();
|
||||||
}
|
}
|
||||||
|
|
||||||
state = {
|
state = {
|
||||||
modalCurrentDisplayItem: {},
|
modalCurrentDisplayItem: {},
|
||||||
refreshing: false,
|
refreshing: false,
|
||||||
agendaItems: {},
|
agendaItems: {},
|
||||||
|
calendarShowing: false,
|
||||||
};
|
};
|
||||||
|
|
||||||
getCurrentDate() {
|
getCurrentDate() {
|
||||||
|
@ -347,11 +394,17 @@ export default class PlanningScreen extends React.Component<Props, State> {
|
||||||
futureScrollRange={AGENDA_MONTH_SPAN}
|
futureScrollRange={AGENDA_MONTH_SPAN}
|
||||||
// If provided, a standard RefreshControl will be added for "Pull to Refresh" functionality. Make sure to also set the refreshing prop correctly.
|
// If provided, a standard RefreshControl will be added for "Pull to Refresh" functionality. Make sure to also set the refreshing prop correctly.
|
||||||
onRefresh={() => this._onRefresh()}
|
onRefresh={() => this._onRefresh()}
|
||||||
|
// callback that fires when the calendar is opened or closed
|
||||||
|
onCalendarToggled={(calendarOpened) => {this.setState({calendarShowing: calendarOpened})}}
|
||||||
// Set this true while waiting for new data from a refresh
|
// Set this true while waiting for new data from a refresh
|
||||||
refreshing={this.state.refreshing}
|
refreshing={this.state.refreshing}
|
||||||
renderItem={(item) => this.getRenderItem(item)}
|
renderItem={(item) => this.getRenderItem(item)}
|
||||||
renderEmptyDate={() => this.getRenderEmptyDate()}
|
renderEmptyDate={() => this.getRenderEmptyDate()}
|
||||||
rowHasChanged={() => this.rowHasChanged()}
|
rowHasChanged={() => this.rowHasChanged()}
|
||||||
|
// If firstDay=1 week starts from Monday. Note that dayNames and dayNamesShort should still start from Sunday.
|
||||||
|
firstDay={1}
|
||||||
|
// ref to this agenda in order to handle back button event
|
||||||
|
ref={(ref) => this._agenda = ref}
|
||||||
// agenda theme
|
// agenda theme
|
||||||
theme={{
|
theme={{
|
||||||
backgroundColor: ThemeManager.getCurrentThemeVariables().agendaBackgroundColor,
|
backgroundColor: ThemeManager.getCurrentThemeVariables().agendaBackgroundColor,
|
||||||
|
|
Loading…
Reference in a new issue