@fto-consult/expo-ui 6.29.2 → 6.30.1

package/app.config.json

@@ -1,6 +1,6 @@
 {
 	"name": "@FTO-CONSULT/EXPO-UI",
-	"version": "6.28.1",
+	"version": "6.30.0",
 	"description": "Bibliothèque de composants UI Expo,react-native",
 	"bin": {
 		"expo-ui": "./bin/index.js"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fto-consult/expo-ui",
-  "version": "6.29.2",
+  "version": "6.30.1",
   "description": "Bibliothèque de composants UI Expo,react-native",
   "main": "index.js",
   "scripts": {
@@ -43,7 +43,7 @@
     "expo-fix": "npx expo install --fix",
     "delete-node-modules": "rimraf ./**/node_modules",
     "modifier-url-remote-git": "git remote set-url origin 'https://borispipo@github.com/borispipo/smart-eneo.git'",
-    "update": "npm i expo @emotion/native@latest @react-native-community/netinfo@latest react-native-big-list@latest apexcharts@latest file-saver@latest fs-extra@latest google-libphonenumber@latest @pchmn/expo-material3-theme@latest @emotion/native@latest @fto-consult/common@latest react-native-blob-util react-native-gesture-handler@latest react-native-iphone-x-helper@latest react-native-mime-types@latest react-native-paper@latest react-native-safe-area-context@latest react-native-paper-dates@latest @react-navigation/native@latest @react-navigation/native-stack@latest react-native-screens@latest react-virtuoso@latest tippy.js@latest websql@latest xlsx@latest && npx expo install --fix"
+    "update": "npm i expo @emotion/native@latest react-native-big-list@latest apexcharts@latest file-saver@latest fs-extra@latest google-libphonenumber@latest @pchmn/expo-material3-theme@latest @emotion/native@latest @fto-consult/common@latest react-native-blob-util react-native-gesture-handler@latest react-native-iphone-x-helper@latest react-native-mime-types@latest react-native-paper@latest react-native-paper-dates@latest @react-navigation/native@latest @react-navigation/native-stack@latest react-virtuoso@latest tippy.js@latest websql@latest xlsx@latest && npx expo install --fix"
   },
   "bin": {
     "expo-ui": "./bin/index.js"
@@ -105,7 +105,7 @@
     "react-native-iphone-x-helper": "^1.3.1",
     "react-native-mime-types": "^2.4.0",
     "react-native-paper": "^5.10.3",
-    "react-native-paper-dates": "^0.18.14",
+    "react-native-paper-dates": "^0.18.17",
     "react-native-reanimated": "~3.3.0",
     "react-native-safe-area-context": "4.6.3",
     "react-native-screens": "~3.22.0",

package/src/components/Datagrid/Accordion/Row.js

@@ -76,6 +76,9 @@ const DatagridAccordionRow = React.forwardRef((props,ref)=>{
         return getRowStyle({row:item,index,selected,numColumns,isAccordion:true,rowIndex:index});
     },[selected,numColumns]);
     const viewWrapperStyle = [selectable !== false && theme.styles.cursorPointer];
+    if(!hasAvatar){
+        viewWrapperStyle.push(styles.hasNotAvatar);
+    }
     if(selected) {
         const handleAvatarRowToggle = (event)=>{
             React.stopEventPropagation(event);
@@ -92,7 +95,6 @@ const DatagridAccordionRow = React.forwardRef((props,ref)=>{
             title = {sTtitle}
         ></Avatar> : null;
         if(!hasAvatar){
-            viewWrapperStyle.push(styles.hasNotAvatar);
             viewWrapperStyle.push({borderLeftColor:theme.colors.primaryOnSurface})
         }
     }
@@ -154,7 +156,7 @@ const DatagridAccordionRow = React.forwardRef((props,ref)=>{
                   extrapolate: 'clamp',
                 });
                 return (
-                    <View style={{justifyContent:'center',flex:1}}>
+                    <View testID={testID+"_SwipeableLeftSide"} style={{justifyContent:'center',flex:1}}>
                         <Animated.Text
                             style={[
                             styles.actionText,
@@ -165,7 +167,7 @@ const DatagridAccordionRow = React.forwardRef((props,ref)=>{
                             },
                             ]}>
                             {(selected?'Désélectionnez la ligne ':'Sélectionnez la ligne ')}
-                    </Animated.Text>
+                        </Animated.Text>
                     </View>
                 );
             }}
@@ -178,7 +180,7 @@ const DatagridAccordionRow = React.forwardRef((props,ref)=>{
             }}
         >
             <View 
-                style={[styles.renderedContent,viewWrapperStyle]} 
+                style={[styles.renderedContent,viewWrapperStyle,!hasAvatar && styles.contentContainerNotAvatar]} 
                 testID={testID+'_ContentContainer'}
             >
                 {hasAvatar?<View testID={testID+"_AvatarContentContainer"} style={[styles.avatarContent]}>
@@ -245,7 +247,9 @@ const styles = StyleSheet.create({
         flexDirection : 'row',
         alignItems : 'center',
         justifyContent : 'center',
-        paddingVertical : 10,
+        paddingVertical : 2,
+        paddingHorizontal : 0,
+        paddingRight : 10,
         width : "100%",
     },
     right : {
@@ -267,23 +271,27 @@ const styles = StyleSheet.create({
     container : {
         paddingVertical : 0,
         paddingHorizontal : 0,
-        marginHorizontal : 5,
+        marginHorizontal : 0,
         flexWrap : 'nowrap',
         justifyContent : 'center',
         width : '100%',
     },
     avatarContent : {
-        marginRight : 5,
+        marginRight : 10,
     },
     hasNotAvatar : {
         borderLeftWidth : 5,
         paddingLeft : 0,
-        height : "100%"
+        height : "100%",
+        borderLeftColor : "transparent",
     },
     selected : {
         paddingHorizontal : 0,
         paddingVertical : 0,
     },
+    contentContainerNotAvatar : {
+        paddingLeft : 2,
+    },
 });
 
 DatagridAccordionRow.displayName = 'DatagridAccordionRow';

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

@@ -47,6 +47,13 @@ const DatagridFactory = (Factory)=>{
             this.state.refreshing = false;
             this.updateLayout = this.updateLayout.bind(this);
         }
+        componentDidUpdate(){
+            super.componentDidUpdate();
+            const p = this.expandedRef;
+            if(!p || !p?.ref) return;
+            const ref = p.ref;
+            ref?.toggleExpand && ref?.toggleExpand(false);
+        }
         isDatagrid(){
             return true;
         }
@@ -66,7 +73,7 @@ const DatagridFactory = (Factory)=>{
             arg.isAccordion = true;
             const {render,key,style} = super.renderRowCell(arg);
             if(render===null || !React.isValidElement(render)) return null;
-            return <Label style={[style,{paddingTop:10,paddingBottom:10}]} key={key}>
+            return <Label testID={`${arg?.testID?arg.testID:""}_LabelContainer`} style={[style,{paddingTop:10,paddingBottom:10}]} key={key}>
                  {render}
             </Label>
         }
@@ -265,6 +272,7 @@ const DatagridFactory = (Factory)=>{
             if(!isObj(this.bottomSheetContext) || typeof this.bottomSheetContext.open !=='function') return;
             if(!isObj(this.renderingItemsProps) || !isObj(this.renderingItemsProps[rowKey])) return;
             const callArgs = this.getItemCallArgs({item,index})
+            this.expandedRef = this.renderingItemsProps[rowKey];
             return this.bottomSheetContext.open({
                 ...rest,
                 onDismiss : ()=>{
@@ -509,7 +517,9 @@ const DatagridFactory = (Factory)=>{
         </View>  
         return <DatagridProvider context={this}>
                 <View testID={testID+"_Container"} pointerEvents={pointerEvents} style={[styles.container,this.props.style]} collapsable={false}>
-                     <View testID={testID+"_AccordionHeader"} style={[styles.accordionHeader]} ref={this.layoutRef} onLayout={this.updateLayout.bind(this)}>
+                     <View testID={testID+"_AccordionHeader"} style={[styles.accordionHeader]} ref={(el)=>{
+                        this.layoutRef.current = el;
+                     }} onLayout={this.updateLayout.bind(this)}>
                         {this.props.showActions !== false ? <DatagridActions 
                             testID={testID+"_Actions"}
                             pointerEvents = {pointerEvents}
@@ -556,7 +566,9 @@ const DatagridFactory = (Factory)=>{
                         renderItem = {this.renderItem.bind(this)}
                         items = {this.state.data}
                         isLoading = {isLoading}
-                        ref = {this.listRef}
+                        ref = {(el)=>{
+                            this.listRef.current = el;
+                        }}
                         style = {[styles.list,rest.style]}
                         backToTopRef = {backToTopRef?(e)=>{
                             return this.backToTopRef.current;
@@ -612,13 +624,14 @@ const styles = StyleSheet.create({
         maxHeight : 60
     },
     list : {
-        paddingHorizontal : isNativeMobile()?10:0,
+        paddingHorizontal : 10,
     },
     container : {
         position : 'relative',
         flexDirection :'column',
         justifyContent : 'flex-start',
         width : '100%',
+        paddingHorizontal : 0,
         flex : 1,
     },
     accordionHeader : {

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

@@ -2890,10 +2890,13 @@ export default class CommonDatagridComponent extends AppComponent {
         args.columnsNames = this.preparedColumns.visibleColumnsNames;
         const key = item.sectionListHeaderKey;
         const label = key === this.emptySectionListHeaderValue ? this.getEmptySectionListHeaderValue() : key;
+        const {renderSectionListHeaderOnFirstCell} = args;
+        const sectionListHeaderContainerProps = defaultObj(args.sectionListHeaderContainerProps);
         const style = typeof this.props.getSectionListHeaderStyle =='function' ? this.props.getSectionListHeaderStyle(args) : null;
         const cStyle = typeof this.props.getSectionListHeaderContentContainerStyle =="function" ?this.props.getSectionListHeaderContentContainerStyle(args) : undefined;
         const lStyle = typeof this.props.getSectionListHeaderLabelStyle =='function' ? this.props.getSectionListHeaderLabelStyle(args) : null;
         const rowKey = defaultVal(args.rowIndex,args.index,args.rowCounterIndex);
+        const rowIndex = defaultNumber(args.rowIndex,args.index);
         const testID  = defaultStr(args.testID,"RN_DatagridSectionListHeader")+"_"+rowKey;
         if(Array.isArray(rowStyle)){
             if(style){
@@ -2901,25 +2904,36 @@ export default class CommonDatagridComponent extends AppComponent {
             }
         }
         let cells = null;
+        const Cell = React.isComponent(args.Cell) ? args.Cell : View;
         const isA = this.isAccordion();
+        const sectionListHeaderProps = defaultObj(args.sectionListHeaderProps);
+        const headerContent = <Label testID={testID+"_Label"} splitText numberOfLines={3} textBold {...sectionListHeaderProps} style={[theme.styles.w100,{color:theme.colors.primaryOnSurface,fontSize:isA?15 :16},lStyle,theme.styles.ph1,sectionListHeaderProps.style]}>{label}</Label>;
+        let hasAlreadRenderMainHeaderOnFirstCell = false;
         if(this.canShowFooters() && isObj(this.sectionListHeaderFooters[key])){
             const {visibleColumnsNames,widths} = defaultObj(this.preparedColumns);
             if(isObj(visibleColumnsNames) &&isObj(widths)){
                 cells = [];
                 const footers = this.sectionListHeaderFooters[key];
                 Object.map(visibleColumnsNames,(v,column)=>{
-                    if(!v || typeof widths[column] !== 'number') {
+                    if(!v || !column) {
                         return null;
                     }
-                    if(!column) return null;
                     const width = widths[column];
                     const key2 = key+column;
+                    const cellProps = Cell !== View ? {width,isSectionListHeader:true,columnField:column} : {style:{width}};
                     if(!this.state.columns[column] || !footers[column]) {
                         if(this.isAccordion()) return null;
-                        cells.push(<View key={key2} testID={testID+"_FooterCellContainer_"+key2} style={[{width,marginLeft:0,paddingLeft:0,marginRight:0,paddingRight:0}]}></View>)
+                        const canD = renderSectionListHeaderOnFirstCell && !hasAlreadRenderMainHeaderOnFirstCell;
+                        const cProps = canD ? sectionListHeaderContainerProps : {};
+                        cells.push(<Cell {...cellProps} {...cProps} key={key2} testID={testID+"_FooterCellContainer_"+key2} style={[{marginLeft:0,paddingLeft:0,marginRight:0,paddingRight:0},cellProps.style,cProps.style]}
+                            children = {canD ? headerContent:null}
+                        />)
                     } else {
                         const footer = footers[column];
-                        cells.push(<View key={key2} testID={testID+"_FooterCellContainer_"+key2} style={[tableStyles.headerItemOrCell,!isA?{width,alignItems:'flex-start',justifyContent:'flex-start'}:{marginLeft:0,paddingLeft:0,marginRight:5}]}>
+                        const canD = renderSectionListHeaderOnFirstCell && !hasAlreadRenderMainHeaderOnFirstCell;
+                        const cProps = canD ? sectionListHeaderContainerProps : {};
+                        cells.push(<Cell {...cellProps} {...cProps} key={key2} width={width} testID={testID+"_FooterCellContainer_"+key2} style={[tableStyles.headerItemOrCell,!isA?{alignItems:'flex-start',justifyContent:'flex-start'}:{marginLeft:0,paddingLeft:0,marginRight:5},cellProps.style,cProps.style]}>
+                            {canD ? headerContent:null}
                             <Footer
                                 key = {key2}
                                 testID={testID+"_FooterItem_"+key2}
@@ -2928,27 +2942,18 @@ export default class CommonDatagridComponent extends AppComponent {
                                 aggregatorFunction = {this.getActiveAggregatorFunction().code}
                                 aggregatorFunctions = {this.aggregatorFunctions}
                                 displayLabel = {this.isAccordion()}
-                                //anchorProps = {{style:[theme.styles.ph1,theme.styles.mh05]}}
                             />  
-                        </View>)
+                        </Cell>)
                     }
+                    hasAlreadRenderMainHeaderOnFirstCell = true;
                 });
             }
         }
-        const isCollapsed = this.isSectionListCollapsed(key);
+        if(React.isComponent(args.Row)){
+            return <args.Row index={rowIndex} rowData={item} rowIndex={rowIndex} isSectionListHeader  cells={cells} headerContent={headerContent}/>
+        }
         return <View testID={testID+"_ContentContainer"}  style={[theme.styles.w100,isA && this.state.displayOnlySectionListHeaders && {borderTopColor:theme.colors.divider,borderTopWidth:1},isA ? [theme.styles.ph2,theme.styles.pt1] : [theme.styles.pt1,theme.styles.noPadding,theme.styles.noMargin],theme.styles.justifyContentCenter,theme.styles.alignItemsCenter,theme.styles.pb1,!cells && theme.styles.ml1,theme.styles.mr1,cStyle]}>
-            {false && <View testID={testID+"_LabelAndCollapsedContainer"} style={[theme.styles.w100,theme.styles.row,theme.styles.alignItemsCenter,theme.styles.justifyContentFlexStart]}>
-                <Icon
-                    name = {isCollapsed?"chevron-up":"chevron-right"}
-                    color = {theme.colors.primaryOnSurface}
-                    style = {[theme.styles.noMargin,theme.styles.noPadding]}
-                    size = {25}
-                    onPress = {(e)=>{
-                        this.toggleSectionListCollapsedState(key);
-                    }}
-                />
-            </View>}
-            <Label testID={testID+"_Label"} splitText numberOfLines={3} textBold style={[theme.styles.w100,{color:theme.colors.primaryOnSurface,fontSize:isA?15 :16},lStyle,theme.styles.ph1]}>{label}</Label>
+            {header}
             {cells ? <View testID={testID+"_TableRow"} style = {[theme.styles.w100,theme.styles.row,isA && theme.styles.pt1,theme.styles.alignItemsFlexStart,this.isAccordion() && theme.styles.rowWrap]}
             >{cells}</View> : null}
         </View>
@@ -3682,7 +3687,7 @@ export default class CommonDatagridComponent extends AppComponent {
             this.sort(columnField);
         };
         return <TouchableRipple disabled={!sortable} style={styles.sortableColumn} onPress={sortMe}>
-            <View testID={"RN_DatagridHeaderCellContainer_"+columnField} style={[tableStyles.cell,theme.styles.row,theme.styles.flex1,theme.styles.justifyContentFlexStart,theme.styles.alignItemsCenter]}>
+            <View testID={"RN_DatagridHeaderCellContainer_"+columnField} style={[theme.styles.row,theme.styles.flex1,theme.styles.justifyContentFlexStart,theme.styles.alignItemsCenter]}>
                 {isColumnSorted ? <Icon
                     {...sortedColumn}
                     size = {24}
@@ -3769,6 +3774,10 @@ export default class CommonDatagridComponent extends AppComponent {
         const renderText = isSectionListHeader === true || customRenderRowCell === false ? true : false;
         if(!isObj(rowData)) return renderText ? null : {render:null,extra:{}};
         rowIndex = isDecimal(rowIndex)? rowIndex : isDecimal(index)? index : undefined;
+        isSectionListHeader = isSectionListHeader || rowData.isSectionListHeader;
+        if(!isSectionListHeader && this.state.displayOnlySectionListHeaders){
+            return {render:null};
+        }
         rowKey = this.isValidRowKey(rowKey) ? rowKey : this.getRowKey(rowData,rowIndex);
         rowCounterIndex = isDecimal(rowCounterIndex) ? rowCounterIndex : isDecimal(rowIndex)? rowIndex+1 : defaultDecimal(rowCounterIndex);
         if(this.isSelectableColumn(columnDef,columnField)){

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

@@ -287,7 +287,9 @@ const DatagridFactory = (Factory)=>{
             </View> : null;
             return <DatagridProvider context={this}>
                      <View style={[styles.container,{flex:1}]} testID={testID+"_TableContainer"} pointerEvents={pointerEvents}>
-                        <View ref={this.layoutRef} testID={testID+"_LayoutContainer"}>
+                        <View ref={(el)=>{
+                            this.layoutRef.current = el;
+                        }} testID={testID+"_LayoutContainer"}>
                             {this.props.showActions !== false ? <DatagridActions 
                                 pointerEvents = {pointerEvents}
                                 title = {this.renderDataSourceSelector()}
@@ -301,7 +303,9 @@ const DatagridFactory = (Factory)=>{
                                 {this.renderChart()}
                             </View> : 
                         <Table
-                            ref = {this.listRef}
+                            ref = {(el)=>{
+                                this.listRef.current = el;
+                            }}
                             {...rest}
                             withDatagridContext
                             sortedColumn = {sortedColumn}

package/src/components/Dialog/DropdownAlert/index.js

@@ -653,7 +653,6 @@ export default class DropdownAlert extends Component {
       elevation: elevation,
     };
     const activeOpacity = !tapToCloseEnabled || showCancel ? 1 : 0.95;
-    console.log(contentContainerStyle," is content container style");
     const onPress = !tapToCloseEnabled
       ? null
       : () => this.closeAction(ACTION.tap);

package/src/components/Drawer/DrawerLayout/index.js

@@ -165,7 +165,7 @@ export default class DrawerLayout extends React.PureComponent {
         if(permanent){
             dynamicDrawerStyles.position = "relative";
         }
-        const content = <Animated.View style={[styles.main]}>
+        const content = <Animated.View style={[styles.main]} testID={testID+"_DrawerLayoutContent"}>
             {this.props.children}
         </Animated.View>
         return (
@@ -437,6 +437,8 @@ const styles = StyleSheet.create({
     main: {
         flex: 1,
         zIndex: 0,
+        width : "100%",
+        height : "100%",
     },
     overlay: {
         position: 'absolute',

package/src/components/SplashScreen/index.js

@@ -16,8 +16,7 @@ import styles, {
   _dynamicImageBackground,
   _dynamicBackgroundOpacity,
 } from "./styles"
-const isNative = isNativeMobile();
-const Component = isNative? Animated.View : View;
+import {useAppComponent} from "$econtext/hooks";
 
 const SplashScreenComponent = ({isLoaded,children , duration, delay,logoWidth,logoHeight,backgroundColor,imageBackgroundSource,imageBackgroundResizeMode,
   testID,
@@ -50,23 +49,7 @@ const SplashScreenComponent = ({isLoaded,children , duration, delay,logoWidth,lo
   testID = defaultStr(testID,"RN_SplashscreenComponent")
   logoWidth = defaultDecimal(logoWidth,150);
   logoHeight = defaultDecimal(logoHeight,250);
-  const opacityClearToVisible = {
-    opacity: loadingProgress.interpolate({
-      inputRange: [0, 15, 30],
-      outputRange: [0, 0, 1],
-      extrapolate: "clamp",
-    }),
-  }
-  const imageScale = {
-    transform: [
-      {
-        scale: loadingProgress.interpolate({
-          inputRange: [0, 10, 100],
-          outputRange: [1, 1, 65],
-        }),
-      },
-    ],
-  }
+  const Component = useAppComponent("SplashScreen");
 
   const logoScale = {
     transform: [
@@ -99,6 +82,7 @@ const SplashScreenComponent = ({isLoaded,children , duration, delay,logoWidth,lo
   }
   const child = (animationDone && isLoaded)? React.isValidElement(children) && children : null;
   if(animationDone && isLoaded) return child;
+  const hasComponent = React.isComponent(Component);
   return <View style={[styles.container]} testID={testID} id={testID}>
       {!animationDone ? <View style={StyleSheet.absoluteFill} testID={testID+"_Animation"}/> : null}
       <View style={styles.containerGlue} testID={testID+"_ContainerGlue"}>
@@ -108,22 +92,20 @@ const SplashScreenComponent = ({isLoaded,children , duration, delay,logoWidth,lo
             testID={testID+"_AnimationDone"}
           />
         )}
-        {false && (animationDone || isNative) && child}
         {!animationDone && (
+            React.isComponent(Component)? <Component testID={testID+"_CustomSplashComponent"}/> : 
             <View testID={testID+"_LogoContainer"} style={[StyleSheet.absoluteFill, styles.logoStyle]}>
-            {(
-              <Animated.View
-                testID={testID+"_Logo"}
-                style={_dynamicCustomComponentStyle(
-                      logoScale,
-                      logoOpacity,
-                      logoWidth,
-                      logoHeight
-                  )}>
-                {<LogoProgress/>}
-              </Animated.View>
-            )}
-          </View>
+                <Animated.View
+                  testID={testID+"_Logo"}
+                  style={_dynamicCustomComponentStyle(
+                        logoScale,
+                        logoOpacity,
+                        logoWidth,
+                        logoHeight
+                    )}>
+                  {<LogoProgress />}
+                </Animated.View>
+            </View>
         )}
       </View>
     </View>

package/src/components/Table/Header/Cell/index.js

@@ -4,7 +4,7 @@ import theme from "$theme";
 
 import { StyleSheet } from "react-native";
 const TableHeaderCellComponent = React.forwardRef(({columnDef,className,width,style,children,...props},ref)=>{
-    return <th ref={ref} className={classNames(className,"table-header-cell")} children={children} style={StyleSheet.flatten([style])}/>
+    return <th ref={ref} className={classNames(className,"table-header-cell")} children={children} style={StyleSheet.flatten(style)}/>
 });
 TableHeaderCellComponent.displayName = "TableTableHeaderCellComponent";
 export default TableHeaderCellComponent;

package/src/components/Table/Header/Cell/index.native.js

@@ -1,8 +1,8 @@
 import View from "$ecomponents/View";
 import React from "$react";
 import styles from "../../styles";
-const TableHeaderCellComponent = React.forwardRef(({width,style,...props},ref)=>{
+const TableHeaderCellComponentNative = React.forwardRef(({width,style,...props},ref)=>{
     return <View ref={ref} {...props} style={[styles.cell,style,width && {width}]}/>
 });
-TableHeaderCellComponent.displayName = "TableTableHeaderCellComponent";
-export default TableHeaderCellComponent;
+TableHeaderCellComponentNative.displayName = "TableTableHeaderCellComponentNative";
+export default TableHeaderCellComponentNative;

package/src/components/Table/Header/CellWrapper.js

@@ -2,17 +2,17 @@ import React from "$react";
 import {useTable,useGetColumnProps} from "../hooks";
 import {defaultObj,defaultVal} from "$cutils";
 import styles from "../styles";
-import HeaderCell from "./Cell";
+import RowCell from "./Cell";
 import Label from "$ecomponents/Label";
 import theme from "$theme";
 
 export default function HeaderCellWrapper({columnField,isFilter,isFooter}){
     const {render,sortedColumn,filtersValues,...props} = useGetColumnProps({columnField,isFilter,isFooter});
     const columnDef = props.columnDef;
-    const rProps = isFilter ? sortedColumn : undefined;
     const isHeader = !isFilter && !isFooter;
+    const rProps = isHeader ? sortedColumn : undefined;
     const width = props.width;
-    const {containerProps,...rest} = props;
+    const {containerProps} = props;
     return React.useMemo(()=>{
         let content = typeof render ==='function' ? render(props) : isHeader ? defaultVal(columnDef?.text,columnDef?.label,columnField):null;
         const wStyle = width && {width} || null;
@@ -21,6 +21,6 @@ export default function HeaderCellWrapper({columnField,isFilter,isFooter}){
         } else if(isFooter){
             content = <Label primary textBold children={content}/>
         }
-        return <HeaderCell {...containerProps} width={width} columnDef={columnDef} columnField={columnField} style={[styles.headerItem,styles.headerItemOrCell,styles.filterCell,containerProps.style,styles.cell,columnDef.style]} children={content}/>
+        return <RowCell {...containerProps} width={width} columnDef={columnDef} columnField={columnField} style={[styles.headerItem,styles.headerItemOrCell,styles.filterCell,containerProps.style,styles.cell,columnDef.style]} children={content}/>
     },[columnField,width,rProps]);
 }

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

@@ -15,14 +15,14 @@ import styles from "../styles";
 import CellWrapper from "./CellWrapper";
 
 export default function RowHeaderComponent({isFilter,isFooter,isHeader,className,children:cChildren,...rest}){
-    const {showHeaders,visibleColsNames,filterable,visibleColsNamesStr,headerContainerProps,footerContainerProps,filtersContainerProps,showFilters,filters,showFooters} = useTable();
+    const {showHeaders,visibleColsNames,colsWidths,filterable,visibleColsNamesStr,headerContainerProps,footerContainerProps,filtersContainerProps,showFilters,filters,showFooters} = useTable();
     const canV = showHeaders === false ? false : Array.isArray(children)? !!children.length : true;
     const visible = canV && (isHeader ?  true : isFilter ? !!showFilters && filterable !== false : isFooter ? !!showFooters: true);
     const containerProps = defaultObj( isHeader ? headerContainerProps : isFooter ? footerContainerProps : filtersContainerProps);
     const style = filters ? styles.filters : isFooter ? styles.footer : null;
     const children = React.useMemo(()=>{    
         return visibleColsNames.map((columnField,index)=>{
-            return <CellWrapper isFilter={isFilter} isFooter={isFooter} key={columnField} columnField={columnField} columIndex={index}/>
+            return <CellWrapper width={colsWidths[columnField]} isFilter={isFilter} isFooter={isFooter} key={columnField} columnField={columnField} columIndex={index}/>
         });
     },[visibleColsNamesStr]);
     if(!visible) return null;

package/src/components/Table/Row/Cell/Content.js

@@ -4,10 +4,9 @@
 import React from "react";
 import {classNames} from "$cutils";
 import { StyleSheet } from "react-native";
-import Label from "$ecomponents/Label";
 
-function TableCellContentComponent({children,columnDef,testID,columnField,style,...rest}){
-    return (<td  data-test-id={testID||"RN_TableCellComoponent"} className={classNames(rest.className,"table-row-cell")} style={StyleSheet.flatten([style])}>
+function TableCellContentComponent({children,columnDef,width,testID,columnField,colSpan,style,...rest}){
+    return (<td  data-test-id={testID||"RN_TableCellComoponent"} colSpan={colSpan} className={classNames(rest.className,"table-row-cell")} style={StyleSheet.flatten([style])}>
         {children}
     </td>);
 }

package/src/components/Table/Row/Cell/Content.native.js

@@ -3,10 +3,7 @@
 // license that can be found in the LICENSE file.
 import React from "react";
 import View from "$ecomponents/View";
-import {useTable} from "../../hooks";
-function TableCellContentComponent({children,columnField,style,colSpan,...rest}){
-    const {colsWidths} = useTable();
-    const width = columnField ? colsWidths[columnField] : 0;
+function TableCellContentComponent({children,columnField,style,colSpan,width,...rest}){
     return (<View testID={"RN_TableRowCellContentComponent"} {...rest} style={[style,width && {width}]}>
         {children}
     </View>);

package/src/components/Table/Row/Cell/index.js

@@ -4,23 +4,25 @@ import { useTable } from "../../hooks";
 import {defaultObj} from "$cutils";
 import Label from "$ecomponents/Label";
 import styles from "../../styles";
-const TableRowCellComponent = React.forwardRef(({children,columnDef,columnField,rowData,colSpan,isSectionListHeader,rowIndex,style,...rest},ref)=>{
+
+const TableRowCellComponent = React.forwardRef(({children,columnDef,className,columnField,rowData,colSpan,isSectionListHeader,rowIndex,style,...rest},ref)=>{
     if(isSectionListHeader){
-        return <CellContent colSpan={colSpan} ref={ref} style={[styles.sectionListHeader,style]} >
+        return <CellContent colSpan={colSpan} className={className} ref={ref} style={[styles.sectionListHeader,styles.cell,style]} >
             {children}
         </CellContent>
     }
-    const {renderCell} = useTable();
+    const {renderCell,colsWidths} = useTable();
+    const width = colsWidths && columnField ? colsWidths[columnField] : undefined;
     const {content,containerProps} = React.useMemo(()=>{
-        const rArgs = {...rest,columnDef,columnField,rowData,rowIndex,containerProps : {}};
+        const rArgs = {...rest,columnDef,columnField,rowData,width,rowIndex,containerProps : {}};
         const r = typeof renderCell =='function' && renderCell (rArgs) ||  children;
         return {
             content : r && React.isValidElement(r,true)? r : children,
             containerProps : defaultObj(rArgs.containerProps)
         }
     },[children]);
-    return (<CellContent ref={ref}  {...containerProps} columnField={columnField} style={[style,containerProps.style]} >
-        {columnDef.isSelectableColumnName ? content : <Label testID="RN_TableRowCell" style={[styles.cell]}>{content}</Label>}
+    return (<CellContent ref={ref}  {...containerProps} width={width} columnField={columnField} style={[styles.cell,style,containerProps.style]} >
+        <Label>{content}</Label>
     </CellContent>);
 });
 

package/src/components/Table/Row/SectionListHeaderRow.js

@@ -0,0 +1,3 @@
+export default function SectionListHeaderRow ({cells,rowIndex,headerContent}){
+    return cells;
+}

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

@@ -9,20 +9,31 @@ import styles from "../styles";
 import {useTable} from "../hooks";
 import RowWrapper from "./RowWrapper";
 import React from "$react";
-import theme from "$theme";
+import SectionListHeaderRow from "./SectionListHeaderRow";
+import {isMobileNative} from "$cplatform";
+const isNative = isMobileNative();
+const nativeProps = isNative ? {} : {Cell,Row:SectionListHeaderRow};
 export default function TableRowComponent({cells,rowKey,rowData,index,...rest}){
-    const {visibleColsNames,visibleColsNamesStr,renderSectionHeader,columns} = useTable();
-    if(!isObj(rowData)) return null;
+    const {visibleColsNames,visibleColsNamesStr,renderSectionHeader,colsWidths,columns} = useTable();
+    if(!isObj(rowData)) {
+        return null;
+    };
     const content = React.useMemo(()=>{
-        if(rowData.isSectionListHeader && typeof renderSectionHeader ==='function'){
-            return <RowWrapper style={[styles.row,theme.styles.pv1]}>
-                <Cell isSectionListHeader colSpan={visibleColsNames.length}>{renderSectionHeader({isSectionListHeader:true,rowData,item:rowData,index,rowIndex:index,isTable:true,rowKey})}</Cell>
-            </RowWrapper> 
+        if(rowData.isSectionListHeader){
+            if(typeof renderSectionHeader !='function'){
+                throw "Vous devez définir la fonction renderSectionListHeader, utile pour le rendu du contenu de section header de la table de données";
+            }
+            return renderSectionHeader({isSectionListHeader:true,renderSectionListHeaderOnFirstCell:true,
+            sectionListHeaderContainerProps : {
+                style : {position:"relative",paddingLeft:"10px",paddingRight:"10px"}
+            },
+            sectionListHeaderProps:{className:"table-section-list-header",style:styles.sectionListHeaderAbsolute,testID:"RN_TableComponentSectionListHeader"}
+            ,...nativeProps,rowData,item:rowData,index,rowIndex:index,isTable:true,rowKey})
         }
         return visibleColsNames.map((columnField,cIndex)=>{
             const columnDef = columns[columnField];
             if(!isObj(columnDef)) return null;
-            return <Cell rowData={rowData} rowKey={rowKey} children={rowData[columnField]} rowIndex={index} columnDef={columnDef} index={cIndex} key={columnField} columnField={columnField}/>
+            return <Cell rowData={rowData} width={columnField ? colsWidths[columnField] : 0} rowKey={rowKey} children={rowData[columnField]} rowIndex={index} columnDef={columnDef} index={cIndex} key={columnField} columnField={columnField}/>
         });
     },[rowKey,index,visibleColsNamesStr]);
     return <RowWrapper {...rest} rowKey={rowKey} rowData={rowData} rowIndex={index} style={[styles.row]}>

package/src/components/Table/index.js

@@ -1,5 +1,5 @@
 import View from "$ecomponents/View";
-import {defaultObj,defaultStr,debounce,defaultNumber,uniqid,isObj,defaultVal} from "$cutils";
+import {defaultObj,defaultStr,debounce,classNames,defaultNumber,uniqid,isObj,defaultVal} from "$cutils";
 import PropTypes from "prop-types";
 import React from "$react";
 import { StyleSheet,View as RNView,ScrollView,Dimensions} from "react-native";
@@ -255,9 +255,9 @@ const TableComponent = React.forwardRef(({containerProps,listContainerStyle,onRe
                                 const index = props['data-index'];
                                 const item = getRowByIndex(index) || props?.item || null;
                                 if(!item) return null;
-                                const args = {rowData:item,rowIndex:index,index,bordered,isTable:true};
+                                 const args = {rowData:item,rowIndex:index,index,bordered,isTable:true};
                                 args.selected = withDatagridContext ? useIsRowSelected(item,index) : false;
-                                return <TableRowComponent {...props} style={[getRowStyle(args),props.style]}/>
+                                return <TableRowComponent {...props} className={classNames(props.className,"table-row-tr")} style={[getRowStyle(args),styles.tr,props.style]}/>
                             },
                             Table: VirtuosoTableComponent,
                             EmptyPlaceholder : (props)=>{

package/src/components/Table/styles.js

@@ -1,4 +1,4 @@
-import { StyleSheet } from "react-native";
+import { StyleSheet,Platform } from "react-native";
 import {isMobileNative} from "$cplatform";
 
 const styles = StyleSheet.create({
@@ -9,6 +9,9 @@ const styles = StyleSheet.create({
         flex:1,
     },
     headerCellLabel : {maxHeight:70},
+    tdSectionHeader : {
+        width : "100%",
+    },
     container : {
         width : '100%',
         minHeight : 300,
@@ -77,6 +80,9 @@ const styles = StyleSheet.create({
         justifyContent : 'center',
         alignItems : 'flex-start',
     },
+    tr : {
+        position : "relative",
+    },
     row : {
         flexDirection : "row",
         justifyContent : "flex-start",
@@ -96,7 +102,7 @@ const styles = StyleSheet.create({
     },
     cell : isMobileNative()? {
         paddingLeft:10,
-        paddingRight : 5,
+        paddingRight : 10,
         paddingBottom : 2,
         paddingTop : 2,
     } : {
@@ -108,6 +114,16 @@ const styles = StyleSheet.create({
     sectionListHeader : {
         paddingVertical : 10,
         paddingHorizontal : 10,
-    }
+    },
+    sectionListHeaderAbsolute : {
+        position : "relative",
+        top : "0",
+        left : "0",
+        width : "100%",
+        paddingLeft : 0,
+        paddingRight : 0,
+        textAlign : "center",
+        whiteSpace : "nowrap",
+    },
 });
 export default styles;

package/src/context/hooks.js

@@ -30,6 +30,8 @@ export const useAppGetComponent = (componentName)=>{
     return components[componentName] ||  components[componentName.toLowerCase()]  || components[componentName.ucFirst()] || components[camCase] || components[lowerFirst] || components[componentName.toUpperCase()] || null;
 }
 
+export const useAppComponent = useAppGetComponent;
+
 /*** permet d'attacher un lister sur la modification des props de manière responsive : 
     permet de récupérer la fonction à attacher par défaut au listener DimensionChange, pour la mise à jour automatique de la propriété style
    * @param mediaQueryUpdateStyleCb{function}, la fonction permettant de mettre à jour les props lorsque la taille de l'écran change

package/src/layouts/Screen/ScreenWithoutAuthContainer.js

@@ -52,13 +52,14 @@ export default function MainScreenScreenWithoutAuthContainer(props) {
     testID,
     right,
     keyboardAvoidingViewProps,
+    backgroundColor,
     ...rest
   } = props;
   const insets = useSafeAreaInsets();
   keyboardAvoidingViewProps = defaultObj(keyboardAvoidingViewProps);
   testID = defaultStr(testID,"RN_MainScreenScreenWithoutAuthContainer")
   containerProps = defaultObj(containerProps);
-  const backgroundColor = theme.colors.background;
+  backgroundColor = theme.Colors.isValid(backgroundColor)? backgroundColor : theme.colors.background;
   const containerStyle = [
     styles.container,
     {

package/src/layouts/Screen/TableData.js

@@ -423,7 +423,7 @@ export default class TableDataScreenComponent extends FormDataScreen{
             appBarProps.elevation = 0;
             restProps.elevation = 0;
         }
-        return <ScreenContainer  {...restProps} appBarProps = {appBarProps} testID={testID}>
+        return <ScreenContainer backgroundColor={theme.surfaceBackground}  {...restProps} appBarProps = {appBarProps} testID={testID}>
             {this.wrapRenderingContent(mainContent,{testID})}
         </ScreenContainer>
     }

package/src/screens/Help/openLibraries.js

@@ -1 +1 @@
-module.exports = {"@FTO-CONSULT/EXPO-UI":{"name":"@FTO-CONSULT/EXPO-UI","version":"6.28.1","homepage":"https://github.com/borispipo/expo-ui#readme"}};
+module.exports = {"@FTO-CONSULT/EXPO-UI":{"name":"@FTO-CONSULT/EXPO-UI","version":"6.30.0","homepage":"https://github.com/borispipo/expo-ui#readme"}};

package/src/components/Table/Header/filters.old.js

@@ -1,8 +0,0 @@
-if(isFilter){
-    console.log(forceRender,"is force render heeeeein manaa",rest.style);
-    return colsNames.map((columnField,index)=>{
-        const visible = columnsVisibilities[index];
-        if(!visible) return null;
-        return <CellWrapper isFilter key={columnField} columnField={columnField} columIndex={index}/>
-    })
-}

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

@@ -1,10 +0,0 @@
-import React from "$react";
-import View from "$ecomponents/View";
-
-const RowHeaderComponent = React.forwardRef(({...props},ref)=>{
-
-});
-
-
-RowHeaderComponent.displayName = "TableRowHeaderComponent";
-export default RowHeaderComponent;

package/src/components/Table/RowTemplate/index.web.js

@@ -1,9 +0,0 @@
-import React from "$react";
-
-const RowHeaderComponent = React.forwardRef(({...props},ref)=>{
-
-});
-
-
-RowHeaderComponent.displayName = "TableRowHeaderComponent";
-export default RowHeaderComponent;