@fto-consult/expo-ui 6.24.2 → 6.25.1

package/src/components/Datagrid/IndexComponent.js

@@ -3,7 +3,6 @@
 // license that can be found in the LICENSE file.
 
 import Accordion,{ TableData as TableDataAccordion} from "./Accordion";
-import Dashboard  from "./Dashboard";
 import Table,{TableData as DatagridTableData} from "./Table";
 import {isDesktopMedia,isMobileMedia} from "$cplatform/dimensions";
 import {isFunction,defaultVal} from "$cutils";
@@ -14,19 +13,15 @@ import {getRenderType} from "./utils";
 const DatagridMainComponent = React.forwardRef((props,ref)=>{
     const isDesk = isDesktopMedia();
     const isMob = isMobileMedia();
-    const isTableDataRef = React.useRef(defaultVal(props.isTableData,defaultStr(props.tableName,props.table) || typeof props.fetchData ==='function'?true : false));
-    const TableComponent = isTableDataRef.current ? DatagridTableData : Table;
-    const AccordionComponent = isTableDataRef.current ? TableDataAccordion : Accordion;
-    let Component = TableComponent;
+    const isTableData = typeof props.isTableData =='boolean'? props.isTableData  : defaultStr(props.tableName,props.table).trim() || typeof props.fetchData ==='function'?true : false;
+    const renderType = defaultStr(getRenderType(),isDesk? "table":'accordion').trim().toLowerCase();
     const canRenderAccordion = (isFunction(props.accordion) || (isObj(props.accordionProps) && isFunction(props.accordionProps.accordion)) || props.accordion === true);
-    let renderType = defaultStr(getRenderType(),isDesk? "table":'accordion').trim().toLowerCase()
-    if(renderType == 'accordion' && canRenderAccordion){
-        Component = AccordionComponent;
-    } else if(renderType =='table'){
-        Component = TableComponent;
-    } else if(isMob && canRenderAccordion){
-        Component = AccordionComponent;
-    }
+    const Component = React.useMemo(()=>{
+        if((renderType == 'accordion' || (renderType !=='table' && isMob)) && canRenderAccordion){
+            return isTableData ? TableDataAccordion : Accordion;
+        }
+        return isTableData ? DatagridTableData : Table;
+    },[isTableData,renderType,canRenderAccordion,isMob])
     return <Component
         {...props}
         ref = {ref}

package/src/components/Datagrid/Table/index.js

@@ -14,6 +14,7 @@ import RenderType from "../RenderType";
 import Footer from "../Footer/Footer";
 import theme from "$theme";
 import Table from "$ecomponents/Table";
+import DatagridProvider from "../hooks/Provider";
 
 
 const DatagridFactory = (Factory)=>{
@@ -276,57 +277,58 @@ const DatagridFactory = (Factory)=>{
                     </View>
                 </ScrollView>
             </View> : null;
-            return <View style={[styles.container,{flex:1}]} testID={testID+"_TableContainer"} pointerEvents={pointerEvents}>
-                <View ref={this.layoutRef} testID={testID+"_LayoutContainer"}>
-                    {this.props.showActions !== false ? <DatagridActions 
-                        pointerEvents = {pointerEvents}
-                        title = {this.renderDataSourceSelector()}
-                        context = {this}
-                        selectedRows = {Object.assign({},this.selectedRows)}
-                        selectedRowsActions = {this.renderSelectedRowsActions.bind(this)}
-                        actions = {actions}
-                    /> : null}
-                    {rPagination}
-                    {progressBar}  
-                </View>
-                {canRenderChart ?
-                    <View testID={testID+"_ChartContainer"} {...chartContainerProps} style={[theme.styles.w100,chartContainerProps.style]}>
-                        {this.renderChart()}
-                    </View> : 
-                <Table
-                    ref = {this.listRef}
-                    {...rest}
-                    sortedColumn = {sortedColumn}
-                    onRender = {this.onRender.bind(this)}
-                    getItemType = {this.getFlashListItemType.bind(this)}
-                    renderItem = {this.renderFlashListItem.bind(this)}
-                    hasFooters = {hasFootersFields && !canRenderChart ? true : false}
-                    showFilters = {showFilters}
-                    showFooters = {showFooters && !canRenderChart ? true : false}
-                    showHeaders = { canRenderChart ? !!showFilters : true}
-                    headerContainerProps = {{}}
-                    headerCellContainerProps = {{
-                        style : showFilters?{justifyContent:'flex-start'}:null
-                    }}
-                    isRowSelected = {this.isRowSelected.bind(this)}
-                    columns = {this.state.columns}
-                    //renderRow={this.renderRow.bind(this)}
-                    getRowKey = {this.getRowKey.bind(this)}
-                    columnsWidths = {widths}
-                    renderCell={this.renderRowCell.bind(this)}
-                    rowContainerProps = {(props)=>{
-                        return {
-                            style : getRowStyle(props,{selected:this.isRowSelected.bind(this)}),
-                        }
-                    }}
-                    data = {this.state.data}
-                    footers = {this.getFooterValues()}
-                    renderHeaderCell={this.renderHeaderCell.bind(this)}
-                    renderFilterCell={this.renderFilterCell.bind(this)}
-                    renderFooterCell={this.renderFooterCell.bind(this)}
-                    renderEmpty = {this.renderEmpty.bind(this)}
-                />}
-            </View>
+            return <DatagridProvider context={this}>
+                     <View style={[styles.container,{flex:1}]} testID={testID+"_TableContainer"} pointerEvents={pointerEvents}>
+                        <View ref={this.layoutRef} testID={testID+"_LayoutContainer"}>
+                            {this.props.showActions !== false ? <DatagridActions 
+                                pointerEvents = {pointerEvents}
+                                title = {this.renderDataSourceSelector()}
+                                actions = {actions}
+                            /> : null}
+                            {rPagination}
+                            {progressBar}  
+                        </View>
+                        {canRenderChart ?
+                            <View testID={testID+"_ChartContainer"} {...chartContainerProps} style={[theme.styles.w100,chartContainerProps.style]}>
+                                {this.renderChart()}
+                            </View> : 
+                        <Table
+                            ref = {this.listRef}
+                            {...rest}
+                            withDatagridContext
+                            sortedColumn = {sortedColumn}
+                            onRender = {this.onRender.bind(this)}
+                            getItemType = {this.getFlashListItemType.bind(this)}
+                            renderItem = {this.renderFlashListItem.bind(this)}
+                            renderSectionHeader = {this.renderFlashListItem.bind(this)}
+                            hasFooters = {hasFootersFields && !canRenderChart ? true : false}
+                            showFilters = {showFilters}
+                            showFooters = {showFooters && !canRenderChart ? true : false}
+                            showHeaders = { canRenderChart ? !!showFilters : true}
+                            headerCellContainerProps = {{
+                                style : showFilters?{justifyContent:'flex-start'}:null
+                            }}
+                            isRowSelected = {this.isRowSelected.bind(this)}
+                            columns = {this.state.columns}
+                            //renderRow={this.renderRow.bind(this)}
+                            getRowKey = {this.getRowKey.bind(this)}
+                            columnsWidths = {widths}
+                            renderCell={this.renderRowCell.bind(this)}
+                            rowContainerProps = {(props)=>{
+                                return {
+                                    style : getRowStyle(props,{selected:this.isRowSelected.bind(this)}),
+                                }
+                            }}
+                            data = {this.state.data}
+                            footers = {this.getFooterValues()}
+                            renderHeaderCell={this.renderHeaderCell.bind(this)}
+                            renderFilterCell={this.renderFilterCell.bind(this)}
+                            renderFooterCell={this.renderFooterCell.bind(this)}
+                            renderEmpty = {this.renderEmpty.bind(this)}
+                        />}
+                    </View>
+                    
+            </DatagridProvider>
         }
     }
     clx.propTypes = {

package/src/components/Datagrid/Test/index.js

@@ -2,19 +2,26 @@
 // Use of this source code is governed by a BSD-style
 // license that can be found in the LICENSE file.
 
-import fields from "./fields";
-import Table from "../Table";
+import Table from "../IndexComponent";
 import React from "$react";
 import { faker } from '@faker-js/faker';
 export default function TestDatagridComponent({count,...props}){
     const data = React.useMemo(()=>{
-        count = typeof count =='number' && count > 10 ? count : 5000;
+        count = typeof count =='number' && count > 10 ? count : 100;
         return faker.helpers.multiple(createRandomUser, {
             count,
         });
     },[count])
     return <Table 
         title = "Utilisateurs"
+        accordion = {({rowData})=>{
+            return {
+                content : `${rowData.email}`,
+                title : rowData?.username,
+                //avatar : rowData.avatar,
+                right : rowData.birthdate,
+            }
+        }}
     columns={{
         userId : {
             primaryKey : true,

package/src/components/Datagrid/events/evx.js

@@ -0,0 +1,7 @@
+export const ON_ROW_TOGGLE = "ON_ROW_TOGGLE";//l'orsqu'on toggle on ligne
+
+export const ON_ALL_ROWS_TOGGLE = "ON_ALL_ROWS_TOGGLE";
+
+export const ON_FETCH_DATA = "ON_FETCH_DATA";
+
+export const ON_UPDATE = "ON_UPDATE";

package/src/components/Datagrid/events/index.js

@@ -0,0 +1,11 @@
+import {isNonNullString} from "$cutils";
+import * as events from "./evx";
+
+export const sanitize = (event)=>{
+    if(!isNonNullString(event)) return "";
+    return event.trim().toSnackCase();
+}
+export * from "./evx";
+
+export default events;
+

package/src/components/Datagrid/hooks/Provider.js

@@ -0,0 +1,6 @@
+
+import { DatagridContext } from "./context";
+import React from "$react";
+export default function DatagridComponentProvider({children,context,...props}){
+    return <DatagridContext.Provider value={{...props,context}} children={children}/>
+}

package/src/components/Datagrid/hooks/context.js

@@ -0,0 +1,5 @@
+import { createContext } from "react";
+
+const DatagridContext = createContext(null);
+
+export {DatagridContext};

package/src/components/Datagrid/hooks/index.js

@@ -0,0 +1,104 @@
+import { useContext,useEffect,useMemo,useReducer } from "react";
+import { DatagridContext } from "./context";
+import {isObj,isNonNullString} from "$cutils";
+import events from "../events";
+export const useDatagrid = x=> {
+    const t = useContext(DatagridContext)
+    if(!t || !t?.context || !t?.context?.state || !t?.context?.state?.data){
+        throw "Le composant Datagrid actions doit être enfant d'un contexe de datagrid valide";
+    }
+    return t;
+};
+export const useDatagridContext = ()=>{
+    return useDatagrid()?.context;
+}
+export const useData = ()=>{
+    const {context} = useDatagrid();
+    return Array.isArray(context.state.data) && context.state.data || [];
+}
+export const useSelectedRows = ()=>{
+    const {context} = useDatagrid();
+}
+export const useGetRowKey = ({rowData,rowIndex})=>{
+    const {context} = useDatagrid();
+    return context.getRowKey(rowData,rowIndex);
+};
+/****
+    @param {string|Array} event, l'évènement ou les évènements en question, qui est trigger par le contexte de datagrid
+    @param {function|string} getter, la fonction getter, est la fonction qui prenant en paramètre le contexte, retourne la valeur liée à l'évènement event
+    @param {function} onEvent, la fonction appelée lorsque l'évènement est exécutée
+*/
+export const useOnEvent = (event,getter,onEvent)=>{
+    const {context} = useDatagrid();
+    if((!isNonNullString(event) && !Array.isArray(event)) || !event.length){
+        throw `méthode invalide ${method} supportée par le contexte`;
+    }
+    if(typeof getter !=='function') {
+        throw "méthode getter invalide pour la récupéreration de l'état lié au contexte du datagrid";
+    }
+    const evBack = event;
+    event = Array.isArray(event) ? event : isNonNullString(event)? event.trim().split(",") : [];
+    const [state, dispatch] = useReducer(function(state2,action){
+        if(event.filter(ev=>action.type.toLowerCase() === ev?.toLowerCase().trim()).length){
+            return getter(context,action.type);
+        }
+        return null;
+    }, getter(context,evBack));
+    const callbacks = useMemo((...args)=>{
+        const callbacks = {};
+        event.map((ev)=>{
+            callbacks[ev] = (...args)=>{
+                if(typeof onEvent ==='function' && onEvent(ev,...args) === false) return false;
+                return dispatch({type:ev});
+            }
+        });
+        return callbacks;
+    },[event.join(",")]);
+    useEffect(()=>{
+        Object.map(callbacks,(cb,event)=>{
+            context.on(event,cb);
+        });
+        return ()=>{
+            Object.map(callbacks,(cb,ev)=>{
+                context.off(ev,cb);
+            });
+        }
+    },[]);
+    return state;
+}
+
+
+/****
+    ecoute l'évènement event sur le contexte de datagrid
+    @param {string} event, l'évènement à écouter
+    @param {function} onEvent, la fonction appelée lorsque l'évènement est écoutée
+*/
+export const useBindEvent = (event,onEvent)=>{
+    const {context} = useDatagrid();
+    if(!isNonNullString(event)){
+        throw `impossible d'écouter un évènemet invalide pour le contexte de datagrid`;
+    }
+    useEffect(()=>{
+        context.on(event,onEvent);
+        return ()=>{
+            context.off(event,onEvent);
+        }
+    },[]);
+    return onEvent;
+}
+export const useIsRowSelected = (...args)=>{
+    return useOnEvent([events.ON_ROW_TOGGLE,events.ON_ALL_ROWS_TOGGLE],(context)=>{
+        return context.isRowSelected(...args);
+    });
+};
+
+export const useGetSelectedRowsCount = ()=>{
+    return useOnEvent([events.ON_ROW_TOGGLE,events.ON_ALL_ROWS_TOGGLE],(context)=>{
+        return context.getSelectedRowsCount();
+    });
+}
+export const useIsAllRowsSelected = ()=>{
+    return useOnEvent([events.ON_ROW_TOGGLE,events.ON_ALL_ROWS_TOGGLE],(context)=>{
+        return context.isAllRowsSelected();
+    });
+};

package/src/components/Datagrid/utils.js

@@ -1,4 +1,4 @@
-import theme,{LINE_HEIGHT} from "$theme";
+import theme,{Colors,LINE_HEIGHT} from "$theme";
 import { StyleSheet } from "react-native";
 import {get as getSession} from "./Common/session";
 import appConfig from "$capp/config";
@@ -98,7 +98,9 @@ export const ROW_EVEN_STYLE = {
 }
 
 export const ROW_SELECTED_STYLE = {
-    backgroundColor : ROW_SELECTED_BACKGROUND_COLOR
+    get backgroundColor(){
+        return theme.isDark()? Colors.lighten(theme.colors.surface) : Colors.darken(theme.colors.surface); 
+    }
 }
 
 export const ROW_BORDER_STYLE = {
@@ -111,7 +113,8 @@ export const ROW_BORDER_STYLE = {
     borderRightColor : ROW_BORDER_COLOR,
     borderRightWidth : 0,
     borderTopColor : ROW_BORDER_COLOR,
-    borderTopWidth : 0
+    borderTopWidth : 0,
+    borderStyle : "solid",
 }
 
 
@@ -119,7 +122,7 @@ export const DATE_COLUMN_WIDTH = 200;
 
 export {LINE_HEIGHT}
 
-export const styles = StyleSheet.create({
+export const styles = ({
     approved : ROW_APPROVED_STYLE,
     archived : ROW_ARCHIVED_STYLE,
     selected : ROW_SELECTED_STYLE,
@@ -167,7 +170,7 @@ export const getRowStyle = ({row,bordered,numColumns,rowData,isAccordion,isTable
     if(rowIndex !== undefined){
         style.push(rowIndex%2===0?styles.even : theme.isDark()?styles.oddDark : styles.odd)
     }
-    if(false && selected){
+    if(selected){
         style.push(styles.selected,{borderBottomWidth:1,borderBottomColor:theme.colors.primary})
     }
     if(paid || row.paid){

package/src/components/Dialog/Dialog.js

@@ -20,7 +20,7 @@ import {ACTION_ICON_SIZE} from "$ecomponents/AppBar";
 import DialogFooter from "./DialogFooter";
 import { Dimensions } from "react-native";
 import Surface from "$ecomponents/Surface";
-import KeyboardAvoidingView from "$ecomponents/KeyboardAvoidingView";
+import DialogContent from "./DialogContent";
 
 export const FOOTER_HEIGHT = 50;
 export const HEADER_HEIGHT = 50;
@@ -198,14 +198,14 @@ const DialogComponent = React.forwardRef((props,ref)=>{
                 testID = {testID}
                 contentContainerProps = {contentContainerProps}
             >
-                <Surface 
-                    testID = {testID+"_Overlay"}
-                    ref={overlayRef}
-                    {...overlayProps} 
-                    style={[styles.overlay,isAlert && styles.overlayAlert,{backgroundColor},overlayProps.style,fullScreenStyle]}
-                >   
-                    <KeyboardAvoidingView>
-                        {(!isAlert && (actions || title || subtitle)) ? <AppBarDialog
+                <DialogContent isFullScreen={isFullScreenDialog} isPreloader={isPreloader}>
+                    <Surface 
+                        testID = {testID+"_Overlay"}
+                        ref={overlayRef}
+                        {...overlayProps} 
+                        style={[styles.overlay,isAlert && styles.overlayAlert,{backgroundColor},overlayProps.style,fullScreenStyle]}
+                    >   
+                     {(!isAlert && (actions || title || subtitle)) ? <AppBarDialog
                             actionsProps = {actionsProps}
                             testID = {testID+"_AppBar"}
                             {...appBarProps}
@@ -269,14 +269,15 @@ const DialogComponent = React.forwardRef((props,ref)=>{
                             isFullScreen = {isFullScreenDialog}
                             fullScreen = {customFullScreen}
                             children = {footer}
-                         /> : null}
-                </KeyboardAvoidingView>
-             </Surface>
+                         /> : null}    
+                    </Surface>
+                </DialogContent>
             </ModalComponent>
         </Portal>
 });
 export default DialogComponent;
 
+
 DialogComponent.propTypes= {
     ...Modal.propTypes,
     isAlert : PropTypes.bool,//si c'est le rendu alert, pour le rendu de l'alerte

package/src/components/Dialog/DialogContent.js

@@ -0,0 +1,11 @@
+import KeyboardAvoidingView from "../KeyboardAvoidingView";
+import React  from "$react";
+import { useWindowDimensions } from "react-native";
+
+const DialogContentComponent = ({isPreloader,isFullScreen,...props})=>{
+    const isFull = isFullScreen();
+    //useWindowDimensions();
+    const content = React.useMemo(()=>props.children,[isPreloader]);
+    return isPreloader || !isFull ? content : <KeyboardAvoidingView>{content}</KeyboardAvoidingView>
+}
+export default DialogContentComponent;

package/src/components/KeyboardAvoidingView/index.js

@@ -1,8 +1,12 @@
 import View from "$ecomponents/View";
 import React from "$react";
-const KeyboardAvoidingViewComponent = React.forwardRef(({children,...props},ref)=>{
-  return <View {...props}>{children}</View>
+import {isNonNullString} from "$cutils";
+import theme from "$theme";
+const KeyboardAvoidingViewComponent = React.forwardRef(({children,style,testID,...props},ref)=>{
+  return <View  {...props} style={[theme.styles.flex1,style]} children={children} testID={isNonNullString(testID) ? `${testID.trim()}_KeyboardAvoidingView` : "RN_KeyboardAvoidingView"}/>
 });
 
 KeyboardAvoidingViewComponent.displayName = "KeyboardAvoidingViewComponent";
-KeyboardAvoidingViewComponent.propTypes = Object.assign({},View.propTypes);
+KeyboardAvoidingViewComponent.propTypes = Object.assign({},View.propTypes);
+
+export default KeyboardAvoidingViewComponent;

package/src/components/Label/index.js

@@ -42,6 +42,7 @@ const LabelComponent = React.forwardRef(({ children,role,color,upperCase,fontSiz
     }
     
     style = Object.assign({},StyleSheet.flatten(style));
+    let hasP = Object.size(style,true);
     testID = defaultStr(testID,"RN_LabelComponent");
     const restProps = {id};
     if(splitText){
@@ -54,6 +55,9 @@ const LabelComponent = React.forwardRef(({ children,role,color,upperCase,fontSiz
     if(wrap){
         r1.flexWrap = "wrap";
     }
+    if(disabled){
+        r1.pointerEvents = "none";
+    }
     if(isNonNullString(children) || isText || typeof children ==='number'){
         if(!isText){
             children +="";
@@ -69,7 +73,6 @@ const LabelComponent = React.forwardRef(({ children,role,color,upperCase,fontSiz
             role={typeof role =='string' && role && supportedRoles.includes(role.trim()) && role.trim() || undefined}
             style={[styles.label,splitText?styles.wrap:null,splitText?styles.w100:null,bold?styles.bold:null,r2,style,r1,styles.webFontFamilly]}>{children}</Text>)
     }
-    let hasP = false;
     if(isObj(rest)){
         for(let i in rest){
             if(rest[i]!== undefined) {
@@ -81,14 +84,15 @@ const LabelComponent = React.forwardRef(({ children,role,color,upperCase,fontSiz
     if(children == undefined){
         return null;
     }
+    const viewStyle = [bold?styles.bold:null,r2,style,r1];
     if(React.isValidElement(children)){
         if(!hasP) {
             if(id || ref){
-                return <View ref = {ref} testID = {testID} id={id}>{children}</View>
+                return <View ref = {ref} testID = {testID} id={id} style={viewStyle}>{children}</View>
             }
-            return <>{children}</>
+            return children;
         }
-        return <View ref = {ref} selectable={defaultSelectable} {...rest} {...restProps} testID = {testID} style={[bold?styles.bold:null,r2,style,r1]} disabled={disabled} pointerEvents={disabled?'none':'auto'}>{children}</View>
+        return <View ref = {ref} selectable={defaultSelectable} {...rest} {...restProps} testID = {testID} style={viewStyle} disabled={disabled}>{children}</View>
     }
     return null;
 })

package/src/components/List/Common.js

@@ -3,7 +3,7 @@ import React from "$react";
 import { prepareItems as customPrepareItems,getBToTopRef } from "./utils";
 import {grid,StylePropTypes} from "$theme";
 import PropTypes from "prop-types";
-import {defaultObj,extendObj,isObj,defaultDecimal,defaultArray,defaultFunc} from "$cutils";
+import {defaultObj,defaultStr,extendObj,isObj,defaultDecimal,defaultArray,defaultFunc} from "$cutils";
 import {isMobileMedia} from "$cplatform/dimensions";
 import BackToTop from "$ecomponents/BackToTop";
 import {FlatList,StyleSheet,View} from "react-native";
@@ -13,7 +13,7 @@ import { useList } from "./hooks";
 
 const CommonListComponent = React.forwardRef((props,ref)=>{
     const context = useList(props);
-    let {responsive,defaultItemHeight,itemHeight,windowWidth,onRender,componentProps,columnWrapperStyle,onViewableItemsChanged,withFlatListItem,Component,withBackToTop,backToTopRef:customBackToTopRef,withBackToTopButton,onScroll,onScrollEnd,onMount,onUnmount,renderScrollViewWrapper,prepareItems,getItemKey,getKey,keyExtractor,items,filter,renderItem,numColumns,containerProps,bindResizeEvents,...rest} = props;
+    let {responsive,testID,defaultItemHeight,itemHeight,windowWidth,onRender,componentProps,columnWrapperStyle,onViewableItemsChanged,withFlatListItem,Component,withBackToTop,backToTopRef:customBackToTopRef,withBackToTopButton,onScroll,onScrollEnd,onMount,onUnmount,renderScrollViewWrapper,prepareItems,getItemKey,getKey,keyExtractor,items,filter,renderItem,numColumns,containerProps,bindResizeEvents,...rest} = props;
     withBackToTopButton = withBackToTop === true || withBackToTopButton == true || isMobileMedia()? true : false;
     rest = defaultObj(rest);
     containerProps = defaultObj(containerProps);
@@ -30,6 +30,7 @@ const CommonListComponent = React.forwardRef((props,ref)=>{
     const hasCustomBackToTop = typeof customBackToTopRef == 'function'? true : false;
     const backToTopRef = React.useRef(null);
     const isFlatList = Component === FlatList;
+    defaultStr(props.testID,"RN_CommonListComponent");
     extendObj(context,{
         getKey : typeof keyExtractor =='function'? keyExtractor : typeof getItemKey =='function'? getItemKey : typeof getKey =='function'? getKey : undefined,
         addItemsRefs : function(ref, itemRef){
@@ -150,12 +151,13 @@ const CommonListComponent = React.forwardRef((props,ref)=>{
     const restP = numColumns > 1 && isFlatList ? {
         columnWrapperStyle : [styles.columnWrapperStyle,props.columnWrapperStyle]
     } : {};
-    return <View {...containerProps} style={[styles.container,containerProps.style]}>
+    return <View testID={testID+"_CommonListContainer"} {...containerProps} style={[styles.container,containerProps.style]}>
         <Component
             onEndReachedThreshold={0}
             scrollEventThrottle={16}
             {...rest}
             {...restP}
+            testID = {testID}
             ref = {listRef}
             onScroll={context.onScroll}
             data = {context.items}

package/src/components/List/FlashList.js

@@ -7,19 +7,19 @@ import View from "$ecomponents/View";
 const FlashListComponent = React.forwardRef((props,ref)=>{
     const {testID} = props
     return (<CommonListComponent
-                testID = {'RN_FlashListComponent'}
-                estimatedItemSize = {50}
-                ListHeaderComponent={() => (
-                    <View testID={(testID||'RN_FlashListComponent')+"_Header"}>{props.children}</View>
-                )}
-                //disableAutoLayout
-                //disableHorizontalListHeightMeasurement = {props.horizontal?undefined : true}
-                {...props}
-                contentContainerStyle = {undefined}
-                style = {undefined}
-                Component = {FlashList}
-                ref={ref}
-            />)
+        testID = {'RN_FlashListComponent'}
+        estimatedItemSize = {50}
+        ListHeaderComponent={() => (
+            <View testID={(testID||'RN_FlashListComponent')+"_Header"}>{props.children}</View>
+        )}
+        //disableAutoLayout
+        //disableHorizontalListHeightMeasurement = {props.horizontal?undefined : true}
+        {...props}
+        contentContainerStyle = {undefined}
+        style = {undefined}
+        Component = {FlashList}
+        ref={ref}
+    />)
 })
 
 FlashListComponent.propTypes = {