@fto-consult/expo-ui 8.74.0 → 8.75.0

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

@@ -46,6 +46,7 @@ import ActivityIndicator from "$ecomponents/ActivityIndicator";
 import {createTableHeader,fields as pdfFields,pageHeaderMargin,sprintf as pdfSprintf} from "$cpdf";
 import {isWeb,isMobileNative} from "$cplatform";
 import { createPDF,getFields as getPdfFields } from '$expo-ui/pdf';
+import actions from '$cactions';
 
 export const TIMEOUT = 100;
 
@@ -178,13 +179,11 @@ export default class CommonDatagridComponent extends AppComponent {
             exportToExcelIsAllowed,
             renderSectionListIsAllowed,
             checkPerms : customCheckPerms,
+            tableName,
+            table,
+            dataSource,
             ...rest
         } = props;
-        if(this.bindResizeEvents()){
-            extendObj(this._events,{
-                SET_DATAGRID_QUERY_LIMIT : this.onSetQueryLimit.bind(this),
-            });
-        }
         if(this.props.resetSessionData === true){
             this.resetSessionData();
         }
@@ -230,8 +229,11 @@ export default class CommonDatagridComponent extends AppComponent {
         Object.map(displayTypes,(t,i)=>{
             if(t.isChart && !perm) return;
             allowedDisplayTypes[i] = Object.clone(t);
-        })
+        });
+        dataSource = CommonDatagridComponent.getDataSource({...props,dataSource,context:this});
+        tableName = defaultStr(tableName,table).toUpperCase();
         Object.defineProperties(this,{
+            tableName : {value:tableName,override:false,writable:false},
             layoutRef : {
                 value : React.createRef(null),
             },
@@ -347,6 +349,10 @@ export default class CommonDatagridComponent extends AppComponent {
         this.setSessionData({selectedDataSources:this.currentDataSources});
         this.persistDisplayType(this.state.displayType);
     }
+    /*** lorsque la données est modifiée */
+    onUpsertData =(arg) =>{
+        return this.refresh({force:true,renderProgressBar:false});
+    }
     /*** si l'on peut récuperer à distance, les colonnes seulement visibles */
     canFetchOnlyVisibleColumns(){
         return this.isTableData() && this.props.canFetchOnlyVisibleColumns && this.isFilterable() && true || false;
@@ -3595,12 +3601,38 @@ export default class CommonDatagridComponent extends AppComponent {
     }
     componentDidMount(){
         super.componentDidMount();
+        extendObj(this._events,{
+            SET_DATAGRID_QUERY_LIMIT : this.onSetQueryLimit.bind(this),
+        });
         APP.on(APP.EVENTS.SET_DATAGRID_QUERY_LIMIT,this._events.SET_DATAGRID_QUERY_LIMIT);
+        if(isNonNullString(this.tableName)){
+            extendObj(this._events,{
+                onUpsertData : this.onUpsertData.bind(this),
+            });
+            this.onUpsertDataSubscription = APP.on(actions.upsert(this.tableName),this._events.onUpsertData);
+            this.onRemoteDataSubscription = APP.on(actions.remove(this.tableName),this._events.onUpsertData);
+        }
+        if(isNonNullString(this.tableName)){
+            this.fetchData({force:true});
+        }
     }
     componentWillUnmount(){
         super.componentWillUnmount();
+        if(isNonNullString(this.tableName)){
+            if(typeof this.onUpsertDataSubscription?.remove =="function"){
+                this.onUpsertDataSubscription.remove();
+            }
+            if(this._events.onUpsertData){
+                APP.off(actions.upsert(this.tableName),this._events.onUpsertData);
+                APP.off(actions.remove(this.tableName),this._events.onUpsertData);
+            }
+            if(typeof this.onRemoteDataSubscription?.remove =="function"){
+                this.onRemoteDataSubscription.remove();
+            }
+        }
         APP.off(APP.EVENTS.SET_DATAGRID_QUERY_LIMIT,this._events.SET_DATAGRID_QUERY_LIMIT);
         this.clearEvents();
+        this.setSelectedRows();
     }
 
     /*** s'il s'agit d'un datagrid virtualisé, ie à utiliser le composant react-base-table */
@@ -3731,7 +3763,7 @@ export default class CommonDatagridComponent extends AppComponent {
         return "auto";
     }
     isTableData(){
-        return false;
+        return isNonNullString(this.tableName);
     }
     UNSAFE_componentWillReceiveProps(nextProps){
         if(false && !React.areEquals(this.props.columns,nextProps.columns)){
@@ -4033,7 +4065,12 @@ CommonDatagridComponent.propTypes = {
     /*** si le pied de page sera affiché */
     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,
+    data : PropTypes.oneOfType([
+        PropTypes.func,
+        PropTypes.string,
+        PropTypes.object,
+        PropTypes.array,
+    ]),
     /****
         la prop column def contient dans la propriété datagrid, la prop maxItemsToRender, le nombre d'items maximal à rendre pour le composant de type select table data multiple
         la prop column def de la colonne de type number, qui contient dans la prop datagrid, la fonction render doit retourner un nombre pour otenir les valeur léie à ladite colonne

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

@@ -1,8 +1,4 @@
 export {default} from "./Common";
 
-export {default as TableData} from "./TableData";
-
-export {default  as factory} from "./factory";
-
 export {default as session} from "./session";
 export * from "./utils";

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

@@ -1,4 +1,4 @@
-import {TableData} from "../Common";
+import Datagrid from "../Common";
 import {defaultObj,defaultArray,defaultStr,defaultNumber} from "$cutils";
 import View from "$ecomponents/View";
 import { StyleSheet,Dimensions,Pressable } from "react-native";
@@ -9,7 +9,7 @@ import { chartTypes } from "../Common/Common";
 import theme from "$theme";
 import FiltersAccordionComponent from "../Accordion/Filters";
 
-export default class DatagridDashboard extends TableData {
+export default class DatagridDashboard extends Datagrid {
     constructor(props){
         super(props);
         Object.map(this.displayTypes,(t,i)=>{
@@ -121,10 +121,9 @@ export default class DatagridDashboard extends TableData {
 DatagridDashboard.displayName = "DatagridDashboardComponent";
 
 DatagridDashboard.propTypes = {
-    ...defaultObj(TableData.propTypes),
+    ...defaultObj(Datagrid.propTypes),
 }
 
-
 const styles = StyleSheet.create({
     paginationContainer : {
         flexDirection : 'row',

package/src/components/Datagrid/IndexComponent.js

@@ -2,8 +2,8 @@
 // Use of this source code is governed by a BSD-style
 // license that can be found in the LICENSE file.
 
-import Accordion,{ TableData as TableDataAccordion} from "./Accordion";
-import Table,{TableData as DatagridTableData} from "./Table";
+import Accordion from "./Accordion";
+import Table from "./Table";
 import {isDesktopMedia,isMobileMedia} from "$cplatform/dimensions";
 import {isFunction,defaultVal,defaultStr} from "$cutils";
 import React from "$react";
@@ -13,18 +13,17 @@ import useExpoUI from "$econtext/hooks";
 
 const DatagridMainComponent = React.forwardRef((props,ref)=>{
     const isDesk = isDesktopMedia();
-    const isMob = defaultStr(isMobileMedia());
+    const isMob = isMobileMedia();
     const {components:{datagrid}} = useExpoUI();
-    const isTableData = typeof props.isTableData =='boolean'? props.isTableData  : defaultStr(props.tableName,props.table).trim() || typeof props.fetchData ==='function'?true : false;
     const rType = defaultStr(getRenderType()).toLowerCase().trim();
     const renderType = defaultStr(rType && ['table','accordion'].includes(rType) ? rType : "",isDesk? "table":'accordion').trim().toLowerCase();
     const canRenderAccordion = (isFunction(props.accordion) || (isObj(props.accordionProps) && isFunction(props.accordionProps.accordion)) || props.accordion === true);
     const Component = React.useMemo(()=>{
         if((renderType == 'accordion' || (renderType !=='table' && isMob)) && canRenderAccordion){
-            return isTableData ? TableDataAccordion : Accordion;
+            return Accordion;
         }
-        return isTableData ? DatagridTableData : Table;
-    },[isTableData,renderType,canRenderAccordion,isMob])
+        return Table;
+    },[renderType,canRenderAccordion,isMob]);
     return <Component
         {...datagrid}
         {...props}
@@ -37,6 +36,6 @@ export default DatagridMainComponent;
 DatagridMainComponent.displayName = "DatagridMainComponent";
 
 DatagridMainComponent.propTypes = {
-    ...DatagridTableData.propTypes
+    ...Table.propTypes
 }
-DatagridMainComponent.LinesProgressBar = DatagridMainComponent.LineProgressBar = DatagridTableData.LineProgressBar;
+DatagridMainComponent.LinesProgressBar = DatagridMainComponent.LineProgressBar = Table.LineProgressBar;