@fto-consult/expo-ui 2.28.1 → 2.29.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fto-consult/expo-ui",
-  "version": "2.28.1",
+  "version": "2.29.0",
   "description": "Bibliothèque de composants UI Expo,react-native",
   "main": "index.js",
   "scripts": {
@@ -61,7 +61,7 @@
     "@emotion/native": "^11.10.0",
     "@expo/html-elements": "^0.2.0",
     "@expo/vector-icons": "^13.0.0",
-    "@fto-consult/common": "^1.25.2",
+    "@fto-consult/common": "^1.25.4",
     "@gorhom/portal": "^1.0.14",
     "@react-native-async-storage/async-storage": "~1.17.3",
     "@react-native-community/datetimepicker": "6.5.2",

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

@@ -178,10 +178,11 @@ const DatagridFactory = (Factory)=>{
                 const rowStyle = style ? [style] : [];
                 const rowProps = {};
                 const it = this.renderFlashListItem({...args,rowProps,rowStyle});
-                if(React.isValidElement(it)){
-                    return 
+                if(!React.isValidElement(it)){
+                    return null;
                 }
-                return <View testID={"RNDatagridAccordionSectionHeader"} {...rowProps} style={[rowProps.style,rowStyle]}>
+                const rowKey = defaultVal(args.rowIndex,args.index,args.rowCounterIndex);
+                return <View {...rowProps} testID={defaultStr(rowProps.testID,"RNDatagridAccordionSectionHeader")+rowKey}  style={[theme.styles.w100,theme.styles.justifyContentCenter,theme.styles.alignItemsCenter,rowProps.style,rowStyle]}>
                     {it}
                 </View>;
             }
@@ -258,19 +259,6 @@ const DatagridFactory = (Factory)=>{
         getMaxSelectedRows(){
             return isMobileMedia()? 30 : 50;
         }
-        showFilters(){
-            if(!this._isMounted()) {
-                 this.isUpdating = false;
-                 return;
-            }
-            this.setSessionData({showFilters:true});
-        }
-        hideFilters (){
-            if(!this._isMounted()) {
-               return;
-            }
-            this.setSessionData({showFilters:false});
-        } 
         toggleFilterColumnVisibility(field,visible){
             if(!isNonNullString(field)) return;
             let filteredColumns = {...this.state.filteredColumns};
@@ -485,7 +473,7 @@ const DatagridFactory = (Factory)=>{
                                 }}
                             />
                         </View> : null}
-                        {this.isFilterable() && showFilters ? <View>
+                        {this.isFilterable() ? <View>
                             <FiltersAccordionComponent
                                 testID={testID+"_HeaderFilters"}
                                 isLoading = {isLoading}
@@ -498,7 +486,9 @@ const DatagridFactory = (Factory)=>{
                             />
                         </View> : null}
                         {this.renderSectionListMenu()}
-                        <View testID={testID+"_HeaderPagination"} style = {styles.paginationItem}>
+                        {this.renderDisplayTypes()}
+                        {this.renderAggregatorFunctionsMenu()}
+                        <View pointerEvents={pointerEvents} testID={testID+"_HeaderPagination"} style = {styles.paginationItem}>
                             <Menu 
                                 testID={testID+"_HeaderMenus"}
                                 anchor={(props)=>(<Icon {...props} icon={MENU_ICON}/>)} 
@@ -519,7 +509,6 @@ const DatagridFactory = (Factory)=>{
                                         ,icon :  showFooters?'view-column':'view-module'
                                         ,text : (showFooters?'Masquer les totaux':'Afficher les totaux')
                                     }:null,
-                                    ...this.getAggregatorFunctionsMenuItems(),
                                     ...this.renderCustomMenu(),
                                     ...restItems,
                                     !canRenderChart && this.canScrollTo() &&  {
@@ -576,7 +565,7 @@ const DatagridFactory = (Factory)=>{
                         {datagridHeader}
                         {_progressBar}
                         {!canRenderChart && showFooters ? (
-                            <View  testID={testID+"_FooterContainer"} pointerEvents={pointerEvents} style={[{justifyContent:'center'}]}>
+                            <View  testID={testID+"_FooterContainer"} pointerEvents={pointerEvents} style={[theme.styles.justifyContentCenter,theme.styles.pv1]}>
                                 <View  testID={testID+"_FooterContentContainer"} style={[styles.footersContainer]}>
                                     <ScrollView testID={testID+"_FooterScrollView"} horizontal contentContainerStyle={[styles.contentContainerStyle]}>
                                         <View testID={testID+"_FooterContent"} style={[styles.table]}>

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

@@ -1698,6 +1698,7 @@ export default class CommonDatagridComponent extends AppComponent {
             chartProps[settingKey] = defaultObj(chartProps[settingKey]);
             chartProps[settingKey][key] = config[key];
         });
+        
         const chartOptions = {
             ...chartProps,
             title :extendObj(true,{}, {
@@ -1738,7 +1739,10 @@ export default class CommonDatagridComponent extends AppComponent {
             if(typeof value =="number") return value.formatNumber();
             return value;
         }
-        chartOptions.chart.id = this.chartIdPrefix+defaultStr(chartType.key,"no-key")
+        chartOptions.chart.id = this.chartIdPrefix+"-"+defaultStr(chartType.key,"no-key");
+        if(!chartType.isDonut){
+            delete chartOptions.labels;
+        }
         return <Chart
             options = {chartOptions}
             key = {chartOptions.chart.id}
@@ -2127,7 +2131,7 @@ export default class CommonDatagridComponent extends AppComponent {
                 if(hasSectionColumns){
                     let sHeader = this.getSectionListHeader({data:d,columnsLength : sectionListColumnsSize,fieldsSize:sectionListColumnsSize,sectionListColumnsLength:sectionListColumnsSize,sectionListColumnsSize,allData:data,rowData:d,index:i,rowIndex,context:this,columns,fields:columns});
                     if(sHeader === false) return;//on omet la donnée si la fonction de récupération de son header retourne false
-                    if(!isNonNullString(sHeader)){
+                    if(!isNonNullString(sHeader) || sHeader.toLowerCase().trim() =="undefined"){
                         if(this.props.ignoreEmptySectionListHeader !== false){
                             sHeader = this.emptySectionListHeaderValue;
                         } else return;
@@ -2233,13 +2237,15 @@ export default class CommonDatagridComponent extends AppComponent {
         const lStyle = typeof this.props.getSectionListHeaderLabelStyle =='function' ? this.props.getSectionListHeaderLabelStyle(args) : null;
         
         rowProps = defaultObj(rowProps);
-        const testID  = rowProps.testID = defaultStr(args.testID,"RN_DatagridSectionListHeader")+"_"+defaultVal(args.rowIndex,args.index)
+        const rowKey = defaultVal(args.rowIndex,args.index,args.rowCounterIndex);
+        const testID  = rowProps.testID = defaultStr(args.testID,"RN_DatagridSectionListHeader")+"_"+rowKey;
         if(Array.isArray(rowStyle)){
             if(style){
                 rowStyle.push(style);
             }
         }
         let cells = null;
+        const isA = this.isAccordion();
         if(this.canShowFooters() && isObj(this.sectionListHeaderFooters[key])){
             const {visibleColumnsNames,widths} = defaultObj(this.preparedColumns);
             if(isObj(visibleColumnsNames) &&isObj(widths)){
@@ -2249,18 +2255,16 @@ export default class CommonDatagridComponent extends AppComponent {
                     if(typeof widths[column] !== 'number') return null;
                     const width = widths[column];
                     if(!column) return null;
-                    const key = key+column;
+                    const key2 = key+column;
                     if(!column || !this.state.columns[column] || !footers[column]) {
                         if(this.isAccordion()) return null;
-                        cells.push(<View key={key} testID={testID+"_FooterCellContainer"+key} style={[tableStyles.headerItemOrCell,{width}]}>
-                            
-                        </View>)
+                        cells.push(<View key={key2} testID={testID+"_FooterCellContainer_"+key2} style={[tableStyles.headerItemOrCell,{width}]}></View>)
                     } else {
                         const footer = footers[column];
-                        cells.push(<View key={key} testID={testID+"_FooterCellContainer"+key} style={[tableStyles.headerItemOrCell,{width,alignItems:'flex-start',justifyContent:'flex-start'}]}>
+                        cells.push(<View key={key2} testID={testID+"_FooterCellContainer_"+key2} style={[tableStyles.headerItemOrCell,!isA?{width,alignItems:'flex-start',justifyContent:'flex-start'}:{marginLeft:0,paddingLeft:0,marginRight:5}]}>
                             <Footer
-                                key = {key}
-                                testID={testID+"_FooterItem_"+key}
+                                key = {key2}
+                                testID={testID+"_FooterItem_"+key2}
                                 {...footer}
                                 aggregatorFunction = {this.getActiveAggregatorFunction().code}
                                 aggregatorFunctions = {this.aggregatorFunctions}
@@ -2269,13 +2273,12 @@ export default class CommonDatagridComponent extends AppComponent {
                             />  
                         </View>)
                     }
-                    
                 });
             }
         }
-        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,{color:theme.colors.primaryOnSurface,fontSize:16},lStyle]}>{label}</Label>
-            {cells ? <View style = {[theme.styles.w100,theme.styles.row,theme.styles.alignItemsFlexStart]}
+        return <View testID={testID+"_ContentContainer"}  style={[theme.styles.w100,isA && theme.styles.ph2,theme.styles.justifyContentCenter,theme.styles.alignItemsCenter,theme.styles.pb1,!cells && theme.styles.ml1,theme.styles.mr1,cStyle]}>
+            <Label testID={testID+"_Label"} splitText numberOfLines={3} textBold style={[theme.styles.w100,{color:theme.colors.primaryOnSurface,fontSize:isA?15 :16},lStyle]}>{label}</Label>
+            {cells ? <View testID={testID+"_TableRow"} style = {[theme.styles.w100,theme.styles.row,theme.styles.alignItemsFlexStart,isA && theme.styles.mt05]}
             >{cells}</View> : null}
         </View>
     }
@@ -2692,10 +2695,10 @@ export default class CommonDatagridComponent extends AppComponent {
         }
     }
     getPointerEvents(){
+        if(this.enablePointerEventsRef.current) return true;
         if(this.props.isLoading){
             return "none";
         }
-        if(this.enablePointerEventsRef.current) return true;
         return this.isLoading()? "none":"auto";
     }
     updateLayout(p){

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

@@ -291,7 +291,7 @@ const DatagridFactory = (Factory)=>{
                         {this.renderSectionListMenu()}
                         {this.renderDisplayTypes()}
                         {this.renderAggregatorFunctionsMenu()}
-                        <View testID={testID+"_HeaderPagination"} style = {styles.paginationItem}>
+                        <View pointerEvents={pointerEvents} testID={testID+"_HeaderPagination"} style = {styles.paginationItem}>
                             <BottomSheetMenu
                                 testID={testID+"_HeaderMenus"}
                                 anchor={(props)=>(<Icon {...props} icon={'axis-z-arrow'}/>)} 

package/src/components/Date/FormatSelector.js

@@ -22,7 +22,8 @@ DateFormatSelector.displayName = "DateFormatSelector";
 export default DateFormatSelector;
 
 /*** onAdd est appelé lorsqu'on ajoute un format personalisé */
-export const selectDateFormatFieldProps = ({onAdd:customOnAdd,onAddCustomFormat,...props})=>{
+export const selectDateFormatFieldProps = ({onAdd:customOnAdd,onAddCustomFormat,inputProps,...props})=>{
+    const cRight = (p)=><Icon size={20} {...p} name ="material-help" title="Utilisez les champ d : pour date, m pour mois, y pour année, H pour heure, M pour minute, s pour seconde. les jour sur 3 lettres (Lun) sont : ddd, les jours écris complètement sont dddd (Lundi); les mois en court sont définis par mmm (Juil), les mois en complet : mmmm (Juillet)."/>;
     const onAdd = ()=>{
         const labelRef = React.createRef(null);
         const valueRef = React.createRef(null);
@@ -32,7 +33,8 @@ export const selectDateFormatFieldProps = ({onAdd:customOnAdd,onAddCustomFormat,
                 <TextField
                     type = "text"
                     label = "Format personalisé"
-                    right ={(p)=><Icon {...p} name ="material-help" title="Utilisez les champ d : pour date, m pour mois, y pour année, H pour heure, M pour minute, s pour seconde. les jour sur 3 lettres (Lun) sont : ddd, les jours écris complètement sont ddddd (Lundi); les mois en court sont définis par mmm (Juil), les mois en complet : mmmm (Juillet)."/>} 
+                    enableCopy = {false}
+                    right ={cRight} 
                     onChange = {(args)=>{
                         const {value} = args;
                         if(!labelRef.current || !labelRef.current.update) return;
@@ -73,12 +75,21 @@ export const selectDateFormatFieldProps = ({onAdd:customOnAdd,onAddCustomFormat,
             }],
         }))
     };
+    inputProps = defaultObj(props.inputProps);
     return {
         items : getDateFormatSelectorItems(),
         getItemValue : ({item})=>item.code,
         renderItem : dateFormatSelectorRenderItem,
         showAdd : true,
         ...props,
+        inputProps : {
+            enableCopy:false,...inputProps,
+            right : (p)=>{
+                const cc = cRight(p);
+                const r = typeof inputProps.right =='function'? inputProps.right(p) : inputProps.right;
+                return React.isValidElement(r) ? <>{r}{cc}</> : cc;
+            }
+        },
         defaultValue : defaultStr(props.defaultValue,props.format),
         onAdd,
         onAdd : undefined,

package/src/components/List/Common.js

@@ -3,7 +3,7 @@ import React from "$react";
 import { prepareItems as customPrepareItems,getBToTopRef } from "./utils";
 import theme,{grid,StylePropTypes} from "$theme";
 import PropTypes from "prop-types";
-import {defaultObj,defaultDecimal,defaultArray,defaultFunc} from "$utils";
+import {defaultObj,isObj,defaultDecimal,defaultArray,defaultFunc} from "$utils";
 import {isMobileMedia} from "$cplatform/dimensions";
 import BackToTop from "$ecomponents/BackToTop";
 import {FlatList,StyleSheet,View} from "react-native";
@@ -42,6 +42,9 @@ const CommonListComponent = React.forwardRef((props,ref)=>{
         },
         renderItem : function({item,index,section,...rest}){
             rest = rest ? rest : {};
+            if(isObj(item) && item.isSectionListHeader){
+                rest.isSectionListHeader = true;
+            }
             let ret = renderItem({item,numColumns,index,section,numColumns,itemContainerWidth:itemWindowWidth,itemWindowWidth,...rest,isScrolling:listRef.current?.isScrolling?true:false,items:defaultArray(context.items)});
             if(typeof ret =='string' || typeof ret =='number'){
                 return <Label children = {ret}/>

package/src/components/TableLink/index.js

@@ -68,8 +68,8 @@ export default TableLinKComponent;
 
 
 TableLinKComponent.propTypes = {
-    foreignKeyColumn : PropTypes.string.isRequired,//le nom de la colonne de la clé étrangère
-    foreignKeyTable : PropTypes.string.isRequired, //le nom de la table référencée
+    foreignKeyColumn : PropTypes.string,//le nom de la colonne de la clé étrangère
+    foreignKeyTable : PropTypes.string, //le nom de la table référencée
     fetchForeignData : PropTypes.func, // la fonction permettant de chercher la données à distance
     server : PropTypes.string,//le serveur sur lequel rechercher les données
     primary : PropTypes.bool,//si le composant sera stylé en theme primary de react