@fto-consult/expo-ui 1.0.4

package/src/components/WebView/index.js

@@ -0,0 +1,79 @@
+import WebView from "./Component";
+import {defaultStr} from "$utils";
+import React from "$react";
+import PropTypes from "prop-types";
+import {isValidUrl} from "$utils/uri";
+import FileSystem from "$file-system";
+
+const  WebViewComponent = React.forwardRef(({children,source,style,testID,...props},ref)=>{
+    testID = defaultStr(testID,"RN_WebviewComponent");
+    return <WebView ref={ref} {...props} 
+        testID = {testID} 
+        style={[{backgroundColor:'transparent'},style]}
+        source = {defaultObj(source)}
+    >
+        {children}
+    </WebView>
+});
+WebViewComponent.displayName ="WebViewComponent";
+
+WebViewComponent.propTypes = {
+    ///localhtml doit être chargé en utilisant require où import : exemple : require("../assets/musicsheetview/index.html")
+    ///si la webview devra charger un fichier html local, alors la valeur localHtm comporte une valeur
+    source : PropTypes.object,
+}
+
+WebViewComponent.LocalHtml = React.forwardRef(({file,source,...props},ref)=>{
+    const prevLocalHtml = React.usePrevious(file);
+    const isInitializedRef = React.useRef(false);
+    const [html, setHtml] = useState("");
+    React.useEffect(()=>{
+        if(isInitializedRef.current && prevLocalHtml == file) return;
+        isInitializedRef.current = true;
+        FileSystem.readFile(file).then((data)=>{
+            setHtml(data);
+        });
+    },file)
+    return <WebViewComponent
+        ref = {ref}
+        source={{...defaultObj(source),html}}
+    />
+});
+
+WebViewComponent.LocalHtml.displayName = "WebViewComponent.LocalHtml";
+WebViewComponent.LocalHtml.propTypes = {
+    ...WebViewComponent.propTypes,
+    file : PropTypes.any.isRequired,
+}
+WebViewComponent.Local = WebViewComponent.LocalHtml;
+
+WebViewComponent.Url = React.forwardRef(({url,source,...props},ref)=>{
+    const isU = isValidUrl(url);
+    return <WebViewComponent
+        ref = {ref}
+        {...props}
+        source = {{...defaultObj(source),url:isU?url:undefined}}
+    />
+});
+WebViewComponent.Url.displayName = "WebViewComponent.Url";
+WebViewComponent.Url.propTypes = {
+    ...WebViewComponent.propTypes,
+    url : PropTypes.string.isRequired,
+}
+
+WebViewComponent.Html = React.forwardRef(({html,source,...props},ref)=>{
+    return <WebViewComponent
+        ref = {ref}
+        {...props}
+        source = {{...defaultObj(source),html}}
+    />
+});
+WebViewComponent.Html.displayName = "WebViewComponent.Html";
+WebViewComponent.Html.propTypes = {
+    ...WebViewComponent.propTypes,
+    html : PropTypes.string.isRequired,
+}
+
+export default WebViewComponent;
+
+export * from "react-native-webview";

package/src/index.js

