@fto-consult/expo-ui 6.1.5 → 6.2.0

package/appConfig.txt

@@ -8,9 +8,7 @@
 
     /*** le nombre maximal de courbes qu'on peut afficher sur le même graphe***/
     maxSupportedChartSeries {number}
-    
-    ///fonction de rappel appelée avant d'exit l'application, doit retourner une promesse que lorsque résolue, exit l'application
-    beforeExit : ()=><Promise>
+   
     
     /***les fonctions d'aggregations du datagrid**/
     datagridAggregatorFunctions : {objectOf({code:{string},label:{string},eval:{function}})|| arrayOf({code:{string},label:{string},eval:{function}})}
@@ -19,7 +17,6 @@
          "&libele&" : selectLabel,
     }
     getTableData : {function(tableName)=>table} retourne l'ojet table data,
-    swrRefreshTimeout : {number} le délai d'inactivité auquel, une fois l'application active, les données de type listData sont rafraichies
     handleHelpScreen : {boolean}, //if Help screen will be added on navigation's main drawer
     
     checkNavigationPermsOnTableOrStructData : {boolean}, si le test de la permission sur la table data où sur la struct data sera effectuée lorsqu'on appelera la fonction navigateToTableData ou navigateToStructData

package/babel.config.alias.js

@@ -133,6 +133,10 @@ module.exports = (opts)=>{
     //le chemin ver le repertoire electron
     r.$eelectron = r["$e-electron"] = $electron;
     r.$electron = r.$electron || r.$eelectron;
+    r.$econtext = path.resolve(expo,"context");
+    if(!r.$context){
+        r.$context = r.$econtext;
+    }
     const electronAssetsPath = path.resolve(dir,"electron","assets");
     if($assets){
         const l1 = path.resolve($assets,"logo.png"), l2 = path.resolve($assets,"logo.png");

package/index.js

@@ -1,7 +1,9 @@
 import { registerRootComponent } from "expo";
 import {Platform } from 'react-native';
 import App from "./src/App";
+import { Provider } from "$econtext";
 const isWeb = Platform.OS === "web";
+import {isObj} from "$cutils";
 
 /****
  * les options sont de la forme : 
@@ -16,9 +18,9 @@ const isWeb = Platform.OS === "web";
  * }
  */
 export default function registerApp (options){
-    options = options && typeof options =='object' && !Array.isArray(options)? options : {};
+    const {onMount,onUnmount,onRender,swrConfig,...rest} = isObj(options)? options : {};
     registerRootComponent(function(props){
-        return <App {...props} {...options}/>
+        return <Provider {...props} {...rest} swrConfig={isObj(swrConfig) && swrConfig || {}} children={<App onMount={onMount} onUnmount={onUnmount} onRender={onRender}/>}/>
     });
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fto-consult/expo-ui",
-  "version": "6.1.5",
+  "version": "6.2.0",
   "description": "Bibliothèque de composants UI Expo,react-native",
   "main": "index.js",
   "scripts": {
@@ -61,7 +61,7 @@
     "@emotion/native": "^11.11.0",
     "@expo/html-elements": "^0.5.1",
     "@expo/vector-icons": "^13.0.0",
-    "@fto-consult/common": "^3.18.32",
+    "@fto-consult/common": "^3.19.0",
     "@gorhom/portal": "^1.0.14",
     "@pchmn/expo-material3-theme": "^1.0.1",
     "@react-native-async-storage/async-storage": "1.18.2",
@@ -72,7 +72,7 @@
     "@react-navigation/native-stack": "^6.9.12",
     "@shopify/flash-list": "1.4.3",
     "apexcharts": "^3.41.0",
-    "expo": "^49.0.0",
+    "expo": "^49.0.3",
     "expo-camera": "~13.4.2",
     "expo-clipboard": "~4.3.0",
     "expo-font": "~11.4.0",

package/src/App.js

@@ -9,7 +9,6 @@ import {GestureHandlerRootView} from "react-native-gesture-handler";
 import APP from "$app";
 import {isMobileNative} from "$cplatform";
 import {setDeviceIdRef} from "$capp";
-import appConfig from "$capp/config";
 import {showPrompt} from "$ecomponents/Dialog/confirm";
 import { AppState } from 'react-native'
 import {canFetchOffline} from "$capi/utils";
@@ -18,51 +17,17 @@ import { timeout as SWR_REFRESH_TIMEOUT} from '$ecomponents/Datagrid/SWRDatagrid
 import { Dimensions,Keyboard } from 'react-native';
 import {isTouchDevice} from "$platform";
 import * as Utils from "$cutils";
-import {MD3LightTheme,MD3DarkTheme} from "react-native-paper";
-import { useMaterial3Theme } from '@pchmn/expo-material3-theme';
-import { useColorScheme } from 'react-native';
-import {colorsAlias,Colors} from "$theme";
+import useContext from "$econtext";
 
-import { configureFonts} from 'react-native-paper';
 Object.map(Utils,(v,i)=>{
   if(typeof v =='function' && typeof window !='undefined' && window && !window[i]){
      window[i] = v;
   }
 });
-const themeAttributes = ["primary","secondary","background",""]
-export default function getIndex({onMount,onUnmount,swrConfig,onRender,...rest}){
-  const {extendAppTheme} = appConfig;
-  const { theme : pTheme } = useMaterial3Theme();
-  //const colorScheme = useColorScheme();
-  appConfig.extendAppTheme = (theme)=>{
-      if(!isObj(theme)) return;
-      const newTheme = theme.dark || theme.isDark ? { ...MD3DarkTheme, colors: pTheme.dark } : { ...MD3LightTheme, colors: pTheme.light };
-      for(let i in newTheme){
-        if(i !== 'colors' && !(i in theme)){
-          theme[i] = newTheme[i];
-        }
-      }
-      if(isObj(theme.colors)){
-        colorsAlias.map((color)=>{
-          color = color.trim();
-          const cUpper = color.ucFirst();
-          //math theme colors to material desgin V3
-          const textA = `${color}Text`,onColor=`on${cUpper}`//,containerA = `${color}Container`,onColorContainer=`on${cUpper}Container`;
-          const c = Colors.isValid(theme.colors[onColor])? theme.colors[onColor] : (theme.colors[textA]) || undefined;
-          if(c){
-            theme.colors[onColor] = c;
-          }
-        });
-        for(let i in newTheme.colors){
-          if(!(i in theme.colors)){
-            theme.colors[i] = newTheme.colors[i];
-          }
-        }
-      }
-      theme.fonts = newTheme.fonts;
-      return typeof extendAppTheme == 'function'? extendAppTheme(theme)  : theme;
-  }
-  const isScreenFocusedRef = React.useRef(true);
+
+export default function getIndex({onMount,onUnmount,onRender}){
+    const {swrConfig,appConfig} = useContext();
+    const isScreenFocusedRef = React.useRef(true);
     ///garde pour chaque écran sa date de dernière activité
     const screensRef = React.useRef({});//la liste des écrans actifs
     const activeScreenRef = React.useRef('');
@@ -70,7 +35,6 @@ export default function getIndex({onMount,onUnmount,swrConfig,onRender,...rest})
     const appStateRef = React.useRef({});
     const isKeyboardOpenRef = React.useRef(false);
     React.useOnRender(onRender);
-    swrConfig = defaultObj(swrConfig);
     React.useEffect(()=>{
         ///la fonction de rappel lorsque le composant est monté
         const onScreenFocus = ({sanitizedName})=>{
@@ -144,7 +108,7 @@ export default function getIndex({onMount,onUnmount,swrConfig,onRender,...rest})
             }
             const date = screensRef.current[screen];
             const diff = new Date().getTime() - date.getTime();
-            const timeout = defaultNumber(appConfig.get("swrRefreshTimeout"),SWR_REFRESH_TIMEOUT)
+            const timeout = defaultNumber(swrConfig.refreshTimeout,SWR_REFRESH_TIMEOUT)
             screensRef.current[screen] = new Date();
             return diff >= timeout ? true : false;
           },
@@ -174,7 +138,7 @@ export default function getIndex({onMount,onUnmount,swrConfig,onRender,...rest})
           }
         }}
       >
-          <GestureHandlerRootView style={{ flex: 1 }}>
+        <GestureHandlerRootView style={{ flex: 1 }}>
           <SafeAreaProvider>
             <Index {...rest} onMount={onMount}/>
           </SafeAreaProvider>

package/src/components/AppBar/index.js

@@ -114,15 +114,6 @@ const AppBarComponent = React.forwardRef((props,ref)=> {
     titleProps = defaultObj(titleProps);
     React.setRef(ref,context);
     testID = defaultStr(testID,"RN_AppBarComponent")
-    const renderedActions = renderSplitedActions(splitedActions,{
-      ...defaultObj(menuProps,appBarProps.menuProps),
-      anchorProps : {
-       style : anchorStyle,
-       color : anchorStyle.color,
-      }
-   });
-   const renderedRight = React.isValidElement(rightContent) && rightContent || right;
-   const hasRight = React.isValidElement(renderedActions) || React.isValidElement(renderedRight);
     return (
       <Appbar.Header elevation={elevation} {...appBarProps}  testID={testID} style={[styles.header,{backgroundColor},elevStyle,appBarProps.style]} onLayout={onPageResize}>
         {backAction}
@@ -132,8 +123,14 @@ const AppBarComponent = React.forwardRef((props,ref)=> {
             subtitle = {defaultVal(subtitle,params.subtitle,options.subtitle)}
             subtitleProps = {subtitleProps}
         />
-        {renderedActions}
-        {renderedRight}
+        {renderSplitedActions(splitedActions,{
+          ...defaultObj(menuProps,appBarProps.menuProps),
+          anchorProps : {
+           style : anchorStyle,
+           color : anchorStyle.color,
+          }
+       })}
+        {React.isValidElement(rightContent) && rightContent || React.isValidElement(right) && right || null}
       </Appbar.Header>
     );
 });

package/src/components/Datagrid/Common/Common.js

@@ -3371,7 +3371,7 @@ export default class CommonDatagridComponent extends AppComponent {
         fetchOptions.dataSources = this.currentDataSources;
         fetchOptions.selector = fetchFilters;
         fetchOptions.sort = this.getSort();
-        const canIncludeField = typeof this.props.includeFieldsInFetchOptions =='boolean'? this.props.includeFieldsInFetchOptions : defaultBool(appConfig.get("includeFieldsInDatagridFetchOptions"),appConfig.includeFieldsInDatagridFetchOptions) !== false;
+        const canIncludeField = typeof this.props.includeFieldsInFetchOptions =='boolean'? this.props.includeFieldsInFetchOptions : defaultBool(appConfig.get("includeFieldsInDatagridFetchOptions")) !== false;
         if(canIncludeField){
             const ff = this.getFilterableColumnsNames();
             let fields = ff;

package/src/components/Datagrid/SWRDatagrid.js

@@ -25,6 +25,7 @@ import {getRowsPerPagesLimits} from "./Common/utils";
 import PropTypes from "prop-types";
 import {Menu} from "$ecomponents/BottomSheet";
 import session from "$session";
+import useContext from "$econtext";
 
 export const getSessionKey = ()=>{
     return Auth.getSessionKey("swrDatagrid");
@@ -48,8 +49,8 @@ export const setSessionData = (key,value)=>{
 export const timeout = 5000*60;//5 minutes
 /***@see : https://swr.vercel.app/docs/api */
 
-export const getSWROptions = ()=>{
-    const delay = defaultNumber(appConfig.get("swrRefreshTimeout"),timeout);
+export const getSWROptions = (defTimeout)=>{
+    const delay = defaultNumber(defTimeout,timeout);
     return {
         dedupingInterval : delay,
         errorRetryInterval : Math.max(delay*2,timeout),
@@ -101,6 +102,7 @@ const SWRDatagridComponent = React.forwardRef((props,ref)=>{
         defaultSortOrder,
         ...rest
     } = props;
+    const {swrConfig} = useContext();
     rest = defaultObj(rest);
     rest.exportTableProps = defaultObj(rest.exportTableProps)
     const firstPage = 1;
@@ -227,10 +229,7 @@ const SWRDatagridComponent = React.forwardRef((props,ref)=>{
             });
         },
         showError  : false,
-        swrOptions : {
-            ...getSWROptions(),
-            ...defaultObj(appConfig.swr),
-        },
+        swrOptions : getSWROptions(swrConfig.refreshTimeout)
     });
     const isLoading = isLoadingRef.current  && customIsLoading || false;
     /*React.useEffect(()=>{

package/src/components/ErrorBoundary/Provider.js

@@ -34,8 +34,7 @@ const Provider = React.forwardRef((_props,innerRef)=>{
            }
         },
         isOpen : x=> {
-            console.log("checking message ref",messageRef.current);
-            return messageRef.current && messageRef.current.setNativeProps ? true : false
+            return messageRef.current && messageRef.current? true : false
         },
     });
     setRef(ref,context);        

package/src/components/TextField/index.js

@@ -124,6 +124,7 @@ const TextFieldComponent = React.forwardRef((componentProps,inputRef)=>{
     }
     const isSecureText = type =="password"?true : false;
     const [secureTextEntry,setSecureTextEntry] = React.useState(isSecureText);
+    const [toggle,setToggle] = React.useState(false);
     const prevSecureTextEntry = React.usePrevious(secureTextEntry);
     containerProps = defaultObj(containerProps);
     mode = defaultStr(mode,theme.textFieldMode);
@@ -271,10 +272,8 @@ const TextFieldComponent = React.forwardRef((componentProps,inputRef)=>{
         }
     }
     let hasLabel = label && (isShadowMode || isNormalMode || alwaysUseLabel || text || (isFocused || (!usePlaceholderWhenEmpty && canValueBeFormattable)))? true : labelText !== placeholder;
-    const innerRef = (el)=>{
-        ref.current = el;
-        React.setRef(inputRef,el,setRef);
-    };
+    const innerRef = React.useRef(null);
+    const componentRef = React.useMergeRefs(innerRef,ref,setRef);
     validType = defaultStr(validType,validRule).toLowerCase();
     multiline = isFilter ? false : defaultBool(multiline,multiple,!!numberOfLines);
     let inputColor = (isFocused || error) ? labelColor : Colors.isValid(color)?color : theme.colors.text;
@@ -304,7 +303,7 @@ const TextFieldComponent = React.forwardRef((componentProps,inputRef)=>{
         keyboardAppearance : theme.isDark()? 'dark': 'default',
         caretHidden : false,
         ...props,
-        innerRef,
+        innerRef:componentRef,
         placeholder : (isFocused || isShadowMode || isNormalMode) && labelText ? "":placeholder,
         placeholderTextColor : error ? theme.colors.error : placeholderColor,
         selectionColor,
@@ -377,12 +376,12 @@ const TextFieldComponent = React.forwardRef((componentProps,inputRef)=>{
                 text2 = "0"+text2;
             }
             if(multiline){
-                const minHeight = Math.max(tHeight,target.scrollHeight);
-                if( tHeight < minHeight) {
-                    heightRef.current = minHeight;
-                    if(!isFocused && innerRef.current?.setNativeProps){
-                        innerRef.current.setNativeProps({style:{minHeight}})
-                    }
+                if(!text2 || text2.length < 30){
+                    heightRef.current = HEIGHT;
+                    setToggle(!toggle);
+                } else  if(target.scrollHeight > heightRef.current){
+                    heightRef.current = target.scrollHeight; 
+                    setToggle(!toggle);
                 }
             }
             const tVal = toCase(text2);
@@ -475,7 +474,7 @@ const TextFieldComponent = React.forwardRef((componentProps,inputRef)=>{
         } else affix = undefined;
     }
     elevation = defaultNumber(contentContainerProps.elevation,elevation,isShadowMode?4:0);
-    const paddingVertical = (hasRight || hasLeft)? isMob?5 : 0 : 10;
+    const paddingVertical = multiline ? 0 : (hasRight || hasLeft)? isMob?5 : 0 : 10;
     const contentContainerStyle = isOutlinedMode ? {
         borderColor,
         borderWidth,
@@ -540,7 +539,7 @@ const TextFieldComponent = React.forwardRef((componentProps,inputRef)=>{
                             typeof render ==="function"? render(inputProps):
                              <RNTextInput 
                                 {...inputProps}
-                                ref = {innerRef}
+                                ref = {componentRef}
                             /> 
                         }
                     </KeyboardAvoidingView>

package/src/context/index.js

@@ -0,0 +1,57 @@
+import React from "$react";
+import appConfig from "$capp/config";
+import {MD3LightTheme,MD3DarkTheme} from "react-native-paper";
+import { useMaterial3Theme } from '@pchmn/expo-material3-theme';
+import {colorsAlias,Colors} from "$theme";
+
+const ExpoUIContext = React.createContext(null);
+
+
+export const useExpoUI = ()=> React.useContext(ExpoUIContext);
+
+
+/*****
+    les utilitaires disponibles à passer au provider : 
+    FontsIconsFilter : (font{object},fontName{string},fontNameLower{string})=><boolean> //porte le nom de la props de appConfig dans lequel définir les filtres à utiliser pour charger l'iconSet désirée pour l'appication
+    ///fonction de rappel appelée avant d'exit l'application, doit retourner une promesse que lorsque résolue, exit l'application
+    beforeExit : ()=><Promise>     
+    
+*/
+export const Provider = ({children,...props})=>{
+    const {extendAppTheme} = appConfig;
+    const { theme : pTheme } = useMaterial3Theme();
+    //const colorScheme = useColorScheme();
+    appConfig.extendAppTheme = (theme)=>{
+        if(!isObj(theme)) return;
+        const newTheme = theme.dark || theme.isDark ? { ...MD3DarkTheme, colors: pTheme.dark } : { ...MD3LightTheme, colors: pTheme.light };
+        for(let i in newTheme){
+          if(i !== 'colors' && !(i in theme)){
+            theme[i] = newTheme[i];
+          }
+        }
+        if(isObj(theme.colors)){
+          colorsAlias.map((color)=>{
+            color = color.trim();
+            const cUpper = color.ucFirst();
+            //math theme colors to material desgin V3
+            const textA = `${color}Text`,onColor=`on${cUpper}`//,containerA = `${color}Container`,onColorContainer=`on${cUpper}Container`;
+            const c = Colors.isValid(theme.colors[onColor])? theme.colors[onColor] : (theme.colors[textA]) || undefined;
+            if(c){
+              theme.colors[onColor] = c;
+            }
+          });
+          for(let i in newTheme.colors){
+            if(!(i in theme.colors)){
+              theme.colors[i] = newTheme.colors[i];
+            }
+          }
+        }
+        theme.fonts = newTheme.fonts;
+        return typeof extendAppTheme == 'function'? extendAppTheme(theme)  : theme;
+    }
+    return <ExpoUIContext.Provider value={{...props,appConfig}} children={children}/>;
+}
+
+export default useExpoUI;
+
+export const useContext = useExpoUI;

package/src/index.js

@@ -39,6 +39,7 @@ import  {updateTheme,defaultTheme} from "$theme";
 import StatusBar from "$ecomponents/StatusBar";
 import {Provider as PaperProvider } from 'react-native-paper';
 import FontIcon from "$ecomponents/Icon/Font";
+import useContext from "$econtext";
 
 let MAX_BACK_COUNT = 1;
 let countBack = 0;
@@ -58,17 +59,17 @@ const NAVIGATION_PERSISTENCE_KEY = 'NAVIGATION_STATE';
  */
 function App({init:initApp,initialRouteName:appInitialRouteName,render,onMount,preferences:appPreferences,getStartedRouteName}) {
   AppStateService.init();
+  const {FontsIconsFilter,beforeExit} = useContext();
   const [initialState, setInitialState] = React.useState(undefined);
   const appReadyRef = React.useRef(true);
   const [state,setState] = React.useState({
      isLoading : true,
      isInitialized:false,
   });
-  React.useEffect(() => {
+   React.useEffect(() => {
     const loadResources = ()=>{
        return new Promise((resolve)=>{
-          //FontsIconsFilter porte le nom de la props de appConfig dans lequel définir les filtres à utiliser pour charger l'iconSet désirée pour l'appication
-          loadFonts(appConfig.get("FontsIconsFilter")).catch((e)=>{
+          loadFonts(FontsIconsFilter).catch((e)=>{
             console.warn(e," ierror loading app resources fonts");
           }).finally(()=>{
             resolve(true);
@@ -111,10 +112,10 @@ function App({init:initApp,initialRouteName:appInitialRouteName,render,onMount,p
                     }
                 }
                 const exit = ()=>{
-                  if(typeof appConfig.beforeExit =='function'){
-                     const r2 = appConfig.beforeExit()
+                  if(typeof beforeExit =='function'){
+                     const r2 = beforeExit()
                      if(!isPromise(r2)){
-                        throw {message:'La fonction before exit de appConfig.beforeExit doit retourner une promesse',returnedResult:r2}
+                        throw {message:'La fonction before exit du contexte doit retourner une promesse',returnedResult:r2}
                      }
                      return r2.then(foreceExit).catch(reject);
                   }

package/src/components/AppBar/Content2.js

@@ -1,132 +0,0 @@
-import React from '$react';
-import {Platform,StyleSheet,Pressable,View} from 'react-native';
-import Label from "$ecomponents/Label";
-import theme,{Colors,StyleProp} from "$theme";
-import PropTypes from "prop-types";
-import {defaultObj,defaultStr} from "$cutils";
-import {isIos,isAndroid,isWeb} from "$cplatform";
-
-const AppbarContent = React.forwardRef(({
-  color: titleColor,
-  subtitle,
-  subtitleProps,
-  subtitleStyle,
-  onPress,
-  style,
-  titleProps,
-  titleRef,
-  titleStyle,
-  title,
-  testID,
-  containerProps,
-  ...rest
-},ref) => {
-
-  const titleTextColor = titleColor ? titleColor : theme.colors.primaryText;
-  titleProps = defaultObj(titleProps);
-  subtitleProps = defaultObj(subtitleProps);
-  testID = defaultStr(testID,"RN_AppBarContentComponent")
-  subtitle = subtitle === false ? null : subtitle;
-  const subtitleColor = Colors.setAlpha(titleTextColor,0.7);
-
-  return (
-    <Pressable testID={testID+"_Container"} {...defaultObj(containerProps)} onPress={onPress} disabled={!onPress}>
-      <View
-        pointerEvents="box-none"
-        style={[styles.container, style]}
-        {...rest}
-        testID = {testID}
-        ref = {ref}
-      >
-        <Label
-          ref={titleRef}
-          testID = {testID+"_Title"}
-          {...titleProps}
-          style={[
-            {
-              color: titleTextColor,
-              ...(isIos()? theme.fonts.regular: theme.fonts.medium),
-            },
-            isWeb() && theme.styles.webFontFamilly,
-            titleProps.style,
-            titleStyle,
-          ]}
-          numberOfLines={1}
-          accessible
-          // @ts-ignore Type '"heading"' is not assignable to type ...
-          role={Platform.OS === 'web' ? 'heading' : 'header'}
-        >
-          {title}
-        </Label>
-        {subtitle ? (
-          <Label
-            testID = {testID+"_Subtitle"}
-            {...subtitleProps}
-            style={[styles.subtitle, { color: subtitleColor }, subtitleProps.style, subtitleStyle]}
-            numberOfLines={1}
-          >
-            {subtitle}
-          </Label>
-        ) : null}
-      </View>
-    </Pressable>
-  );
-});
-
-AppbarContent.displayName = 'Appbar.Content';
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    paddingHorizontal: 5,
-    justifyContent : 'center',
-    alignItems : 'flex-start',
-  },
-  title: {
-    fontSize: Platform.OS === 'ios' ? 17 : 20,
-  },
-  subtitle: {
-    fontSize: Platform.OS === 'ios' ? 11 : 14,
-  },
-});
-
-export default AppbarContent;
-const titleType = PropTypes.oneOfType([
-    PropTypes.string,
-    PropTypes.node,
-    PropTypes.bool,
-])
-
-AppbarContent.propTypes = {
-    /**
-   * Custom StyleProp for the text.
-   */
-  StyleProp: PropTypes.string,
-  /**
-   * Text for the title.
-   */
-  title: titleType,
-  /**
-   * Style for the title.
-   */
-  titleStyle: StyleProp,
-  /**
-   * Reference for the title.
-   */
-  titleRef : PropTypes.any,
-  /**
-   * @deprecated Deprecated in v5.x
-   * Text for the subtitle.
-   */
-  subtitle : titleType,
-  /**
-   * @deprecated Deprecated in v5.x
-   * Style for the subtitle.
-   */
-  subtitleStyle: StyleProp,
-  /**
-   * Function to execute on press.
-   */
-  onPress : PropTypes.func,
-  style : StyleProp
-}

package/src/components/ContentLoader/index copy.js

@@ -1,148 +0,0 @@
-/**** see : https://github.com/danilowoz/react-content-loader */
-import {defaultObj} from "$cutils";
-import View from "$ecomponents/View";
-import {StyleSheet,Dimensions,useWindowDimensions} from "react-native";
-import React from "react";
-import ContentLoaderF, {Facebook as CLFacebook,Instagram as CLInstagram} from './Loader';
-import PropTypes from "prop-types";
-import BarcharComponent from "./BarChar";
-import PieChartComponent from "./PieChart";
-import FormComponent,{HEIGHT as formHeight} from "./Form";
-import DatagridContentLoader,{HEIGHT as datagridHeight} from "./Datagrid";
-import ProfileComponent from "./Profile";
-import { getBackgroundColor } from "./utils";
-import TaskListComponent from "./TaskList";
-import theme,{Colors} from "$theme"
-import Rect from "./Rect";
-import Circle from "./Circle";
-
-export * from "./utils";
-
-export {Rect};
-
-export {Circle};
-
-export {default as Table} from "./Table";
-
-
-export default function ContentLoaderWrapper (props){
-    let {instance,containerProps,mediaQueryUpdateNativeProps,instances,Component,count,...rest} = props;
-    const innerRef = React.useRef(null);
-    Component = defaultVal(Component,ContentLoaderF);
-    containerProps = defaultObj(containerProps);
-    const getChildren = ({width,height,count})=>{
-        const dimensions = Dimensions.get("window");
-        width = width || dimensions.width;
-        height = height || dimensions.height;
-        rest = {...defaultObj(rest),width,height}
-        const r = [];
-        rest = defaultObj(rest);
-        count = Math.ceil(defaultNumber(instances,instance,count,3))
-        rest.backgroundColor = Colors.isValid(rest.backgroundColor)? rest.backgroundColor : Colors.darken(theme.colors.background); 
-        rest.backgroundColor= getBackgroundColor(rest.backgroundColor)// '#cecece';
-        if(count <= 1) count = 1;
-        for(let i = 1; i<= count; i++){
-            r.push(<Component {...rest} key={i+""} />)
-        }
-        return r;
-    }
-    const children = getChildren({count});
-    return <View ref={innerRef} onLayout = {React.mediaQueryUpdateNativePropsCallback(({target,...args})=>{
-        args.layout = args.nativeEvent.layout;
-        if(typeof mediaQueryUpdateNativeProps ==='function'){
-            const children = getChildren(defaultObj(mediaQueryUpdateNativeProps(args)));
-            console.log("will update target ",target,children);
-            target.setNativeProps({children});   
-        }
-    },innerRef)} {...containerProps}
-        style={[styles.container,styles.fullWidth,containerProps.style]}
-     >
-        {children}
-    </View>
-}   
-
-ContentLoaderWrapper.propTypes = {
-    //le nombre d'instance du content loader
-    instances : PropTypes.number,
-    instance : PropTypes.number,
-    count : PropTypes.number,
-}
-
-export function Facebook (props){
-    return <ContentLoaderWrapper {...props} Component={CLFacebook}/>
-}
-export function Instagram (props){
-    return <ContentLoaderWrapper {...props} Component={CLInstagram}/>
-}
-export function ContentLoader (props){
-    return <ContentLoaderWrapper {...props} Component={ContentLoaderF}/>
-}
-
-export function BarChart (props){
-    return <ContentLoaderWrapper {...props} Component={BarcharComponent}/>
-}
-
-export function PieChart (props){
-    return <ContentLoaderWrapper {...props} Component={PieChartComponent}/>
-}
-
-export function Form (props){
-    const {height} = Dimensions.get("window");
-    return <ContentLoaderWrapper
-        mediaQueryUpdateNativeProps = {({layout:{width,height}})=>{
-            width = Math.max(width-50,200);
-            return {width,count:Math.max(Math.trunc(height/formHeight),2)}
-         }}
-         {...props}
-         count = {Math.max(Math.trunc(height/formHeight),2)}
-         Component={FormComponent}
-    />
-}
-
-export function Profile (props){
-    let {containerProps,...rest} = props;
-    containerProps = Object.assign({},containerProps);
-    containerProps.style = [styles.taskListContainer,containerProps.style];
-    return <ContentLoaderWrapper count={3} {...props} Component={ProfileComponent}/>
-}
-
-export function TaskList (props){
-    return <ContentLoaderWrapper count={3} {...props} Component={TaskListComponent}/>
-}
-
-export function Datagrid (props){
-    const {height} = Dimensions.get("window");
-    return <ContentLoaderWrapper
-            name = "ddddd"
-         mediaQueryUpdateNativeProps ={({layout:{width,height}})=>{
-            width = Math.max(props.width-50,200);
-            return {width,count:Math.max(Math.trunc((height-100)/datagridHeight),2)} 
-         }}
-         {...props} 
-         Component={DatagridContentLoader}
-         count = {Math.max(Math.trunc((height-100)/datagridHeight),2)}
-    />
-}
-
-
-const styles = StyleSheet.create({
-    fullWidth : {
-        width : '100%'
-    },
-    center : {
-        flex : 1,
-        justifyContent: 'center',
-        alignItems :'center',
-    },
-    container : {
-        marginHorizontal : 0,
-        paddingHorizontal : 0,
-        marginTop : 10,
-        alignItems : 'center',
-        justifyContent : 'flex-start'
-    },
-    taskListContainer : {
-        alignItems : 'flex-end',
-        alignSelf : 'flex-start',
-    },
-})