forked from vergnet/application-amicale
		
	Added intro slide on update, changed planning event display on click
This commit is contained in:
		
							parent
							
								
									74a587cac7
								
							
						
					
					
						commit
						517fea788d
					
				
					 6 changed files with 53 additions and 14 deletions
				
			
		
							
								
								
									
										17
									
								
								App.js
									
									
									
									
									
								
							
							
						
						
									
										17
									
								
								App.js
									
									
									
									
									
								
							|  | @ -20,6 +20,7 @@ type Props = {}; | |||
| type State = { | ||||
|     isLoading: boolean, | ||||
|     showIntro: boolean, | ||||
|     showUpdate: boolean, | ||||
|     currentTheme: ?Object, | ||||
| }; | ||||
| 
 | ||||
|  | @ -28,6 +29,7 @@ export default class App extends React.Component<Props, State> { | |||
|     state = { | ||||
|         isLoading: true, | ||||
|         showIntro: true, | ||||
|         showUpdate: true, | ||||
|         currentTheme: null, | ||||
|     }; | ||||
| 
 | ||||
|  | @ -47,11 +49,15 @@ export default class App extends React.Component<Props, State> { | |||
|     } | ||||
| 
 | ||||
|     /** | ||||
|      * Callback when user ends the intro. Save in preferences to avaoid showing back the slides | ||||
|      * Callback when user ends the intro. Save in preferences to avaoid showing back the introSlides | ||||
|      */ | ||||
|     onIntroDone() { | ||||
|         this.setState({showIntro: false}); | ||||
|         this.setState({ | ||||
|             showIntro: false, | ||||
|             showUpdate: false, | ||||
|         }); | ||||
|         AsyncStorageManager.getInstance().savePref(AsyncStorageManager.getInstance().preferences.showIntro.key, '0'); | ||||
|         AsyncStorageManager.getInstance().savePref(AsyncStorageManager.getInstance().preferences.showUpdate1.key, '0'); | ||||
|     } | ||||
| 
 | ||||
|     async loadAssetsAsync() { | ||||
|  | @ -73,7 +79,8 @@ export default class App extends React.Component<Props, State> { | |||
|         this.setState({ | ||||
|             isLoading: false, | ||||
|             currentTheme: ThemeManager.getCurrentTheme(), | ||||
|             showIntro: AsyncStorageManager.getInstance().preferences.showIntro.current === '1' | ||||
|             showIntro: AsyncStorageManager.getInstance().preferences.showIntro.current === '1', | ||||
|             showUpdate: AsyncStorageManager.getInstance().preferences.showUpdate1.current === '1' | ||||
|             // showIntro: true
 | ||||
|         }); | ||||
|     } | ||||
|  | @ -91,8 +98,8 @@ export default class App extends React.Component<Props, State> { | |||
|                 /> | ||||
|             ); | ||||
|         } | ||||
|         if (this.state.showIntro) { | ||||
|             return <CustomIntroSlider onDone={() => this.onIntroDone()}/>; | ||||
|         if (this.state.showIntro || this.state.showUpdate) { | ||||
|             return <CustomIntroSlider onDone={() => this.onIntroDone()} isUpdate={this.state.showUpdate && !this.state.showIntro}/>; | ||||
|         } else { | ||||
|             const AppNavigator = createAppContainerWithInitialRoute(AsyncStorageManager.getInstance().preferences.defaultStartScreen.current); | ||||
|             return ( | ||||
|  |  | |||
|  | @ -39,15 +39,17 @@ const styles = StyleSheet.create({ | |||
| 
 | ||||
| type Props = { | ||||
|     onDone: Function, | ||||
|     isUpdate: boolean | ||||
| }; | ||||
| 
 | ||||
| export default class CustomIntroSlider extends React.Component<Props> { | ||||
| 
 | ||||
|     slides: Array<Object>; | ||||
|     introSlides: Array<Object>; | ||||
|     updateSlides: Array<Object>; | ||||
| 
 | ||||
|     constructor() { | ||||
|         super(); | ||||
|         this.slides = [ | ||||
|         this.introSlides = [ | ||||
|             { | ||||
|                 key: '1', | ||||
|                 title: i18n.t('intro.slide1.title'), | ||||
|  | @ -91,11 +93,20 @@ export default class CustomIntroSlider extends React.Component<Props> { | |||
|                 colors: ['#37c13e', '#26852b'], | ||||
|             }, | ||||
|         ]; | ||||
|         this.updateSlides = [ | ||||
|             { | ||||
|                 key: '1', | ||||
|                 title: i18n.t('intro.updateSlide.title'), | ||||
|                 text: i18n.t('intro.updateSlide.text'), | ||||
|                 icon: 'calendar-range', | ||||
|                 colors: ['#e01928', '#be1522'], | ||||
|             }, | ||||
|         ] | ||||
|     } | ||||
| 
 | ||||
| 
 | ||||
|     /** | ||||
|      * Render item to be used for the intro slides | ||||
|      * Render item to be used for the intro introSlides | ||||
|      * @param item | ||||
|      * @param dimensions | ||||
|      */ | ||||
|  | @ -125,7 +136,7 @@ export default class CustomIntroSlider extends React.Component<Props> { | |||
|     render() { | ||||
|         return ( | ||||
|             <AppIntroSlider renderItem={({item, dimensions}) => CustomIntroSlider.getIntroRenderItem(item, dimensions)} | ||||
|                             slides={this.slides} onDone={() => this.props.onDone()} bottomButton showSkipButton/> | ||||
|                             slides={this.props.isUpdate ? this.updateSlides : this.introSlides} onDone={() => this.props.onDone()} bottomButton showSkipButton/> | ||||
|         ); | ||||
|     } | ||||
| 
 | ||||
|  |  | |||
|  | @ -60,7 +60,7 @@ export default class PlanningScreen extends React.Component<Props, State> { | |||
|     state = { | ||||
|         modalCurrentDisplayItem: {}, | ||||
|         refreshing: false, | ||||
|         agendaItems: {} | ||||
|         agendaItems: {}, | ||||
|     }; | ||||
| 
 | ||||
|     getCurrentDate() { | ||||
|  | @ -124,7 +124,7 @@ export default class PlanningScreen extends React.Component<Props, State> { | |||
| 
 | ||||
|     showItemDetails(item: Object) { | ||||
|         this.setState({ | ||||
|             modalCurrentDisplayItem: item | ||||
|             modalCurrentDisplayItem: item, | ||||
|         }); | ||||
|         if (this.modalRef.current) { | ||||
|             this.modalRef.current.open(); | ||||
|  | @ -203,7 +203,7 @@ export default class PlanningScreen extends React.Component<Props, State> { | |||
|     _onRefresh = () => { | ||||
|         let canRefresh; | ||||
|         if (this.lastRefresh !== undefined) | ||||
|             canRefresh = (new Date().getTime() - this.lastRefresh.getTime())/1000 > this.minTimeBetweenRefresh; | ||||
|             canRefresh = (new Date().getTime() - this.lastRefresh.getTime()) / 1000 > this.minTimeBetweenRefresh; | ||||
|         else | ||||
|             canRefresh = true; | ||||
| 
 | ||||
|  | @ -292,6 +292,12 @@ export default class PlanningScreen extends React.Component<Props, State> { | |||
|         return array[0] + ':' + array[1]; | ||||
|     } | ||||
| 
 | ||||
|     onModalClosed() { | ||||
|         this.setState({ | ||||
|             modalCurrentDisplayItem: {}, | ||||
|         }); | ||||
|     } | ||||
| 
 | ||||
|     render() { | ||||
|         const nav = this.props.navigation; | ||||
|         return ( | ||||
|  | @ -299,7 +305,9 @@ export default class PlanningScreen extends React.Component<Props, State> { | |||
|                 <Modalize ref={this.modalRef} | ||||
|                           modalStyle={{ | ||||
|                               backgroundColor: ThemeManager.getCurrentThemeVariables().containerBgColor, | ||||
|                           }}> | ||||
|                           }} | ||||
|                           adjustToContentHeight | ||||
|                           onClosed={() => this.onModalClosed()}> | ||||
|                     {this.getModalContent()} | ||||
|                 </Modalize> | ||||
|                 <Agenda | ||||
|  | @ -310,7 +318,7 @@ export default class PlanningScreen extends React.Component<Props, State> { | |||
|                     // initially selected day
 | ||||
|                     selected={this.getCurrentDate()} | ||||
|                     // Minimum date that can be selected, dates before minDate will be grayed out. Default = undefined
 | ||||
|                     minDate={"2019-09-01"} | ||||
|                     minDate={this.getCurrentDate()} | ||||
|                     // Max amount of months allowed to scroll to the past. Default = 50
 | ||||
|                     pastScrollRange={1} | ||||
|                     // Max amount of months allowed to scroll to the future. Default = 50
 | ||||
|  |  | |||
|  | @ -33,6 +33,10 @@ | |||
|     "slide6": { | ||||
|       "title": "More to come...", | ||||
|       "text": "New features are coming soon, do not hesitate to give us feedback to improve the app" | ||||
|     }, | ||||
|     "updateSlide": { | ||||
|       "title": "New in this update!", | ||||
|       "text": "Discover every event occurring on the campus in the new Planning screen!" | ||||
|     } | ||||
|   }, | ||||
|   "settingsScreen": { | ||||
|  |  | |||
|  | @ -33,6 +33,10 @@ | |||
|     "slide6": { | ||||
|       "title": "Plus à venir...", | ||||
|       "text": "D'autres fonctionnalités arrivent bientôt, n'hésitez pas à nous donner votre avis pour améliorer l'appli" | ||||
|     }, | ||||
|     "updateSlide": { | ||||
|       "title": "Nouveau dans cette mise à jour !", | ||||
|       "text": "Découvre tous les événements du campus dans la nouvelle section Planning !" | ||||
|     } | ||||
|   }, | ||||
|   "settingsScreen": { | ||||
|  |  | |||
|  | @ -29,6 +29,11 @@ export default class AsyncStorageManager { | |||
|             default: '1', | ||||
|             current: '', | ||||
|         }, | ||||
|         showUpdate1: { | ||||
|             key: 'showUpdate1', | ||||
|             default: '1', | ||||
|             current: '', | ||||
|         }, | ||||
|         proxiwashNotifications: { | ||||
|             key: 'proxiwashNotifications', | ||||
|             default: '5', | ||||
|  |  | |||
		Loading…
	
		Reference in a new issue