@fto-consult/expo-ui 6.25.3 → 6.26.0

package/babel.config.alias.js

@@ -83,7 +83,7 @@ module.exports = (opts)=>{
     const outputPath = path.resolve(HelpScreen,"openLibraries.js");
     r.$nodeModulesPath = r.$enodeModulesPath= nodeModulesPath;
     require("./find-licenses")({
-        paths : [root,r["$expo-ui-root-path",path.resolve(process.cwd())]],
+        paths : [root,r["$expo-ui-root-path"],path.resolve(process.cwd())],
         nodeModulesPath : nodeModulesPath,
         outputPath
     });

package/package.json

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

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

@@ -64,7 +64,6 @@ const DatagridAccordionRow = React.forwardRef((props,ref)=>{
     let rowIndex = defaultDecimal(index);
     let rowIndexCount = index+1;
     const testID = defaultStr(props.testID,"RN_DatagridAccordionRow"+(rowKey||rowIndex))
-    let _rP = {}
     const hasAvatar = React.isValidElement(avatarContent);
     const handleRowToggle = (event)=>{
         if(selectable === false) return;
@@ -75,8 +74,8 @@ const DatagridAccordionRow = React.forwardRef((props,ref)=>{
     }
     const wrapStyle = React.useMemo(()=>{
         return getRowStyle({row:item,index,selected,numColumns,isAccordion:true,rowIndex:index});
-    },[selected])
-    let viewWrapperStyle = {};
+    },[selected,numColumns]);
+    const viewWrapperStyle = [];
     if(selected) {
         const handleAvatarRowToggle = (event)=>{
             React.stopEventPropagation(event);
@@ -93,7 +92,8 @@ const DatagridAccordionRow = React.forwardRef((props,ref)=>{
             title = {sTtitle}
         ></Avatar> : null;
         if(!hasAvatar){
-            viewWrapperStyle = [styles.hasNotAvatar,{borderLeftColor:theme.colors.primaryOnSurface}]
+            viewWrapperStyle.push(styles.hasNotAvatar);
+            viewWrapperStyle.push({borderLeftColor:theme.colors.primaryOnSurface})
         }
     }
 
@@ -105,26 +105,24 @@ const DatagridAccordionRow = React.forwardRef((props,ref)=>{
                 icon = {"information-outline"}
             ></Avatar>
         }
-    } else if(selectable === false){
-        _rP.disabled = true;
     } 
     right = typeof right === 'function'? right ({color:theme.colors.primaryOnSurface,selectable:true,style:[rStyles.lineHeight,styles.right]}) : right;
     const swipeableRef = React.useRef(null);
     return  <Pressable
-                {..._rP}    
+                disabled = {selectable===false?true : false}
                 {...rowProps}
                 testID={testID}
                 children = {null}
                 onPress = {toggleExpander}
                 onLongPress={handleRowToggle}
                 style = {[
-                    _rP.style,rowProps.style,
                     styles.container,
-                    numColumns > 1 && {width:'99%'},
                     styles.bordered,
-                    wrapperStyle,
                     wrapStyle,
-                    style,
+                    rowProps.style,
+                    numColumns > 1 && styles.multiColumns,
+                    selected && styles.selected,
+                    //style,
                 ]}
                 ref = {React.useMergeRefs(ref,innerRef)}
         >
@@ -221,11 +219,17 @@ const styles = StyleSheet.create({
     bordered : {
         //borderColor: "#ced4da",
         //borderWidth : 1,
+        //paddingHorizontal:10,
+    },
+    multiColumns : {
+        paddingHorizontal : 5,
+        width : "98%"
     },
     renderedContent : {
         flexDirection : 'row',
         alignItems : 'center',
-        justifyContent : 'center'
+        justifyContent : 'center',
+        paddingVertical : 10,
     },
     right : {
         marginHorizontal : 0,
@@ -244,25 +248,25 @@ const styles = StyleSheet.create({
         alignSelf : 'flex-start',
     },
     container : {
-        marginVertical : 10,
-        paddingVertical : 5,
-        paddingHorizontal : isMobileNative()? 10 : 0,
+        paddingVertical : 0,
+        paddingHorizontal : 0,
         marginHorizontal : 5,
         flexWrap : 'nowrap',
         justifyContent : 'center',
         width : '100%',
     },
-    containerSelected : {
-        paddingLeft : 2,
-    },
     avatarContent : {
         marginRight : 5,
     },
     hasNotAvatar : {
         borderLeftWidth : 5,
-        paddingLeft : 2,
+        paddingLeft : 0,
         height : "100%"
-    }
+    },
+    selected : {
+        paddingHorizontal : 0,
+        paddingVertical : 0,
+    },
 });
 
 DatagridAccordionRow.displayName = 'DatagridAccordionRow';

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

@@ -23,7 +23,7 @@ import RenderType from "../RenderType";
 import { flatMode} from "$ecomponents/TextField";
 import List from "$ecomponents/Table/List";
 import theme,{Colors} from "$theme";
-import {getRowStyle,styles as rStyles} from "../utils";
+import {styles as rStyles} from "../utils";
 import Avatar from "$ecomponents/Avatar";
 import {defaultObj,isOb,isNonNullString} from "$cutils";
 import PropTypes from "prop-types";
@@ -94,13 +94,10 @@ const DatagridFactory = (Factory)=>{
             const formatValue = this.formatValue.bind(this);
             return {...this.getActionsArgs(),valueFormatter:formatValue,formatValue,abreviateValues:this.state.abreviateValues,row:item,items:this.state.data,item,rowData:item,index,rowIndex:index,rowCounterIndex:rowIndexCount,rowIndexCount};
         }
-        getRenderingItemProps ({item,rowKey,numColumns,index}){
+        getRenderingItemProps ({item,rowKey,index}){
             this.renderingItemsProps = isObj(this.renderingItemsProps)? this.renderingItemsProps : {};
-            const wrapperStyle = getRowStyle({row:item,index,numColumns,isAccordion:true,rowIndex:index});
             if(this.renderingItemsProps[rowKey]){
-                const it = this.renderingItemsProps[rowKey];
-                it.wrapperStyle = wrapperStyle;
-                return it;
+                return this.renderingItemsProps[rowKey];
             }
             const callArgs = this.getItemCallArgs({item,index});
             const accordion = this.props.accordion;
@@ -169,7 +166,7 @@ const DatagridFactory = (Factory)=>{
             }
             this.renderingItemsProps[rowKey] = {
                 testID,
-                wrapperStyle,title,right,rightProps,description,avatarContent,rowProps,avatarProps,
+                title,right,rightProps,description,avatarContent,rowProps,avatarProps,
                 bottomSheetTitlePrefix : defaultStr(renderedContent?.bottomSheetTitlePrefix,accordionProps.bottomSheetTitlePrefix,accordion?.bottomSheetTitlePrefix)
             }
             return this.renderingItemsProps[rowKey];
@@ -200,8 +197,8 @@ const DatagridFactory = (Factory)=>{
                 selectable = {this.props.selectable}
                 {...defaultObj(this.props.accordionProps)}
                 accordion = {this.props.accordion}
+                {...this.getRenderingItemProps({item,index,rowKey})}
                 numColumns = {numColumns}
-                {...this.getRenderingItemProps({item,numColumns,index,rowKey})}
                 key = {index}
                 ref = {(el)=>{
                     if(isObj(this.renderingItemsProps) && isObj(this.renderingItemsProps[rowKey]) ){

package/src/components/Datagrid/utils.js

@@ -103,6 +103,8 @@ export const ROW_SELECTED_STYLE = {
     }
 }
 
+export const SELECTED_BORDER_COLOR = "rgb(251, 207, 232)";
+
 export const ROW_BORDER_STYLE = {
     marginHorizontal : 0,
     marginVertical : 0,
@@ -171,7 +173,9 @@ export const getRowStyle = ({row,bordered,numColumns,rowData,isAccordion,isTable
         style.push(rowIndex%2===0?styles.even : theme.isDark()?styles.oddDark : styles.odd)
     }
     if(selected){
-        style.push(styles.selected,{borderBottomWidth:1,borderBottomColor:theme.colors.primary})
+        const selectedBcolor = theme.isDark()? SELECTED_BORDER_COLOR : theme.colors.primary;
+        const bordered = isAccordion ? null : {borderBottomWidth:1,borderBottomColor:selectedBcolor,borderTopWidth:1,borderTopColor:selectedBcolor};
+        style.push(styles.selected,bordered);
     }
     if(paid || row.paid){
         style.push(styles.paid);

package/src/components/List/Common.js

@@ -9,22 +9,15 @@ 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";
+import { useList,useGetNumColumns } from "./hooks";
 
 const CommonListComponent = React.forwardRef((props,ref)=>{
     const context = useList(props);
-    let {responsive,testID,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;
+    let {testID,defaultItemHeight,itemHeight,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);
     containerProps = defaultObj(containerProps);
-    responsive = defaultBool(responsive,false);
-    const dimensions = responsive ? useWindowDimensions() : Dimensions.get("window");
-    if(responsive){
-        numColumns = grid.numColumns(windowWidth);
-    } else {
-        numColumns = defaultDecimal(numColumns,1);
-    }
-    const itemWindowWidth = dimensions.width/numColumns;
+    const {itemWindowWidth} = useGetNumColumns(props);  
     let scrollEndTimeout = React.useRef(null);
     const listRef = React.useRef(null);
     const hasCustomBackToTop = typeof customBackToTopRef == 'function'? true : false;

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

@@ -13,6 +13,7 @@ import Dimensions from "$cdimensions";
 import { StyleSheet } from "react-native";
 import {isMobileNative} from "$cplatform";
 import {addClassName,removeClassName} from "$cutils/dom";
+import { useGetNumColumns } from "../hooks";
 
 const propTypes = {
     ...defaultObj(Virtuoso.propTypes),
@@ -32,10 +33,11 @@ const propTypes = {
     isScrolling : PropTypes.func,
 };
 /***@see : https://virtuoso.dev/virtuoso-api-reference/ */
-const VirtuosoListComponent = React.forwardRef(({onRender,id,fixedHeaderContent,rowProps,renderTable,listClassName,components,itemProps,windowWidth,numColumns,responsive,testID,renderItem,onEndReached,onLayout,onContentSizeChange,onScroll,isScrolling,estimatedItemSize,onEndReachedThreshold,containerProps,style,autoSizedStyle,...props},ref)=>{
+const VirtuosoListComponent = React.forwardRef(({onRender,id,fixedHeaderContent,numColumns:cNumCol,rowProps,renderTable,listClassName,components,itemProps,windowWidth,responsive,testID,renderItem,onEndReached,onLayout,onContentSizeChange,onScroll,isScrolling,estimatedItemSize,onEndReachedThreshold,containerProps,style,autoSizedStyle,...props},ref)=>{
     if(renderTable){
         responsive = false;
     }
+    const {numColumns} = useGetNumColumns({responsive,numColumns:cNumCol,windowWidth})
     const Component = React.useMemo(()=>renderTable ? TableVirtuoso : responsive?VirtuosoGrid:Virtuoso,[responsive,renderTable]);
     const context = useList(props);
     itemProps = defaultObj(itemProps);
@@ -162,7 +164,7 @@ const VirtuosoListComponent = React.forwardRef(({onRender,id,fixedHeaderContent,
             useWindowScroll = {false}
             totalCount = {items.length}
             itemContent = {(index)=>{
-                return renderItem({index,item:items[index],items})
+                return renderItem({index,numColumns,item:items[index],items})
             }}
             atBottomStateChange = {()=>{
                 if(typeof onEndReached =='function'){

package/src/components/List/hooks.js

@@ -1,7 +1,8 @@
 import React from "$react";
 import { prepareItems as customPrepareItems} from "./utils";
-import {defaultFunc} from "$cutils";
-
+import {defaultFunc,defaultBool,defaultDecimal} from "$cutils";
+import Dimensions,{isMobileMedia,useWindowDimensions} from "$cdimensions";
+import {grid} from "$theme";
 /**** retourne le contexte associé au composant List
     
 */
@@ -20,4 +21,16 @@ export const useList = ({items,filter,prepareItems,...props})=>{
         return r;
     },[items,canPrepareItems]);
     return context;
+}
+
+export const useGetNumColumns = ({windowWidth,numColumns,responsive})=>{
+    responsive = defaultBool(responsive,false);
+    const dimensions = responsive ? useWindowDimensions() : Dimensions.get("window");
+    if(responsive){
+        numColumns = grid.numColumns(windowWidth);
+    } else {
+        numColumns = defaultDecimal(numColumns,1);
+    }
+    const itemWindowWidth = dimensions.width/numColumns;
+    return {numColumns,itemWindowWidth,responsive};
 }

package/src/components/Table/Row/RowWrapper.native.js

@@ -7,7 +7,7 @@ import { getRowStyle } from "$ecomponents/Datagrid/utils";
 
 const TableRowWrapperComponent = forwardRef(({children,colSpan,...props},ref)=>{
     const {bordered,withDatagridContext} = useTable();
-    const selected = withDatagridContext ? useIsRowSelected(props) : false;
+    const selected = withDatagridContext ? useIsRowSelected(props.rowData || props.rowKey, props.rowIndex) : false;
     const rowStyle = useMemo(()=>{
         return getRowStyle({...props,bordered});
     },[selected])

package/src/components/Table/index.js

@@ -51,7 +51,7 @@ const getOnScrollCb = (refs,pos,cb2)=>{
     return isMobileNative()? cb : debounce(cb,200);
 }
 
-const TableComponent = React.forwardRef(({containerProps,listContainerStyle,onRender,height,progressBar,renderListContent,children,renderEmpty,renderItem,isRowSelected,headerScrollViewProps,footerScrollViewProps,scrollViewProps,renderFooterCell,footerCellContainerProps,filterCellContainerProps,headerCellContainerProps,headerProps,rowProps:customRowProps,cellContainerProps,hasFooters,renderHeaderCell,renderFilterCell,columnProps,getRowKey,columnsWidths,colsWidths,columns,...props},tableRef)=>{
+const TableComponent = React.forwardRef(({containerProps,listContainerStyle,onRender,height,progressBar,renderListContent,children,renderEmpty,renderItem,headerScrollViewProps,footerScrollViewProps,scrollViewProps,renderFooterCell,footerCellContainerProps,filterCellContainerProps,headerCellContainerProps,headerProps,rowProps:customRowProps,cellContainerProps,hasFooters,renderHeaderCell,renderFilterCell,columnProps,getRowKey,columnsWidths,colsWidths,columns,...props},tableRef)=>{
     containerProps = defaultObj(containerProps);
     cellContainerProps = defaultObj(cellContainerProps);
     scrollViewProps = defaultObj(scrollViewProps);
@@ -252,8 +252,8 @@ const TableComponent = React.forwardRef(({containerProps,listContainerStyle,onRe
                                 const index = props['data-index'];
                                 const item = getRowByIndex(index) || props?.item || null;
                                 if(!item) return null;
-                                const args = {rowData:item,rowIndex:index,bordered,isTable:true};
-                                args.isSelected = withDatagridContext ? isRowSelected(args) : false;
+                                const args = {rowData:item,rowIndex:index,index,bordered,isTable:true};
+                                args.selected = withDatagridContext ? useIsRowSelected(item,index) : false;
                                 return <TableRowComponent {...props} style={[getRowStyle(args),props.style]}/>
                             },
                             Table: VirtuosoTableComponent,

package/src/screens/Help/openLibraries.js

@@ -1 +1 @@
-module.exports = {"@FTO-CONSULT/EXPO-UI":{"name":"@FTO-CONSULT/EXPO-UI","version":"6.25.2","homepage":"https://github.com/borispipo/expo-ui#readme"}};
+module.exports = {"@fto-consult/expo-ui":{"name":"@fto-consult/expo-ui","version":"6.25.1","repository":{"type":"git","url":"git+https://github.com/borispipo/expo-ui.git"},"homepage":"https://github.com/borispipo/expo-ui#readme"}};