@fto-consult/expo-ui 2.37.7 → 2.38.0

package/metro.config.js

@@ -23,6 +23,7 @@ module.exports = (opts)=>{
       ...config.resolver.sourceExts,
       ...sourceExts,"txt",
       'jsx', 'js','tsx',
+      //"mjs","cjs",
   ]
   // Remove all console logs in production...
   config.transformer.minifierConfig.compress.drop_console = true;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fto-consult/expo-ui",
-  "version": "2.37.7",
+  "version": "2.38.0",
   "description": "Bibliothèque de composants UI Expo,react-native",
   "main": "index.js",
   "scripts": {
@@ -61,14 +61,14 @@
     "@emotion/native": "^11.10.0",
     "@expo/html-elements": "^0.2.0",
     "@expo/vector-icons": "^13.0.0",
-    "@fto-consult/common": "^2.1.4",
+    "@fto-consult/common": "^2.2.3",
     "@gorhom/portal": "^1.0.14",
     "@react-native-async-storage/async-storage": "~1.17.3",
     "@react-native-community/datetimepicker": "6.5.2",
     "@react-native-community/netinfo": "9.3.5",
-    "@react-navigation/native": "^6.0.13",
-    "@react-navigation/native-stack": "^6.9.1",
-    "@shopify/flash-list": "1.3.1",
+    "@react-navigation/native": "^6.1.1",
+    "@react-navigation/native-stack": "^6.9.7",
+    "@shopify/flash-list": "^1.4.0",
     "expo": "^47.0.8",
     "expo-camera": "~13.1.0",
     "expo-clipboard": "~4.0.1",
@@ -82,7 +82,6 @@
     "file-saver": "^2.0.5",
     "google-libphonenumber": "^3.2.31",
     "htmlparser2-without-node-native": "^3.9.2",
-    "mime-types": "^2.1.35",
     "mongo-parse": "^2.1.0",
     "parent-package-json": "^2.0.1",
     "prop-types": "^15.8.1",
@@ -94,6 +93,7 @@
     "react-native-big-list": "^1.6.0",
     "react-native-blob-util": "^0.17.0",
     "react-native-gesture-handler": "~2.8.0",
+    "react-native-mime-types": "^2.3.0",
     "react-native-paper": "^4.12.5",
     "react-native-paper-dates": "^0.9.2",
     "react-native-reanimated": "~2.12.0",
@@ -102,6 +102,7 @@
     "react-native-svg": "13.4.0",
     "react-native-web": "~0.18.7",
     "react-native-webview": "11.23.1",
+    "react-virtuoso": "^4.0.3",
     "sharp-cli": "^2.1.0",
     "tippy.js": "^6.3.7",
     "use-event-callback": "^0.1.0",

package/src/components/AutoResizer/index.js

@@ -0,0 +1,104 @@
+// Copyright 2023 @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, { useCallback, useRef, useState, useLayoutEffect } from "$react";
+import { Platform, StyleSheet, View} from "react-native";
+import { findDOMNode } from "react-dom";
+import PropTypes from "prop-types";
+import stableHash from "stable-hash";
+import {defaultNumber,isNumber} from "$utils";
+
+const styles = StyleSheet.create({container: { flex: 1 }});
+
+const AutoResizerComponent = React.forwardRef((props,ref) =>{
+    const {
+      children,
+      defaultHeight,
+      defaultWidth,
+      disableHeight,
+      disableWidth,
+      onResize: _onResize,
+      compare,
+      ...viewProps
+    } = props;
+  
+    const innerRef = useRef(null);
+    const layoutRef = React.useRef({
+       width : defaultNumber(disableWidth ? 0 : defaultWidth),
+       height : defaultNumber(disableHeight ? 0 : defaultHeight),
+       x : 0,
+       y : 0,
+    })
+    const [result, setResult] = useState(Object.clone(layoutRef.current));
+    const canRender = x=>!!(result.width || result.height) && isNumber(result.x) && isNumber(result.y);
+    const onResize = useCallback(({ width, height,x,y}) => {
+        layoutRef.current.width = disableWidth ? 0 : width || 0;
+        layoutRef.current.height = disableHeight ? 0 : height || 0;
+        layoutRef.current.x =  disableWidth? 0 : x;
+        layoutRef.current.y = disableHeight ? 0 : y;
+        if (Math.abs(result.width - layoutRef.current.width) <= 50  && Math.abs(result.height-layoutRef.current.height)<=50) return;
+        if(typeof compare ==='function' && compare({previous:result,current:layoutRef.current}) === false) return;
+        setResult({...layoutRef.current});
+      },[stableHash({disableWidth, disableHeight, _onResize, result})]);
+  
+    const onLayout = useCallback(e => {
+        const layout = e.nativeEvent.layout;
+        const x = defaultNumber(layout.x,layout.left);
+        const y = defaultNumber(layout.y,layout.top);
+        onResize({width:layout.width,height:layout.height,x,y});
+      },[onResize]);
+    // Avoid zero/flash on first render, at least on web
+    // @see https://github.com/bvaughn/react-virtualized-auto-sizer/blob/ffcba2dd39b89111ed4b42d64431f35ce7c1c23a/src/index.js#L69-L94
+    // @see https://github.com/bvaughn/react-virtualized-auto-sizer/issues/10
+    useLayoutEffect(() => {
+      if (Platform.OS !== "web") return;
+      const autoSizer = findDOMNode(innerRef.current);
+      if (
+        autoSizer &&
+        autoSizer.parentNode &&
+        autoSizer.parentNode.ownerDocument &&
+        autoSizer.parentNode.ownerDocument.defaultView &&
+        autoSizer.parentNode instanceof
+          autoSizer.parentNode.ownerDocument.defaultView.HTMLElement
+      ) {
+        const parentNode = autoSizer.parentNode;
+        const height = parentNode.offsetHeight || 0;
+        const width = parentNode.offsetWidth || 0;
+        const x = parentNode.offsetLeft || 0;
+        const y = parentNode.offsetTop || 0;
+        if ((width || height) && (x || y)) onResize({ width, height,x,y});
+      }
+    }, []); // eslint-disable-line
+    React.useEffect(()=>{
+       if(_onResize){
+          _onResize(result);
+       }
+    },[result])
+    return (
+      <View
+        {...viewProps}
+        ref={React.useMergeRefs(innerRef,ref)}
+        onLayout={onLayout}
+        pointerEvents="box-none"
+        style={[styles.container, viewProps.style]}
+      >
+        {canRender() && children({...result,left:result.x,top:result.y}) || null}
+      </View>
+    );
+  });
+
+AutoResizerComponent.displayName = "AutoResizerComponent";
+
+AutoResizerComponent.propTypes = {
+      /*** func({width,height})=>PropTypes.node */
+      children : PropTypes.func.isRequired,
+      defaultHeight : PropTypes.number,
+      defaultWidth : PropTypes.number,
+      disableHeight : PropTypes.bool,
+      disableWidth : PropTypes.bool,
+      /***({ width, height }) => void */
+      onResize : PropTypes.func,
+}
+
+export default AutoResizerComponent;

package/src/components/Chart/appexChart/index.native.js

@@ -8,7 +8,7 @@ import { methodsNames } from "./utils";
 export const ChartComponent = React.forwardRef(({chartContext,testID,chartId,id,webViewProps,options,...props},ref)=>{
     webViewProps = defaultObj(webViewProps);
     const webViewRef = React.useRef(null);
-    const chartId = React.useRef(defaultStr(chartId,id,options?.chart?.id,uniqid("chart-webview-id")));
+    chartId = React.useRef(defaultStr(chartId,id,options?.chart?.id,uniqid("chart-webview-id")));
     const jsonOptions = JSON.stringify(options);
     const exec = (method,a)=>{
         if(!webViewRef.current) return;

package/src/components/Chart/index.js

@@ -20,7 +20,7 @@ export * from "./utils";
  *  options {number} - les options supplémentaires au chart
  * 
 */
-const ChartComponent = React.forwardRef(({options,style,height,width,chartId:customChartID,testID,webViewProps, ...props },ref)=>{
+const ChartComponent = React.forwardRef(({options,onRender,style,height,width,chartId:customChartID,testID,webViewProps, ...props },ref)=>{
   const chartContext = React.useRef(null);
   options.chart = defaultObj(options.chart);
   const chartIdRef = React.useRef(options.chart.id,customChartID,uniqid("chart-id"));
@@ -36,6 +36,7 @@ const ChartComponent = React.forwardRef(({options,style,height,width,chartId:cus
       }
     }
   },[stableHash(options)]);
+  React.useOnRender(onRender);
   React.useEffect(()=>{
       return ()=>{
         destroyChart(chartContext.current);

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

@@ -81,7 +81,6 @@ const FiltersAccordionComponent = React.forwardRef((props,ref)=>{
                         andOperator = {defaultBool(andOperator,filter.andOperator,true)}
                         onChange = {(arg)=>{
                             if(!arg.action && !arg.operator || !arg.field) return;
-                            //console.log("calling on change dddd",arg);
                             const canHandle = canHandleFilter(arg);
                             valuesRefs.current[key] = arg;
                             if(filteredRef.current[key] !== canHandle){

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

@@ -21,13 +21,12 @@ import BackToTop from "$ecomponents/BackToTop";
 import FiltersAccordionComponent from "./Filters";
 import RenderType from "../RenderType";
 import { flatMode} from "$ecomponents/TextField";
-import {FlashList} from "$ecomponents/List";
+import List from "$ecomponents/Table/List";
 import theme,{Colors} from "$theme";
 import {getRowStyle,styles as rStyles} from "../utils";
 import Avatar from "$ecomponents/Avatar";
 import {defaultObj,isOb,isNonNullString} from "$utils";
 import PropTypes from "prop-types";
-import {isTouchDevice} from "$platform";
 
 const DatagridFactory = (Factory)=>{
     Factory = Factory || CommonDatagrid;
@@ -38,7 +37,7 @@ const DatagridFactory = (Factory)=>{
             this.frozenItems = 0;
             this.listRef = React.createRef(null);
             this.state.refreshing = false;
-            this.state.isReady = !this.bindResizeEvents();
+            //this.state.isReady = !this.bindResizeEvents();
             this.updateLayout = this.updateLayout.bind(this);
             this.backToTopRef = React.createRef(null);
         }
@@ -223,9 +222,6 @@ const DatagridFactory = (Factory)=>{
         bindResizeEvents(){
             return true;
         }
-        onResizePage(){
-            this.updateLayout();
-        }
         getPageSize (){
             return INFINITE_SCROLL_PAGE_SIZE;
         }
@@ -414,10 +410,7 @@ const DatagridFactory = (Factory)=>{
                     }
                 ]
             }
-            const {y} = this.state.layout;
-            const {height:winheight,width:winWidth} = Dimensions.get("window");
-            const containerHeight = winheight - y;
-            this.renderedListHeight = Math.max(300,containerHeight - (this.hasScrollViewParent() ? 50:0));
+            const maxHeight = this.getMaxListHeight();
             const isLoading = this.isLoading();
             const _progressBar = this.getProgressBar();
             const pointerEvents = this.getPointerEvents(); 
@@ -535,7 +528,7 @@ const DatagridFactory = (Factory)=>{
             </ScrollView>
         </View>  
         return <View testID={testID+"_Container"} pointerEvents={pointerEvents} style={[styles.container]} collapsable={false}>
-                { <View testID={testID+"_ContentContainer"} style={[this.bindResizeEvents()?{height:this.renderedListHeight}:undefined]}> 
+                { <View testID={testID+"_ContentContainer"} style={[{maxHeight}]}> 
                     <View testID={testID+"_AccordionHeader"} style={[styles.accordionHeader]} ref={this.layoutRef} onLayout={this.updateLayout.bind(this)}>
                         {this.props.showActions !== false ? <DatagridActions 
                             testID={testID+"_Actions"}
@@ -570,11 +563,12 @@ const DatagridFactory = (Factory)=>{
                             </View>
                         ) : null}
                     </View>
-                    {hasData && !canRenderChart ? <FlashList
+                    {hasData && !canRenderChart ? <List
                         estimatedItemSize = {150}
                         prepareItems = {false}
                         {...rest}
                         {...accordionProps}
+                        onRender = {this.onRender.bind(this)}
                         testID = {testID}
                         extraData = {this.state.refresh}
                         contentInset={{ right: 10, top: 10, left: 10, bottom: 10 }}