@fto-consult/expo-ui 2.26.12 → 2.27.1

package/package.json

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

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

@@ -234,12 +234,6 @@ export default class CommonDatagridComponent extends AppComponent {
             aggregatorFunctions : {value : extendAggreagatorFunctions(this.props.aggregatorFunctions)},
             ///les types d'affichage
             displayTypes : {value : hasFoundDisplayTypes ? disTypes : Object.clone(displayTypes)},
-            /***@see : https://reactnative.dev/docs/panresponder */
-            panResponder : {value : PanResponder.create({
-                onStartShouldSetPanResponder: (evt, gestureState) => false,
-                onPanResponderMove: (evt, gestureState) =>false,
-                onStartShouldSetPanResponderCapture: (evt, gestureState) =>false,
-            }),},
             sectionListColumnsSize : {value : {current:0}}, //la taille du nombre d'éléments de section dans les colonnes
         }) 
         const sessionAggregator = defaultStr(this.getSessionData("aggregatorFunction")).trim();

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

@@ -200,7 +200,7 @@ const DatagridFactory = (Factory)=>{
                     maxHeight = diff;
                 }
             }
-            const rPagination = showPagination ? <View {...this.panResponder.panHandlers} style={[styles.paginationContainer]}>
+            const rPagination = showPagination ? <View style={[styles.paginationContainer]}>
                 <ScrollView horizontal showsHorizontalScrollIndicator={!isLoading} style={styles.paginationContainerStyle} contentContainerStyle={styles.minW100}>
                     <View style={[styles.paginationContent]}>
                         <View testID={testID+"_HeaderQueryLimit"}>
@@ -319,7 +319,7 @@ const DatagridFactory = (Factory)=>{
                     </View>
                 </ScrollView>
             </View> : null;
-            return <View {...this.panResponder.panHandlers} style={[styles.container,{maxHeight}]} pointerEvents={pointerEvents}>
+            return <View style={[styles.container,{maxHeight}]} pointerEvents={pointerEvents}>
                 <View ref={this.layoutRef}>
                     {this.props.showActions !== false ? <DatagridActions 
                         pointerEvents = {pointerEvents}

package/src/components/Form/{KeyboardAvoidingView.js → KeyboardAvoidingView/index.native.js}

@@ -1,8 +1,8 @@
-import {isIos,isAndroid,isNativeMobile,isTouchDevice} from "$cplatform";
+import {isIos} from "$cplatform";
 import {KeyboardAvoidingView,StyleSheet} from 'react-native';
 
 export default function KeyboardAvoidingViewComponent({ children,...rest }){
-    return isNativeMobile() || isTouchDevice() ? (
+    return isIos() ? (
       <KeyboardAvoidingView
         style={styles.wrapper}
         behavior="padding"
@@ -11,9 +11,7 @@ export default function KeyboardAvoidingViewComponent({ children,...rest }){
       >
         {children}
       </KeyboardAvoidingView>
-    ) : (
-      <>{children}</>
-    );
+    ) : children;
 };
 
 const styles = StyleSheet.create({

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

@@ -0,0 +1,33 @@
+// 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;

package/src/components/ScrollView/index.js

@@ -1,16 +1,30 @@
 import React from '$react';
 import { FlatList } from 'react-native';
-import { ScrollView,Dimensions } from 'react-native';
+import { ScrollView,Dimensions,useWindowDimensions } from 'react-native';
 import PropTypes from "prop-types";
 import View from "$ecomponents/View";
-import {isMobileNative} from "$cplatform";
+import {isMobileNative,isTouchDevice} from "$cplatform";
 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 testID = defaultStr(customTestID,'RN_ScrollViewComponent');
   const cProps = defaultObj(contentProps);
+  const [layout,setLayout] = React.useState(Dimensions.get("window"));
+  const {height} = layout;
+  React.useEffect(()=>{
+    const onResizePage = ()=>{
+      if(isTouchDevice()) return;
+      setTimeout(()=>{
+         setLayout(Dimensions.get("window"))
+      },200);
+    }
+    APP.on(APP.EVENTS.RESIZE_PAGE,onResizePage);
+    return ()=>{
+      APP.off(APP.EVENTS.RESIZE_PAGE,onResizePage);
+    }
+  },[])
   return  virtualized ? <FlatList
     {...rest}
     ref = {ref}
@@ -19,7 +33,7 @@ const ScrollViewComponent = React.forwardRef((props,ref) => {
     keyExtractor={(_e, i) => 'dom' + i.toString()}
     ListEmptyComponent={null}
     renderItem={null}
-    contentContainerStyle = {[!isNative && {flex:1,flexGrow: 1,maxHeight:'100vh'},rest.contentContainerStyle]}
+    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 ref={ref} {...rest} testID={testID} children={children}/>

package/src/components/Swiper/index.js

@@ -120,7 +120,6 @@ class SwiperComponent extends React.Component {
        * @see : https://stackoverflow.com/questions/45810262/how-to-disable-panresponder-on-child-component-react-native 
        * 
       */
-      onStartShouldSetPanResponderCapture: (evt, gestureState) => this.props.stopChildrenEventPropagation !== false ? true : false,
       onMoveShouldSetPanResponderCapture: (e, gestureState) => {
         const { gesturesEnabled, vertical, minDistanceToCapture } = this.props;
 

package/src/components/Table/index.js

@@ -224,7 +224,7 @@ const TableComponent = React.forwardRef(({containerProps,renderListContent,child
             }
         }
     }
-    return <View testID= {testID+"_Container"} pointerEvents='box-none' {...containerProps} style={[styles.container,{alignItems:'stretch'},containerProps.style]}>
+    return <View testID= {testID+"_Container"} {...containerProps} style={[styles.container,{alignItems:'stretch'},containerProps.style]}>
             <RNView style={[cStyle]} testID={testID+"_Headers_ScrollViewContainer"}>
                 <ScrollView
                     testID={testID+"_HeaderScrollView"}