@fto-consult/expo-ui 2.11.0 → 2.11.2

package/package.json

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

package/src/components/BackToTop/index.js

@@ -1,7 +1,6 @@
 import Fab from "$ecomponents/Fab";
 import {isObj,defaultStr,defaultVal,defaultObj} from "$utils";
 import React from "$react";
-import { StyleSheet } from 'react-native';
 import PropTypes from "prop-types";
 
 const SCREEN_INDENT = 20;
@@ -23,23 +22,21 @@ const BackToTopComponent = React.forwardRef((props,ref)=>{
     const isMounted = React.useIsMounted();
     const {onPress,accessibilityLabel,onBackToTop,onVisibilityChange,position,icon,...rProps} = props;
     const rest = defaultObj(rProps);
-    const [state,setState] = React.useStateIfMounted({
-        visible : false,
-    });
+    const [visible,setVisible] = React.useState(false);
     const open = ()=>{
-        if(!isMounted() || state.visible)return;
-        setState({...state,visible:true});
+        if(!isMounted() || visible)return;
+        setVisible(true);
     }
     const close = ()=>{
-        if(!isMounted() || !state.visible)return;
-        setState({...state,visible:false});
+        if(!isMounted() || !visible)return;
+        setVisible(false);
     }
  
     const context = {open,close,
         toggleVisibility:(event)=>{
             if(!isMounted()) return;
             let v = toggleVisibility(event);
-            if(typeof v =='boolean' && v !== state.visible){
+            if(typeof v =='boolean' && v !== visible){
                 return v ? open() : close();
             }
             return undefined;
@@ -50,7 +47,7 @@ const BackToTopComponent = React.forwardRef((props,ref)=>{
         if(onVisibilityChange){
             onVisibilityChange({context,visible});
         }
-    },[state.visible])
+    },[visible])
     const style = defaultStr(position).toLowerCase() =='right' ? {
         right: 0
     }  : {left : 0};
@@ -58,7 +55,7 @@ const BackToTopComponent = React.forwardRef((props,ref)=>{
     React.useEffect(()=>{
         React.setRef(ref,context);
     },[])
-    return !state.visible ? null :  <Fab
+    return !visible ? null :  <Fab
         {...rest}
         accessibilityLabel = {defaultStr(rest.accessibilityLabel,'Retour en haut')}
         onPress = {(e)=>{

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

@@ -1510,7 +1510,7 @@ export default class CommonDatagridComponent extends AppComponent {
     }
     UNSAFE_componentWillReceiveProps(nextProps){
         if(!isObjOrArray(nextProps.data) || nextProps.data == this.props.data || stableHash(nextProps.data) == stableHash(this.props.data)) {
-            if(nextProps.isLoading !== this.props.isLoading && typeof nextProps.isLoading =='boolean'){
+            if( typeof this.props.isLoading=='boolean' && nextProps.isLoading !== this.props.isLoading && typeof nextProps.isLoading =='boolean'){
                 this.setIsLoading(nextProps.isLoading)
             }
             return;
@@ -1536,6 +1536,7 @@ export default class CommonDatagridComponent extends AppComponent {
     renderHeaderCell({columnDef,columnField}){
         if(this.isSelectableColumn(columnDef,columnField)){
             return <Checkbox
+                testID = "RN_SelectColumnHeaderCell"
                 checked  ={this.isAllRowsSelected()?true:false}
                 key = {this.getSelectableColumName()}
                 secondaryOnCheck

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

@@ -404,7 +404,7 @@ const styles = StyleSheet.create({
     selectableColumn : {
         width : SELECTABLE_COLUMN_WIDTH,
         //justifyContent:'center',
-        alignItems : 'flex-start',
+        alignItems : 'center',
         paddingVertical : 0,
         marginVertical : 0,
         paddingHorizontal : 0,

package/src/components/Datagrid/utils.js

@@ -65,27 +65,27 @@ export const getImputedBackgroundStyle = (rowData)=>{
 
 
 export const ROW_APPROVED_STYLE = {
-    borderRightColor : APPROVED_COLOR,
-    borderRightWidth : 4,
-    marginRight : MARGIN_HORIZONTAL
+    //borderRightColor : APPROVED_COLOR,
+    //borderRightWidth : 4,
+    //marginRight : MARGIN_HORIZONTAL
 }
 
 export const ROW_ARCHIVED_STYLE = {
-    borderBottomColor : ARCHIVED_COLOR,
-    borderBottomWidth :4,
+    //borderBottomColor : ARCHIVED_COLOR,
+    //borderBottomWidth :4,
     //marginBottom : MARGIN_VERTICAL,
 }
 
 export const ROW_PAID_STYLE = {
-    borderLeftColor : PAID_COLOR,
-    borderLeftWidth : 5,
-    marginLeft : MARGIN_HORIZONTAL
+    //borderLeftColor : PAID_COLOR,
+    //borderLeftWidth : 5,
+    //marginLeft : MARGIN_HORIZONTAL
 }
 
 export const ROW_IMPUTED_STYLE = {
-    borderLeftColor : IMPUTED_COLOR,
-    borderLeftWidth : 5,
-    marginLeft : MARGIN_HORIZONTAL
+    //borderLeftColor : IMPUTED_COLOR,
+    //borderLeftWidth : 5,
+    //marginLeft : MARGIN_HORIZONTAL
 }
 
 export const ROW_ODD_STYLE = {
@@ -110,7 +110,7 @@ export const ROW_BORDER_STYLE = {
     borderRightColor : ROW_BORDER_COLOR,
     borderRightWidth : 0,
     borderTopColor : ROW_BORDER_COLOR,
-    borderTopWidth : 0,
+    borderTopWidth : 0
 }
 
 
@@ -166,7 +166,7 @@ export const getRowStyle = ({row,bordered,numColumns,rowData,isAccordion,isTable
     if(rowIndex !== undefined){
         style.push(rowIndex%2===0?styles.even : theme.isDark()?styles.oddDark : styles.odd)
     }
-    if(selected){
+    if(false && selected){
         style.push(styles.selected,{borderBottomWidth:1,borderBottomColor:theme.colors.primary})
     }
     if(paid || row.paid){

package/src/components/Menu/Menu.js

@@ -20,7 +20,7 @@ import {defaultDecimal,extendObj} from "$utils";
 import theme,{StylePropTypes} from "$theme";
 import APP from "$app/instance";
 import MenuItem from "./Item";
-import {isWeb} from "$platform";
+import { MIN_WIDTH } from './utils';
 
 const RESIZE_PAGE = APP.EVENTS.RESIZE_PAGE;
 
@@ -516,7 +516,8 @@ class _Menu extends AppComponent {
                       shadowMenuContainerStyle,
                       contentStyle,
                       {backgroundColor : theme.colors.surface},
-                      sameWidth && anchorLayout.width ? {width:Math.max(anchorLayout.width,minWidth)} : undefined,
+                      minWidth && {minWidth : Math.max(minWidth,MIN_WIDTH)},
+                      sameWidth && anchorLayout.width ? {width:Math.max(anchorLayout.width,minWidth,MIN_WIDTH)} : undefined,
                     ]
                   }
                 >

package/src/components/Menu/utils.js

@@ -7,6 +7,7 @@ import Expandable from "$ecomponents/Expandable";
 import {cursorPointer} from "$theme";
 import Item from "./Item";
 
+export const MIN_WIDTH = 150;
 
 export const renderItems = (props)=>{
     let _items = [];

package/src/components/Table/AbsoluteScrollView.js

@@ -20,6 +20,7 @@ const AbsoluteScrollView = React.forwardRef(({testID,contentProps,listRef,contai
         styles : {},
         visible : true,
     })
+    const [layoutVisible,_setLayoutVisible] = React.useState(true);
     const {styles,visible} = state,setStyles = (s)=>{
         if(isObj(s)){
             setState({...state,styles:{...styles,...s}});
@@ -31,9 +32,19 @@ const AbsoluteScrollView = React.forwardRef(({testID,contentProps,listRef,contai
                 setState({...state,visible});
             }
         }
-    }
+    },setVisible = (visible)=>{
+        if(typeof visible =='boolean' && visible !== state.visible){
+            setState({...state,visible});
+        }
+    },setLayoutVisible = (layoutVisible)=>{
+        if(typeof layoutVisible =='boolean' && layoutVisible !== state.layoutVisible){
+            _setLayoutVisible(layoutVisible);
+        }
+    }   
     React.setRef(ref,{
         setStyles,
+        setVisible,
+        setLayoutVisible,
         checkVisibility : (args)=>{
             args = defaultObj(args);
             if(isObj(args.contentOffset) && isObj(args.contentSize)){
@@ -56,7 +67,7 @@ const AbsoluteScrollView = React.forwardRef(({testID,contentProps,listRef,contai
         toggleVisible();
     },[styles])
     return <Portal>
-        {<View testID={testID+"_Containter"} {...containerProps} style={[mainStyles.container,containerProps.style,styles.container,{left:win.width-10},!visible &&{display:'none',width:0,opacity:0}]}>
+        {<View testID={testID+"_Containter"} {...containerProps} style={[mainStyles.container,containerProps.style,styles.container,{left:win.width-10},(!visible || !layoutVisible) &&{display:'none',width:0,opacity:0}]}>
             <ScrollView
                 {...props}
                 ref = {scrollViewRef}

package/src/components/Table/index.js

@@ -5,7 +5,7 @@ import PropTypes from "prop-types";
 export const DEFAULT_COLUMN_WIDTH = 60;
 import React from "$react";
 import Label from "$ecomponents/Label";
-import { StyleSheet,View as RNView,ScrollView,Dimensions} from "react-native";
+import { StyleSheet,View as RNView,ScrollView,NativeModules,Dimensions} from "react-native";
 import { getRowStyle } from "$ecomponents/Datagrid/utils";
 import {isMobileNative} from "$cplatform";
 import theme from "$theme";
@@ -213,6 +213,16 @@ const TableComponent = React.forwardRef(({containerProps,renderEmpty,isRowSelect
     React.setRef(tableRef,context);
     const cStyle = {width:listWidth}
     const absoluteScrollViewRef = React.useRef(null);
+    const scrollViewLayoutRef = React.useRef({});
+    const toggleAbsoluteScrollVisible = ()=>{
+        const ref = scrollViewLayoutRef.current;
+        if(isObj(ref.layout) && isObj(ref.content)){
+            const layoutVisible  = Math.abs(ref.content.width - ref.layout.width)<=50 ? false : true;
+            if(absoluteScrollViewRef.current && absoluteScrollViewRef.current.setLayoutVisible){
+                absoluteScrollViewRef.current.setLayoutVisible(layoutVisible);
+            }
+        }
+    }
     return <View testID= {testID+"_Container"} {...containerProps} style={[styles.container,{alignItems:'stretch'},containerProps.style]}>
             <RNView style={[cStyle]} testID={testID+"_Headers_ScrollViewContainer"}>
                 <ScrollView
@@ -234,12 +244,23 @@ const TableComponent = React.forwardRef(({containerProps,renderEmpty,isRowSelect
             {hasEmptyData ? <View testID={testID+"_Empty"} style={styles.hasNotData}>
                     {emptyData}
             </View> : <ScrollView {...scrollViewProps} scrollEventThrottle = {scrollEventThrottle} horizontal contentContainerStyle={[scrollContentContainerStyle,scrollViewProps.contentContainerStyle]} showsVerticalScrollIndicator={false}  
-            onScroll = {getOnScrollCb([headerScrollViewRef,footerScrollViewRef],null,(args)=>{
-                const nativeEvent = args.nativeEvent;
-                if(absoluteScrollViewRef.current && absoluteScrollViewRef.current.checkVisibility){
-                    absoluteScrollViewRef.current.checkVisibility(nativeEvent);
-                }
-            })} ref={scrollViewRef}  testID={testID+"_ScrollView"}>  
+                onScroll = {getOnScrollCb([headerScrollViewRef,footerScrollViewRef],null,(args)=>{
+                    const nativeEvent = args.nativeEvent;
+                    if(absoluteScrollViewRef.current && absoluteScrollViewRef.current.checkVisibility){
+                        absoluteScrollViewRef.current.checkVisibility(nativeEvent);
+                    }
+                })} 
+                onLayout={({nativeEvent:{layout}}) => {
+                    scrollViewLayoutRef.current.layout = layout;
+                    toggleAbsoluteScrollVisible();
+                }}
+                ref={scrollViewRef} 
+                testID={testID+"_ScrollView"}
+                onContentSizeChange = {(width,height)=>{
+                    scrollViewLayoutRef.current.content = {width,height};
+                    toggleAbsoluteScrollVisible();
+                }}
+            >  
                 <FlashList
                     containerProps = {{style:[cStyle]}}
                     //prepareItems = {Array.isArray(items)? false : undefined}
@@ -353,7 +374,7 @@ const styles = StyleSheet.create({
         minHeight : 300,
         paddingBottom : 50,
         paddingLeft : 10,
-        paddingRight : 10,
+        paddingRight : 0,
         flex : 1,
         position : 'relative',
     },