@fto-consult/expo-ui 2.42.1 → 2.43.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fto-consult/expo-ui",
-  "version": "2.42.1",
+  "version": "2.43.1",
   "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": "^2.3.0",
+    "@fto-consult/common": "^2.4.4",
     "@gorhom/portal": "^1.0.14",
     "@react-native-async-storage/async-storage": "~1.17.3",
     "@react-native-community/datetimepicker": "6.5.2",

package/src/App.js

@@ -32,7 +32,8 @@ import { AppState } from 'react-native'
 import {canFetchOffline} from "$capi/utils";
 import {defaultNumber} from "$utils";
 import { timeout as SWR_REFRESH_TIMEOUT} from '$ecomponents/Datagrid/SWRDatagrid';
-
+import { Dimensions,Keyboard } from 'react-native';
+import {isTouchDevice} from "$platform";
 import * as Utils from "$utils";
 Object.map(Utils,(v,i)=>{
   if(typeof v =='function' && typeof window !='undefined' && window && !window[i]){
@@ -48,6 +49,7 @@ export default function getIndex(options){
     const activeScreenRef = React.useRef('');
     const prevActiveScreenRef = React.useRef('');
     const appStateRef = React.useRef({});
+    const isKeyboardOpenRef = React.useRef(false);
     React.useEffect(()=>{
         ///la fonction de rappel lorsque le composant est monté
         let cb = typeof onMount =='function'? onMount() : null;
@@ -64,9 +66,39 @@ export default function getIndex(options){
         }
         APP.on(APP.EVENTS.SCREEN_FOCUS,onScreenFocus);
         APP.on(APP.EVENTS.SCREEN_BLUR,onScreenBlur);
+        const triggerKeyboardToggle = (status)=>{
+          APP.trigger(APP.EVENTS.KEYBOARD_DID_TOGGLE,{shown:status,status,visible:status,hide : !status});
+        }
+        const keyBoardDidShow = ()=>{
+          APP.trigger(APP.EVENTS.KEYBOARD_DID_SHOW);
+          triggerKeyboardToggle(true);
+        },keyBoardDidHide = ()=>{
+          APP.trigger(APP.EVENTS.KEYBOARD_DID_HIDE);
+          triggerKeyboardToggle(false);
+        }
+        const keyBoardDidShowListener = Keyboard.addListener("keyboardDidShow",keyBoardDidShow);
+        const keyBoardDidHideListener = Keyboard.addListener("keyboardDidHide",keyBoardDidHide);
+        const listener = isTouchDevice() && typeof window !=='undefined' && window && window.visualViewport && typeof window.visualViewport.addEventListener =='function'? 
+          () => {
+            const minKeyboardHeight = 300;
+            const screen = Dimensions.get("screen");
+            const newState = screen.height - minKeyboardHeight > window.visualViewport.height
+            if (isKeyboardOpenRef.current != newState) {
+                isKeyboardOpenRef.current = newState;
+                newState ? keyBoardDidShow() : keyBoardDidHide();
+            }
+        } : undefined;
+        if(listener){
+            window.visualViewport.addEventListener('resize', listener);
+        }
         return ()=>{
           APP.off(APP.EVENTS.SCREEN_FOCUS,onScreenFocus);
           APP.off(APP.EVENTS.SCREEN_BLUR,onScreenBlur);
+          keyBoardDidShowListener && keyBoardDidShowListener.remove && keyBoardDidShowListener.remove();
+          keyBoardDidHideListener && keyBoardDidHideListener.remove && keyBoardDidHideListener.remove();
+          if(listener){
+            window.visualViewport.removeEventListener('resize', listener);
+          }
           if(typeof onUnmount =='function'){
              onUnmount();
           }

package/src/components/BottomSheet/Sheet.js

@@ -16,7 +16,7 @@ import {defaultStr} from "$utils";
 import View from "$ecomponents/View";
 import {Easing} from "react-native";
 import Portal from "$ecomponents/Portal";
-import ScrollView  from "$ecomponents/ScrollView";
+import { ScrollView } from "react-native";
 
 import {
   BackHandler,

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

@@ -1,8 +1,7 @@
 import CommonDatagrid,{TableData as CommonDatagridTableData} from "../Common";
 import {defaultObj,defaultArray,defaultStr,defaultDecimal,isNonNullString} from "$utils";
 import View from "$ecomponents/View";
-import { StyleSheet,Dimensions,Pressable } from "react-native";
-import ScrollView  from "$ecomponents/ScrollView";
+import { StyleSheet,Dimensions,Pressable ,ScrollView} from "react-native";
 import {isMobileOrTabletMedia} from "$cplatform/dimensions";
 import DatagridActions from "../Actions";
 import {SELECTABLE_COLUMN_WIDTH,getRowStyle} from "../utils";
@@ -161,7 +160,7 @@ const DatagridFactory = (Factory)=>{
                 last:pagLast, 
                 total:pagination.rows,pages:countPages
             })*/
-            const {visibleColumns} = this.preparedColumns;
+            const {visibleColumns,sortedColumn} = this.preparedColumns;
             const hasFootersFields = this.hasFootersFields();
             const {columnsWidths:widths} = this.state;
             const showFooters = this.canShowFooters(), showFilters = this.canShowFilters();
@@ -319,6 +318,7 @@ const DatagridFactory = (Factory)=>{
                         }
                         this.updateLayout(args);
                     }}
+                    sortedColumn = {sortedColumn}
                     onRender = {this.onRender.bind(this)}
                     getItemType = {this.getFlashListItemType.bind(this)}
                     renderItem = {this.renderFlashListItem.bind(this)}
@@ -342,6 +342,7 @@ const DatagridFactory = (Factory)=>{
                         }
                     }}
                     data = {this.state.data}
+                    footers = {this.getFooterValues()}
                     renderHeaderCell={this.renderHeaderCell.bind(this)}
                     renderFilterCell={this.renderFilterCell.bind(this)}
                     renderFooterCell={this.renderFooterCell.bind(this)}

package/src/components/Dialog/Dialog.js

@@ -2,8 +2,8 @@
 import {defaultStr,isObj} from "$utils";
 import {Dialog} from "react-native-paper";
 import {isNonNullString,defaultVal,defaultNumber,defaultObj,defaultBool } from "$utils";
-import {StyleSheet} from "react-native";
-import ScrollView  from "$ecomponents/ScrollView";
+import {StyleSheet,ScrollView} from "react-native";
+//import ScrollView  from "$ecomponents/ScrollView";
 import Modal from "$ecomponents/Modal";
 import PropTypes from "prop-types";
 import React from "$react";

package/src/components/Drawer/NavigationView.js

@@ -1,6 +1,5 @@
 import React from "$react";
-import {StyleSheet } from "react-native";
-import ScrollView  from "$ecomponents/ScrollView";
+import {StyleSheet,ScrollView } from "react-native";
 import DrawerItems from "./DrawerItems";
 import {MINIMIZED_ICON_SIZE,ICON_SIZE, canBeMinimizedOrPermanent} from './utils';
 import DrawerHeader from "./DrawerHeader";

package/src/components/Drawer/index.js

@@ -1,6 +1,5 @@
 import {StyleSheet,useWindowDimensions} from 'react-native';  
 import DrawerLayout from './DrawerLayout';
-import ScrollView  from "$ecomponents/ScrollView";
 import {isIos} from "$cplatform";
 import React from "$react";
 import PropTypes from "prop-types";

package/src/components/ErrorBoundary/ErrorMessage.js

@@ -1,7 +1,6 @@
 import * as React from 'react'
 import Types from 'prop-types';
-import {StyleSheet,View,useWindowDimensions} from "react-native";
-import ScrollView  from "$ecomponents/ScrollView";
+import {StyleSheet,ScrollView,View,useWindowDimensions} from "react-native";
 import {Paragraph,Button,List } from "react-native-paper";
 import Portal from "$ecomponents/Portal";
 import theme from "$theme";

package/src/components/Menu/Menu.js

@@ -1,6 +1,6 @@
 import React,{BaseComponent as AppComponent} from '$react';
 import View from "$components/View";
-import ScrollView  from "$components/ScrollView";
+import { ScrollView } from 'react-native';
 import {
   Platform,
   StyleSheet,

package/src/components/ScrollView/index.js

@@ -1,49 +1,42 @@
 import React from '$react';
-import { FlatList } from 'react-native';
-import { ScrollView,Dimensions,useWindowDimensions } from 'react-native';
+import { ScrollView,Dimensions } from 'react-native';
 import PropTypes from "prop-types";
 import View from "$ecomponents/View";
-import {isMobileNative,isTouchDevice} from "$cplatform";
-import {isDesktopMedia} from "$cdimensions";
+import theme from "$theme";
 import {defaultStr,defaultObj} from "$utils";
-const isNative = isMobileNative();
 import APP from "$capp/instance";
-const ScrollViewComponent = React.forwardRef((props,ref) => {
-  const {virtualized,contentProps,mediaQueryUpdateNativeProps,testID:customTestID,children,screenIndent:sIndent,...rest} = props;
+const ScrollViewComponent = React.forwardRef(({virtualized,contentProps,containerProps,mediaQueryUpdateNativeProps,testID:customTestID,children,screenIndent:sIndent,...rest},ref) => {
+  const isKeyboardOpenRef = React.useRef(false);
   const testID = defaultStr(customTestID,'RN_ScrollViewComponent');
-  const cProps = defaultObj(contentProps);
+  containerProps = defaultObj(containerProps)
   const [layout,setLayout] = React.useState(Dimensions.get("window"));
   const {height} = layout;
   React.useEffect(()=>{
+    const onKeyboardToggle = ({visible})=>{
+      isKeyboardOpenRef.current = visible;
+     };
     const onResizePage = ()=>{
-      if(isTouchDevice()) return;
       setTimeout(()=>{
+         //if(isKeyboardOpenRef.current) return;
          setLayout(Dimensions.get("window"))
-      },200);
+      },300);
     }
     APP.on(APP.EVENTS.RESIZE_PAGE,onResizePage);
+    APP.on(APP.EVENTS.KEYBOARD_DID_TOGGLE,onKeyboardToggle)
     return ()=>{
       APP.off(APP.EVENTS.RESIZE_PAGE,onResizePage);
+      APP.off(APP.EVENTS.KEYBOARD_DID_TOGGLE,onKeyboardToggle);
     }
-  },[])
-  const showIndicator = true;//!isTouchDevice() || isDesktopMedia();
-  return  virtualized ? <FlatList
-    //showsHorizontalScrollIndicator = {showIndicator}  
-    //showsVerticalScrollIndicator={showIndicator} 
-    {...rest}
-    ref = {ref}
-    testID = {testID}
-    data={[]}
-    keyExtractor={(_e, i) => 'dom' + i.toString()}
-    ListEmptyComponent={null}
-    renderItem={null}
-    contentContainerStyle = {[!isNative && {flex:1,flexGrow: 1,maxHeight:Math.max(height-100,250)},rest.contentContainerStyle]}
-    ListHeaderComponent={() => <View testID={testID+'_FlatListContent'} {...cProps} mediaQueryUpdateNativeProps = {mediaQueryUpdateNativeProps}
-    >{children}</View>}
-    /> : <ScrollView 
-      //showsHorizontalScrollIndicator = {showIndicator}  
-      //showsVerticalScrollIndicator={showIndicator} 
-      ref={ref} {...rest} testID={testID} children={children}/>
+  },[]);
+  const contentContainerStyle = [{maxHeight:Math.max(height-100,250),width:'100%'},rest.contentContainerStyle];
+  return  <View {...containerProps} style={[theme.styles.w100,containerProps.style]} testID={testID+"_ScrollViewContainer"}>
+    <ScrollView 
+      ref={ref} {...rest} 
+      testID={testID}
+      children={children}
+      contentContainerStyle = {contentContainerStyle}
+    />
+  </View>
 });
 
 ScrollViewComponent.displayName = "ScrollViewComponent";

package/src/components/Table/index.js

@@ -45,7 +45,7 @@ const getOnScrollCb = (refs,pos,cb2)=>{
     return isMobileNative()? cb : debounce(cb,200);
 }
 
-const TableComponent = React.forwardRef(({containerProps,listContainerStyle,onRender,height,progressBar,filter:customFilter,renderListContent,children,renderEmpty,renderItem,isRowSelected,headerScrollViewProps,footerScrollViewProps,scrollViewProps,showFooters,renderFooterCell,footerCellContainerProps,filterCellContainerProps,headerContainerProps,headerCellContainerProps,headerProps,rowProps:customRowProps,renderCell,cellContainerProps,hasFooters,renderHeaderCell,renderFilterCell,columnProps,getRowKey,columnsWidths,colsWidths,footerContainerProps,showHeaders,showFilters,columns,data,testID,...props},tableRef)=>{
+const TableComponent = React.forwardRef(({containerProps,sortedColumn,listContainerStyle,onRender,height,progressBar,filter:customFilter,renderListContent,children,renderEmpty,renderItem,isRowSelected,headerScrollViewProps,footerScrollViewProps,scrollViewProps,showFooters,renderFooterCell,footerCellContainerProps,filterCellContainerProps,headerContainerProps,headerCellContainerProps,headerProps,rowProps:customRowProps,renderCell,cellContainerProps,hasFooters,renderHeaderCell,renderFilterCell,columnProps,getRowKey,columnsWidths,colsWidths,footerContainerProps,showHeaders,showFilters,columns,data,testID,...props},tableRef)=>{
     containerProps = defaultObj(containerProps);
     testID = defaultStr(testID,"RN_TableComponent");
     cellContainerProps = defaultObj(cellContainerProps);
@@ -128,7 +128,7 @@ const TableComponent = React.forwardRef(({containerProps,listContainerStyle,onRe
           columnIndex++;
         });
         return {columns:cols,columnsNames,headers,visibleColumns,vColumnsMapping,hasFooters,footers,filters};
-      },[columns]);
+      },[columns,sortedColumn,props.footers]);
     const {columns:cols,headers,footers,filters,hasFooters:stateHasFooters,columnsNames,vColumnsMapping,visibleColumns} =  preparedColumns;
     headerContainerProps = defaultObj(headerContainerProps);
     footerContainerProps = defaultObj(footerContainerProps);
@@ -340,7 +340,7 @@ const TableComponent = React.forwardRef(({containerProps,listContainerStyle,onRe
                         testID = {testID}
                         prepareItems = {false}
                         items = {items}
-                        contentContainerStyle = {[styles.contentContainer,{with:listWidth,minWidth:totalWidths,position:'absolute',right:'0'}]}
+                        contentContainerStyle = {[styles.contentContainer,{width:listWidth,minWidth:totalWidths,position:'absolute',right:'0'}]}
                         style = {[styles.datagrid,{width:listWidth,minWidth:totalWidths}]}
                         keyExtractor = {typeof getRowKey =='function'? getRowKey : React.getKey}
                         onScroll = {getOnScrollCb([absoluteScrollViewRef],(args)=>{

package/src/layouts/Screen/ScreenWithOrWithoutAuthContainer.js

@@ -3,7 +3,6 @@ import {StyleSheet} from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import PropTypes from "prop-types";
 import {defaultObj,defaultStr,defaultNumber,defaultBool} from "$utils";
-import ScrollView from '$ecomponents/ScrollView';
 import View from "$ecomponents/View";
 import { useNavigation} from '$cnavigation';
 import Fab from "$elayouts/Fab";
@@ -13,6 +12,7 @@ import ErrorBoundary from "$ecomponents/ErrorBoundary";
 import Portal from "$ecomponents/Portal";
 import theme,{StyleProp} from "$theme";
 import StatusBar from "$ecomponents/StatusBar";
+import { ScrollView } from 'react-native';
 
 const getDefaultTitle = (nTitle,returnStr)=>{
   let titleStr = React.getTextContent(nTitle);

package/src/layouts/Screen/TableData.js

@@ -88,7 +88,7 @@ export default class TableDataScreenComponent extends FormDataScreen{
                         args = {...f,...args,fetch,columnField:name,fieldName:name,id:args.value};
                         const {context} = args;
                         const r = typeof onBlur =='function'? onBlur (args) : undefined;
-                        if(r === false) return r;
+                        if(r === false || (!args.value && typeof args.value != 'number')) return r;
                         //on applique la validation seulement en cas de non mise à jour
                         if(!this.isCurrentDocEditingUpdate() && context && typeof context.onNoValidate =='function'){
                             const cb = typeof field.fetchUniqueId =='function'? field.fetchUniqueId : typeof this.fetchUniqueId =='function'? this.fetchUniqueId : undefined;
@@ -181,7 +181,7 @@ export default class TableDataScreenComponent extends FormDataScreen{
     }
     /**** retourne les props en cours d'édition */
     getCurrentEditingProps (){
-        return defaultObj(this.INITIAL_STATE.props);
+        return defaultObj(this.currentRenderingProps);
     }
     /* Attention, cette méthode est appélée dans la méthode getComponentProps de la classe parente. 
     *  Tenir de cette information capitale pour bien négocier l'appel de la dite méthode. Elle permet de retourner 
@@ -303,7 +303,7 @@ export default class TableDataScreenComponent extends FormDataScreen{
             isUpdated,
             fields,
         });
-        const rActionsArg = this.INITIAL_STATE.props = {
+        const rActionsArg = this.currentRenderingProps = {
             ...rest,
             ...formProps,
             context,

package/src/components/KeyboardAvoidingView/index.web.old.js

@@ -1,33 +0,0 @@
-// Copyright 2022 @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 React from "$react";
-import { Keyboard, Text, TextInput, StyleSheet, View } from "react-native";
-
-/****
- * rewrite of @see : https://github.com/necolas/react-native-web/blob/master/packages/react-native-web/src/exports/KeyboardAvoidingView/index.js
- */
-const KeyboardAvoidingView = ({behavior,contentContainerStyle,keyboardVerticalOffset,...rest})=>{
-    const frameRef = React.useRef(null);
-    const onLayout = (event)=>{
-        frameRef.current = event.nativeEvent.layout;
-    };
-    React.useEffect(() => {
-        const keyboardDidShowListener = Keyboard.addListener(
-          'keyboardDidShow',
-          (args) => {}
-        );
-        const keyboardDidHideListener = Keyboard.addListener(
-          'keyboardDidHide',
-          (args) => {}
-        );
-        return () => {
-          keyboardDidHideListener.remove();
-          keyboardDidShowListener.remove();
-        };
-      }, []);
-    return <View onLayout={onLayout} {...rest} />;
-}
-
-export default KeyboardAvoidingView;