@fto-consult/expo-ui 2.18.2 → 2.18.4

package/package.json

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

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

@@ -317,7 +317,7 @@ const DatagridFactory = (Factory)=>{
         }
         render (){
             let {
-                filters,
+                filters:customFilters,
                 filter,
                 actions,
                 sortable,
@@ -396,10 +396,6 @@ const DatagridFactory = (Factory)=>{
             let exportTableProps = this.getExportableProps();
     
             filter = defaultFunc(filter,x=>true);
-            filters = defaultVal(filters,true);
-            if(toggleFilters === false){
-                filters = false;
-            }
             let {showFilters,showFooters} = this.state;
             let max = this.getMaxSelectableRows();
             let restItems = [];
@@ -429,8 +425,7 @@ const DatagridFactory = (Factory)=>{
             this.renderedListHeight = Math.max(300,containerHeight - (this.hasScrollViewParent() ? 50:0));
             const isLoading = this.isLoading();
             const _progressBar = this.getProgressBar();
-            const pointerEvents = isLoading || _progressBar ? "none":"auto"; 
-            
+            const pointerEvents = this.getPointerEvents(); 
             const {
                 sortedColumns:sortColumns,
                 sortedColumnsLength,
@@ -486,7 +481,7 @@ const DatagridFactory = (Factory)=>{
                                 }}
                             />
                         </View> : null}
-                        {filters !== false ? <View>
+                        {this.isFilterable() && showFilters ? <View>
                             <FiltersAccordionComponent
                                 testID={testID+"_HeaderFilters"}
                                 isLoading = {isLoading}
@@ -516,7 +511,7 @@ const DatagridFactory = (Factory)=>{
                                         closeOnPress : false,
                                     } : null,
                                     hasFooterFields ? {
-                                        onPress :  ()=>{showFooters?this.hideFooter():this.showFooters()}    
+                                        onPress :  ()=>{this.toggleFooters(!showFooters)}    
                                         ,icon :  showFooters?'view-column':'view-module'
                                         ,text : (showFooters?'Masquer/Ligne des totaux':'Afficher/Ligne des totaux')
                                     }:null,

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

@@ -76,11 +76,11 @@ export default class CommonDatagridComponent extends AppComponent {
         });
         selectedRows = sRows;
         let sData = this.getSessionData()
-        sData.showFooters = defaultVal(sData.showFooters,true);
+        sData.showFooters = defaultVal(sData.showFooters,this.isTableData());
         sData.fixedTable = defaultBool(sData.fixedTable,false);
         extendObj(this.state, {
             data,
-            showFilters : defaultBool(props.showFilters,(sData.showFilter? true : this.isPivotDatagrid())),
+            showFilters : this.isFilterable() && defaultBool(props.showFilters,(sData.showFilter? true : this.isPivotDatagrid())) || false,
             showFooters : defaultBool(props.showFooters,(sData.showFooters? true : false)),
             fixedTable : sData.fixedTable
         });
@@ -116,6 +116,7 @@ export default class CommonDatagridComponent extends AppComponent {
             hasFoundSectionData : {value : {current: false}},
             sectionListHeaderFooters : {value : {}},
             sectionListDataSize : {value : {current : 0}},
+            enablePointerEventsRef : {value : {current:false}},
             sectionListColumnsSize : {value : {current:0}}, //la taille du nombre d'éléments de section dans les colonnes
         }) 
         this.isLoading = this.isLoading.bind(this);
@@ -874,9 +875,11 @@ export default class CommonDatagridComponent extends AppComponent {
         value = defaultDecimal(value);
         this.handlePagination(0, value, 1);
     };
-
+   isFilterable(){
+        return this.props.filterable !== false && this.props.filters !== false ? true : false;
+   }
    showFilters(){
-       if(!this._isMounted()) {
+       if(!this._isMounted() || !this.isFilterable()) {
             this.isUpdating = false;
             return;
        }
@@ -888,7 +891,7 @@ export default class CommonDatagridComponent extends AppComponent {
        })
    }
   hideFilters (){
-       if(!this._isMounted()) {
+       if(!this._isMounted() || !this.isFilterable()) {
           this.isUpdating = false;
           return;
        }
@@ -899,33 +902,42 @@ export default class CommonDatagridComponent extends AppComponent {
        })
    }
 
-
-    showFooters(){
+    toggleFooters(showOrHide){
+        if(typeof showOrHide !=='boolean' || this.state.showFooters === showOrHide) return;
         if(!this._isMounted()) {
             this.isUpdating = false;
             return;
         }
         if(this.isUpdating) return false;
         this.isUpdating = true;
-        this.setState( {showFooters:true},()=>{
-            this.isUpdating = false;
-            this.setSessionData({showFooters:true})
-        })
+        setTimeout(()=>{
+            if(this.hasSectionListData() && this.getSectionListDataSize()){
+                return this.setIsLoading(true,()=>{
+                    this.prepareData({data:this.INITIAL_STATE.data},(state)=>{
+                        this.setState({...state,showFooters:showOrHide},()=>{
+                            this.setIsLoading(false,false);
+                            this.isUpdating = false;
+                            this.setSessionData({showFooters:showOrHide});
+                        })
+                    })
+                },true)
+            }
+            this.setState( {showFooters:showOrHide},()=>{
+                this.isUpdating = false;
+                this.setSessionData({showFooters:showOrHide})
+            })
+        },200)
+    }
+    showFooters(){
+        return this.toggleFooters(true);
+    }
+    hideFooters (){
+        return this.toggleFooters(false);
     }
     setState(a,b){
         super.setState(a,b);
     }
-    hideFooter (){
-        if(!this._isMounted()) {
-             this.isUpdating = false;
-             return;
-        }
-        if(this.isUpdating) return false;
-        this.setState({showFooters:false},()=>{
-            this.isUpdating = false;
-            this.setSessionData({showFooters:false});
-        })
-    }
+    
    
    toggleFixedTableState(){
        const fixedTable = !this.state.fixedTable;
@@ -993,19 +1005,23 @@ export default class CommonDatagridComponent extends AppComponent {
             sectionListColumns[columnName] = {};
         }
         const {sectionListColumns:pSListColumns} = this.prepareColumns({sectionListColumns});
-        this.prepareData({data:this.INITIAL_STATE.data,sectionListColumns:pSListColumns},(state)=>{
-            this.setState({...state,sectionListColumns:pSListColumns},()=>{
-                this.setIsLoading(false);
+        this.setIsLoading(true,()=>{
+            this.prepareData({data:this.INITIAL_STATE.data,sectionListColumns:pSListColumns},(state)=>{
+                this.setState({...state,sectionListColumns:pSListColumns},()=>{
+                    this.setIsLoading(false,false);
+                });
             });
-        });
+        },true);
    }
    removeAllColumnsInSectionList(){
         const {sectionListColumns} = this.prepareColumns({sectionListColumns:{}});
-        this.prepareData({data:this.INITIAL_STATE.data,sectionListColumns},(state)=>{
-            this.setState({...state,sectionListColumns},()=>{
-                this.setIsLoading(false);
+        this.setIsLoading(true,()=>{
+            this.prepareData({data:this.INITIAL_STATE.data,sectionListColumns},(state)=>{
+                this.setState({...state,sectionListColumns},()=>{
+                    this.setIsLoading(false,false);
+                });
             });
-        });
+        },true);
    }
    /*** permet d'effectuer le rendu des colonnes groupable dans le menu item */
    renderSectionListMenu(){
@@ -1470,7 +1486,7 @@ export default class CommonDatagridComponent extends AppComponent {
             }
         }
         return <View testID={testID+"_ContentContainer"}  style={[theme.styles.w100,theme.styles,theme.styles.justifyContentCenter,theme.styles.pt1,theme.styles.pb1,theme.styles.alignItemsCenter,!cells && theme.styles.ml1,theme.styles.mr1,cStyle]}>
-            <Label testID={testID+"_Label"} splitText numberOfLines={3} textBold style={[theme.styles.w100,lStyle]}>{label}</Label>
+            <Label testID={testID+"_Label"} splitText numberOfLines={3} textBold style={[theme.styles.w100,{color:theme.colors.primaryOnSurface,fontSize:16},lStyle]}>{label}</Label>
             {cells ? <View style = {[theme.styles.w100,theme.styles.row,theme.styles.alignItemsFlexStart]}
             >{cells}</View> : null}
         </View>
@@ -1627,6 +1643,22 @@ export default class CommonDatagridComponent extends AppComponent {
     }
     beforeFetchData(){}
     fetchData({fetchOptions}){
+        if(typeof this.props.fetchData =='function'){
+            const r = this.props.fetchData(fetchOptions);
+            if(isPromise(r)){
+                return r.then((data)=>{
+                    if(isObjOrArray(data)){
+                        this.setIsLoading(true,()=>{
+                            this.prepareData({data},(state)=>{
+                                this.setState(state,()=>{
+                                    this.setIsLoading(false,false);
+                                })
+                            })
+                        },true)
+                    }
+                })
+            }
+        }
         return Promise.resolve(this.state.data);
     }
     /****  Filtre le tableau */
@@ -1728,6 +1760,9 @@ export default class CommonDatagridComponent extends AppComponent {
             if(isFunction(cb)){
                 cb(data);
             }
+            if(typeof this.props.onRefreshDatagrid ==='function'){
+                this.props.onRefreshDatagrid({context:this,force});
+            }
         })
     }
     onResizePage(){}
@@ -1782,7 +1817,20 @@ export default class CommonDatagridComponent extends AppComponent {
     canSetIsLoading(){
         return isObj(this.progressBarRef.current) && typeof this.progressBarRef.current.setIsLoading =='function' ? true : false;
     }
-    setIsLoading(loading,cb){
+    /***
+     * @param {boolean} loading
+     * @param {function | boolean} cb | enablePointerEvents
+     * @param {boolean|function} enablePointerEvents
+     */
+    setIsLoading(loading,cb,enablePointerEvents){
+        if(typeof cb =='boolean'){
+            const t = enablePointerEvents;
+            enablePointerEvents = cb;
+            cb = t;
+        }
+        if(typeof enablePointerEvents =='boolean'){
+            this.enablePointerEventsRef.current = enablePointerEvents;
+        }
         if(this.canSetIsLoading() && typeof loading =='boolean'){
             return this.progressBarRef.current.setIsLoading(loading,()=>{
                 if(typeof cb =='function'){
@@ -1839,6 +1887,13 @@ export default class CommonDatagridComponent extends AppComponent {
             layout,
         }
     }
+    getPointerEvents(){
+        if(this.props.isLoading){
+            return "none";
+        }
+        if(this.enablePointerEventsRef.current) return true;
+        return this.isLoading()? "none":"auto";
+    }
     updateLayout(p){
         this.measureLayout(state=>{
             if(isObj(state)){
@@ -1859,9 +1914,13 @@ export default class CommonDatagridComponent extends AppComponent {
             }
             return false;
         }
-        this.prepareData({...nextProps,force:true},(state)=>{
-            this.setState(state)
-        });
+        this.setIsLoading(true,()=>{
+            this.prepareData({...nextProps,force:true},(state)=>{
+                this.setState(state,()=>{
+                    this.setIsLoading(false,false);
+                })
+            });
+        },true);
     }
     getDefaultPreloader(props){
         return CommonDatagridComponent.getDefaultPreloader();
@@ -2174,6 +2233,7 @@ CommonDatagridComponent.propTypes = {
         PropTypes.object,
         PropTypes.func,
     ]),
+    filterable : PropTypes.bool, //si le composant peut être filtrable
     /*** si les filtres de données seront convertis au format SQL avant d'effectuer la requête distante */
     convertFiltersToSQL : PropTypes.bool,
     isLoading : PropTypes.bool,///si les données sont en train d'être chargées
@@ -2297,6 +2357,7 @@ CommonDatagridComponent.propTypes = {
     ///pour l'affichage où non des filtres
     toggleFilters : PropTypes.bool,
     desktop: PropTypes.bool,
+    onRefreshDatagrid : PropTypes.func,//lorsque le datagrid est actualisé, rafraichir
     ///les props à apppliquer à l'accordion
     /**** l'accordion peut rendre un objet ou un objet react ou null 
      * si c'est un objet, alors il peut être de la forme :  

package/src/components/Datagrid/RenderType.js

@@ -18,7 +18,7 @@ const DatagridRenderTypeComponent = (props)=>{
     let type = defaultStr(get(typeKey),isDesk? "fixed":'accordion').toLowerCase().trim();
     const rTypes = [
         {...getActiveProps(type,'accordion'),tooltip:"Les éléments de liste s'affichent de manière optimisé pour téléphone mobile",code:'accordion',icon:accordionIcon,label:'Mobile',labelText:'environnement optimisé pour téléphone mobile'},
-        {...getActiveProps(type,'table'),tooltip:"Les éléments de listes s'affichent dans un tableau rééel",code:'table',icon:tableIcon,label:'Tableau réel avec pagination'}
+        //{...getActiveProps(type,'table'),tooltip:"Les éléments de listes s'affichent dans un tableau rééel",code:'table',icon:tableIcon,label:'Tableau réel avec pagination'}
     ]  
     Object.map(rendersTypes,(t,i)=>{
         if(isObj(t)){

package/src/components/Datagrid/RenderTypes/index.web.js

@@ -1,6 +1,6 @@
 import { fixedIcon,virtualIcon } from "./utils"
 export default {
-    fixed : {
+    fixed : false && {
         code:'fixed',icon:fixedIcon,
         label:'Tableau virtuel optimisé',
         desktop:true,

package/src/components/Datagrid/SWRDatagrid.js

@@ -84,6 +84,7 @@ const SWRDatagridComponent = React.forwardRef((props,ref)=>{
         testID,
         autoSort,
         handleQueryLimit,
+        onFetchData,
         ...rest
     } = props;
     rest = defaultObj(rest);
@@ -166,6 +167,9 @@ const SWRDatagridComponent = React.forwardRef((props,ref)=>{
                  */
                 dataRef.current = data;
                 hasResultRef.current = true;
+                if(onFetchData && typeof onFetchData =='function'){
+                    onFetchData({allData:data,total,data,context:innerRef.current})
+                }
                 return data;
             };
             hasResultRef.current = false;

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

@@ -82,10 +82,6 @@ const DatagridFactory = (Factory)=>{
             }
             return null;
         }
-        updateLayout(e){
-            if(this.state.fixedTable === false) return;
-            return super.updateLayout(e);
-        }
         scrollToEnd(){
             if(!this.canScrollTo()) return;
             if(this.listRef.current && this.listRef.current.scrollToEnd){
@@ -163,17 +159,15 @@ const DatagridFactory = (Factory)=>{
             const {visibleColumns} = this.preparedColumns;
             const hasFooterFields = this.hasFooterFields();
             const {columnsWidths:widths,showFilters,showFooters} = this.state;
-            let isAllRowsSelected = this.isAllRowsSelected();
             const isLoading = this.isLoading();
             let _progressBar = this.getProgressBar();
-            const pointerEvents = isLoading? "none":"auto"; 
+            const pointerEvents = this.getPointerEvents(); 
 
-            let restItems = [];
+            let restItems = [...this.renderCustomMenu()];
             let max = this.getMaxSelectableRows();
             if(selectableMultiple && max){
                 max = max.formatNumber();
                 restItems = [
-                    ...this.renderCustomMenu(),
                     ...(selectableMultiple ? [{
                         label : "Sélectionner "+max.formatNumber(),
                         icon : "select-all",
@@ -190,7 +184,17 @@ const DatagridFactory = (Factory)=>{
                     }] : [])
                 ]
             }   
-            const {width,height} = Dimensions.get("window");
+            const {width,height:winheight} = Dimensions.get("window");
+            const {layout} = this.state;
+            let maxHeight = winheight-100;
+            if(layout && typeof layout.windowHeight =='number' && layout.windowHeight){
+                const diff = winheight - Math.max(defaultNumber(layout.y,layout.top),150);
+                if(winheight<=300){
+                    maxHeight = 300;
+                } else {
+                    maxHeight = diff;
+                }
+            }
             const rPagination = showPagination ? <View style={[styles.paginationContainer]}>
                 <ScrollView horizontal showsHorizontalScrollIndicator={!isLoading} style={styles.paginationContainerStyle} contentContainerStyle={styles.minW100}>
                     <View style={[styles.paginationContent]}>
@@ -202,7 +206,7 @@ const DatagridFactory = (Factory)=>{
                             <Button normal style={[styles.paginationItem]} icon = {"refresh"} onPress = {this.refresh.bind(this)}>
                                 Rafraichir
                             </Button>
-                            {filters !== false && (
+                            {this.isFilterable() && (
                                 <Button
                                     normal
                                     style={styles.paginationItem}
@@ -215,7 +219,7 @@ const DatagridFactory = (Factory)=>{
                             {hasFooterFields ? <Button
                                 normal
                                 style={styles.paginationItem}
-                                onPress =  {()=>{showFooters?this.hideFooter():this.showFooters()} }   
+                                onPress =  {()=>{this.toggleFooters(!showFooters)} }   
                                 icon = {showFooters?'view-column':'view-module'}
                             >   
                                     {showFooters?'Masquer/Ligne des totaux':'Afficher/Ligne des totaux'}
@@ -265,13 +269,13 @@ const DatagridFactory = (Factory)=>{
                                     closeOnPress : false,
                                     items : visibleColumns
                                 },
-                                isMobile && filters !== false?{
+                                isMobile && this.isFilterable() ?{
                                     onPress :  ()=>{showFilters?this.hideFilters():this.showFilters()}    
                                     ,icon :  showFilters?'eye-off':'eye'
                                     ,text : (showFilters?'Masquer/Filtres':'Afficher/Filtres')
                                 } : null,
                                 isMobile && hasFooterFields?{
-                                    onPress :  ()=>{showFooters?this.hideFooter():this.showFooters()}    
+                                    onPress :  ()=>{this.toggleFooters(!showFooters)}    
                                     ,icon :  showFooters?'view-column':'view-module'
                                     ,text : (showFooters?'Masquer/Ligne des totaux':'Afficher/Ligne des totaux')
                                 } : null,
@@ -308,7 +312,7 @@ const DatagridFactory = (Factory)=>{
                     </View>
                 </ScrollView>
             </View> : null;
-            return <View style={[styles.container,{maxHeight:height-100}]} pointerEvents={pointerEvents}>
+            return <View style={[styles.container,{maxHeight}]} pointerEvents={pointerEvents}>
                 <View ref={this.layoutRef}>
                     {this.props.showActions !== false ? <DatagridActions 
                         pointerEvents = {pointerEvents}
@@ -324,6 +328,12 @@ const DatagridFactory = (Factory)=>{
                 <Table
                     ref = {this.listRef}
                     {...rest}
+                    onLayout = {(args)=>{
+                        if(rest.onLayout){
+                            rest.onLayout(args);
+                        }
+                        this.updateLayout(args);
+                    }}
                     getItemType = {this.getFlashListItemType.bind(this)}
                     renderItem = {this.renderFlashListItem.bind(this)}
                     hasFooters = {hasFooterFields}

package/src/components/List/FlashList.js

@@ -12,8 +12,8 @@ const FlashListComponent = React.forwardRef((props,ref)=>{
                 ListHeaderComponent={() => (
                     <View testID={(testID||'RN_FlashListComponent')+"_Header"}>{props.children}</View>
                 )}
-                disableAutoLayout
-                disableHorizontalListHeightMeasurement = {props.horizontal?undefined : true}
+                //disableAutoLayout
+                //disableHorizontalListHeightMeasurement = {props.horizontal?undefined : true}
                 {...props}
                 contentContainerStyle = {undefined}
                 style = {undefined}

package/src/components/Table/index.js

@@ -250,9 +250,13 @@ const TableComponent = React.forwardRef(({containerProps,renderEmpty,renderItem,
                         absoluteScrollViewRef.current.checkVisibility(nativeEvent);
                     }
                 })} 
-                onLayout={({nativeEvent:{layout}}) => {
+                onLayout={(args) => {
+                    const {nativeEvent:{layout}} = args;
                     scrollViewLayoutRef.current.layout = layout;
                     toggleAbsoluteScrollVisible();
+                    if(typeof props.onContainerLayout =='function'){
+                        props.onContainerLayout(args);
+                    }
                 }}
                 ref={scrollViewRef} 
                 testID={testID+"_ScrollView"}