1- import { createElement , ReactNode , useCallback , useState } from "react" ;
1+ import { createElement , useCallback , useEffect , useState } from "react" ;
22import { defaultWelcomeScreenStyle , IntroScreenStyle } from "./ui/Styles" ;
33import { IntroScreenProps } from "../typings/IntroScreenProps" ;
4- import { Modal , Text , View , ViewStyle } from "react-native" ;
5- import { Icon } from "mendix/components/native/Icon" ;
6- import { DynamicValue , NativeIcon , ValueStatus } from "mendix" ;
7- import { flattenStyles } from "@native-mobile-resources/util-widgets" ;
4+ import { Modal , View } from "react-native" ;
5+ import { DynamicValue , ValueStatus } from "mendix" ;
86import { SwipeableContainer } from "./SwipeableContainer" ;
9-
10- interface RenderButtonProperty {
11- [ key : string ] : ReactNode ;
12- }
7+ import AsyncStorage from "@react-native-community/async-storage" ;
8+ import deepmerge from "deepmerge" ;
139
1410export function IntroScreen ( props : IntroScreenProps < IntroScreenStyle > ) : JSX . Element {
15- const [ visible , setVisible ] = useState ( true ) ;
16- const styles = flattenStyles ( defaultWelcomeScreenStyle , props . style ) ;
11+ const [ visible , setVisible ] = useState ( false ) ;
12+ const customStyles = props . style ? props . style . filter ( o => o != null ) : [ ] ;
13+ const styles =
14+ customStyles . length > 0
15+ ? deepmerge . all < IntroScreenStyle > ( [ defaultWelcomeScreenStyle , ...customStyles ] )
16+ : defaultWelcomeScreenStyle ;
17+
18+ useEffect ( ( ) => {
19+ if ( props . identifier ) {
20+ AsyncStorage . getItem ( props . identifier ) . then ( value => {
21+ setVisible ( value === "" || value === null ) ;
22+ } ) ;
23+ } else {
24+ setVisible ( true ) ;
25+ }
26+ } , [ ] ) ;
27+
1728 const onDone = useCallback ( ( ) => {
29+ hideModal ( ) ;
1830 if ( props . onDone && props . onDone . canExecute ) {
1931 props . onDone . execute ( ) ;
2032 }
21- setVisible ( false ) ;
2233 } , [ ] ) ;
34+
2335 const onSlideChange = useCallback ( ( ) => {
2436 if ( props . onSlideChange && props . onSlideChange . canExecute ) {
2537 props . onSlideChange . execute ( ) ;
2638 }
2739 } , [ ] ) ;
40+
2841 const onSkip = useCallback ( ( ) => {
42+ hideModal ( ) ;
2943 if ( props . onSkip && props . onSkip . canExecute ) {
3044 props . onSkip . execute ( ) ;
3145 }
32- setVisible ( false ) ;
3346 } , [ ] ) ;
3447
35- const renderText = ( caption ?: DynamicValue < string > ) : ReactNode => {
36- if ( caption && caption . status === ValueStatus . Available && caption . value ) {
37- return < Text style = { styles . buttonIconText } > { caption . value } </ Text > ;
48+ const checkLabel = ( label ?: DynamicValue < string > ) : string | undefined => {
49+ if ( label && label . value && label . status === ValueStatus . Available ) {
50+ return label . value ;
3851 }
3952 return undefined ;
4053 } ;
4154
42- const renderButton = (
43- property : string ,
44- style : ViewStyle ,
45- icon ?: DynamicValue < NativeIcon > ,
46- caption ?: DynamicValue < string >
47- ) : RenderButtonProperty => {
48- const returnObject : RenderButtonProperty = { } ;
49- if ( ! icon || ! icon . value ) {
50- return returnObject ;
55+ const hideModal = ( ) : void => {
56+ if ( props . identifier ) {
57+ AsyncStorage . setItem ( props . identifier , "gone" ) . then ( ( ) => setVisible ( false ) ) ;
58+ } else {
59+ setVisible ( false ) ;
5160 }
52-
53- returnObject [ property ] = ( ) => (
54- < View style = { [ { flexDirection : "row" , justifyContent : "center" , alignItems : "center" } , style ] } >
55- < Icon icon = { icon ! . value } color = { styles . buttonIconText . color ? styles . buttonIconText . color : "black" } />
56- { renderText ( caption ) }
57- </ View >
58- ) ;
59-
60- return returnObject ;
61- } ;
62-
63- const renderLabel = ( label ?: DynamicValue < string > ) : string | undefined => {
64- if ( label && label . value && label . status === ValueStatus . Available ) {
65- return label . value ;
66- }
67- return undefined ;
6861 } ;
6962
7063 const showSkipPrevious = props . buttonPattern === "all" ;
7164 const showNextDone = props . buttonPattern !== "none" ;
72- const renderButtonsProperties = {
73- ...renderButton ( "renderSkipButton" , styles . buttonSkip , props . skipIcon , props . skipCaption ) ,
74- ...renderButton ( "renderPreviousButton" , styles . buttonPrevious , props . previousIcon , props . previousCaption ) ,
75- ...renderButton ( "renderNextButton" , styles . buttonNext , props . nextIcon , props . nextCaption ) ,
76- ...renderButton ( "renderDoneButton" , styles . buttonDone , props . doneIcon , props . doneCaption )
77- } ;
7865
7966 return (
80- < Modal visible = { visible } transparent >
81- < View style = { props . showMode === "fullscreen" ? styles . fullscreenContainer : styles . cardContainer } >
67+ < Modal visible = { visible } transparent = { props . showMode === "popup" } hardwareAccelerated >
68+ < View style = { props . showMode === "fullscreen" ? styles . fullscreenContainer : styles . popupContainer } >
8269 < SwipeableContainer
8370 slides = { props . slides }
8471 onDone = { onDone }
@@ -91,13 +78,17 @@ export function IntroScreen(props: IntroScreenProps<IntroScreenStyle>): JSX.Elem
9178 showPreviousButton = { showSkipPrevious }
9279 showDoneButton = { showNextDone }
9380 hidePagination = { props . slideIndicators === "never" }
94- skipLabel = { renderLabel ( props . skipCaption ) }
95- previousLabel = { renderLabel ( props . previousCaption ) }
96- nextLabel = { renderLabel ( props . nextCaption ) }
97- doneLabel = { renderLabel ( props . doneCaption ) }
81+ skipLabel = { checkLabel ( props . skipCaption ) }
82+ skipIcon = { props . skipIcon }
83+ previousLabel = { checkLabel ( props . previousCaption ) }
84+ previousIcon = { props . previousIcon }
85+ nextLabel = { checkLabel ( props . nextCaption ) }
86+ nextIcon = { props . nextIcon }
87+ doneLabel = { checkLabel ( props . doneCaption ) }
88+ doneIcon = { props . doneIcon }
9889 styles = { styles }
9990 activeSlide = { props . activeSlideAttribute }
100- { ... renderButtonsProperties }
91+ hideIndicatorLastSlide = { props . hideIndicatorLastSlide }
10192 />
10293 </ View >
10394 </ Modal >
0 commit comments