@fto-consult/expo-ui 6.71.5 → 6.72.0

package/package.json

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

package/src/components/{AutoSizer1 → AutoSizer}/Vertical.js

@@ -4,7 +4,6 @@ import PropTypes from "prop-types";
 import View from "$ecomponents/View";
 import theme from "$theme";
 import {defaultStr,defaultObj,defaultNumber} from "$cutils";
-import APP from "$capp/instance";
 import ActivityIndicator from "$ecomponents/ActivityIndicator";
 
 /***

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

@@ -3925,6 +3925,9 @@ CommonDatagridComponent.propTypes = {
     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,
+    /****
+        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
+    */
     columns:PropTypes.oneOfType([PropTypes.array,PropTypes.object]),//.isRequired,
     selectable : PropTypes.bool, //si les lignes sont sélectionnables,
     /*** Si plusieurs lignes peuvent être sélectionnées au même moment */

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

@@ -1,7 +1,7 @@
 // Copyright 2023 @fto-consult/Boris Fouomene. All rights reserved.
 // Use of this source code is governed by a BSD-style
 // license that can be found in the LICENSE file.
-import {isNonNullString,isArray,isObjOrArray,defaultStr,defaultArray,defaultObj,isObj} from "$cutils";
+import {isNonNullString,isArray,isObjOrArray,maxItemsToRender,defaultStr,defaultArray,defaultObj,isObj} from "$cutils";
 import Hashtag from "$ecomponents/Hashtag";
 import DateLib from "$date";
 import Image from "$ecomponents/Image";
