@fto-consult/expo-ui 2.5.0 → 2.5.2

package/src/components/DragResize/DragResizeContainer.js

@@ -0,0 +1,52 @@
+// 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.
+/***Fork of https://github.com/CaptainOmega/react-native-drag-resize components */
+import React, {PureComponent} from 'react';
+import {
+  View,
+} from 'react-native';
+import PropTypes from 'prop-types';
+
+/**
+ * Drag resize container.
+ * Allow calculate limitation by container size.
+ */
+export class DragResizeContainer extends PureComponent {
+
+  render() {
+    const {
+      style,
+      onInit,
+      children,
+    } = this.props;
+
+    return (
+      <View
+        ref={view => {
+          this.canvas = view;
+        }}
+        style={style}
+        onLayout={() => {
+          this.canvas.measure(
+            (fx, fy, w, h, x, y) => {
+              onInit({
+                x: 0,
+                y: 0,
+                w,
+                h,
+              });
+            }
+          );
+        }}
+      >
+        {children}
+      </View>
+    );
+  }
+};
+
+DragResizeContainer.propTypes = {
+  onInit: PropTypes.func.isRequired,
+  style: PropTypes.object,
+};

package/src/components/DragResize/index.js

@@ -0,0 +1,42 @@
+// 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.
+/***Fork of https://github.com/CaptainOmega/react-native-drag-resize components */
+import {defaultNumber} from "$utils";
+import React from "$react";
+  export default function DragResizeComponent ({x,y,width,height,onResize,...props}){
+     x = defaultNumber(x); y = defaultNumber(y);
+     const [resize, setResize] = React.useState([x, y]);
+     return <DragResizeBlock
+        w = {width}
+        h = {height}
+        {...props}
+        x={resize[0]}
+        y={resize[1]}
+        onResize={(value) => setResize(value)}
+     />
+  }
+
+  
+export {
+  DragResizeBlock,
+  AXIS_X,
+  AXIS_Y,
+  AXIS_ALL,
+} from './DragResizeBlock';
+import {DragResizeBlock} from "./DragResizeBlock"
+export {
+  DragResizeContainer,
+} from './DragResizeContainer';
+
+export {
+  CONNECTOR_TOP_LEFT,
+  CONNECTOR_TOP_MIDDLE,
+  CONNECTOR_TOP_RIGHT,
+  CONNECTOR_MIDDLE_RIGHT,
+  CONNECTOR_BOTTOM_RIGHT,
+  CONNECTOR_BOTTOM_MIDDLE,
+  CONNECTOR_BOTTOM_LEFT,
+  CONNECTOR_MIDDLE_LEFT,
+  CONNECTOR_CENTER,
+} from './Connector';

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/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();
@@ -325,7 +333,6 @@ export default class Filter extends AppComponent {
           break;
         case "$week":      
             diff = DateLib.currentWeekDaysLimits(currentDate);
-            console.log(diff," is diffffff");
           break;
         case "$prevWeek":      
           diff = DateLib.previousWeekDaysLimits(currentDate)
@@ -383,8 +390,8 @@ export default class Filter extends AppComponent {
       field,
       style,
       anchorProps,
-      mode,
-      inputProps,
+      //mode,
+      //inputProps,
       moreOptions,
       isLoading,
       searchIconTooltip,
@@ -472,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 
@@ -557,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/Resizable/index.js

@@ -0,0 +1,7 @@
+// 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.
+
+export default function ResizableComponent({children}){
+    return children;
+}

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

@@ -0,0 +1,33 @@
+// 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 { Resizable } from 'react-resizable';
+import React from "$react";
+import {defaultObj} from "$utils";
+import PropTypes from "prop-types";
+
+const ResizableComponent = React.forwardRef(({width,onResize,height,...props},ref)=>{
+    const [state,setState] = React.useState({
+        width,
+        height,
+    });
+    return <Resizable {...props} height={state.height} width={state.width} onResize={(event, {element, size, handle}) => {
+        setState({width: size.width, height: size.height});
+        if(onResize){
+            onResize({...size,element,handle,event});
+        }
+      }}>
+
+    </Resizable>
+});
+
+ResizableComponent.displayName ="ResizableComponent";
+
+export default ResizableComponent;
+
+ResizableComponent.propTypes = {
+    ...defaultObj(Resizable.propTypes),
+    width : PropTypes.oneOfType([PropTypes.number,PropTypes.string]),
+    height : PropTypes.oneOfType([PropTypes.number,PropTypes.string])
+}

package/src/components/Table/AbsoluteScrollView.js

@@ -4,31 +4,59 @@
 
 import { ScrollView,StyleSheet,View,useWindowDimensions} from "react-native";
 import React from "$react";
-import {defaultStr,defaultObj,isObj} from "$utils";
+import {defaultStr,defaultObj,isObj,isNumber} from "$utils";
 import Portal from "$ecomponents/Portal";
+import {isMobileNative,isTouchDevice} from "$platform";
 
-const AbsoluteScrollView = React.forwardRef(({testID,contentProps,containerProps,...props},ref)=>{
+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 [styles,setStyles] = React.useState({});
+    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 : (s)=>{
-            if(isObj(s)){
-                setStyles({...styles,...s});
+        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}]}>
+        {<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}
@@ -42,7 +70,7 @@ const AbsoluteScrollView = React.forwardRef(({testID,contentProps,containerProps
                     style={[mainStyles.content,contentProps.style,styles.content]}
                 />
             </ScrollView>
-        </View>
+        </View>}
     </Portal>
 });
 

package/src/components/Table/index.js

@@ -10,6 +10,7 @@ import { getRowStyle } from "$ecomponents/Datagrid/utils";
 import {isMobileNative} from "$cplatform";
 import theme from "$theme";
 import AbsoluteScrollView from "./AbsoluteScrollView";
+import DragResize,{CONNECTOR_MIDDLE_RIGHT} from "$ecomponents/DragResize";
 
 const isSCrollingRef = React.createRef();
 const scrollLists = (opts,refs)=>{
@@ -42,7 +43,7 @@ const getOnScrollCb = (refs,pos,cb2)=>{
     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);
@@ -53,13 +54,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);
@@ -68,7 +70,7 @@ const TableComponent = React.forwardRef(({containerProps,isRowSelected,headerScr
           type = defaultStr(type,"text").toLowerCase().trim();
           colProps = defaultObj(colProps);
           width = defaultDecimal(widths[columnField],width,DEFAULT_COLUMN_WIDTH);
-          const style = [colProps.style,{width}];
+          const style = StyleSheet.flatten([colProps.style,{width}]);
           const colArgs = {width,type,style,columnDef,containerProps:{},columnField,index:columnIndex,columnIndex};
           let content = typeof renderHeaderCell =='function'? renderHeaderCell(colArgs) : defaultVal(columnDef.text,columnDef.label,columnField);
           let hContainerProps = {};
@@ -82,9 +84,16 @@ const TableComponent = React.forwardRef(({containerProps,isRowSelected,headerScr
             console.error(content," is not valid element of header ",columnDef," it could not be render on table");
             return null;
           }
+        
         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>
+            <Label style={[theme.styles.w100,theme.styles.h100]} 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);
@@ -99,7 +108,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>
          }
@@ -116,7 +125,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 : {},
@@ -129,11 +138,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;
@@ -142,6 +153,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;
@@ -150,7 +164,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%';
@@ -187,15 +201,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}
     const absoluteScrollViewRef = React.useRef(null);
-    return <View testID= {testID+"_Container"} {...containerProps} style={[styles.container,{alignItems:'stretch'},containerProps.style]}>
-            <View autoHeight style={[cStyle]} testID={testID+"_Headers_ScrollViewContainer"}>
+    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} 
@@ -205,12 +223,22 @@ 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}  
+            </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)=>{
-            })} ref={scrollViewRef}  testID={testID+"_ScrollView"}>    
+                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}
@@ -222,7 +250,7 @@ const TableComponent = React.forwardRef(({containerProps,isRowSelected,headerScr
                         }
                         if(!absoluteScrollViewRef.current) return;
                         absoluteScrollViewRef.current.setStyles({
-                            content : {height}
+                            content : {height,width}
                         });
                     }}
                     onLayout = {(args)=>{
@@ -248,6 +276,7 @@ const TableComponent = React.forwardRef(({containerProps,isRowSelected,headerScr
                     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){
@@ -286,18 +315,20 @@ const TableComponent = React.forwardRef(({containerProps,isRowSelected,headerScr
                         </View>;
                     }}
                 />
-                <AbsoluteScrollView
-                    ref={absoluteScrollViewRef}
-                    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>
+                    <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>
 });
 
@@ -358,6 +389,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,
     },
@@ -377,14 +417,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,

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);