@@ -0,0 +1,166 @@
+import React from "$react"
+import { AppState,Linking,BackHandler,} from "react-native"
+import APP from "$capp";
+import {AppStateService,trackIDLE,stop as stopIDLE} from "$capp/idle";
+import { NavigationContainer} from '@react-navigation/native';
+import {navigationRef} from "$cnavigation/utils"
+import NetInfo from '$utils/NetInfo';
+import Auth from "$cauth";
+import {isNativeMobile} from "$cplatform";
+import Navigation from "$enavigation";
+import {set as setSession,get as getSession} from "$session";
+import { showConfirm } from "$ecomponents/Dialog";
+import {close as closePreloader, isVisible as isPreloaderVisible} from "$preloader";
+import SplashScreen from "$ecomponents/SplashScreen";
+import {notify} from "$ecomponents/Dialog";
+import {decycle} from "$utils/json";
+import init from "$capp/init";
+import { setIsInitialized} from "$capp/utils";
+
+let MAX_BACK_COUNT = 1;
+let countBack = 0;
+let isBackConfirmShowing = false;  
+
+const resetExitCounter = ()=>{
+  countBack = 0;
+  isBackConfirmShowing = false;
+};
+
+const NAVIGATION_PERSISTENCE_KEY = 'NAVIGATION_STATE';
+
+function App(props) {
+  AppStateService.init();
+  const [initialState, setInitialState] = React.useState(undefined);
+  const appReadyRef = React.useRef(false);
+  const [state,setState] = React.useState({
+     isLoading : true,
+     isInitialized:false,
+  });
+  React.useEffect(() => {
+    const restoreState = () => {
+       return new Promise((resolve,reject)=>{
+          (async ()=>{
+            try {
+              const initialUrl = await Linking.getInitialURL();
+              if (isNativeMobile() || initialUrl === null) {
+                const savedState = getSession(NAVIGATION_PERSISTENCE_KEY);
+                if (isObj(savedState)) {
+                  setInitialState(savedState);
+                }
+              }
+            } catch(e){ console.log(e," is state error")}
+            finally { 
+                appReadyRef.current = true;
+                resolve({});
+            }
+          })();
+       });
+    };
+    const subscription = AppState.addEventListener('change', AppStateService.getInstance().handleAppStateChange);
+    const backAction = (args) => {
+      if(navigationRef && navigationRef.canGoBack()? true : false){
+          resetExitCounter();
+          navigationRef.goBack(null);
+          return false;
+      }
+      if(isBackConfirmShowing) {
+        return;
+      }
+      if(countBack < MAX_BACK_COUNT){
+          countBack++;
+          isBackConfirmShowing = false;
+          if(countBack === MAX_BACK_COUNT){
+              notify.toast({text:'Cliquez à nouveau pour quiiter l\'application'});
+          }
+          if(countBack === 2 && isPreloaderVisible()) {
+              closePreloader();
+          }
+          return false;
+      }
+      isBackConfirmShowing = true;
+      showConfirm({
+          title : "Quitter l'application",
+          message : 'Voulez vous vraiment quitter l\'application?',
+          yes : 'Oui',
+          no : 'Non',
+          onSuccess : ()=>{
+              isBackConfirmShowing = false;
+              countBack = 0;
+              BackHandler.exitApp();
+          },
+          onCancel : ()=>{
+              isBackConfirmShowing = false;
+              countBack = 0;
+              return;
+          }
+      })
+    };
+    const unsubscribeNetInfo = NetInfo.addEventListener(state => {
+       APP.setOnlineState(state);
+    });
+    NetInfo.fetch().catch((e)=>{});
+    restoreState().then(()=>{
+      init().then(()=>{
+        if(Auth.isLoggedIn()){
+          Auth.loginUser(false);
+        }
+        setState({
+          ...state,isInitialized:true,isLoading : false,
+        });  
+      }).catch((e)=>{
+          setState({...state,isInitialized:true,isLoading : false});
+      });
+    });
+
+    const Events = {}
+    let events = [];
+    if(navigationRef && navigationRef.addListener){
+        for(let i in Events){
+          events.push(navigationRef.addListener(i,Events[i]));
+        }
+    }
+
+    APP.on(APP.EVENTS.BACK_BUTTON,backAction);
+    return () => {
+        APP.off(APP.EVENTS.BACK_BUTTON,backAction);
+        
+        if(subscription && subscription.remove){
+          subscription.remove();
+        }
+        events.map((ev)=>{
+          if(typeof ev =="function") ev();
+        })
+        unsubscribeNetInfo();
+        stopIDLE(false,true);
+        
+    }   
+  }, []);
+  const {isInitialized} = state;
+  const hasGetStarted = true;
+  const isLoading = state.isLoading || !isInitialized || !appReadyRef.current ? true : false;
+    React.useEffect(()=>{
+      if(isInitialized){
+          setIsInitialized(true);
+          trackIDLE(true);
+      }
+  },[isInitialized]);
+  const initialRouteName = "Home";
+  return (<SplashScreen isLoaded={!isLoading}>
+      <NavigationContainer 
+          ref={navigationRef}
+          initialState={initialState}
+          onStateChange={(state) =>{
+              setSession(NAVIGATION_PERSISTENCE_KEY,decycle(state),false);
+          }
+        }
+      >
+          <Navigation
+            initialRouteName = {initialRouteName}
+            state = {state}
+            hasGetStarted = {hasGetStarted}
+          />
+      </NavigationContainer> 
+  </SplashScreen>);
+}
+
+export default App;

package/src/layouts/AppBar/index.js