@@ -82,22 +82,36 @@ export const renderRowCell = (arg)=>{
                 const sepp = ",";
                 if(columnDef.multiple && id.contains(sepp)){
                     let hasC = false,sep2 ="";
+                    const maxItemsToRender = defaultNumber(columnDef?.datagrid?.maxItemsToRender,5);
+                    let renderedItems = 0;
+                    const idSplit = id.split(sepp);
                     _render = <View style={[style,theme.styles.row,theme.styles.flexWrap]} testID={"RN_RowCell_"+columnDef.field+"multiple_"}>
-                        {id.split(sepp).map((idd,index)=>{
-                            if(!isNonNullString(idd)) return null;
+                        {idSplit.map((idd,index)=>{
+                            if(!isNonNullString(idd) || maxItemsToRender === renderedItems) return null;
                             idd = idd.trim();
                             if(!idd) return null;
                             if(hasC){
                                 sep2=", ";
                             }
                             hasC = true;
-                            return <TableLink 
-                                key = {index}
-                                {...rProps}
-                                id = {idd}
-                            >
-                                {sep2+idd}
-                            </TableLink>
+                            renderedItems++;
+                            const suffix = renderedItems === maxItemsToRender && idSplit.length > maxItemsToRender ? <Label>...</Label> : null;
+                            return suffix ? <>
+                                <TableLink 
+                                    key = {index}
+                                    {...rProps}
+                                    id = {idd}
+                                >
+                                    {sep2+idd}
+                                </TableLink>
+                                {suffix}
+                            </> : <TableLink 
+                                    key = {index}
+                                    {...rProps}
+                                    id = {idd}
+                                >
+                                    {sep2+idd}
+                                </TableLink>
                         })}
                     </View>
                     

package/src/components/Swiper/index.js

@@ -279,14 +279,14 @@ class SwiperComponent extends React.Component {
     contentContainerProps = defaultObj(contentContainerProps);
     swipeAreaProps = defaultObj(swipeAreaProps);
     contentProps = defaultObj(contentProps);
-    withScrollView = typeof withScrollView ==='boolean'? withScrollView : false;
+    withScrollView = true;//typeof withScrollView ==='boolean'? withScrollView : false;
     const Wrapper = withScrollView ? ScrollView : React.Fragment;
     const wrapperProps = withScrollView  ? Object.assign({},scrollViewProps) : {};
     testID = defaultStr(testID,'RN_SwiperComponent');
     childrenProps = Array.isArray(childrenProps)? childrenProps : [];
     const isReady = customHeight > 40 ? true : false;
     const autoHeight = !!this.props.autoHeight;
-    const height = autoHeight ? undefined : !isReady ? WIDTH_HEIGHT : customHeight;
+    const height = autoHeight ? this.state.height : !isReady ? WIDTH_HEIGHT : customHeight;
     if(withScrollView){
       if(typeof wrapperProps.showsVerticalScrollIndicator !=='boolean'){
         wrapperProps.showsVerticalScrollIndicator = !isNative;
@@ -373,6 +373,7 @@ class SwiperComponent extends React.Component {
 
 SwiperComponent.propTypes = {
   vertical: PropTypes.bool,
+  autoHeight : PropTypes.bool,//cette prop permet de redimensionner automatiquement le tab sur la page, utilise lorsque l'on souhaite que le tab aucupe toute les page
   activeIndex: PropTypes.number,
   autoHeight : PropTypes.bool,//si la valeur de la taille des éléments sera automatiquement réajusté
   loop: PropTypes.bool,
@@ -458,9 +459,9 @@ const styles = {
     left: 0,
     width:vertical ? width : width * count,
     flexDirection: vertical ? 'column' : 'row',
-  }),typeof height ==='number'? (vertical ? height * count : height) : undefiend,autoHeight),
+  }),typeof height ==='number'? (vertical ? height * count : height) : undefined,autoHeight),
   scrollViewContentContainer : {
-    paddingBottom : 40,
+    paddingBottom : 0,
     flex : 1,
   },
   preloaderContainer : {

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

@@ -1,15 +1,8 @@
 import React from "$react";
-import {Vertical as AutoSizeVertical} from "$ecomponents/AutoSizer";
 import List from "$ecomponents/List/Virtuoso";
-import {defaultStr,isObj,defaultObj} from "$cutils";
 
-const AutoSizeVerticalList = React.forwardRef(({testID,autoSizerProps,...props},ref)=>{
-    testID = defaultStr(testID,"RN_AutoSizeVerticalListComponent")
-    autoSizerProps = defaultObj(autoSizerProps);
-    return <List {...props} style={[props.style]} ref={ref}/>;
-    return <AutoSizeVertical withPadding={false} testID={testID+"_AutoSizerVertical"} {...autoSizerProps} >
-        <List {...props} style={[props.style]} ref={ref}/>
-    </AutoSizeVertical>
+const AutoSizeVerticalList = React.forwardRef((props,ref)=>{
+    return <List {...props} ref={ref}/>;
 })
 
 AutoSizeVerticalList.displayName = "AutoSizeVerticalListComponent";

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

@@ -22,7 +22,7 @@ export default function TableRowComponent({cells,rowKey,rowData,index,...rest}){
             }
             return renderSectionHeader({isSectionListHeader:true,renderSectionListHeaderOnFirstCell:true,
             sectionListHeaderContainerProps : {
-                style : {position:"relative",paddingLeft:"10px",paddingRight:"10px"}
+                style : {position:"relative",paddingLeft:10,paddingRight:10}
             },
             sectionListHeaderProps:{className:"table-section-list-header",style:styles.sectionListHeaderAbsolute,testID:"RN_TableComponentSectionListHeader"}
             ,...nativeProps,rowData,item:rowData,index,rowIndex:index,isTable:true,rowKey})

package/src/components/Table/styles.js

@@ -15,7 +15,7 @@ const styles = StyleSheet.create({
     container : {
         width : '100%',
         minHeight : 300,
-        paddingBottom : 10,
+        paddingBottom : 0,
         paddingLeft : 0,
         paddingRight : 0,
         flex : 1,

package/src/layouts/Screen/TableData.js

@@ -13,7 +13,6 @@ import {canMakePhoneCall, makePhoneCall as makePCall} from "$app/makePhoneCall";
 import copyToClipboard from "$app/clipboard";
 import {isMobileOrTabletMedia} from "$platform/dimensions";
 import Tab  from "$ecomponents/Tab";
-import Surface from "$ecomponents/Surface";
 import View from "$ecomponents/View";
 import {goBack as navGoBack} from "$cnavigation";
 import {renderTabsContent,renderActions} from "./utils";
@@ -25,6 +24,7 @@ import {isDocEditing,checkPrimaryKey} from "$ecomponents/Form";
 import i18n from "$i18n";
 import fetch from "$capi/fetch";
 import appConfig from "$capp/config";
+import {Vertical} from "$ecomponents/AutoSizer";
 
 
 const HIDE_PRELOADER_TIMEOUT = 300;
@@ -416,14 +416,13 @@ export default class TableDataScreenComponent extends FormDataScreen{
         restProps.tabProps = tabProps = defaultObj(tabProps);
         const tabs = this.renderTabs(restProps);
         const tabKey = this.getTabsKey();
-        const isMobile = isMobileOrTabletMedia();
+        const isMobOrTab = isMobileOrTabletMedia();
+        tabsProps.tabContentProps.autoHeight = typeof tabsProps.tabContentProps.autoHeight =="boolean"? tabsProps.tabContentProps.autoHeight : isMobOrTab;
         const contentProps = restProps.contentProps;
-        const elevation = restProps.elevation;
-        const renderingTabsProps = {tabs,data:this.getCurrentData(),isMobile,sessionName:this.getSessionName(),props:restProps,tabProps,tabsProps,context,tabKey};
+        const renderingTabsProps = {tabs,data:this.getCurrentData(),isMobile:isMobOrTab,sessionName:this.getSessionName(),props:restProps,tabProps,tabsProps,context,tabKey};
         const hasTabs = Object.size(tabs,true);
         let mainContent = undefined;
         testID = defaultStr(testID,"RN_TableDataScreenItem_"+restProps.tableName);
-        const isMobOrTab = isMobileOrTabletMedia();
         firstTabProps = extendObj({},tabProps,firstTabProps);
         if(hasTabs){
             if(isMobOrTab){
@@ -441,7 +440,7 @@ export default class TableDataScreenComponent extends FormDataScreen{
                 contentProps.style = [contentProps.style,styles.noMargin,styles.noPadding,styles.content]
                 mainContent = ct;
             } else {
-                mainContent = <View  {...contentProps} testID={testID+"_ContentContainer"} style={[styles.container,styles.noPadding,contentProps.style]}>
+                mainContent = <Vertical  {...contentProps} testID={testID+"_ContentContainer"} style={[styles.container,styles.noPadding,contentProps.style]}>
                     <ScrollView  testID={testID+"_MainContentScrollView"} contentProps={{style:theme.styles.p1}}>
                         <View testID={testID+"_ContentHeader"} style={[styles.screenContent,theme.styles.p1,header?styles.screenContentWithHeader:null]}>
                             {header}
@@ -451,7 +450,7 @@ export default class TableDataScreenComponent extends FormDataScreen{
                             {ct}
                         </View> : null}
                     </ScrollView>
-                </View>
+                </Vertical>
             }
         } else {
             mainContent = <ScrollView testID={testID+"_MainContentScrollViewWithoutTab"}>

package/src/layouts/Screen/utils.js

@@ -44,7 +44,7 @@ export const renderTabsContent = ({tabs,context,data,sessionName,isMobile,props,
             }
             if(React.isValidElement(children)){
                 tabsArr.push(
-                    <Tab.Item testID={testID+"_Item_"+key} label={label} {...tabP} style={[{paddingBottom:50},tabP.style]} key={key}>
+                    <Tab.Item testID={testID+"_Item_"+key} label={label} {...tabP} key={key}>
                         {children}
                     </Tab.Item> 
                 )