@fto-consult/expo-ui 2.4.8 → 2.5.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fto-consult/expo-ui",
-  "version": "2.4.8",
+  "version": "2.5.1",
   "description": "Bibliothèque de composants UI Expo,react-native",
   "main": "index.js",
   "scripts": {
@@ -62,7 +62,7 @@
     "@expo/html-elements": "^0.2.0",
     "@expo/metro-config": "^0.4.0",
     "@expo/webpack-config": "^0.17.2",
-    "@fto-consult/common": "^1.11.15",
+    "@fto-consult/common": "^1.12.2",
     "@gorhom/portal": "^1.0.14",
     "@react-native-async-storage/async-storage": "~1.17.3",
     "@react-native-community/datetimepicker": "6.5.2",
@@ -73,7 +73,7 @@
     "babel-plugin-inline-dotenv": "^1.7.0",
     "babel-plugin-module-resolver": "^4.1.0",
     "babel-plugin-transform-inline-environment-variables": "^0.4.4",
-    "expo": "^47.0.0",
+    "expo": "^47.0.8",
     "expo-camera": "~13.0.0",
     "expo-clipboard": "~4.0.1",
     "expo-image-picker": "~14.0.1",

package/src/components/BottomSheet/Menu.js

@@ -8,7 +8,7 @@ import PropTypes from "prop-types";
 import {getContentHeight} from "./utils";
 
 const BottomSheetMenuComponent = React.forwardRef((props,ref)=>{
-    let {anchor,screenIndent,height:customHeight,bindResizeEvent,onDismiss,testID,visible:customVisible,controlled,mobile,animateOnClose,renderMenuContent,sheet,children,...rest} = props;
+    let {anchor,anchorProps,screenIndent,height:customHeight,bindResizeEvent,onDismiss,testID,visible:customVisible,controlled,mobile,animateOnClose,renderMenuContent,sheet,children,...rest} = props;
     rest = defaultObj(rest);
     const isControlled = controlled ? true : false;
     const visibleRef = React.useRef(null);
@@ -44,12 +44,13 @@ const BottomSheetMenuComponent = React.forwardRef((props,ref)=>{
         setState({...state,visible:false})
     }
     const Component = isMob ? BottomSheet : Menu;
+    anchorProps = defaultObj(anchorProps);
     if(isMob){
         if(typeof anchor ==='function'){
             anchor = anchor(!isControlled?{onPress:open}:{});
         }
         if(React.isValidElement(anchor)){
-            anchor = <View testID={testID+"_Anchor"} ref={anchorRef} collapsable={false}>{anchor}</View>
+            anchor = <View testID={testID+"_Anchor"} ref={anchorRef} {...anchorProps} collapsable={false}>{anchor}</View>
         }
         if(renderMenuContent !== false){
             children = renderItems({testID:testID+".Items",...props,closeMenu:close,openMenu:open,isBottomSheetItem:true});
@@ -101,6 +102,7 @@ const BottomSheetMenuComponent = React.forwardRef((props,ref)=>{
             height = {controlled?customHeight:height}
             ref = {React.useMergeRefs(innerRef,ref)}
             anchor = {anchor}
+            anchorProps = {anchorProps}
             children = {visible && (React.isValidElement(children) || Array.isArray(children))?children:undefined}
         />
     </>

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

@@ -245,9 +245,6 @@ const DatagridFactory = (Factory)=>{
         getMaxSelectedRows(){
             return isMobileMedia()? 30 : 50;
         }
-        prepareFilter(props,headerFilters){
-            return headerFilters.push(props);
-        }
         showFilters(){
             if(!this._isMounted()) {
                  this.isUpdating = false;
@@ -299,6 +296,12 @@ const DatagridFactory = (Factory)=>{
                 </View>
             })
         }
+        renderEmpty(){
+            if(isObj(this.currentAccordionProps) && typeof this.currentAccordionProps.renderEmpty =='function'){
+                return this.currentAccordionProps.renderEmpty();
+            }
+            return super.renderEmpty();
+        }
         render (){
             let {
                 filters,
@@ -332,6 +335,7 @@ const DatagridFactory = (Factory)=>{
             if(isObj(accordion)){
                 accordionProps = {...accordion,...accordionProps};
             }
+            this.currentAccordionProps = accordionProps;
             backToTopRef = defaultVal(backToTopRef,accordionProps.backToTopRef,true);
             
             let descOrContentProps = isObj(accordionProps.descriptionProps)? Object.assign({},accordionProps.descriptionProps) : isObj(accordionProps.contentProps)? Object.assign({},accordionProps.contentProps) : {};
@@ -381,7 +385,7 @@ const DatagridFactory = (Factory)=>{
             if(toggleFilters === false){
                 filters = false;
             }
-            let {showFilters,showFooter} = this.state;
+            let {showFilters,showFooters} = this.state;
             let max = this.getMaxSelectableRows();
             let restItems = [];
             
@@ -495,9 +499,9 @@ const DatagridFactory = (Factory)=>{
                                         closeOnPress : false,
                                     } : null,
                                     hasFooterFields ? {
-                                        onPress :  ()=>{showFooter?this.hideFooter():this.showFooter()}    
-                                        ,icon :  showFooter?'view-column':'view-module'
-                                        ,text : (showFooter?'Masquer/Ligne des totaux':'Afficher/Ligne des totaux')
+                                        onPress :  ()=>{showFooters?this.hideFooter():this.showFooters()}    
+                                        ,icon :  showFooters?'view-column':'view-module'
+                                        ,text : (showFooters?'Masquer/Ligne des totaux':'Afficher/Ligne des totaux')
                                     }:null,
                                     ...restItems,
                                     this.canScrollTo() &&  {
@@ -539,7 +543,6 @@ const DatagridFactory = (Factory)=>{
                     </View>
             </ScrollView>
         </View>  
-        renderEmpty = defaultFunc(accordionProps.renderEmpty,renderEmpty,x=>null)
         return <View testID={testID+"_Container"} pointerEvents={pointerEvents} style={[styles.container]} collapsable={false}>
                 { <View testID={testID+"_ContentContainer"} style={[this.bindResizeEvents()?{height:this.renderedListHeight}:undefined]}> 
                     <View testID={testID+"_AccordionHeader"} style={[styles.accordionHeader]} ref={this.layoutRef} onLayout={this.updateLayout.bind(this)}>
@@ -554,7 +557,7 @@ const DatagridFactory = (Factory)=>{
                         />
                         {datagridHeader}
                         {_progressBar}
-                        {showFooter ? (
+                        {showFooters ? (
                             <View  testID={testID+"_FooterContainer"} pointerEvents={pointerEvents} style={[{justifyContent:'center'}]}>
                                 <View  testID={testID+"_FooterContentContainer"} style={[styles.footersContainer]}>
                                     <ScrollView testID={testID+"_FooterScrollView"} horizontal contentContainerStyle={[styles.contentContainerStyle]}>
@@ -564,6 +567,7 @@ const DatagridFactory = (Factory)=>{
                                                     key = {field}
                                                     testID={testID+"_FooterItem_"+field}
                                                     {...footer}
+                                                    anchorProps = {{style:[theme.styles.ph1,theme.styles.mh05]}}
                                                 />
                                             })}
                                         </View>
@@ -591,7 +595,7 @@ const DatagridFactory = (Factory)=>{
                         }:false}
                         keyExtractor = {this.getRowKey.bind(this)}
                     /> : <View style={styles.hasNotData}>
-                        {renderEmpty()}
+                        {this.renderEmpty()}
                     </View>}
                 </View>}
                 {backToTopRef ? <BackToTop testID={testID+"_BackToTop"} {...backToTopProps} ref={this.backToTopRef} style={[styles.backToTop,backToTopProps.style]} onPress={this.scrollToTop.bind(this)}/>:null}

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

@@ -71,13 +71,13 @@ export default class CommonDatagridComponent extends AppComponent {
         });
         selectedRows = sRows;
         let sData = this.getSessionData()
-        sData.showFooter = defaultVal(sData.showFooter,true);
+        sData.showFooters = defaultVal(sData.showFooters,true);
         sData.fixedTable = defaultBool(sData.fixedTable,false);
         extendObj(this.state, {
             data,
             sort :defaultObj(props.sort),
             showFilters : defaultBool(props.showFilters,(sData.showFilter? true : this.isPivotDatagrid())),
-            showFooter : defaultBool(props.showFooter,(sData.showFooter? true : false)),
+            showFooters : defaultBool(props.showFooters,(sData.showFooters? true : false)),
             fixedTable : sData.fixedTable
         });
         Object.defineProperties(this,{
@@ -96,6 +96,7 @@ export default class CommonDatagridComponent extends AppComponent {
             [footerFieldName] : {
                 value : uniqid(footerFieldName),override:false, writable: false
             },
+            currentFilteringColumns : {value:{}}
         }) 
         
         this.state.sort.dir = defaultStr(this.state.sort.dir,this.state.sort.column == "date"?"desc":'asc')
@@ -783,16 +784,16 @@ export default class CommonDatagridComponent extends AppComponent {
    }
 
 
-    showFooter(){
+    showFooters(){
         if(!this._isMounted()) {
             this.isUpdating = false;
             return;
         }
         if(this.isUpdating) return false;
         this.isUpdating = true;
-        this.setState( {showFooter:true},()=>{
+        this.setState( {showFooters:true},()=>{
             this.isUpdating = false;
-            this.setSessionData({showFooter:true})
+            this.setSessionData({showFooters:true})
         })
     }
     hideFooter (){
@@ -801,9 +802,9 @@ export default class CommonDatagridComponent extends AppComponent {
              return;
         }
         if(this.isUpdating) return false;
-        this.setState({showFooter:false},()=>{
+        this.setState({showFooters:false},()=>{
             this.isUpdating = false;
-            this.setSessionData({showFooter:false});
+            this.setSessionData({showFooters:false});
         })
     }
    
@@ -847,13 +848,20 @@ export default class CommonDatagridComponent extends AppComponent {
         });
    }
    prepareFilter(props,filteredColumns){
-
+        filteredColumns.push(props);
    }
    renderFilter(props){
        return <Filter {...props}/>
    }
    prepareColumn(){}
    beforePrepareColumns(){}
+   renderEmpty(){
+        if(typeof this.props.renderEmpty =='function'){
+            const r = this.props.renderEmpty();
+            return React.isValidElement(r)? r : null;
+        }
+        return null;
+   }
    prepareColumns (args){
        this.beforePrepareColumns();
        args = defaultObj(args);
@@ -891,14 +899,18 @@ export default class CommonDatagridComponent extends AppComponent {
             let colFilter = defaultVal(restCol.filter,true);
             field = header.field = defaultStr(header.field,field,headerIndex);
             delete restCol.filter;
+            
+            const type = defaultStr(header.type).toLowerCase();
+            sortType = defaultStr(sortType,type).toLowerCase();
             width = defaultDecimal(width);
             if(width <COLUMN_WIDTH/2){
                 width = COLUMN_WIDTH;
             }
-            const type = defaultStr(header.type).toLowerCase();
-            sortType = defaultStr(sortType,type).toLowerCase();
             if(type.contains("date")|| type.contains("time")){
-                width = Math.max(width,DATE_COLUMN_WIDTH);
+                const mWidth = type.toLowerCase().contains('datetime')? (DATE_COLUMN_WIDTH+30) : DATE_COLUMN_WIDTH;
+                width = Math.max(width,mWidth);
+            } else if((type.contains("number") || type.contains("decimal") && this.props.format)){
+                width = Math.max(width,DATE_COLUMN_WIDTH-30);
             }
             totalWidths +=width;
             widths[header.field] = width;
@@ -945,6 +957,17 @@ export default class CommonDatagridComponent extends AppComponent {
                 delete restCol.sortable;
                 filterProps = {
                     ...restCol,
+                    columnIndex,
+                    visibleColumnIndex,
+                    sortable:isColumnSortable,
+                    sorted:isColumnSorted,
+                    sortedColumn :sortedProps,///les props de la columns triée
+                    sortedProps,
+                    width,
+                    columnField : field,
+                    columnDef : header,
+                    index : headerIndex,
+                    visible,
                     key : header.field,
                     label : defaultStr(header.label,header.text),
                     orOperator : filterOrOperator,
@@ -958,6 +981,7 @@ export default class CommonDatagridComponent extends AppComponent {
                     operator : fCol.operator,
                     action : defaultStr(fCol.originAction,fCol.action),
                 };
+                this.currentFilteringColumns[header.field] = filterProps;
                 this.prepareFilter(filterProps,headerFilters); 
             }
             this.prepareColumn({
@@ -1169,19 +1193,15 @@ export default class CommonDatagridComponent extends AppComponent {
     onFilterChange(arg){
         this.filteredValues = defaultObj(this.filteredValues);
         let {field,operator,originAction,action,value} = defaultObj(arg);     
-        const filters = this.preparedColumns.filters;   
-        if(isNonNullString(field) && isNonNullString(operator) && isNonNullString(action)){
+        const filter = isNonNullString(field)? this.currentFilteringColumns[field] : null;   
+        if(!isObj(filter)) return;
+        if(isNonNullString(operator) && isNonNullString(action)){
             this.filteredValues[field] = {
                 operator,action,value,field
             }
-            Object.map(filters,(filter)=>{
-                if(isObj(filter) && filter.field == field){
-                    filter.originValue = filter.defaultValue = arg.defaultValue;
-                    filter.operator = operator;
-                    filter.action = defaultStr(originAction,action);
-                }
-            });
-            
+            filter.originValue = filter.defaultValue = arg.defaultValue;
+            filter.operator = operator;
+            filter.action = defaultStr(originAction,action);            
         }
         return this.doFilter(arg);
     }
@@ -1705,7 +1725,7 @@ CommonDatagridComponent.propTypes = {
     /*** affiche ou masque les filtres */
     showFilters : PropTypes.bool,
     /*** si le pied de page sera affiché */
-    showFooter : PropTypes.bool,
+    showFooters : PropTypes.bool,
     /*** les donnnées peuvent être soient retournées par une fonction, soit par un tableau soit une promesse */
     data : PropTypes.oneOfType([PropTypes.array, PropTypes.func,PropTypes.object]),//.isRequired,
     columns:PropTypes.oneOfType([PropTypes.array,PropTypes.object]),//.isRequired,

package/src/components/Datagrid/Footer/Footer.js

@@ -3,7 +3,7 @@ import Menu from "$ecomponents/BottomSheet/Menu";
 import View from "$ecomponents/View";
 import {Pressable,StyleSheet} from "react-native";
 import Label from "$ecomponents/Label";
-import {defaultVal} from "$utils";
+import {defaultVal,defaultObj} from "$utils";
 import React from "$react";
 import theme from "$theme"
 
@@ -18,7 +18,9 @@ const formatValue = ({value,format,method})=>{
     return (format === 'money' && method != 'count')? value.formatMoney():value.formatNumber();
 }
 export default function DGGridFooterValue (props){
-    let {label,text,displayLabel,style,format} = props;
+    let {label,text,displayLabel,style,format,testID,anchorProps} = props;
+    anchorProps = defaultObj(anchorProps);
+    testID = defaultStr(testID,"RN_DatagridFooterComponent");
     label = defaultVal(label,text);
     const defLabel = label;
     if(displayLabel !== false){
@@ -50,19 +52,19 @@ export default function DGGridFooterValue (props){
         }
     }
     return  <Menu 
+        testID = {testID+"_Menu"}
         items = {menuItems}
-        style = {{minWidth:220}}
         title = {'Totaux de la colonne '+(defLabel?("[ "+defLabel+"]"):'')}
         animateOnClose
         anchor = {(p)=>{
-            return <Pressable {...p} style={[styles.anchor,style,label?styles.row:null]} title={title}>
+            return <Pressable {...anchorProps} {...p} testID={testID} style={[styles.anchor,anchorProps.style,label?styles.row:null]} title={title}>
                 {label ?
                     <>
-                        <View><Label style={[styles.label]}>{label}</Label></View>
-                        <View><Label style = {styles.label}> : </Label></View>
+                        <View testID={testID+"_Label"}><Label style={[styles.label]}>{label}</Label></View>
+                        <View testID={testID+"_LabelPoint"}><Label style = {styles.label}> : </Label></View>
                     </>
                 : null}
-                <Label primary style={[styles.value]}>
+                <Label testID={testID+"_LabelContent"} primary style={[styles.value]}>
                     {formatValue({value:defaultDecimal(props[active]),method:active,format})}
                 </Label>
             </Pressable>
@@ -75,11 +77,7 @@ const styles = StyleSheet.create({
         flexDirection : 'row',
         alignItems : 'center',
     },
-    anchor : {
-        paddingVertical : 10,
-        marginHorizontal : 10,
-        paddingHorizontal : 5,
-    },
+    anchor : {},
     value : {
         fontWeight : 'bold'
     }

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

@@ -13,6 +13,7 @@ import React from "$react";
 import {Menu as BottomSheetMenu} from "$ecomponents/BottomSheet"
 import RenderType from "../RenderType";
 import Footer from "../Footer/Footer";
+import theme from "$theme";
 import Table from "$ecomponents/Table";
 
 
@@ -62,41 +63,23 @@ const DatagridFactory = (Factory)=>{
             }
             return null;
         }
-        renderHeaderCell(props){
-            let ret = super.renderHeaderCell(props);
-            const {columnField,columnDef,style} = props;
-            if(this.state.showFilters){
-                const filterC = this.customFilteredColumns[columnField];
-                if(isObj(filterC)){
-                    return <View testID={"RN_DatagridTableComponent_HeaderField_"+columnField} style={[style,{minHeight:100}]}>
-                        {ret}
-                        <Filter 
-                            {...filterC}
-                            withLabel = {false}
-                            style = {[styles.filter,style]}
-                            anchorProps  ={{size:20}}
-                            inputProps = {{
-                                style : [styles.filter,style]
-                            }}
-                        />
-                    </View>
-                }
-            }
-            return ret;
-        }
-        beforePrepareColumns(){
-            this.customFilteredColumns = {};
-        }
-        prepareColumn({filterProps,columnField,columnDef,key,field,visible,filter},filters){
-            this.customFilteredColumns = defaultObj(this.customFilteredColumns);
-            if(visible){
-                if(filter){
-                    this.customFilteredColumns[columnField] = filterProps;
-                } else {
-                    this.customFilteredColumns[columnField] = null;
-                }
+        renderFilterCell(props){
+            const {columnField,style} = props;
+            const filterC = this.currentFilteringColumns[columnField];
+            if(isObj(filterC)){
+                return <Filter 
+                    {...filterC}
+                    withLabel = {false}
+                    style = {[styles.filter,theme.styles.pv0,theme.styles.mv0]}
+                    anchorProps  ={{size:20}}
+                    mode = "flat"
+                    inputProps = {{
+                        style : [styles.filter],
+                        mode : "flat",
+                    }}
+                />
             }
-            return filters;
+            return null;
         }
         updateLayout(e){
             if(this.state.fixedTable === false) return;
@@ -176,7 +159,7 @@ const DatagridFactory = (Factory)=>{
             })*/
             const {visibleColumns} = this.preparedColumns;
             const hasFooterFields = this.hasFooterFields();
-            const {columnsWidths:widths,showFilters,showFooter} = this.state;
+            const {columnsWidths:widths,showFilters,showFooters} = this.state;
             let isAllRowsSelected = this.isAllRowsSelected();
             const isLoading = this.isLoading();
             let _progressBar = this.getProgressBar();
@@ -227,10 +210,10 @@ const DatagridFactory = (Factory)=>{
                             {hasFooterFields ? <Button
                                 normal
                                 style={styles.paginationItem}
-                                onPress =  {()=>{showFooter?this.hideFooter():this.showFooter()} }   
-                                icon = {showFooter?'view-column':'view-module'}
+                                onPress =  {()=>{showFooters?this.hideFooter():this.showFooters()} }   
+                                icon = {showFooters?'view-column':'view-module'}
                             >   
-                                    {showFooter?'Masquer/Ligne des totaux':'Afficher/Ligne des totaux'}
+                                    {showFooters?'Masquer/Ligne des totaux':'Afficher/Ligne des totaux'}
                             </Button>:null}
                             {selectableMultiple && (<>
                                 {restItems.map((item,index)=>{
@@ -287,9 +270,9 @@ const DatagridFactory = (Factory)=>{
                                     ,text : (showFilters?'Masquer/Filtres':'Afficher/Filtres')
                                 } : null,
                                 isMobile && hasFooterFields?{
-                                    onPress :  ()=>{showFooter?this.hideFooter():this.showFooter()}    
-                                    ,icon :  showFooter?'view-column':'view-module'
-                                    ,text : (showFooter?'Masquer/Ligne des totaux':'Afficher/Ligne des totaux')
+                                    onPress :  ()=>{showFooters?this.hideFooter():this.showFooters()}    
+                                    ,icon :  showFooters?'view-column':'view-module'
+                                    ,text : (showFooters?'Masquer/Ligne des totaux':'Afficher/Ligne des totaux')
                                 } : null,
                                 ...(selectableMultiple ? restItems : [])
                             ] : visibleColumns}
@@ -340,7 +323,7 @@ const DatagridFactory = (Factory)=>{
                     ref = {this.listRef}
                     hasFooters = {hasFooterFields}
                     showFilters = {showFilters}
-                    showFooters = {showFooter}
+                    showFooters = {showFooters}
                     headerContainerProps = {{}}
                     headerCellContainerProps = {{
                         style : showFilters?{justifyContent:'flex-start'}:null
@@ -358,7 +341,9 @@ const DatagridFactory = (Factory)=>{
                     }}
                     data = {this.state.data}
                     renderHeaderCell={this.renderHeaderCell.bind(this)}
+                    renderFilterCell={this.renderFilterCell.bind(this)}
                     renderFooterCell={this.renderFooterCell.bind(this)}
+                    renderEmpty = {this.renderEmpty.bind(this)}
                 />
             </View>
         }
@@ -440,8 +425,10 @@ const styles = StyleSheet.create({
         maxHeight : 40,
         height : 40,
         width : "100%",
+        alignSelf : 'flex-start',
         flexGrow : 1,
         minHeight : 40,
+        backgroundColor : 'transparent'
     },
     layoutContent : {
         maxWidth : '100%',

package/src/components/Date/DatePickerInput/index.js

@@ -166,7 +166,7 @@ const DatePickerInput = React.forwardRef(({
         onChange({dateObject:state.inputDate,date:state.inputDate,sqlDate:date,value:date})
     }
   },[state])
-  const labelText = render_filter ? label : withLabel!==false ? getLabel({ label, inputFormat:inputFormatLabel, withDateFormatInLabel }):"";
+  const labelText = withLabel === false ? null: (render_filter ? label : getLabel({ label, inputFormat:inputFormatLabel, withDateFormatInLabel }));
   return (
     <>
         <TextField

package/src/components/Date/DateTime.js

@@ -13,7 +13,7 @@ import { toDateObj } from "./utils";
 import TextField from "$components/TextField";
 import PeriodActionComponent from "./PeriodAction";
 
-export default function DateTimePickerComponent({left,isPeriodAction,withSeconds,right,format,dateFormat,timeFormat,defaultValue,onChange,testID,dateProps,disabled,readOnly,timeProps,...rest}){
+export default function DateTimePickerComponent({left,isPeriodAction,contentProps,withSeconds,right,format,dateFormat,timeFormat,defaultValue,onChange,testID,dateProps,disabled,readOnly,timeProps,...rest}){
     if(!isPeriodAction){
         isPeriodAction = isNonNullString(defaultValue) && defaultValue.contains("=>");
     }
@@ -28,6 +28,7 @@ export default function DateTimePickerComponent({left,isPeriodAction,withSeconds
     }
     dateProps = defaultObj(dateProps);
     timeProps = defaultObj(timeProps);
+    contentProps = defaultObj(contentProps);
     testID = defaultStr(testID,"RN_DateTimeComponent")
     const anchorTimeProps = defaultObj(timeProps.anchorProps);
     const timePropsContainerProps = defaultObj(timeProps.containerProps);
@@ -52,8 +53,8 @@ export default function DateTimePickerComponent({left,isPeriodAction,withSeconds
     const timeDefaultValue = getTimeValue(dateObj);
     const changedTimeArgsRef = {current:{...defaultObj(parseTime(timeDefaultValue,withSeconds))}};
     withSeconds = defaultBool(timeProps.withSeconds,withSeconds,true);
-
-    const maxWidth = 120;//withSeconds ? 120 : 120;
+    const cStyle = [theme.styles.noPadding,theme.styles.noMargin];
+    const maxWidth = 110;
     const callOnChange = ()=>{
         if(onChange){
             const dObj = changeDateArgsRef.current;
@@ -71,6 +72,8 @@ export default function DateTimePickerComponent({left,isPeriodAction,withSeconds
             onChange(args);
         }
     }
+    const tInputProps = defaultObj(timeProps.inputProps);
+    const dStyle = flattenStyle([rest.style,dateProps.style]);
     return <DateComponent
         defaultValue = {dateObj}
         disabled = {disabled}
@@ -79,7 +82,7 @@ export default function DateTimePickerComponent({left,isPeriodAction,withSeconds
         {...rest}
         format = {dateFormat}
         {...dateProps}
-        style = {[rest.style,dateProps.style]}
+        style = {dStyle}
         calendarIconBefore = {true}
         onChange = {(args)=>{
             changeDateArgsRef.current = args;
@@ -102,15 +105,17 @@ export default function DateTimePickerComponent({left,isPeriodAction,withSeconds
                     }}
                     withLabel = {false}
                     mode = {"flat"}
-                    containerProps = {{...timePropsContainerProps,style:[{maxWidth},timePropsContainerProps.style]}}
+                    contentProps = {{style:cStyle}}
+                    containerProps = {{...timePropsContainerProps,style:[{maxWidth},theme.styles.noPadding,theme.styles.noMargin,timePropsContainerProps.style]}}
                     divider = {false}
+                    style = {[theme.styles.noPadding,{maxHeight:40},theme.styles.noMargin,timeProps.style,dStyle.backgroundColor && {backgroundColor:dStyle.backgroundColor}]}
                     anchorProps = {{
                         ...anchorTimeProps,
                         testID:testID+"_TimeAnchor",
                         style : [theme.styles.noPadding,{borderRadius:0},theme.styles.noMargin,anchorTimeProps.style]
                     }}
                     inputProps = {{
-                        ...defaultObj(timeProps.inputProps),
+                        ...tInputProps,
                         mode : "flat",
                     }}
                 />

package/src/components/Date/Time.js

@@ -44,8 +44,9 @@ export const timeToString = (value,withSeconds)=>{
      return value.substring(0,5);
   }
 export default function TimePickerComponent (props){
-    let {right:customRight,upper,anchorProps,dialogProps,withLabel,containerProps,mode,onChange,withSeconds,cancelLabel,confirmLabel,label,text,upperCase,defaultValue,disabled,editable,withModal,readOnly,...rest} = props;
+    let {right:customRight,upper,anchorProps,dialogProps,withLabel,inputProps,containerProps,mode,onChange,withSeconds,cancelLabel,confirmLabel,label,text,upperCase,defaultValue,disabled,editable,withModal,readOnly,...rest} = props;
     rest = defaultObj(rest);
+    inputProps = defaultObj(inputProps);
     const isEditable = disabled !== true && readOnly !== true && editable !== false?true : false;
     withModal = defaultBool(withModal,true);
     if(!isEditable){
@@ -110,6 +111,7 @@ export default function TimePickerComponent (props){
     if(!disabled){
       containerProps.style = [containerProps.style,{opacity:1}]
     }
+    const iContainerProps = defaultObj(inputProps.containerProps);
     return <>
       <TouchableRipple {...containerProps} 
         disabled = {!isEditable}
@@ -120,6 +122,8 @@ export default function TimePickerComponent (props){
           <TextField
           mode = {mode||theme.textFieldMode}
           {...rest}
+          {...inputProps}
+          containerProps = {{...iContainerProps,style:[containerProps.style,iContainerProps.style]}}
           label = {label}
           right = {right}
           disabled = {disabled}

package/src/components/Dialog/confirm/showConfirmOrAlertOrPrompt.js

@@ -30,6 +30,7 @@ export default function showConfirm (p,cb){
         buttons,
         messageProps,
         inputProps,
+        format,
         placeholder,
         children,
         withInputField,
@@ -116,8 +117,11 @@ export default function showConfirm (p,cb){
             {messageContent}
             {withInputField !== false ? <Component
                 type = {type}
+                enableCopy = {false}
                 defaultValue = {defaultValue}
                 placeholder = {placeholder}
+                affix = {false}
+                format = {format}
                 {...inputProps}
                 ref = {inputRef}
                 onChange = {(args)=>{

package/src/components/Dropdown/index.js

@@ -745,9 +745,10 @@ class DropdownComponent extends AppComponent {
         const inputRest = {disabled,editable,label,error}
         clearTimeout(this.doSearchFilter);
         this.doSearchFilter = null;
-
+        mode = defaultStr(mode,inputProps.mode);
         const textInputProps = {
             ...inputRest,
+            mode,
             editable,disabled,
             style : StyleSheet.flatten([styles.input,inputProps.style])
         }
@@ -840,8 +841,7 @@ class DropdownComponent extends AppComponent {
         }
         helperText = <HelperText disabled = {disabled} error={error}>{helperText}</HelperText>
         let labelTextField = defaultVal(label,text);
-        
-        const isFlatMode = textInputProps.mode === flatMode;
+        const isFlatMode = textInputProps.mode  === flatMode;
         let backgroundColor = Colors.isValid(textInputProps.style.backgroundColor)?textInputProps.style.backgroundColor : Colors.isValid(flattenStyle.backgroundColor)? flattenStyle.backgroundColor : theme.colors.surface;
         const tagLabelStyle = {backgroundColor,color:Colors.setAlpha(theme.colors.text,theme.ALPHA)}
         if(!isFlatMode && backgroundColor ==='transparent'){
@@ -904,9 +904,9 @@ class DropdownComponent extends AppComponent {
                         defaultValue={selectedText}
                         autoHeight = {renderTag}
                         useReadOnlyOpacity = {false}
-                        mode = {mode}
                         {...inputProps}
                         {...textInputProps}
+                        mode = {mode}
                         enableCopy = {enableCopy}
                         label = {labelTextField}
                         pointerEvents = "none"
@@ -1270,7 +1270,6 @@ DropdownComponent.propTypes = {
     onUnmount : PropTypes.func,
     label : PropTypes.string,
     placeholder : PropTypes.string,
-    mode : PropTypes.oneOf(["outlined", "flat"]),
     inputProps : PropTypes.object,
     selectedColor:PropTypes.string,
     accessibilityLabel : PropTypes.string,

package/src/components/Fab/Group.js

@@ -7,7 +7,7 @@ import {MENU_ICON} from "$ecomponents/Icon";
 import theme,{Colors} from "$theme";
 import Group from "./GroupComponent";
 import Portal from "$ecomponents/Portal";
-import Auth from "$cauth";
+import {isAllowedFromStr} from "$cauth/perms";
 
 const FabGroupComponent = React.forwardRef((props,innerRef)=>{
     let {openedIcon,screenName,display:customDisplay,primary,actionMutator,secondary,onOpen,prepareActions,fabStyle,open:customOpen,onClose,onStateChange:customOnStateChange,closedIcon,color,actions:customActions,children,...customRest} = props;
@@ -63,7 +63,7 @@ const FabGroupComponent = React.forwardRef((props,innerRef)=>{
                 if(!isObj(a) || !isNonNullString(a.label)) return null;
                 const {perm,isAllowed,primary,secondary,...restItem} = a;
                 if(typeof isAllowed =='function' && isAllowed() === false) return null;
-                if(isNonNullString(perm) && !Auth.isAllowedFromStr(perm)) return false;
+                if(isNonNullString(perm) && !isAllowedFromStr(perm)) return false;
                 if(primary){
                     restItem.style = StyleSheet.flatten([restItem.style,{color:theme.colors.primaryText,backgroundColor:theme.colors.primary}])
                 } else if(secondary){

package/src/components/Filter/index.js

@@ -24,6 +24,7 @@ export * from "./utils";
 
  const _actions = {
   '$eq' : 'Egal à',
+  "$ne" : 'Défférent de',
   '$gt' : 'Supérieur à',
   '$gte' : 'Supérieur ou égal',
   '$lt' : 'Inférieur à',
@@ -135,6 +136,10 @@ export default class Filter extends AppComponent {
       this.props.onValidate({...this.getStateValues(),field:this.props.name,...arg})
     }
   }
+  isDecimal(){
+    const t = defaultStr(this.type,this.props.type).toLowerCase();
+    return t =="number" || t =='decimal' ? true : false;
+  }
   onFilterValidate(arg){
      arg = defaultObj(arg);
      if(JSON.stringify(this.state.defaultValue) === JSON.stringify(arg.value)){
@@ -190,11 +195,15 @@ export default class Filter extends AppComponent {
           value = undefined;
       }
       let originValue = value;
-      const type = defaultStr(this.props.type).toLowerCase().trim();
-      value = parseDecimal(value,type);
       if(action =="$today" || action =='$yesterday'){
          force = true;
       }
+      if(this.isDecimal()){
+        value = parseDecimal(value)
+        if(value == 0){
+          value = undefined;
+        }
+      }
       const prev = JSON.stringify(defaultObj(this.previousRef.current)), current = {value,operator,action,ignoreCase};
           let tV = isArray(value) && value.length <= 0 ? undefined : value;
       this.isInitializedRef.current = this.props.dynamicRendered || this.isInitializedRef.current;
@@ -290,8 +299,7 @@ export default class Filter extends AppComponent {
             if(data.start && data.end && data.start> data.end){
                 return notify.error("La date de fin doit être supérieure à la date de début");
             }
-            console.log(data," is dataa")
-           if(isFunction(success)){
+            if(isFunction(success)){
               success(data.start+"=>"+data.end);
            }
            DialogProvider.close();
@@ -324,7 +332,7 @@ export default class Filter extends AppComponent {
             diff = DateLib.currentMonthDaysLimits(currentDate);
           break;
         case "$week":      
-            diff = DateLib.currentWeekDaysLimits(currentDate)
+            diff = DateLib.currentWeekDaysLimits(currentDate);
           break;
         case "$prevWeek":      
           diff = DateLib.previousWeekDaysLimits(currentDate)
@@ -382,8 +390,8 @@ export default class Filter extends AppComponent {
       field,
       style,
       anchorProps,
-      mode,
-      inputProps,
+      //mode,
+      //inputProps,
       moreOptions,
       isLoading,
       searchIconTooltip,
@@ -471,6 +479,7 @@ export default class Filter extends AppComponent {
       }
      anchorProps = defaultObj(anchorProps);
      rest.anchorProps = anchorProps;
+     rest.withLabel = withLabel;
      rest.pointerEvents = "auto";
      rest.right = isLoading ? <ActivityIndicator color={theme.colors.secondaryOnSurface} animating/> :<>
         <Menu 
@@ -556,7 +565,7 @@ export default class Filter extends AppComponent {
      if(ignoreDefaultValue) {
         rest.isPeriodAction = true;
      }
-     return <View testID={testID+"_FilterContainer"} {...containerProps} style={[theme.styles.w100,containerProps.style]}>
+     return <View testID={testID+"_FilterContainer"} {...containerProps} style={StyleSheet.flatten([theme.styles.w100,containerProps.style])}>
         <Component
           {...rest}
           readOnly = {ignoreDefaultValue}

package/src/components/Table/AbsoluteScrollView.js

@@ -0,0 +1,91 @@
+// Copyright 2022 @fto-consult/Boris Fouomene. All rights reserved.
+// Use of this source code is governed by a BSD-style
+// license that can be found in the LICENSE file.
+
+import { ScrollView,StyleSheet,View,useWindowDimensions} from "react-native";
+import React from "$react";
+import {defaultStr,defaultObj,isObj,isNumber} from "$utils";
+import Portal from "$ecomponents/Portal";
+import {isMobileNative,isTouchDevice} from "$platform";
+
+const isNative = isMobileNative() || isTouchDevice();
+const AbsoluteScrollView = React.forwardRef(({testID,contentProps,listRef,containerProps,...props},ref)=>{
+    if(isNative) return null;
+    containerProps = defaultObj(containerProps);
+    contentProps = defaultObj(contentProps);
+    const win = useWindowDimensions();
+    const scrollViewRef = React.useRef(null);
+    testID = defaultStr(testID,"RN_TableAbsoluteScrollViewComponent");
+    const [state,setState] = React.useState({
+        styles : {},
+        visible : true,
+    })
+    const {styles,visible} = state,setStyles = (s)=>{
+        if(isObj(s)){
+            setState({...state,styles:{...styles,...s}});
+        }
+    },toggleVisible = ()=>{
+        if(isObj(styles.content) && isObj(styles.container)){
+            const visible = isNumber(styles.content.height) && isNumber(styles.container.height) && (styles.content.height-20)> styles.container.height? true : false;
+            if(visible != state.visible){
+                setState({...state,visible});
+            }
+        }
+    }
+    React.setRef(ref,{
+        setStyles,
+        checkVisibility : (args)=>{
+            args = defaultObj(args);
+            if(isObj(args.contentOffset) && isObj(args.contentSize)){
+                const {x} = args.contentOffset;
+                const visible = x >=win.width ? false : true;
+                if(state.visible != visible){
+                    return setState({...state,visible});
+                }
+            }
+            return toggleVisible();
+        },
+        scrollViewRef
+    });
+    React.useEffect(()=>{
+        return ()=>{
+            React.setRef(ref,null);
+        }
+    },[]);
+    React.useEffect(()=>{
+        toggleVisible();
+    },[styles])
+    return <Portal>
+        {<View testID={testID+"_Containter"} {...containerProps} style={[mainStyles.container,containerProps.style,styles.container,{left:win.width-10},!visible &&{display:'none',width:0,opacity:0}]}>
+            <ScrollView
+                {...props}
+                ref = {scrollViewRef}
+                testID={testID}
+                contentContainerStyle = {[props.contentContainerStyle,mainStyles.contentContainer,styles.containerContainer]}
+                vertical
+            >
+                <View
+                    testID={testID+"Content"}
+                    {...contentProps}
+                    style={[mainStyles.content,contentProps.style,styles.content]}
+                />
+            </ScrollView>
+        </View>}
+    </Portal>
+});
+
+export default AbsoluteScrollView;
+
+const mainStyles = StyleSheet.create({
+    container : {
+        ...StyleSheet.absoluteFill,
+        width : 10,
+    },
+    content : {
+        width:10,
+    },
+    contentContainer : {
+        
+    }
+})
+AbsoluteScrollView.displayName = "TableVerticalScrollView";

package/src/components/Table/index.js

@@ -1,14 +1,16 @@
-import {FlashList,BigList} from "$ecomponents/List";
+import {FlashList} from "$ecomponents/List";
 import View from "$ecomponents/View";
-import {defaultObj,defaultStr,debounce,isNumber,defaultVal} from "$utils";
+import {defaultObj,defaultStr,debounce,defaultNumber,defaultVal} from "$utils";
 import PropTypes from "prop-types";
 export const DEFAULT_COLUMN_WIDTH = 60;
 import React from "$react";
 import Label from "$ecomponents/Label";
-import { StyleSheet,ScrollView,Dimensions} from "react-native";
+import { StyleSheet,View as RNView,ScrollView,Dimensions} from "react-native";
 import { getRowStyle } from "$ecomponents/Datagrid/utils";
 import {isMobileNative} from "$cplatform";
 import theme from "$theme";
+import AbsoluteScrollView from "./AbsoluteScrollView";
+
 const isSCrollingRef = React.createRef();
 const scrollLists = (opts,refs)=>{
     refs.map((ref)=>{
@@ -18,19 +20,29 @@ const scrollLists = (opts,refs)=>{
     });
     isSCrollingRef.current = false;
 }
-const getOnScrollCb = (refs)=>{
+const getOnScrollCb = (refs,pos,cb2)=>{
     const cb = (args)=>{
         if(isSCrollingRef.current) return;
         if(!isObj(args) || !args.nativeEvent) {
             isSCrollingRef.current = false;
         }
         isSCrollingRef.current = true;
-        scrollLists({x:args.nativeEvent.contentOffset?.x},refs);
+        if(typeof pos =='function'){
+            pos(args);
+            isSCrollingRef.current = false;
+            return;
+        }
+        pos = pos && (pos =='x' || pos=='y')? pos : "x";
+        const a = {[pos]:args.nativeEvent.contentOffset?.[pos]};
+        scrollLists(a,refs);
+        if(typeof cb2 == 'function'){
+            cb2(args);
+        }
     };
     return isMobileNative()? cb : debounce(cb,200);
 }
 
-const TableComponent = React.forwardRef(({containerProps,isRowSelected,headerScrollViewProps,footerScrollViewProps,scrollViewProps,showFooters,renderFooterCell,footerCellContainerProps,headerContainerProps,headerCellContainerProps,headerProps,rowProps:customRowProps,renderCell,cellContainerProps,hasFooters,renderHeaderCell,columnProps,getRowKey,columnsWidths,colsWidths,footerContainerProps,showFilters,columns,data,testID,...props},tableRef)=>{
+const TableComponent = React.forwardRef(({containerProps,renderEmpty,isRowSelected,headerScrollViewProps,footerScrollViewProps,scrollViewProps,showFooters,renderFooterCell,footerCellContainerProps,filterCellContainerProps,headerContainerProps,headerCellContainerProps,headerProps,rowProps:customRowProps,renderCell,cellContainerProps,hasFooters,renderHeaderCell,renderFilterCell,columnProps,getRowKey,columnsWidths,colsWidths,footerContainerProps,showFilters,columns,data,testID,...props},tableRef)=>{
     containerProps = defaultObj(containerProps);
     testID = defaultStr(testID,"RN_TableComponent");
     cellContainerProps = defaultObj(cellContainerProps);
@@ -41,13 +53,14 @@ const TableComponent = React.forwardRef(({containerProps,isRowSelected,headerScr
     const getRowProps = typeof rowProps ==='function'? rowProps : undefined;
     let rowProps = isObj(customRowProps)? customRowProps:{};
     const prepareState = React.useCallback(()=>{
-        const cols = {},headers = {},footers = {},visibleColumns = [];
+        const cols = {},headers = {},footers = {},filters = {},visibleColumns = [];
         let hasFooters = false;
         columnProps = defaultObj(columnProps);
         let columnIndex = 0;
         const widths = defaultObj(columnsWidths,colsWidths);
         headerCellContainerProps = defaultObj(headerCellContainerProps);
         footerCellContainerProps = defaultObj(footerCellContainerProps);
+        filterCellContainerProps = defaultObj(filterCellContainerProps);
         Object.map(columns,(columnDef,field)=>{
           if(!isObj(columnDef) /*|| columnDef.visible === false*/) return;
           const columnField = defaultStr(columnDef.field,field);
@@ -73,6 +86,12 @@ const TableComponent = React.forwardRef(({containerProps,isRowSelected,headerScr
         headers[columnField] = <View testID={testID+"_HeaderCell_"+columnField} {...headerCellContainerProps} {...hContainerProps} key={columnField} style={[styles.headerItem,styles.headerItemOrCell,headerCellContainerProps.style,hContainerProps.style,style]}>
             <Label textBold primary>{content}</Label>
         </View>;
+        if(typeof renderFilterCell =='function'){
+            const filterCell = renderFilterCell(colArgs);
+            filters[columnField] = <View testID={testID+"_Filter_Cell_"+columnField} {...filterCellContainerProps} key={columnField} style={[styles.headerItem,styles.headerItemOrCell,styles.filterCell,filterCellContainerProps.style,style]}>
+                {React.isValidElement(filterCell)? filterCell : null}
+            </View>
+        }
         if(typeof renderFooterCell ==='function') {
             const footerProps = {...colArgs,containerProps:{}};
             let cellFooter = renderFooterCell(footerProps);
@@ -87,7 +106,7 @@ const TableComponent = React.forwardRef(({containerProps,isRowSelected,headerScr
             if(!hasFooters && cellFooter){
                 hasFooters = true;
             }
-            footers[columnField] = <View testID={testID+"_Footer_Cell_"+columnField} {...fContainerProps} key={columnField} style={[styles.headerItem,styles.headerItemOrCell,footerCellContainerProps.style,fContainerProps.style,style]}>
+            footers[columnField] = <View testID={testID+"_Footer_Cell_"+columnField}  key={columnField} style={[styles.headerItem,styles.headerItemOrCell,footerCellContainerProps.style,style]}>
                 <Label primary children={cellFooter}/>
             </View>
          }
@@ -104,7 +123,7 @@ const TableComponent = React.forwardRef(({containerProps,isRowSelected,headerScr
           }
           columnIndex++;
         });
-        return {columns:cols,visibleColumns,headers,hasFooters,footers};
+        return {columns:cols,visibleColumns,headers,hasFooters,footers,filters};
       },[columns,data]);
     const [state,setState] = React.useState({
         headers : {},
@@ -117,11 +136,13 @@ const TableComponent = React.forwardRef(({containerProps,isRowSelected,headerScr
     React.useEffect(()=>{
         setState({...state,...prepareState()});
     },[data,columns]);
-    const {visibleColumns,columns:cols,headers,footers} = state;
+    const emptyData = typeof renderEmpty =='function' && !Object.size(data,true)? renderEmpty() : null;
+    const hasEmptyData = emptyData && React.isValidElement(emptyData);
+    const {visibleColumns,columns:cols,headers,footers,filters} = state;
     headerContainerProps = defaultObj(headerContainerProps);
     footerContainerProps = defaultObj(footerContainerProps);
     let hProps = typeof headerProps =='function'? hProps({columns:col,visibleColumns}) : {};
-    const h = [],f = [];
+    const h = [],f = [],fFilters = [];
     let totalWidths = 0;
     visibleColumns.map((i)=>{
         if(!isObj(cols[i])) return;
@@ -130,6 +151,9 @@ const TableComponent = React.forwardRef(({containerProps,isRowSelected,headerScr
         if(showFooters && state.hasFooters){
             f.push(footers[i]);
         }
+        if(showFilters && filters[i]){
+            fFilters.push(filters[i]);
+        }
     });
     const scrollContentContainerStyle = {flex:1,width:listWidth,minWidth:totalWidths,height:'100%'};
     const scrollEventThrottle = isMobileNative()?200:50;
@@ -138,7 +162,7 @@ const TableComponent = React.forwardRef(({containerProps,isRowSelected,headerScr
         scrollEventThrottle,
         horizontal : true,
         ...scrollViewProps,
-        style : [{maxHeight:120},scrollViewProps.style],
+        style : [scrollViewProps.style],
         contentContainerStyle : [styles.scrollView,scrollViewProps.contentContainerStyle,scrollViewFlexGrow,scrollContentContainerStyle]
     }
     const listWidth = '100%';
@@ -175,13 +199,19 @@ const TableComponent = React.forwardRef(({containerProps,isRowSelected,headerScr
     const hContent = h.length ? <View testID={testID+"_Header"}{...hProps} {...headerContainerProps} style={[styles.header,headerContainerProps.style,hProps.style,f.length]}>
         {h}
     </View> : null,
-        fContent = f.length ? <View testID={testID+"_Footer"} {...footerContainerProps} style={[styles.header,styles.footers,footerContainerProps.style]}>
+    fContent = f.length ? <View testID={testID+"_Footer"} {...footerContainerProps} style={[styles.header,styles.footers,footerContainerProps.style,theme.styles.pt0,theme.styles.pb0,theme.styles.ml0,theme.styles.mr0]}>
         {f}
-    </View> : null;
+    </View> : null,
+    filtersContent = fFilters.length ? <View testID={testID+"_Filters"} style={[styles.header,styles.footers,theme.styles.pt0,theme.styles.pb0,theme.styles.ml0,theme.styles.mr0]}>
+        {fFilters}
+    </View> : null
+    
+    const absoluteScrollViewRefCanScroll = React.useRef(true);
     React.setRef(tableRef,context);
     const cStyle = {width:listWidth}
-    return <View testID= {testID+"_Container"} {...containerProps} style={[styles.container,{alignItems:'stretch'},containerProps.style]}>
-            <View autoHeight style={[cStyle]} testID={testID+"_Headers_ScrollViewContainer"}>
+    const absoluteScrollViewRef = React.useRef(null);
+    return <View testID= {testID+"_Container"} {...containerProps} style={[styles.container,{alignItems:'stretch'},containerProps.style,theme.styles.pl0,theme.styles.pr0]}>
+            <RNView style={[cStyle]} testID={testID+"_Headers_ScrollViewContainer"}>
                 <ScrollView
                     testID={testID+"_HeaderScrollView"}
                     {...headerScrollViewProps} 
@@ -191,15 +221,49 @@ const TableComponent = React.forwardRef(({containerProps,isRowSelected,headerScr
                     onScroll = {getOnScrollCb([scrollViewRef,footerScrollViewRef])}
                     showsHorizontalScrollIndicator
             >
-                    {hContent}
+                    <View testID={testID+"Header2FootersWrapper"} style={[theme.styles.w100]}>
+                        {hContent}
+                        {filtersContent}
+                        {fContent}
+                    </View>
                 </ScrollView>
-            </View>
-            <ScrollView {...scrollViewProps} scrollEventThrottle = {scrollEventThrottle} horizontal contentContainerStyle={[scrollContentContainerStyle,scrollViewProps.contentContainerStyle]} showsVerticalScrollIndicator={false}  onScroll = {getOnScrollCb([headerScrollViewRef,footerScrollViewRef])} ref={scrollViewRef}  testID={testID+"_ScrollView"}>    
+            </RNView>
+            {hasEmptyData ? <View testID={testID+"_Empty"} style={styles.hasNotData}>
+                    {emptyData}
+            </View> : <ScrollView {...scrollViewProps} scrollEventThrottle = {scrollEventThrottle} horizontal contentContainerStyle={[scrollContentContainerStyle,scrollViewProps.contentContainerStyle]} showsVerticalScrollIndicator={false}  
+            onScroll = {getOnScrollCb([headerScrollViewRef,footerScrollViewRef],null,(args)=>{
+                const nativeEvent = args.nativeEvent;
+                if(absoluteScrollViewRef.current && absoluteScrollViewRef.current.checkVisibility){
+                    absoluteScrollViewRef.current.checkVisibility(nativeEvent);
+                }
+            })} ref={scrollViewRef}  testID={testID+"_ScrollView"}>  
                 <FlashList
                     containerProps = {{style:[cStyle]}}
                     //prepareItems = {Array.isArray(items)? false : undefined}
                     estimatedItemSize = {200}
                     {...props}
+                    onContentSizeChange = {(width,height)=>{
+                        if(props.onContentSizeChange){
+                            props.onContentSizeChange(width,height);
+                        }
+                        if(!absoluteScrollViewRef.current) return;
+                        absoluteScrollViewRef.current.setStyles({
+                            content : {height,width}
+                        });
+                    }}
+                    onLayout = {(args)=>{
+                        if(props.onLayout){
+                            props.onLayout(args);
+                        }
+                        if(!absoluteScrollViewRef.current) return;
+                        const {nativeEvent:{layout}}=args;
+                        const top = defaultNumber(layout.top,layout.y);
+                        const height = layout.height;
+                        absoluteScrollViewRef.current.setStyles({
+                            container : {top,height},
+                            contentContainer : {height},
+                        });
+                    }}
                     ref = {listRef}
                     numberOfLines = {1}
                     responsive = {false}
@@ -209,6 +273,18 @@ const TableComponent = React.forwardRef(({containerProps,isRowSelected,headerScr
                     style = {[styles.datagrid,{width:listWidth,minWidth:totalWidths}]}
                     keyExtractor = {typeof getRowKey =='function'? getRowKey : React.getKey}
                     //stickyHeaderIndices={[0]}
+                    onScroll = {getOnScrollCb([absoluteScrollViewRef],(args)=>{
+                        if(!absoluteScrollViewRef.current) return;
+                        const offset = args?.nativeEvent?.contentOffset.y;
+                        const scrollViewRef = absoluteScrollViewRef.current?.scrollViewRef;
+                        if(typeof offset =='number' && scrollViewRef.current && scrollViewRef.current.scrollTo){
+                            absoluteScrollViewRefCanScroll.current = false;
+                            scrollViewRef.current.scrollTo({animated:false,y:offset});
+                            setTimeout(()=>{
+                                absoluteScrollViewRefCanScroll.current = true;
+                            },500);
+                        }
+                    })}
                     renderItem = {(arg)=>{
                         const item = arg.item, data = arg.item,allData=Array.isArray(item.items)? item.items : data;
                         const cells = visibleColumns.map((i,index)=>{
@@ -237,11 +313,23 @@ const TableComponent = React.forwardRef(({containerProps,isRowSelected,headerScr
                         </View>;
                     }}
                 />
-        </ScrollView>
+                    <AbsoluteScrollView
+                        ref={absoluteScrollViewRef}
+                        listRef = {listRef}
+                        scrollEventThrottle = {scrollEventThrottle} 
+                        onScroll = {(args)=>{
+                            if(!absoluteScrollViewRefCanScroll.current) return;
+                            const offset = args?.nativeEvent?.contentOffset.y;
+                            if(typeof offset =='number' && listRef.current && listRef.current.scrollToOffset){
+                                listRef.current.scrollToOffset({animated:true,offset});
+                            }
+                        }}
+                    />
+            </ScrollView>}
+            
     </View>
 });
 
-
 const ColumnType = PropTypes.shape({
     field : PropTypes.string,
     label : PropTypes.text,
@@ -299,6 +387,15 @@ const styles = StyleSheet.create({
         paddingHorizontal:5,
         paddingVertical : 0,
     },
+    filterCell : {
+        alignSelf : "flex-start",
+        textAlign : "left",
+        paddingHorizontal : 2,
+        paddingVertical : 0,
+        marginVertical : 0,
+        marginHorizontal : 0,
+        justifyContent : 'flex-start',
+    },
     headerItem: {
         minHeight: 30,
     },
@@ -318,14 +415,22 @@ const styles = StyleSheet.create({
         marginHorizontal : 0,
         marginVertical : 0,
     },
+    hasNotData : {
+        flexDirection : 'column',
+        width : '100%',
+        justifyContent : 'center',
+        alignItems : 'center'
+    }
 })
 TableComponent.popTypes = {
     containerProps : PropTypes.object,
      renderHeaderCell : PropTypes.func,
+     renderFilterCell : PropTypes.func,
      renderRow : PropTypes.func,
      renderCell : PropTypes.func,
      renderFooterCell : PropTypes.func,///la fonction appelée pour le rendu des entêtes du footer
      footerCellContainerProps : PropTypes.object,
+     filterCellContainerProps : PropTypes.object,
      footerContainerProps : PropTypes.object,
      showFilters : PropTypes.bool,
      showFooters : PropTypes.bool,
@@ -364,19 +469,6 @@ TableComponent.popTypes = {
     footerScrollViewProps : PropTypes.object,
 }
 
-const ScrollViewCustom = React.forwardRef((props,ref)=>{
-    const {testID,onScroll,style,handle} = props;
-    const context = {};
-    React.setRef(ref,context);
-    return <View 
-        {...props}
-        ref = {ref} 
-        style = {[styles.scrollViewCustom,style,{backgroundColor:theme.colors.primary}]}
-        onScroll={onScroll} 
-        testID={(testID||'RN_TableComponentScrollViewCustom')}
-    />
-});
-ScrollViewCustom.displayName = "TableComponentScrollViewCustom";
 
 TableComponent.displayName = "TableComponent";
 

package/src/components/TextField/index.js

@@ -244,12 +244,12 @@ const TextFieldComponent = React.forwardRef((componentProps,inputRef)=>{
     if(isFocused || error){
         placeholderColor = labelColor;
     }
+    let labelText = React.isValidElement(label,true)?React.getTextContent(label):"";
     const defaultBackgroundColor = theme.surfaceBackgroundColor;
     let backgroundColor = Colors.isValid(flattenStyle.backgroundColor)? flattenStyle.backgroundColor : defaultBackgroundColor;
-    if(backgroundColor ==='transparent' && dynamicBackgroundColor !== false){
+    if(labelText && (backgroundColor ==='transparent' && dynamicBackgroundColor !== false)){
         backgroundColor = defaultBackgroundColor;
     }
-    let labelText = React.isValidElement(label,true)?React.getTextContent(label):"";
     placeholder = defaultStr(placeholder,labelText);
     const parsedValue = canValueBeDecimal ? parseValueToDecimal(text):text;
     const formattedValue = formatValue(text);