@@ -0,0 +1,59 @@
+import AppBar from "$ecomponents/AppBar";
+import { Appbar } from "react-native-paper";
+import React from "$react";
+import {MENU_ICON} from "$ecomponents/Icon";
+import {defaultObj} from "$utils";
+import {useDrawer} from "$ecomponents/Drawer";
+import Icon from "$ecomponents/Icon";
+
+export * from "./utils";
+
+const AppBarLayout = React.forwardRef(({backActionProps,withDrawer,backAction,backActionRef,options,...props},ref)=>{
+    const innerRef = React.useRef(null);
+    options = defaultObj(options);
+    const mergedRef = React.useMergeRefs(innerRef,ref);
+    backActionProps = Object.assign({},backActionProps);
+    const {drawerRef} = useDrawer();
+    return <AppBar
+        backAction = {backAction === false ? null : ({back,...props})=>{
+            props = defaultObj(props);
+            const size = 30;
+            const bProps = {
+                size,
+                //color : theme.colors.primaryText,
+                ...backActionProps,
+                ...props,
+            }
+            return backAction === true ? <Appbar.BackAction {...bProps}/> : withDrawer !== false? <Icon {...bProps} icon = {MENU_ICON}/> : null;
+        }}
+        {...props}
+        onBackActionPress = {(args)=>{
+            const {canGoBack,goBack} = args;
+            if(backAction === true && canGoBack()){
+                goBack();
+                return false;
+            }
+            if(drawerRef && drawerRef.current){
+                if(drawerRef.current.isMinimized() && drawerRef.current.isOpen()){
+                    drawerRef.current.restore();
+                    return false;
+                }
+                if(!drawerRef.current.isPermanent()){
+                    drawerRef.current.toggle();
+                } else if(!drawerRef.current.isOpen()){
+                    drawerRef.current.open();
+                }
+            }
+            return false;
+        }}
+        ref = {mergedRef}
+    />
+});
+
+AppBarLayout.displayName = "AppBarLayout";
+
+AppBarLayout.propTypes = {
+    ...AppBar.propTypes,
+}
+
+export default AppBarLayout;

package/src/layouts/AppBar/utils.js

@@ -0,0 +1,12 @@
+import * as React from "react";
+let appBarRef = null;
+
+export {appBarRef};
+
+export const createAppBarRef = ()=>{
+    const ref = React.useRef(null);
+    React.useEffect(()=>{
+        appBarRef = ref.current;
+    },[ref.current]);
+    return ref;
+}

package/src/layouts/Fab/actions.js

@@ -0,0 +1,5 @@
+
+
+export default function mainFab(){
+   return null;
+}

package/src/layouts/Fab/index.js

@@ -0,0 +1,60 @@
+import Fab from "$ecomponents/Fab";
+import { StyleSheet } from "react-native";
+import actions from "./actions";
+import {isObjOrArray} from "$utils";
+import {removeFabRef,createFabRef} from "./utils";
+import PropTypes from "prop-types";
+import APP from "$capp";
+import React from "$react";
+import {sanitizeName} from "$escreens/utils";
+
+export * from "./utils";
+
+const FABContainer = React.forwardRef((props,ref)=>{
+   return null;
+  const {state,actions:customActions,screenName,...rest} = props;
+  const sScreenName = sanitizeName(screenName);
+  ref = ref || createFabRef(screenName);
+  React.useEffect(()=>{
+    const onFocusFab = ({sanitizedName})=>{
+        const isFocused = sanitizedName === sScreenName;
+        if(isFocused && ref.current && ref.current.show){
+            ref.current.show();
+        }
+    }, onBlurFab = ({sanitizedName})=>{
+      const isBlured = sanitizedName == sScreenName;
+      if(isBlured && ref.current && ref.current.hide){
+        ref.current.hide();
+      }
+    }
+    APP.on(APP.EVENTS.SCREEN_FOCUS,onFocusFab);
+    APP.on(APP.EVENTS.SCREEN_BLUR,onBlurFab);
+    return ()=>{
+      APP.off(APP.EVENTS.SCREEN_FOCUS,onFocusFab);
+      APP.off(APP.EVENTS.SCREEN_BLUR,onBlurFab);
+      removeFabRef(screenName);
+    }
+  },[])
+  return <Fab.Group
+        {...rest}
+        screenName = {screenName}
+        ref = {ref}
+        style={styles.fab}
+        actions = {isObjOrArray(customActions) && Object.size(customActions,true)?customActions : actions()}
+    />
+});
+const styles = StyleSheet.create({
+    fab: {
+      position: 'absolute',
+      margin: 16,
+      right: 0,
+      bottom: 0,
+    },
+  })
+
+  export default FABContainer;
+
+  FABContainer.propTypes = {
+     screenName : PropTypes.string.isRequired,
+  }
+  FABContainer.displayName = "FABContainer";

