@fto-consult/expo-ui 2.26.11 → 2.27.0

package/package.json

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

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

@@ -28,7 +28,7 @@ import { evalSingleValue,Footer,getFooterColumnValue,isValidAggregator,extendAgg
 import i18n from "$i18n";
 import { makePhoneCall,canMakePhoneCall as canMakeCall} from "$makePhoneCall";
 import copyToClipboard from "$capp/clipboard";
-import { Pressable } from "react-native";
+import { Pressable,PanResponder } from "react-native";
 import TableLink from "$TableLink";
 import appConfig from "$capp/config";
 import stableHash from "stable-hash";
@@ -2696,7 +2696,7 @@ export default class CommonDatagridComponent extends AppComponent {
             return "none";
         }
         if(this.enablePointerEventsRef.current) return true;
-        return this.isLoading()? "none":"box-none";
+        return this.isLoading()? "none":"auto";
     }
     updateLayout(p){
         this.measureLayout(state=>{

package/src/components/FieldSet/index.js

@@ -0,0 +1,64 @@
+// 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 View from "$components/View";
+import Label from "$components/Label";
+import PropTypes from 'prop-types';
+import { StyleSheet } from "react-native";
+import {defaultStr,defaultObj} from "$utils";
+import theme from "$theme";
+
+const FieldSet = React.forwardRef(({testID,style,children,labelProps,containerProps,label,borderColor,...props},ref)=>{
+    testID = defaultStr(testID,"RN_FieldSetComponent");
+    containerProps = defaultObj(containerProps);
+    labelProps = defaultObj(labelProps);
+    borderColor = theme.Colors.isValid(borderColor)?borderColor : theme.colors.divider;
+    return (
+        <View ref ={ref} testID={testID+"_Container"} {...containerProps} style={[styles.container, { borderColor},containerProps.style]}>
+            <Label testID={testID+"_Label"} {...labelProps} style={[styles.label,labelProps.style]}>
+                {React.isValidElement(label,true) && label || null}
+            </Label>
+            <View {...props} testID={testID} style={[styles.content,style]}>
+                {React.isValidElement(children) && children || null}
+            </View>
+        </View>
+    );
+});
+
+FieldSet.propTypes = {
+    label: PropTypes.oneOfType([
+        PropTypes.string,
+        PropTypes.number,
+        PropTypes.node,
+        PropTypes.element,
+    ]),
+    children: PropTypes.element,
+    labelProps : PropTypes.object,
+    containerProps : PropTypes.object,
+    style : theme.StyleProps,
+}
+
+
+const styles = StyleSheet.create({
+    container: {
+        borderWidth: 1.1,
+        borderRadius: 5,
+        position : 'relative',
+    },
+    content : { 
+        flex: 1, 
+        paddingVertical: 10 
+    },
+    label: {
+        height: 0,
+        position: 'absolute',
+        top: -10,
+        left: 10,
+    },
+});
+
+FieldSet.displayName  = "FieldSetComponent";
+
+export default FieldSet;

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,6 +1,6 @@
 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";
@@ -11,6 +11,7 @@ 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 {height} = useWindowDimensions()//:Dimensions.get("window");
   return  virtualized ? <FlatList
     {...rest}
     ref = {ref}
@@ -19,7 +20,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"}