@fto-consult/expo-ui 2.37.7 → 2.38.0

package/src/components/Form/FormData/FormDataActions.js

@@ -7,12 +7,9 @@ import {isWeb} from "$cplatform";
 
 export default class FormDataActionComponent extends FormData {
     isFullScreen(){
-        const mainProps = this.getMainProps();
+        const mainProps = this.props;
         return typeof mainProps.fullScreen =='boolean'? mainProps.fullScreen : typeof mainProps.fullPage =='boolean'? mainProps.fullPage : mainProps.responsive !== false ? Dimensions.isMobileOrTabletMedia() : false;
     }
-    getMainProps (){
-        return this.props;
-    }
     getConfirmTitle(){
         const {title,subtitle,isEditing} = this.getAppBarProps();
         if(title){
@@ -22,13 +19,13 @@ export default class FormDataActionComponent extends FormData {
     }
     close (){}
     getNewElementLabel(){
-        return defaultStr(this.getMainProps().newElementLabel,this.props.newElementLabel,'Nouveau');
+        return defaultStr(this.props.newElementLabel,this.props.newElementLabel,'Nouveau');
     }
     getIndexFieldProps(){
-        return defaultVal(this.getMainProps().indexField,this.props.indexField);
+        return defaultVal(this.props.indexField,this.props.indexField);
     }
     getAppBarProps(){
-        const mainProps = this.getMainProps();
+        const mainProps = this.props;
         const data = this.getDataProp();
         const appBarProps = Object.assign({},mainProps.appBarProps);
         const isEditing = this.isDocEditing(data);
@@ -57,7 +54,7 @@ export default class FormDataActionComponent extends FormData {
     }
     onBackActionPress(args,callback){
         args = defaultObj(args);
-        const mainProps = this.getMainProps();
+        const mainProps = this.props;
         const hasP = mainProps !== this.props;
         const cb = ()=>{
             if(typeof mainProps.onBackActionPress =='function' && mainProps.onBackActionPress(args) === false) return
@@ -89,7 +86,7 @@ export default class FormDataActionComponent extends FormData {
         return isNonNullString(indexField) && isNonNullString(data[indexField])? data[indexField] : isNonNullString(data.code)? data.code : undefined; 
     }
     getAppBarActionsProps(props){
-        props = defaultObj(props,this.getMainProps(),this.props);
+        props = defaultObj(props,this.props);
         let {actions,save2NewAction,save2printAction,save2closeAction,saveAction,newAction} = props;
         const sArg = {context:this};
         save2NewAction = typeof save2NewAction =='function' ? save2NewAction (sArg) : save2NewAction;

package/src/components/Hashtag/index.js

@@ -1,10 +1,10 @@
 import {isNonNullString,defaultObj} from "$utils";
-//import dataFileManager from "$database/dataFileManager";
 import {open as showPreloader,close as hidePreloader} from "$epreloader";
 import Label from "$ecomponents/Label";
 import templates from "$ecomponents/Form/Fields/sprintfSelectors";
 import Tooltip from "$ecomponents/Tooltip";
 import { Pressable } from "react-native";
+import React from "$react";
 
 /*** 
  * API The component ReactHashtag is actually pretty generic. Is not something that someone can't do in half an hour. But, this one has some generic API that could make you turn.
@@ -65,7 +65,7 @@ const defaultRenderText = ({text,code,value,dbName,table,hashtag})=>{
         title +=( (title)? "\n":"") +" Table : [" + table.toUpperCase()+"]";
     }
     if(dbName){
-        title +=( (title)? "\n":"") + dataFileManager.dataFileText +" : ["+dbName+"]";
+        //title +=( (title)? "\n":"") + dataFileManager.dataFileText +" : ["+dbName+"]";
     }
     return <Tooltip Component={Label} cursorPointer primary style={[{textDecorationLine:'underline'}]} title={title}>
         {"#"+text}

package/src/components/List/Common.js

@@ -171,7 +171,6 @@ const CommonListComponent = React.forwardRef((props,ref)=>{
             ref = {listRef}
             onScroll={context.onScroll}
             data = {context.items}
-            //key = {isFlatList ? 'common-list-'+numColumns:"normal-list"}
             numColumns={numColumns}
             keyExtractor = {context.keyExtractor}
             renderItem = {context.renderItem}

package/src/components/Table/AbsoluteScrollView.js

@@ -2,7 +2,7 @@
 // Use of this source code is governed by a BSD-style
 // license that can be found in the LICENSE file.
 
-import { ScrollView,StyleSheet,View,useWindowDimensions} from "react-native";
+import { ScrollView,StyleSheet,View,useWindowDimensions,Dimensions} from "react-native";
 import React from "$react";
 import {defaultStr,defaultObj,isObj,isNumber} from "$utils";
 import Portal from "$ecomponents/Portal";
@@ -49,7 +49,8 @@ const AbsoluteScrollView = React.forwardRef(({testID,contentProps,listRef,contai
             args = defaultObj(args);
             if(isObj(args.contentOffset) && isObj(args.contentSize)){
                 const {x} = args.contentOffset;
-                const visible = x >=win.width ? false : true;
+                const {width} = Dimensions.get("window");
+                const visible = x >= width-10 ? false : true;
                 if(state.visible != visible){
                     return setState({...state,visible});
                 }

package/src/components/Table/Cell.js

@@ -0,0 +1,24 @@
+// 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 from "react";
+import { View } from "react-native";
+import {defaultObj} from "$utils";
+import Label from "$ecomponents/Label";
+
+function TableCellComponent({cellArgs,rowArgs,children,renderCell,rowIndex,style,...rest}){
+    const {content,containerProps} = React.useCallback(()=>{
+        const rArgs = {...cellArgs,...rowArgs,containerProps : {}};
+        const r = typeof renderCell =='function' && renderCell (rArgs) ||  children;
+        return {
+            content : typeof r =='string' || typeof r =='number'? <Label children={r}/> : React.isValidElement(r)? r : null,
+            containerProps : defaultObj(rArgs.containerProps)
+        }
+    },[children])();
+    return (<View  {...containerProps} {...rest} style={[style,containerProps.style]} >
+        {content}
+    </View>);
+}
+//const TableCellComponent = React.memo(TableCellComponent);;
+export default TableCellComponent;
+TableCellComponent.displayName = "TableCellComponent";

package/src/components/Table/Header.js

@@ -0,0 +1,25 @@
+// 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.
+
+// 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 from "$react";
+import { View } from "react-native";
+import PropTypes from "prop-types";
+export default function TableHeaderComponent({cells,columns,...rest}){
+    const children = React.useCallback(()=>{
+        if(Array.isArray(cells)){
+            return null;
+        }
+        return cells;
+    },[cells,columns])();
+    return <View {...rest}>
+        {children}
+    </View>
+}
+
+TableHeaderComponent.propTypes = {
+    columns : PropTypes.arrayOf(PropTypes.bool)
+}

package/src/components/Table/List.js

@@ -0,0 +1,196 @@
+// 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 {Virtuoso} from "react-virtuoso/dist/index.mjs";
+import React from "$react";
+import PropTypes from "prop-types";
+import {defaultObj,defaultNumber,isDOMElement,isNumber,uniqid,isNonNullString,defaultStr} from "$utils";
+import { View } from "react-native";
+
+const propTypes = {
+    ...defaultObj(Virtuoso.propTypes),
+    items : PropTypes.array.isRequired,
+    alignToBottom : PropTypes.bool,
+    /**Called with true / false when the list has reached the bottom / gets scrolled up. Can be used to load newer items, like tail -f. */
+    atBottomStateChange : PropTypes.func,
+    /***alias : onEndReachedThreshold */
+    atBottomThreshold : PropTypes.number,
+    atTopStateChange : PropTypes.func,
+    atTopThreshold : PropTypes.number,
+    defaultItemHeight : PropTypes.number,
+    /***(index: number) => void; Gets called when the user scrolls to the end of the list. Receives the last item index as an argument. Can be used to implement endless scrolling. */
+    endReached : PropTypes.func,
+    firstItemIndex : PropTypes.number,
+    /**(isScrolling: boolean) => void */
+    isScrolling : PropTypes.func,
+};
+/***@see : https://virtuoso.dev/virtuoso-api-reference/ */
+const VirtuosoListComponent = React.forwardRef(({items,testID,renderItem,onEndReached,onLayout,onContentSizeChange,onScroll,isScrolling,estimatedItemSize,onEndReachedThreshold,containerProps,style,...props},ref)=>{
+    const r2 = {};
+    for(let i in propTypes){
+        if(i in props){
+            r2[i] = props[i];
+        }
+    }
+    containerProps = defaultObj(containerProps);
+    testID = defaultStr(testID,containerProps.testID,"RN_VirtuosoListComponent");
+    const listIdRef = React.useRef(uniqid("virtuoso-list-id"));
+    const listId = listIdRef.current;
+    const listRef = React.useRef(null);
+    const sizeRef = React.useRef({width:0,height:0});
+    const listSize = sizeRef.current;
+    const isValid = ()=> listRef.current;
+    const listStyle = {height:'100%',width:"100%",overflowX:'hidden'};
+    r2["data-test-id"] = testID+"_ListContent";
+    if(isObj(estimatedItemSize)){
+        if(isNumber(estimatedItemSize.width)){
+            listStyle.width = estimatedItemSize.width+"px";
+        }
+        if(isNumber(estimatedItemSize.height)){
+            listStyle.height = estimatedItemSize.height+"px";
+        }
+    }
+    React.setRef(ref,{
+        scrollToEnd : ()=>{
+            return isValid() && listRef.current.scrollToIndex && listRef.current.scrollToIndex({index:"LAST"});
+        },
+        scrollToTop : ()=>{
+            return isValid() && listRef.current.scrollToIndex && listRef.current.scrollToIndex({index:0});
+        },
+        scrollToIndex : (opts)=>{
+            opts = defaultObj(opts);
+            opts.index = defaultNumber(opts.index);
+            return isValid() && listRef.current.scrollToIndex && listRef.current.scrollToIndex(opts);
+        },
+        scrollToItem : ()=>null,
+        scrollToOffset : (opts)=>{
+            opts = defaultObj(opts);
+            opts.top = defaultNumber(opts.top,opts.offset);
+            return isValid() && listRef.current.scrollTo && listRef.current.scrollTo(opts);
+        },
+        scrollToLeft : ()=>{
+            return isValid() && listRef.current.scrollTo && listRef.current.scrollTo({left:0});
+        },
+    });
+    const checkSize = ()=>{
+        const element = document.getElementById(listId);
+        if(!element) return;
+        const target = element.firstChild?.firstChild;
+        if(isDOMElement(target) && onContentSizeChange){
+            const {nativeEvent:{contentSize}} = normalizeEvent({target});
+            setTimeout(()=>{
+                if(contentSize.width !== listSize.width || contentSize.height != listSize.height){
+                    sizeRef.current = contentSize;
+                    onContentSizeChange(contentSize.width,contentSize.height);
+                }
+            },100)
+        }
+    }
+    React.useEffect(()=>{
+        checkSize();
+    },[props])
+    React.useEffect(()=>{
+        return ()=>{
+            React.setRef(ref,null);
+        }
+    },[]);
+    return <View {...containerProps} {...props} style={[{flex:1},containerProps.style,style,{minWidth:'100%',maxWidth:'100%'}]} onLayout={onLayout} testID={testID}>
+        <Virtuoso
+            {...r2}
+            style = {listStyle}
+            ref = {listRef}
+            data = {items}
+            id = {listId}
+            useWindowScroll = {false}
+            totalCount = {items.length}
+            itemContent = {(index)=>{
+                return renderItem({index,item:items[index],items})
+            }}
+            atBottomThreshold = {typeof onEndReachedThreshold =='number'? onEndReachedThreshold : undefined}
+            atBottomStateChange = {()=>{
+                if(typeof onEndReached =='function'){
+                    onEndReached();
+                }
+            }}
+            onScroll={(e) => onScroll && onScroll(normalizeEvent(e))}
+            isScrolling = {(isC,a)=>{
+                if(typeof isScrolling =='function'){
+                    return isScrolling(isC);
+                }
+            }}
+            defaultItemHeight = {typeof estimatedItemSize=='number' && estimatedItemSize || undefined}
+        />
+    </View>
+});
+
+VirtuosoListComponent.propTypes = {
+    ...propTypes
+};
+
+VirtuosoListComponent.displayName = "VirtuosoListComponent";
+
+export default VirtuosoListComponent;
+
+function isScrollable (node){
+    if(!node) return false;
+    const dim = dimensions(node);
+    if(!dim) return false;
+    if(dim.scrollHeight>dim.clientHeight) return true;
+    if(dim.totalHeight > (dim.clientHeight+dim.scrollHeight+100)) return true;
+    return false;
+ }
+function lookupForContent (node,level){
+    if(!node || !isDOMElement(node) || level>=5) return null;
+    if(typeof level !='number'){
+        level = 0;
+    }
+    console.log("looking for ",node,level,dimensions(node));
+    if(isScrollable(node)){
+        return node;
+    }
+    return lookupForContent(node.querySelector("div:first-child"),level+1)
+}
+
+function dimensions(el) {
+    if(!isDOMElement(el)) return null;
+    var elHeight = el.offsetHeight;
+    const marginBottom = parseInt(window.getComputedStyle(el).getPropertyValue('margin-bottom'));
+    const paddingBottom = parseInt(window.getComputedStyle(el).getPropertyValue('padding-bottom'));
+    return {
+        height:elHeight,marginBottom,paddingBottom,totalHeight : elHeight+marginBottom+paddingBottom,
+        width : el.offsetWidth,scrollHeight : el.scrollHeight,clientHeight  : el.clientHeight,
+    }
+}
+
+const normalizeEvent = (e)=>{
+    return {
+      nativeEvent: {
+        contentOffset: {
+          get x() {
+            return e.target.scrollLeft;
+          },
+          get y() {
+            return e.target.scrollTop;
+          }
+        },
+        contentSize: {
+          get height() {
+            return e.target.scrollHeight;
+          },
+          get width() {
+            return e.target.scrollWidth;
+          }
+        },
+        layoutMeasurement: {
+          get height() {
+            return e.target.offsetHeight;
+          },
+          get width() {
+            return e.target.offsetWidth;
+          }
+        }
+      },
+      timeStamp: Date.now()
+    };
+  }

package/src/components/Table/List.native.js

@@ -0,0 +1,5 @@
+// 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.
+
+export {default} from "$ecomponents/List/FlashList";

package/src/components/Table/Row.js

@@ -0,0 +1,21 @@
+// 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 from "$react";
+import { View } from "react-native";
+import PropTypes from "prop-types";
+export default function TableRowComponent({cells,columns,...rest}){
+    const children = React.useCallback(()=>{
+        if(Array.isArray(cells)){
+            return cells.map((cell,index)=>columns[index]? <React.Fragment key={index}>{cell}</React.Fragment> : null )
+        }
+        return cells;
+    },[cells,columns])();
+    return <View {...rest}>
+        {children}
+    </View>
+}
+
+TableRowComponent.propTypes = {
+    columns : PropTypes.arrayOf(PropTypes.bool)
+}