package/src/layouts/Fab/utils.js

@@ -0,0 +1,25 @@
+import React from "$react";
+
+export const defaultName = "FAB-REF-DEFAULT-NAME";
+
+export const  FAB_CONTAINER_REFS = {};
+
+export const createFabRef = (screenName)=>{
+  screenName = typeof screenName =='string' && screenName ? screenName : defaultName;
+  const ref = React.useRef(null);
+  React.useEffect(()=>{
+      FAB_CONTAINER_REFS[screenName] = ref.current;
+  },[ref.current])
+  return ref;
+};
+export const getFabRef = screenName => {
+    screenName = typeof screenName =='string' && screenName ? screenName : defaultName;
+    return FAB_CONTAINER_REFS[screenName] || null;
+}; 
+
+export const FAB_REFS = FAB_CONTAINER_REFS;
+
+export const removeFabRef = (screenName)=>{
+  screenName = screenName && typeof screenName =='string'? screenName : defaultName;
+  delete FAB_CONTAINER_REFS[screenName];
+}

package/src/layouts/Footer/index.js

@@ -0,0 +1,8 @@
+import React from "$react";
+const AppFooterLayout = React.forwardRef((props,ref)=>{
+    return <span>i am footer</span>
+});
+
+AppFooterLayout.displayName = "AppFooterLayout";
+
+export default AppFooterLayout;

package/src/layouts/Screen/FormData/FormData.js

@@ -0,0 +1,103 @@
+import PropTypes from "prop-types";
+import FormDataActions from "$ecomponents/Form/FormData/FormDataActions";
+import React from "$react";
+import {defaultObj,isObj,defaultStr} from "$utils";
+import ScreenContainer from "../Screen";
+import {useRoute} from "$enavigation/utils";
+import {Form as FormLoader} from "$ecomponents/ContentLoader";
+import HeavyScreen from "$ecomponents/HeavyScreen";
+import {goBack,getScreenProps} from "$enavigation/utils";
+
+
+export default class FormDataLayout extends FormDataActions {
+    getComponentProps(props){
+        this.__mainProps = null;
+        return super.getComponentProps(getScreenProps(props));
+    }
+    /***les props à passer au container de la liste à rendre */
+    getScreenProps(){
+        return {};
+    }
+    getMainProps (){
+        if(isObj(this.__mainProps) && Object.size(this.__mainProps,true)) return this.__mainProps;
+        this.__mainProps = getScreenProps(this.props);
+        return this.__mainProps;
+    }
+    getDataProp(){
+        return Object.assign({},this.getMainProps().data);
+    }
+    getAppBarProps(){
+        const appBarProps = super.getAppBarProps();
+        const {beforeGoBack} = appBarProps;
+        const params = defaultObj(useRoute().params);
+        const mainProps = this.getMainProps();
+        const {onGoBack} = appBarProps;
+        appBarProps.onGoBack = (args)=>{
+            if(typeof params.onGoBack =='function' && params.onGoBack(args) == false){
+                return;
+            } else if(typeof onGoBack =='function'){
+                onGoBack(args);
+            } else if(typeof mainProps.onGoBack =='function'){
+                mainProps.onGoBack(args);
+            }
+        }
+        appBarProps.beforeGoBack = (args)=>{
+            if(args.force === true) return true;
+            if(typeof beforeGoBack ==='function'){
+                return beforeGoBack(args);
+            } 
+            this.onBackActionPress(args,()=>{
+                const {goBack} = args;
+                if(typeof goBack =='function'){
+                    goBack(true);
+                }
+            });
+            return false;
+        }
+        return appBarProps;
+    }
+    canCallOnSuccess(){
+        return false;
+    }
+    close(){
+        return goBack(true);
+    }
+    wrapRenderingContent(content,wProps){
+        let {
+            withHeavyScreen,
+            preloader,
+            preloaderProps,
+            testID,
+        } = this.props;
+        wProps = defaultObj(wProps);
+        const useHeavyScreen = withHeavyScreen !== false ? true : false;
+        const Wrapper = useHeavyScreen ? HeavyScreen : React.Fragment;
+        testID = defaultStr(wProps.testID,testID,"RN_FormDataScren");
+        const placeholder = React.isValidElement(preloader)? preloader : <FormLoader {...defaultObj(preloaderProps)}/>;
+        const wrapperProps = useHeavyScreen ? {...wProps,placeholder,testID:testID+"_HeavyScreen"} : {}
+        return <Wrapper {...wrapperProps}>
+            {content}
+        </Wrapper>
+    }
+    _render (content){
+        const {testID,...props} = getScreenProps(this.props);
+        const appBarProps = this.getAppBarActionsProps(props);
+        appBarProps.elevation = typeof appBarProps.elevation =='number'? appBarProps.elevation : 5;
+        return <ScreenContainer testID={defaultStr(testID,'RN_FormDataLayout')} {...props} {...defaultObj(this.getScreenProps())} appBarProps={appBarProps}>
+                {this.wrapRenderingContent(content)}
+        </ScreenContainer>
+    }
+}
+
+FormDataLayout.propTypes = {
+    ...FormDataActions.propTypes,
+    withHeavyScreen : PropTypes.bool,
+    withAppBar : PropTypes.bool, ///si l'appBar sera affiché 
+    preloader : PropTypes.node,
+    preloaderProps : PropTypes.object,
+    header : PropTypes.oneOfType([
+        PropTypes.element,
+        PropTypes.node
+    ]),
+}
+

