@fto-consult/expo-ui 6.15.1 → 6.15.3

package/babel.config.js

@@ -122,7 +122,7 @@ const generateTableOrStructDataStr = (tableDataPath)=>{
         //on génère le fichier getTable des tables data de l'application
         if(getTableJSContent){
           return (`
-module.exports = function(tableName){
+export default function(tableName){
 \tif(!tableName || typeof tableName !=="string") return null;
 \ttableName = tableName.toUpperCase().trim();
 ${getTableJSContent}\treturn null;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fto-consult/expo-ui",
-  "version": "6.15.1",
+  "version": "6.15.3",
   "description": "Bibliothèque de composants UI Expo,react-native",
   "main": "index.js",
   "scripts": {
@@ -62,7 +62,7 @@
     "@emotion/native": "^11.11.0",
     "@expo/html-elements": "^0.5.1",
     "@expo/vector-icons": "^13.0.0",
-    "@fto-consult/common": "^3.22.0",
+    "@fto-consult/common": "^3.23.1",
     "@gorhom/portal": "^1.0.14",
     "@pchmn/expo-material3-theme": "^1.3.1",
     "@react-native-async-storage/async-storage": "1.18.2",

package/src/components/Form/List/List.js

@@ -10,7 +10,7 @@ import {isPhoneMedia} from "$cplatform/dimensions";
 import View from "$ecomponents/View";
 import {StyleSheet} from "react-native";
 import {List} from "react-native-paper";
-import FlashList from "$ecomponents/List";
+import FlashList from "$ecomponents/Table/List";
 import Surface from "$ecomponents/Surface";
 import {navigate} from "$cnavigation";
 import { handleBeforeSaveCallback } from "$ecomponents/Form/FormData/utils";
@@ -476,7 +476,7 @@ export default class FormListComponent extends AppComponent {
             addIconLabel = defaultVal(addIconLabel,"Ajouter un élément");
             addIcon = defaultVal(addIcon,"plus")
             addIconObj = {...onCHandle,icon:addIcon,text:addIconLabel};
-            if(isNonNullString(addIcon)) _addIcon = <Icon name={addIcon} size={40} title={'ajouter un élément'}></Icon>;
+            if(isNonNullString(addIcon)) _addIcon = <Icon name={addIcon} size={30} title={'ajouter un élément'}></Icon>;
             if(!React.isValidElement(addIcon)){
                 addIcon = _addIcon;
             }

package/src/components/List/Common.js

@@ -1,16 +1,18 @@
 
 import React from "$react";
 import { prepareItems as customPrepareItems,getBToTopRef } from "./utils";
-import theme,{grid,StylePropTypes} from "$theme";
+import {grid,StylePropTypes} from "$theme";
 import PropTypes from "prop-types";
-import {defaultObj,isObj,defaultDecimal,defaultArray,defaultFunc} from "$cutils";
+import {defaultObj,extendObj,isObj,defaultDecimal,defaultArray,defaultFunc} from "$cutils";
 import {isMobileMedia} from "$cplatform/dimensions";
 import BackToTop from "$ecomponents/BackToTop";
 import {FlatList,StyleSheet,View} from "react-native";
 import Label from "$ecomponents/Label";
 import { useWindowDimensions,Dimensions } from "react-native";
+import { useList } from "./hooks";
 
 const CommonListComponent = React.forwardRef((props,ref)=>{
+    const context = useList(props);
     let {responsive,defaultItemHeight,itemHeight,windowWidth,onRender,componentProps,columnWrapperStyle,onViewableItemsChanged,withFlatListItem,Component,withBackToTop,backToTopRef:customBackToTopRef,withBackToTopButton,onScroll,onScrollEnd,onMount,onUnmount,renderScrollViewWrapper,prepareItems,getItemKey,getKey,keyExtractor,items,filter,renderItem,numColumns,containerProps,bindResizeEvents,...rest} = props;
     withBackToTopButton = withBackToTop === true || withBackToTopButton == true || isMobileMedia()? true : false;
     rest = defaultObj(rest);
@@ -28,10 +30,7 @@ const CommonListComponent = React.forwardRef((props,ref)=>{
     const hasCustomBackToTop = typeof customBackToTopRef == 'function'? true : false;
     const backToTopRef = React.useRef(null);
     const isFlatList = Component === FlatList;
-
-    const context = {
-        itemsRefs : [],
-        prepareItems : defaultFunc((prepareItems === false ? (items)=> items:null),prepareItems,customPrepareItems),
+    extendObj(context,{
         getKey : typeof keyExtractor =='function'? keyExtractor : typeof getItemKey =='function'? getItemKey : typeof getKey =='function'? getKey : undefined,
         addItemsRefs : function(ref, itemRef){
             context.itemsRefs[itemRef.index] = {
@@ -130,21 +129,10 @@ const CommonListComponent = React.forwardRef((props,ref)=>{
         onBackActionPress : !hasCustomBackToTop ? function(){
             return context?.scrollToTop()
         }: undefined,
-    };
-    const contextRef = React.useRef({}).current;
-    contextRef.prevItems = React.usePrevious(items);
-    const getItems = React.useCallback(()=>{
-        if(items === contextRef.prevItems && contextRef.items) {
-            return contextRef.items;
-        }
-        return context.prepareItems(items,filter);
-    },[items]);
+    })
+    
     context.listRef = listRef.current;
-    context.items = contextRef.items = prepareItems === false ? items : getItems();
-    if(!Array.isArray(context.items)){
-        console.error(context.items," is not valid list data array",props);
-        context.items = [];
-    }
+    
     React.useOnRender(onRender,Math.max(items.length/10 || 0,500));
     React.setRef(ref,context);
     React.useEffect(()=>{

package/src/components/{Table/List/List.js → List/Virtuoso/index.js}

@@ -2,11 +2,14 @@
 // Use of this source code is governed by a BSD-style
 // license that can be found in the LICENSE file.
 
-import {Virtuoso} from "react-virtuoso/dist/index.mjs";
+import {Virtuoso,VirtuosoGrid} from "react-virtuoso/dist/index.mjs";
 import React from "$react";
 import PropTypes from "prop-types";
-import {defaultObj,defaultNumber,isDOMElement,isNumber,uniqid,isNonNullString,defaultStr} from "$cutils";
+import {defaultObj,classNames,defaultNumber,isObj,isDOMElement,isNumber,uniqid,isNonNullString,defaultStr} from "$cutils";
 import { View } from "react-native";
+import {useList} from "../hooks";
+import theme,{grid} from "$theme";
+import Dimensions from "$cdimensions";
 
 const propTypes = {
     ...defaultObj(Virtuoso.propTypes),
@@ -26,13 +29,17 @@ const propTypes = {
     isScrolling : PropTypes.func,
 };
 /***@see : https://virtuoso.dev/virtuoso-api-reference/ */
-const VirtuosoListComponent = React.forwardRef(({items,onRender,testID,renderItem,onEndReached,onLayout,onContentSizeChange,onScroll,isScrolling,estimatedItemSize,onEndReachedThreshold,containerProps,style,autoSizedStyle,...props},ref)=>{
+const VirtuosoListComponent = React.forwardRef(({onRender,listClassName,components,itemProps,windowWidth,numColumns,responsive,testID,renderItem,onEndReached,onLayout,onContentSizeChange,onScroll,isScrolling,estimatedItemSize,onEndReachedThreshold,containerProps,style,autoSizedStyle,...props},ref)=>{
+    const Component = React.useMemo(()=>responsive?VirtuosoGrid:Virtuoso,[responsive])
+    const context = useList(props);
+    itemProps = defaultObj(itemProps);
+    const items = context.items;
     const r2 = {};
-    for(let i in propTypes){
+    Object.map(Component.propTypes,(_,i)=>{
         if(i in props){
             r2[i] = props[i];
         }
-    }
+    });
     containerProps = defaultObj(containerProps);
     testID = defaultStr(testID,containerProps.testID,"RN_VirtuosoListComponent");
     const listIdRef = React.useRef(uniqid("virtuoso-list-id"));
@@ -95,10 +102,20 @@ const VirtuosoListComponent = React.forwardRef(({items,onRender,testID,renderIte
     },[]);
     React.useOnRender((a,b,c)=>{
         if(onRender && onRender(a,b,c));
-    },Math.max(Array.isArray(items) && items.length/10 || 0,500))
+    },Math.max(Array.isArray(items) && items.length/10 || 0,500));
+    const listP = responsive ? {
+        listClassName : classNames(listClassName,"rn-virtuoso-list",responsive && gridClassName)
+    } : {
+        atBottomThreshold : typeof onEndReachedThreshold =='number'? onEndReachedThreshold : undefined,
+        totalListHeightChanged : (height)=>{
+            checkSize();
+        },
+        defaultItemHeight : typeof estimatedItemSize=='number' && estimatedItemSize || undefined,
+    };
     return <View {...containerProps} {...props} style={[{flex:1},containerProps.style,style,autoSizedStyle,{minWidth:'100%',height:'100%',maxWidth:'100%'}]} onLayout={onLayout} testID={testID}>
-        <Virtuoso
+        <Component
             {...r2}
+            {...listP}
             style = {listStyle}
             ref = {listRef}
             data = {items}
@@ -108,7 +125,6 @@ const VirtuosoListComponent = React.forwardRef(({items,onRender,testID,renderIte
             itemContent = {(index)=>{
                 return renderItem({index,item:items[index],items})
             }}
-            atBottomThreshold = {typeof onEndReachedThreshold =='number'? onEndReachedThreshold : undefined}
             atBottomStateChange = {()=>{
                 if(typeof onEndReached =='function'){
                     onEndReached();
@@ -120,16 +136,23 @@ const VirtuosoListComponent = React.forwardRef(({items,onRender,testID,renderIte
                     return isScrolling(isC);
                 }
             }}
-            totalListHeightChanged = {(height)=>{
-                checkSize();
+            components = {{
+                Item : responsive ? function(props){return <ItemContainer {...props} style={[itemProps.style,props.style]} numColumns={numColumns}/>} : undefined,
+                //List : responsive ? ResponsiveVirtuosoListItemContainer: undefined,
+                ...defaultObj(components),
             }}
-            defaultItemHeight = {typeof estimatedItemSize=='number' && estimatedItemSize || undefined}
         />
     </View>
 });
 
 VirtuosoListComponent.propTypes = {
-    ...propTypes
+    ...propTypes,
+    numColumns : PropTypes.number,
+    items : PropTypes.oneOfType([
+        PropTypes.object,
+        PropTypes.array,
+        PropTypes.func,
+    ])
 };
 
 VirtuosoListComponent.displayName = "VirtuosoListComponent";
@@ -166,4 +189,47 @@ const normalizeEvent = (e)=>{
       },
       timeStamp: Date.now()
     };
-  }
+  }
+  
+  function ItemContainer({numColumns,responsive,windowWidth,...props}){
+    const width = React.useMemo(()=>{
+        if(!numColumns || numColumns <= 1) return undefined;
+        if(typeof windowWidth =='number' && windowWidth <=600) return "100%";
+        if(Dimensions.isMobileMedia()){
+            return "100%";
+        }
+        return (100/numColumns)+"%";
+    },[windowWidth,numColumns]);
+    const style = width && {width} || grid.col(windowWidth);
+    const dataIntex  = "index" in props ? props.index : "data-index" in props ? props["data-index"] : ""
+    const dataItemIndex = props["data-item-index"];
+    if(isObj(style)){
+        style.paddingRight = style.paddingLeft = style.paddingHorizontal = undefined;
+    }
+    return <View
+        testID={`RN_VirtosoGridItem_${dataIntex}-${dataItemIndex}`}
+        {...props}
+        style = {[style,props.style]}
+    />
+  }
+  const ResponsiveVirtuosoListItemContainer = React.forwardRef((props,ref)=>{
+    return <View ref={ref} testID={"RN_ResponsiveVirtuosoListItemContainer"} {...props} style={[responsiveListStyle,props.style,]}/>
+  });
+  
+  export const gridClassName = "rn-virtuoso-responsive-list";
+  
+  const responsiveListStyle = [theme.styles.row,theme.styles.row,theme.styles.flexWrap,theme.styles.justifyContentStart,theme.styles.alignItemsStart]
+  ResponsiveVirtuosoListItemContainer.displayName = "ResponsiveVirtuosoListItemContainer";
+  
+  if(typeof document !=='undefined' && document && document?.createElement){
+    const gridDomId = "dynamic-virtuoso-grid-styles";
+    let style = document.getElementById(gridDomId);
+    if(!style){
+        style = document.createElement("style");
+    }
+    style.id = gridDomId;
+    style.textContent = `
+        .${gridClassName}{display:flex;flex-direction:row;align-items:flex-start;flex-wrap:wrap;justify-content:flex-start;};
+    `;
+    document.body.appendChild(style);
+  } 

package/src/components/List/hooks.js

@@ -0,0 +1,26 @@
+import React from "$react";
+import { prepareItems as customPrepareItems} from "./utils";
+import {defaultFunc} from "$cutils";
+
+/**** retourne le contexte associé au composant List
+    
+*/
+export const useList = ({items,filter,prepareItems,...props})=>{
+    const contextRef = React.useRef({itemsRefs:[]});
+    const context = contextRef.current;
+    context.itemsRefs = Array.isArray(context.itemsRefs) && context.itemsRefs || [];
+    context.prepareItems = defaultFunc((prepareItems === false ? (items)=> items:null),prepareItems,customPrepareItems);
+    contextRef.prevItems = React.usePrevious(items);
+    const getItems = React.useCallback(()=>{
+        if(items === context.prevItems && context.items) {
+            return context.items;
+        }
+        return context.prepareItems(items,filter);
+    },[items]);
+    context.items = contextRef.items = prepareItems === false ? items : getItems();
+    if(!Array.isArray(context.items)){
+        console.error(context.items," is not valid list data array",items,props);
+        context.items = [];
+    }
+    return context;
+}

package/src/components/List/index.js

@@ -2,7 +2,7 @@ import FlashList from "./FlashList";
 
 export * from "./utils";
 
-export default FlashList;
+export {default} from "./Virtuoso";
 
 export {default as FlatList} from "./FlatList";
 
@@ -10,3 +10,5 @@ export {default as FlashList} from "./FlashList";
 
 export {default as BigList} from "./BigList";
 
+export {default as Virtuoso} from "./Virtuoso";
+

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

@@ -1,6 +1,6 @@
 import React from "$react";
 import {Vertical as AutoSizeVertical} from "$ecomponents/AutoSizer";
-import List from "./List";
+import List from "$ecomponents/List/Virtuoso";
 import {defaultStr,isObj,defaultObj} from "$cutils";
 const normalize = (size)=>{
     if(isObj(size)){

package/src/components/TableLink/index.js

@@ -15,12 +15,16 @@ import {navigateToTableData} from "$enavigation/utils";
 import Auth from "$cauth";
 import fetch from "$capi/fetch";
 import useContext from "$econtext/hooks";
+/***** la fonction fetchForeignData permet de spécifier s'il s'agit d'une données de structure où non 
+    dans le champ isStructData
+*/
 const TableLinKComponent = React.forwardRef((props,ref)=>{
     const {components:{tableLinkPropsMutator}} = useContext();
-    let {disabled,readOnly,labelProps,server,containerProps,perm,id,fetchForeignData,foreignKeyTable,foreignKeyColumn,data,testID,Component,routeName,routeParams,component,primary,triggerProps,onPress,children, ...rest} = tableLinkPropsMutator(props);
+    let {disabled,readOnly,labelProps,server,containerProps,isStructData,type,perm,id,fetchForeignData,foreignKeyTable,foreignKeyColumn,data,testID,Component,routeName,routeParams,component,primary,triggerProps,onPress,children, ...rest} = tableLinkPropsMutator(props);
     testID = defaultStr(testID,"RN_TableDataLinkContainer")
     foreignKeyTable = defaultStr(foreignKeyTable).trim();
     foreignKeyColumn = defaultStr(foreignKeyColumn).trim();
+    isStructData = isStructData || defaultStr(type).toLowerCase().replaceAll("_","").replaceAll("-","").includes("structdata");
     rest = defaultObj(rest);
     containerProps = defaultObj(containerProps)
     labelProps = defaultObj(labelProps);
@@ -32,10 +36,10 @@ const TableLinKComponent = React.forwardRef((props,ref)=>{
     const pointerEvents = disabled || readOnly ? 'none' : 'auto';
     const onPressLink = (event)=>{
         React.stopEventPropagation(event);
-        if((isNonNullString(perm) && !Auth.isAllowedFromString(perm)) || !Auth.isTableDataAllowed({table:foreignKeyTable,action:'read'})){
+        if((isNonNullString(perm) && !Auth.isAllowedFromString(perm)) || !Auth[isStructData?"isStructDataAllowed":"isTableDataAllowed"]({table:foreignKeyTable,action:'read'})){
             return;
         }
-        const args = {...React.getOnPressArgs(event),...rest,fetch,foreignKeyTable,foreignKeyColumn,data,id,value:id};
+        const args = {...React.getOnPressArgs(event),...rest,type,columnType:type,isStructData,fetch,foreignKeyTable,foreignKeyColumn,data,id,value:id};
         let r = typeof onPress =='function'? onPress(args) : undefined;
         if(r === false) return;
         const cb = (a)=>{

package/src/layouts/Screen/FormData/FormData.js

@@ -11,7 +11,6 @@ import {goBack} from "$cnavigation";
 
 export default class FormDataLayout extends FormDataActions {
     getComponentProps(props){
-        this.__mainProps = null;
         return super.getComponentProps(props);
     }
     getDataProp(){

package/src/layouts/Screen/FormData/List.js

@@ -28,17 +28,19 @@ export default class FormDataListScreen extends FormData{
             ,saveAction : typeof saveAction !=='undefined'? saveAction:true,
         });
     }
-    createNew (){
+    createNew (...p){
         const {show} = this.props;
         if(typeof show =='function'){
-            show({...this.props,index:undefined,data:{}});
+            return show({...this.props,index:undefined,data:{}});
         }
+        return super.createNew(...p)
     }
-    doSave2New(args){
+    doSave2New(args,...rest){
         const {show} = this.props;
         if(typeof show =='function'){
-            show({...args,index:undefined,data:{}});
+            return show({...args,index:undefined,data:{}});
         }
+        return super.doSave2Close(args,...rest);
     }
     doSave2Close(args){
         return this.close();