@fto-consult/expo-ui 2.5.0 → 2.5.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fto-consult/expo-ui",
-  "version": "2.5.0",
+  "version": "2.5.1",
   "description": "Bibliothèque de composants UI Expo,react-native",
   "main": "index.js",
   "scripts": {

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

@@ -385,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 = [];
             
@@ -499,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() &&  {
@@ -557,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]}>
@@ -567,6 +567,7 @@ const DatagridFactory = (Factory)=>{
                                                     key = {field}
                                                     testID={testID+"_FooterItem_"+field}
                                                     {...footer}
+                                                    anchorProps = {{style:[theme.styles.ph1,theme.styles.mh05]}}
                                                 />
                                             })}
                                         </View>

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,{
@@ -784,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 (){
@@ -802,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});
         })
     }
    
@@ -899,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;
@@ -953,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,
@@ -1710,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/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/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

@@ -42,7 +42,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 +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);
@@ -85,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);
@@ -99,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>
          }
@@ -116,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 : {},
@@ -129,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;
@@ -142,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;
@@ -150,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%';
@@ -187,15 +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}
     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 +221,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 +248,7 @@ const TableComponent = React.forwardRef(({containerProps,isRowSelected,headerScr
                         }
                         if(!absoluteScrollViewRef.current) return;
                         absoluteScrollViewRef.current.setStyles({
-                            content : {height}
+                            content : {height,width}
                         });
                     }}
                     onLayout = {(args)=>{
@@ -248,6 +274,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 +313,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 +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,
     },
@@ -377,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,

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