package/src/layouts/Screen/FormData/List.js

@@ -0,0 +1,83 @@
+import FormData from "./FormData";
+import {defaultObj,isObj,isNonNullString} from "$utils";
+import PropTypes from "prop-types";
+
+export default class FormDataListScreen extends FormData{
+    constructor(props){
+        super(props);
+        const {perm} = this.getMainProps();
+        Object.defineProperties(this,{
+            isAllowed : {
+                value : true
+            }
+        })
+    }
+    isDocEditing(data){
+        if(super.isDocEditing(data)) return true;
+        const {indexField,isDocUpdate,isDocEditing} = this.getMainProps();
+        if(isObj(data) && typeof isDocUpdate !=='function' && typeof isDocEditing !='function'){
+            if(isNonNullString(indexField) && data[indexField]) return true;
+            if(data.code) return true;
+        }
+        return false;
+    }
+    getAppBarActionsProps(props){
+        const {save2NewAction,save2closeAction,saveAction} = this.props;
+        return super.getAppBarActionsProps({...props
+            ,save2NewAction : typeof save2NewAction !=='undefined'? save2NewAction:true
+            ,save2closeAction : typeof save2closeAction !=='undefined'? save2closeAction:true
+            ,saveAction : typeof saveAction !=='undefined'? saveAction:true,
+        });
+    }
+    createNew (){
+        const {show} = this.getMainProps();
+        if(typeof show =='function'){
+            show({...this.getMainProps(),index:undefined,data:{}});
+        }
+    }
+    doSave(args){
+
+    }
+    doSave2New(args){
+        if(!this.__canSaveListData) return;
+        const {show} = this.getMainProps();
+        if(typeof show =='function'){
+            show({...args,index:undefined,data:{}});
+        }
+    }
+    doSave2Close(args){
+        if(!this.__canSaveListData) return;
+        return this.close();
+    }
+    onSave(args){
+        let {formDataProps} = this.getMainProps();
+        this.__canSaveListData = true;
+        formDataProps = defaultObj(formDataProps);
+        if(typeof formDataProps.onSave =='function' && formDataProps.onSave(args) === false){
+            this.__canSaveListData = false;
+            return;
+        }
+    }
+    _render(content){
+        let {isAllowed} = this.getMainProps();
+        if(typeof isAllowed ==='function'){
+            isAllowed = isAllowed({data:defaultObj(this.getMainProps().data,this.props.data),context:this})
+        } else isAllowed = true;
+        if(isAllowed === false || !this.isAllowed){
+            Auth.showError();
+            return null;
+        }
+        return super._render(content);
+    }
+}
+
+FormDataListScreen.propTypes = {
+    ...FormData.propTypes,
+    newAction : PropTypes.bool,
+    saveAction : PropTypes.bool,
+    save2NewAction : PropTypes.bool,
+    save2closeAction : PropTypes.bool,
+    isAllowed : PropTypes.func, ///la fonction permettant de vérifier si l'utilsateur a accès à la modification ou création de la ressource
+    perm : PropTypes.string, //la fonction garantissant l'accès à la ressource par l'utilisateur
+    saveDataMutator : PropTypes.func, //la fonction appélée pour effecteur une mutation sur les données qu'on veut enregistrer
+}

package/src/layouts/Screen/FormData/index.js

@@ -0,0 +1,3 @@
+export {default} from "./FormData";
+
+export {default as List} from "./List";