@fto-consult/expo-ui 5.11.14 → 5.11.16

package/electron/utils/parseArgs.js

@@ -1,21 +1,21 @@
 module.exports = (argv,supportedScript)=>{
-    if(!Array.isArray(argv)) {
-      argv = process.argv.slice(2);
+  if(!Array.isArray(argv)) {
+    argv = process.argv.slice(0);
+  }
+  const args = {};
+  supportedScript = typeof supportedScript =='object' && supportedScript || null;
+  argv.map(arg=>{
+    if(!arg || typeof arg != 'string') return;
+    arg = arg.trim();
+    if(supportedScript && arg in supportedScript){
+       args.script = arg;
+    } else if(arg.includes("=")){
+        const split = arg.split("=");
+        if(split.length !=2) return;
+        args[split[0].trim()] = split[1].trim();
+    } else {
+       args[arg] = true;
     }
-    const args = {};
-    supportedScript = typeof supportedScript =='object' && supportedScript || null;
-    argv.map(arg=>{
-      if(!arg || typeof arg != 'string') return;
-      arg = arg.trim();
-      if(supportedScript && arg in supportedScript){
-         args.script = arg;
-      } else if(arg.includes("=")){
-          const split = arg.split("=");
-          if(split.length !=2) return;
-          args[split[0].trim()] = split[1].trim();
-      } else {
-         args[arg] = true;
-      }
-    })
-    return args;
+  });
+  return args;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fto-consult/expo-ui",
-  "version": "5.11.14",
+  "version": "5.11.16",
   "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.2.0",
     "@expo/vector-icons": "^13.0.0",
-    "@fto-consult/common": "^3.18.25",
+    "@fto-consult/common": "^3.18.27",
     "@gorhom/portal": "^1.0.14",
     "@react-native-async-storage/async-storage": "^1.17.11",
     "@react-native-community/datetimepicker": "^6.7.3",
@@ -96,8 +96,8 @@
     "react-native-gesture-handler": "~2.9.0",
     "react-native-iphone-x-helper": "^1.3.1",
     "react-native-mime-types": "^2.3.0",
-    "react-native-paper": "^5.8.0",
-    "react-native-paper-dates": "^0.16.2",
+    "react-native-paper": "^5.9.0",
+    "react-native-paper-dates": "^0.18.12",
     "react-native-reanimated": "~2.14.4",
     "react-native-safe-area-context": "^4.5.3",
     "react-native-screens": "^3.20.0",

package/src/App.js

@@ -18,12 +18,21 @@ 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 {extendObj} from "$utils";
+import {fontConfig} from "$theme/fonts";
+
+import { configureFonts} from 'react-native-paper';
 Object.map(Utils,(v,i)=>{
   if(typeof v =='function' && typeof window !='undefined' && window && !window[i]){
      window[i] = v;
   }
 });
 export default function getIndex({onMount,onUnmount,swrConfig,onRender,...rest}){
+  const {extendAppTheme} = appConfig;
+  appConfig.extendAppTheme = (theme)=>{
+      extendObj(theme,{fonts:configureFonts({config:fontConfig,isV3:true})});
+      return typeof extendAppTheme == 'function'? extendAppTheme(theme)  : theme;
+  }
   const isScreenFocusedRef = React.useRef(true);
     ///garde pour chaque écran sa date de dernière activité
     const screensRef = React.useRef({});//la liste des écrans actifs

package/src/components/AutoSizer/Vertical.js

@@ -6,7 +6,6 @@ import theme from "$theme";
 import {defaultStr,defaultObj,defaultNumber} from "$cutils";
 import APP from "$capp/instance";
 import ActivityIndicator from "$ecomponents/ActivityIndicator";
-import {isWeb} from "$cplatform";
 
 /***
  * ce composant a pour but de définir la taille d'un contenu en se basant sur sa positin top, de manière à ce que, le contentu du composant fit
@@ -37,20 +36,22 @@ const AutoSizerVerticalComponent = React.forwardRef(({onLayout,isScrollView,scre
       })
   }
   React.setRef(ref,{
-    updateLayout,
-    layoutRef,
-    ref : layoutRef
-});
+      updateLayout,
+      layoutRef,
+      ref : layoutRef
+  });
   React.useEffect(()=>{
     const onResizePage = ()=>{
       setTimeout(()=>{
          updateLayout();
-      },300);
+      },500);
     }
-    APP.on(APP.EVENTS.RESIZE_PAGE,onResizePage);
+    const dim = Dimensions.addEventListener("change",onResizePage);
+    //APP.on(APP.EVENTS.RESIZE_PAGE,onResizePage);
     return ()=>{
-      APP.off(APP.EVENTS.RESIZE_PAGE,onResizePage);
+      //APP.off(APP.EVENTS.RESIZE_PAGE,onResizePage);
       React.setRef(ref,null);
+      dim?.remove();
     }
   },[]);
   const hasUpdateLayout = hasUpdateLayoutRef.current;

package/src/components/Form/Fields/IDField.js

@@ -72,12 +72,13 @@ export default class FormIDField extends TextField {
     }
     _render(props,setRef){
         delete props.validType;
+        const upper = props.upper !== false ? UPPER_CASE : "";
         if(isNonNullString(this.name) && isObj(props.data) && isNonNullString(props.data[this.name])){
             props.disabled = true;         
-            props.validType = UPPER_CASE;
+            props.validType = upper;
             props.defaultValue = props.data[this.name];
         } else {
-            props.validType = 'required|'+UPPER_CASE;
+            props.validType = 'required|'+upper;
         }
         if(typeof props.minLength !=='number'){
             props.minLength = 2;

package/src/components/Form/FormData/FieldsContent.js

@@ -0,0 +1,81 @@
+import React from "$react";
+import Divider from "$components/Divider";
+import {isObj,isNonNullString,defaultStr,defaultObj} from "$utils";
+import getComponentFromType from "./componentsTypes";
+import appConfig from "$capp/config";
+import {flattenStyle,Colors} from "$theme";
+
+export default function FieldsContent({fields,formName,disabled,archived,archivable,fieldProps,primaryKeyFields,responsiveProps,responsive,style,data,windowWidth}){
+    windowWidth = typeof windowWidth ==='number' && windowWidth > 100?windowWidth : undefined;
+    return React.useStableMemo(()=>{
+        const content = [];
+        style = defaultObj(flattenStyle(style));
+        primaryKeyFields = Array.isArray(primaryKeyFields) ? primaryKeyFields: [];
+        fieldProps = defaultObj(fieldProps);
+        Object.map(fields,(field,index,i)=>{//on ignore tous les champs supposés être à ignorer
+            if(field === 'divider'){
+                content.push(<Divider key = {index} style={theme.styles.w100}/>)
+            } else if(isObj(field) && field.form !== false) {
+                const name = defaultStr(field.name,field.field,index);
+                const type = defaultStr(field.jsType,field.type,"text").trim().toLowerCase().replaceAll(" ","").replaceAll("-","").replaceAll("_","");
+                const isDate = (type.contains('date') || type.contains('time'));
+                const Component = getComponentFromType(defaultStr(field.jsType,field.type,"text"));
+                let {defaultValue,useDefaultValueFromData,primaryKey,hidden,renderFormDataField,getMediaQueryStyle,printLabels,queryLimit,selected,value,dataFilesInterest,perm,ignore,form,responsiveProps:customResponsiveProps,...rest} = field;
+                delete rest.import;
+                delete rest.export;
+                if(primaryKey === true && name && !field.filter){
+                    primaryKeyFields[name] = field;
+                }
+                if(form === false || ignore || (isNonNullString(perm) && !Auth.isAllowedFromStr(perm))){
+                    return null;
+                }
+                if(rest.nullable === false){
+                    rest.required = true;
+                }
+                if(primaryKey === true && typeof rest.required !=='boolean'){
+                    rest.required = true;
+                }
+                if(typeof rest.filter !=='function'){
+                    delete rest.filter;
+                }
+                if(name){
+                    rest.defaultValue = useDefaultValueFromData === false ? defaultValue : (name in data && data[name] !== undefined && data[name] !== null? data[name]: defaultValue);
+                    if((type == 'selecttabledata' || type == 'datafile')){
+                        rest._defaultValue = data[rest.name];
+                    }
+                } else {
+                    rest.defaultValue  = defaultValue;
+                }
+                if(rest.defaultValue === null){
+                    rest.defaultValue = undefined;
+                }
+                // les champs de type date par défaut qui sont requis, auront comme valeur par défaut la date actuelle s'il ne sont pas définies
+                if(rest.autoSetDefaultValue !== false && (!rest.defaultValue && typeof rest.defaultValue !=='boolean' && typeof rest.defaultValue !=='number')){
+                    if(isDate && rest.required === true ){
+                        rest.defaultValue = new Date();
+                    } else if(!isDate && isNonNullString(rest.appConfigDefaultValueKey)){
+                        rest.defaultValue = appConfig.get(rest.appConfigDefaultValueKey);
+                    }
+                }
+                customResponsiveProps = defaultObj(customResponsiveProps);
+                content.push(<Component 
+                        data = {data} 
+                        windowWidth = {windowWidth}
+                        index = {index} 
+                        disabled = {disabled || archived} 
+                        archived = {archived}
+                        {...fieldProps}
+                        {...rest}
+                        style = {[fieldProps.style,Colors.isValid(style.backgroundColor) && {backgroundColor:style.backgroundColor},rest.style]}
+                        formName = {formName}
+                        key={index} 
+                        archivable = {archivable}  
+                        name = {name}
+                        responsive = {responsive}
+                        responsiveProps = {{...responsiveProps,...customResponsiveProps,style:[responsiveProps.style,customResponsiveProps.style]}}
+                />);
+            }
+        });
+        return content;
+    },[formName,archived,archivable,disabled,fields,data,windowWidth,responsive,responsiveProps])
+}

package/src/components/Form/FormData/FormData.js

@@ -10,9 +10,8 @@ import PropTypes from "prop-types";
 import {renderActions} from "$ecomponents/Dialog/utils";
 import {handleBeforeSaveCallback} from "./utils";
 import isDbDocEditing,{checkPrimaryKey} from "../utils/isDocEditing";
-import getComponentFromType from "./componentsTypes";
 import keyboardShortcuts from "../utils/keyboardShortcuts";
-import appConfig from "$capp/config";
+import FieldsContent from "./FieldsContent";
 
 export default class FormDataComponent extends AppComponent{
     constructor(props){
@@ -182,85 +181,23 @@ export default class FormDataComponent extends AppComponent{
     }
     getFieldsContent = (formProps)=>{
         formProps = defaultObj(formProps);
-        const fieldProps = defaultObj(formProps.fieldProps,this.props.fieldProps);
-        formProps.style = flattenStyle(formProps.style);
         this.formDataPrimaryKeyFields = {};
-        const content = [];
-        const fields = defaultObj(formProps.fields,this.props.fields);
         const data = isObj(formProps.data) ? formProps.data : typeof this.props.data =='object' && this.props.data ? this.props.data : {};
-        const archived = data.archived ? true : false;
-        const responsive = typeof formProps.responsive =='boolean' ? formProps.responsive : this.props.responsive !== false ? true : false;
-        const responsiveProps = extendObj({},this.props.responsiveProps,formProps.responsiveProps);
-        const windowWidth = defaultNumber(formProps.windowWidth,this.props.windowWidth) || undefined;
-        Object.map(fields,(field,index,i)=>{//on ignore tous les champs supposés être à ignorer
-            if(field === 'divider'){
-                content.push(<Divider key = {index} style={theme.styles.w100}/>)
-            } else if(isObj(field) && field.form !== false) {
-                const name = defaultStr(field.name,field.field,index);
-                const type = defaultStr(field.jsType,field.type,"text").trim().toLowerCase().replaceAll(" ","").replaceAll("-","").replaceAll("_","");
-                const isDate = (type.contains('date') || type.contains('time'));
-                const Component = getComponentFromType(defaultStr(field.jsType,field.type,"text"));
-                let {defaultValue,useDefaultValueFromData,primaryKey,hidden,renderFormDataField,getMediaQueryStyle,printLabels,queryLimit,selected,value,dataFilesInterest,perm,ignore,form,responsiveProps:customResponsiveProps,...rest} = field;
-                rest = Object.assign({},rest);
-                delete rest.import;
-                delete rest.export;
-                if(primaryKey === true && name && !field.filter){
-                    this.formDataPrimaryKeyFields[name] = field;
-                }
-                if(form === false || ignore || (isNonNullString(perm) && !Auth.isAllowedFromStr(perm))){
-                    return null;
-                }
-                if(rest.nullable === false){
-                    rest.required = true;
-                }
-                if(primaryKey === true && typeof rest.required !=='boolean'){
-                    rest.required = true;
-                }
-                if(typeof rest.filter !=='function'){
-                    delete rest.filter;
-                }
-                if(name){
-                    rest.defaultValue = useDefaultValueFromData === false ? defaultValue : (name in data && data[name] !== undefined && data[name] !== null? data[name]: defaultValue);
-                    if((type == 'selecttabledata' || type == 'datafile')){
-                        rest._defaultValue = data[rest.name];
-                    }
-                } else {
-                    rest.defaultValue  = defaultValue;
-                }
-                if(rest.defaultValue === null){
-                    rest.defaultValue = undefined;
-                }
-                // les champs de type date par défaut qui sont requis, auront comme valeur par défaut la date actuelle s'il ne sont pas définies
-                if(rest.autoSetDefaultValue !== false && (!rest.defaultValue && typeof rest.defaultValue !=='boolean' && typeof rest.defaultValue !=='number')){
-                    if(isDate && rest.required === true ){
-                        rest.defaultValue = new Date();
-                    } else if(!isDate && isNonNullString(rest.appConfigDefaultValueKey)){
-                        rest.defaultValue = appConfig.get(rest.appConfigDefaultValueKey);
-                    }
-                }
-                customResponsiveProps = defaultObj(customResponsiveProps);
-                content.push(<Component 
-                        data = {data} 
-                        windowWidth = {windowWidth}
-                        //withBottomSheet = {this.props.withBottomSheet}
-                        index = {index} 
-                        disabled = {this.props.disabled || archived} 
-                        archived = {this.props.archived || archived}
-                        //ignoreFields = {ignoreFields} 
-                        //getFieldProps = {this.props.getFieldProps}
-                        {...fieldProps}
-                        {...rest}
-                        style = {[fieldProps.style,formProps.style.backgroundColor&& {backgroundColor:formProps.style.backgroundColor},rest.style]}
-                        formName = {this.getFormName()}
-                        key={index} 
-                        archivable = {this.props.archivable || this.isArchivable()}  
-                        name = {name}
-                        responsive = {responsive}
-                        responsiveProps = {{...responsiveProps,...customResponsiveProps,style:[responsiveProps.style,customResponsiveProps.style]}}
-                />);
-            }
-        });
-        return content;
+        return <FieldsContent
+            {...formProps}
+            fields = {defaultObj(formProps.fields,this.props.fields)}
+            fieldProps = {defaultObj(formProps.fieldProps,this.props.fieldProps)}
+            style = {flattenStyle(formProps.style)}
+            data = {data}
+            responsive = {typeof formProps.responsive =='boolean' ? formProps.responsive : this.props.responsive !== false ? true : false}
+            responsiveProps = {extendObj({},this.props.responsiveProps,formProps.responsiveProps)}
+            windowWidth = {defaultNumber(formProps.windowWidth,this.props.windowWidth) || undefined}
+            primaryKeyFields = {this.formDataPrimaryKeyFields}
+            formName = {this.getFormName()}
+            disabled = {this.props.disabled}
+            archived = {this.props.archived || data?.archived && true || false}
+            archivable = {this.props.archivable || this.isArchivable()}
+        />
     }
     getActions (){
         return renderActions(this.getAppBarActionsProps());

package/src/components/HeavyScreen/index.js

@@ -6,12 +6,10 @@ import { StylePropTypes } from '$theme';
 import {isNumber,defaultStr} from "$cutils";
 
 const OptimizedHeavyScreen = React.forwardRef(({
-  transition = (
-    <Transition.Together>
+  transition = (<Transition.Together>
       <Transition.Change interpolation="easeInOut" />
       <Transition.In type="fade" />
-    </Transition.Together>
-  ),
+    </Transition.Together>),
   style,
   children:cChildren,
   isLoading,
@@ -19,11 +17,13 @@ const OptimizedHeavyScreen = React.forwardRef(({
   testID,
   transitionTimeout,
   placeholder,
+  enabled,
 },ref) => {
   timeout = isNumber(timeout)? timeout : isNumber(transitionTimeout)? transitionTimeout : undefined;
   const { transitionRef, areInteractionsComplete } = useAfterInteractions(timeout);
   let Placeholder = placeholder;
-  const children = React.useStableMemo(()=>cChildren,[cChildren])
+  const children = React.useStableMemo(()=>cChildren,[cChildren]);
+  if(enabled === false) return children;
   placeholder = React.isComponent(Placeholder)? <Placeholder /> : React.isValidElement(Placeholder)? Placeholder :  null;
   return (
     <Transitioning.View
@@ -42,6 +42,7 @@ export default OptimizedHeavyScreen;
 OptimizedHeavyScreen.propTypes = {
     transition: PropTypes.any,
     children : PropTypes.node,
+    enabled : PropTypes.bool,//if heavry screen will be enabled
     style: StylePropTypes,
     timeout : PropTypes.number,
     transitionTimeout : PropTypes.number,

package/src/components/Resizable/index.web.js

@@ -17,9 +17,7 @@ const ResizableComponent = React.forwardRef(({width,onResize,height,...props},re
         if(onResize){
             onResize({...size,element,handle,event});
         }
-      }}>
-
-    </Resizable>
+      }}/>
 });
 
 ResizableComponent.displayName ="ResizableComponent";

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

@@ -57,22 +57,20 @@ export default class FormDataLayout extends FormDataActions {
         return !!(this.props.isLoading)
     }
     wrapRenderingContent(content,wProps){
-        let {
+        const {
             withHeavyScreen,
             preloader,
             preloaderProps,
-            testID,
         } = this.props;
         const isLoading = this.isLoading();
         wProps = defaultObj(wProps);
-        const useHeavyScreen = withHeavyScreen !== false || isLoading == true? 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,isLoading,placeholder,testID:testID+"_HeavyScreen"} : {}
-        return <Wrapper {...wrapperProps}>
-            {content}
-        </Wrapper>
+        const testID = defaultStr(wProps.testID,this.props.testID,"RN_FormDataScren");
+        return <HeavyScreen {...wProps} 
+            testID={testID+"_HeavyScreen"} 
+            placeholder={React.isValidElement(preloader)? preloader : <FormLoader {...defaultObj(preloaderProps)}/>} 
+            enabled={(withHeavyScreen === false)?false:isLoading} 
+            isLoading={isLoading}
+        >{content}</HeavyScreen>
     }
     _render (content){
         const {testID,...props} = this.props;

package/src/layouts/Screen/TableData.js

@@ -89,7 +89,6 @@ export default class TableDataScreenComponent extends FormDataScreen{
             }
         });
         Object.defineProperties(this,{
-            INITIAL_STATE : {value : {}},
             tableName : { value : defaultStr(table.table,table.tableName)},
             fields : {value : fields},
             table : {value : table},
@@ -120,11 +119,7 @@ export default class TableDataScreenComponent extends FormDataScreen{
     isCurrentDocEditingUpdate(){
         return this.isDocEditingRef.current === true ? true : false;
     }
-    resetState(){
-        Object.map(this.INITIAL_STATE,(s,k)=>{
-            delete this.INITIAL_STATE[k];
-        })
-    }
+
     getDatas(){
         return this.state.datas;
     }
@@ -175,13 +170,15 @@ export default class TableDataScreenComponent extends FormDataScreen{
     */
     prepareComponentProps(props){
         const obj = typeof this.props.prepareComponentProps =='function'? this.props.prepareComponentProps(props) : null;
-        if(isObj(obj)){
+        if(isObj(obj) && Object.size(obj,true)){
             return extendObj({},props,obj);
         }
         return props;
     }
+    getSessionName (){
+        return defaultStr(this.props.sessionName,"table-form-data"+this.getTableName())
+    }
     getComponentProps(props){
-        this.resetState();
         const table = this.table;
         const {datas,currentIndex,data} = this.state; 
         const tableName = this.tableName;
@@ -189,8 +186,6 @@ export default class TableDataScreenComponent extends FormDataScreen{
         this.isDocEditingRef.current = !!isUpdated;
         const isMobOrTab = isMobileOrTabletMedia();
         let archived = this.isArchived(); 
-        this.INITIAL_STATE.archived = archived;
-        this.INITIAL_STATE.tableName = tableName;
         const fields = {};
         const fieldsToPrepare = extendObj({},true,this.fields,customFields);
         const {
@@ -224,7 +219,7 @@ export default class TableDataScreenComponent extends FormDataScreen{
             prepareComponentProps,
             ...rest
         } = this.prepareComponentProps({...props,tableName,fields:fieldsToPrepare,isUpdated,isUpdate:isUpdated,data,datas,currentIndex});
-        const sessionName = this.INITIAL_STATE.sessionName = defaultStr(customSessionName,"table-form-data"+tableName);
+        const sessionName = this.getSessionName();
         const prepareCb = typeof prepareField =='function'? prepareField : x=> x;
         ///on effectue une mutator sur le champ en cours de modification
         Object.map(fieldsToPrepare,(field,i,counterIndex)=>{
@@ -386,7 +381,7 @@ export default class TableDataScreenComponent extends FormDataScreen{
             if(!isMobileOrTabletMedia()){
                 tabsProps.withScrollView = false;
             }
-        },isMobile,sessionName:this.INITIAL_STATE.sessionName,props:restProps,tabProps,tabsProps,context,tabKey};
+        },isMobile,sessionName:this.getSessionName(),props:restProps,tabProps,tabsProps,context,tabKey};
         const hasTabs = Object.size(tabs,true);
         let mainContent = undefined;
         testID = defaultStr(testID,"RN_TableDataScreenItem_"+restProps.tableName);
@@ -453,7 +448,7 @@ export default class TableDataScreenComponent extends FormDataScreen{
     }
     isArchived(data){
         data = defaultObj(data,this.state.data);
-        return this.isArchivable() && this.isDocEditing(data) && (!!data.archived || !!data.wasTransferred)? true : !!this.INITIAL_STATE.archived || false;
+        return this.isArchivable() && this.isDocEditing(data) && (!!data.archived || !!data.wasTransferred)? true : !!this.props.archived || false;
     }
     goToPreviousData(){
         const currentIndex = this.getCurrentIndex(),datas = this.state.datas;
@@ -790,9 +785,9 @@ export default class TableDataScreenComponent extends FormDataScreen{
     copyToClipboard(){
         return copyToClipboard({
             data : this.getCurrentData(),
-            fields : this.INITIAL_STATE.fields,
-            sessionName : this.INITIAL_STATE.sessionName,
-        })
+            fields : this.getCurrentRenderingProps()?.fields,
+            sessionName : this.getSessionName(),
+        });
     }
     renderDatagridActions(args){
         args = defaultObj(args);

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

@@ -1,38 +0,0 @@
-import React from '$react';
-import { ScrollView} from 'react-native';
-import PropTypes from "prop-types";
-import {defaultStr,defaultObj} from "$cutils";
-import {Vertical as AutoSizeVertical} from "$ecomponents/AutoSizer";
-
-const ScrollViewComponent = React.forwardRef(({withAutoSizer,autoSizerProps,testID,...rest},ref) => {
-  testID = defaultStr(testID,'RN_ScrollViewComponent');
-  const autoSize = React.useRef(withAutoSizer).current;
-    if(!autoSize || rest.horizontal === true || rest.vertical === false){
-      return <ScrollView testID={testID} ref={ref} {...rest}/>
-  }
-  autoSizerProps = defaultObj(autoSizerProps);
-  const autoSizeRef = React.useRef(null);
-  return  <AutoSizeVertical {...autoSizerProps} ref = {autoSizeRef} testID={testID+"_ScrollViewContainer"}>
-    <ScrollView 
-      ref={ref} 
-      {...rest} 
-      testID={testID}
-      onContentSizeChange = {(a,b,c,d)=>{
-        if(rest.onContentSizeChange && rest.onContentSizeChange(a,b,c,d)===false) return;
-         if(autoSizeRef.current && autoSizeRef.current.updateLayout){
-           return autoSizeRef.current.updateLayout();
-         }
-      }}
-    />
-  </AutoSizeVertical>
-});
-
-ScrollViewComponent.displayName = "ScrollViewComponent";
-export default ScrollViewComponent;
-
-ScrollViewComponent.propTypes = {
-   ...defaultObj(ScrollView.propTypes),
-   withAutoSizer : PropTypes.bool,//si le contenu du scrollView sera wrap par le composant AutoSizer
-   maxHeight : PropTypes.number,
-   minHeight : PropTypes.number,
-}

package/src/components/ScrollView/index.back.js

@@ -1,84 +0,0 @@
-import React from '$react';
-import { ScrollView,Dimensions} from 'react-native';
-import PropTypes from "prop-types";
-import View from "$ecomponents/View";
-import theme from "$theme";
-import {defaultStr,defaultObj,defaultNumber} from "$cutils";
-import APP from "$capp/instance";
-import ActivityIndicator from "$ecomponents/ActivityIndicator";
-const ScrollViewComponent = React.forwardRef(({withAutoSizer,containerProps,maxHeight,minHeight,testID:customTestID,children:cChildren,...rest},ref) => {
-  const testID = defaultStr(customTestID,'RN_ScrollViewComponent');
-  const autoSizeRef = React.useRef(withAutoSizer);
-    if(!autoSizeRef.current || rest.horizontal === true || rest.vertical === false){
-      return <ScrollView testID={testID} ref={ref} {...rest} children={cChildren}/>
-  }
-  containerProps = defaultObj(containerProps)
-  const hasUpdateLayoutRef = React.useRef(false);
-  const isKeyboardOpenRef = React.useRef(false);
-  const layoutRef = React.useRef(null);
-  const [layout,setLayout] = React.useState(Dimensions.get("window"));
-  const {height} = layout;
-  const hasInitializedRef = React.useRef(false);
-  const children = React.useStableMemo(()=>cChildren,[cChildren]);
-  const updateLayout = ()=>{
-      return new Promise((resolve)=>{
-          hasUpdateLayoutRef.current = true;
-          if(layoutRef.current && layoutRef.current.measureInWindow){
-              layoutRef.current.measureInWindow((x, y, width, height) => {
-                  const r = {...Dimensions.get("window"),layout:{ x, y, width, height }};
-                  setLayout(r);
-                  hasInitializedRef.current = true;
-                  resolve(r);
-              });
-          } else {
-            setLayout(Dimensions.get("window"))
-          }
-      })
-  }
-  React.useEffect(()=>{
-    const onKeyboardToggle = ({visible})=>{
-      isKeyboardOpenRef.current = visible;
-     };
-    const onResizePage = ()=>{
-      setTimeout(()=>{
-         if(isKeyboardOpenRef.current) return;
-         updateLayout();
-      },300);
-    }
-    APP.on(APP.EVENTS.RESIZE_PAGE,onResizePage);
-    APP.on(APP.EVENTS.KEYBOARD_DID_TOGGLE,onKeyboardToggle)
-    return ()=>{
-      APP.off(APP.EVENTS.RESIZE_PAGE,onResizePage);
-      APP.off(APP.EVENTS.KEYBOARD_DID_TOGGLE,onKeyboardToggle);
-    }
-  },[]);
-  const hasUpdateLayout = hasUpdateLayoutRef.current;
-  const cStyle ={width:'100%',maxHeight:Math.max(height-100,250)};
-  const contentLayout = defaultObj(layout.layout);
-  cStyle.minHeight = Math.min(Math.max(layout.height-defaultNumber(contentLayout.y),250));
-  const contentContainerStyle = ([cStyle,rest.contentContainerStyle]);
-  const fStyle = !hasUpdateLayout && {flex:1,maxWidth:layout.width - defaultNumber(contentLayout.x)};
-  return  <View ref={layoutRef} onLayout={()=>{
-    if(!hasInitializedRef.current){
-       updateLayout();
-    }
-  }} {...containerProps} style={[theme.styles.w100,containerProps.style,fStyle]} testID={testID+"_ScrollViewContainer"}>
-    <ScrollView 
-      ref={ref} {...rest} 
-      testID={testID}
-      children={hasUpdateLayout?children : <ActivityIndicator size={'large'} 
-      style={[{flex:1}]}/>}
-      contentContainerStyle = {[contentContainerStyle,fStyle]}
-    />
-  </View>
-});
-
-ScrollViewComponent.displayName = "ScrollViewComponent";
-export default ScrollViewComponent;
-
-ScrollViewComponent.propTypes = {
-   ...defaultObj(ScrollView.propTypes),
-   withAutoSizer : PropTypes.bool,//si la taille du scrollView sera withAutoSizer
-   maxHeight : PropTypes.number,
-   minHeight : PropTypes.number,
-}

package/src/components/ScrollView/index.withWeb.js

@@ -1,83 +0,0 @@
-import React from '$react';
-import { ScrollView,Dimensions } from 'react-native';
-import PropTypes from "prop-types";
-import View from "$ecomponents/View";
-import theme from "$theme";
-import {defaultStr,defaultObj} from "$cutils";
-import APP from "$capp/instance";
-import {isWeb as isw} from "$cplatform";
-const ScrollViewComponent = React.forwardRef(({containerProps,withAutoSizer,testID,...rest},ref) => {
-  testID = defaultStr(testID,'RN_ScrollViewComponent');
-  const autoSize = React.useRef(withAutoSizer).current;
-    if(!autoSize || rest.horizontal === true || rest.vertical === false){
-      return <ScrollView testID={testID} ref={ref} {...rest}/>
-  }
-  containerProps = defaultObj(containerProps)
-  const isWeb = isw();
-  const isKeyboardOpenRef = React.useRef(false);
-  const layoutRef = React.useRef(null);
-  const [layout,setLayout] = React.useState(Dimensions.get("window"));
-  const {height} = layout;
-  const hasInitializedRef = React.useRef(false);
-  const children = React.useStableMemo(()=>rest.children,[rest.children]);
-  const updateLayout = ()=>{
-      return new Promise((resolve)=>{
-          if(layoutRef.current && layoutRef.current.measureInWindow){
-              layoutRef.current.measureInWindow((x, y, width, height) => {
-                  const r = {...Dimensions.get("window"),layout:{ x, y, width, height }};
-                  setLayout(r);
-                  hasInitializedRef.current = true;
-                  resolve(r);
-              });
-          }
-      })
-  }
-  React.useEffect(()=>{
-    const onKeyboardToggle = ({visible})=>{
-      isKeyboardOpenRef.current = visible;
-     };
-    const onResizePage = ()=>{
-      setTimeout(()=>{
-         if(isKeyboardOpenRef.current) return;
-         updateLayout();
-      },300);
-    }
-    APP.on(APP.EVENTS.RESIZE_PAGE,onResizePage);
-    APP.on(APP.EVENTS.KEYBOARD_DID_TOGGLE,onKeyboardToggle)
-    return ()=>{
-      APP.off(APP.EVENTS.RESIZE_PAGE,onResizePage);
-      APP.off(APP.EVENTS.KEYBOARD_DID_TOGGLE,onKeyboardToggle);
-    }
-  },[]);
-
-  const cStyle = {maxHeight:Math.max(height-100,250),width:'100%'};
-  if(isObj(layout.layout) && typeof layout.layout.y =='number' && layout.layout.y>=10){
-      const {layout : {x,y}} = layout;
-      const minHeight = height - y;
-      if(minHeight> 0){
-          cStyle.minHeight = minHeight;
-      }
-  }
-  const contentContainerStyle = [cStyle,rest.contentContainerStyle];
-  return  <View ref={layoutRef} onLayout={()=>{
-    if(!hasInitializedRef.current){
-       updateLayout();
-    }
-  }} {...containerProps} style={[theme.styles.w100,containerProps.style]} testID={testID+"_ScrollViewContainer"}>
-    <ScrollView 
-      ref={ref}
-      {...rest} 
-      testID={testID}
-      children={children}
-      contentContainerStyle = {contentContainerStyle}
-    />
-  </View>
-});
-
-ScrollViewComponent.displayName = "ScrollViewComponent";
-export default ScrollViewComponent;
-
-ScrollViewComponent.propTypes = {
-   ...defaultObj(ScrollView.propTypes),
-   withAutoSizer : PropTypes.bool,
-}