@fto-consult/expo-ui 2.4.7 → 2.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fto-consult/expo-ui",
-  "version": "2.4.7",
+  "version": "2.5.0",
   "description": "Bibliothèque de composants UI Expo,react-native",
   "main": "index.js",
   "scripts": {
@@ -62,7 +62,7 @@
     "@expo/html-elements": "^0.2.0",
     "@expo/metro-config": "^0.4.0",
     "@expo/webpack-config": "^0.17.2",
-    "@fto-consult/common": "^1.11.15",
+    "@fto-consult/common": "^1.12.2",
     "@gorhom/portal": "^1.0.14",
     "@react-native-async-storage/async-storage": "~1.17.3",
     "@react-native-community/datetimepicker": "6.5.2",
@@ -73,7 +73,7 @@
     "babel-plugin-inline-dotenv": "^1.7.0",
     "babel-plugin-module-resolver": "^4.1.0",
     "babel-plugin-transform-inline-environment-variables": "^0.4.4",
-    "expo": "^47.0.0",
+    "expo": "^47.0.8",
     "expo-camera": "~13.0.0",
     "expo-clipboard": "~4.0.1",
     "expo-image-picker": "~14.0.1",

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

@@ -245,9 +245,6 @@ const DatagridFactory = (Factory)=>{
         getMaxSelectedRows(){
             return isMobileMedia()? 30 : 50;
         }
-        prepareFilter(props,headerFilters){
-            return headerFilters.push(props);
-        }
         showFilters(){
             if(!this._isMounted()) {
                  this.isUpdating = false;
@@ -299,6 +296,12 @@ const DatagridFactory = (Factory)=>{
                 </View>
             })
         }
+        renderEmpty(){
+            if(isObj(this.currentAccordionProps) && typeof this.currentAccordionProps.renderEmpty =='function'){
+                return this.currentAccordionProps.renderEmpty();
+            }
+            return super.renderEmpty();
+        }
         render (){
             let {
                 filters,
@@ -332,6 +335,7 @@ const DatagridFactory = (Factory)=>{
             if(isObj(accordion)){
                 accordionProps = {...accordion,...accordionProps};
             }
+            this.currentAccordionProps = accordionProps;
             backToTopRef = defaultVal(backToTopRef,accordionProps.backToTopRef,true);
             
             let descOrContentProps = isObj(accordionProps.descriptionProps)? Object.assign({},accordionProps.descriptionProps) : isObj(accordionProps.contentProps)? Object.assign({},accordionProps.contentProps) : {};
@@ -539,7 +543,6 @@ const DatagridFactory = (Factory)=>{
                     </View>
             </ScrollView>
         </View>  
-        renderEmpty = defaultFunc(accordionProps.renderEmpty,renderEmpty,x=>null)
         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+"_AccordionHeader"} style={[styles.accordionHeader]} ref={this.layoutRef} onLayout={this.updateLayout.bind(this)}>
@@ -591,7 +594,7 @@ const DatagridFactory = (Factory)=>{
                         }:false}
                         keyExtractor = {this.getRowKey.bind(this)}
                     /> : <View style={styles.hasNotData}>
-                        {renderEmpty()}
+                        {this.renderEmpty()}
                     </View>}
                 </View>}
                 {backToTopRef ? <BackToTop testID={testID+"_BackToTop"} {...backToTopProps} ref={this.backToTopRef} style={[styles.backToTop,backToTopProps.style]} onPress={this.scrollToTop.bind(this)}/>:null}

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

@@ -96,6 +96,7 @@ export default class CommonDatagridComponent extends AppComponent {
             [footerFieldName] : {
                 value : uniqid(footerFieldName),override:false, writable: false
             },
+            currentFilteringColumns : {value:{}}
         }) 
         
         this.state.sort.dir = defaultStr(this.state.sort.dir,this.state.sort.column == "date"?"desc":'asc')
@@ -847,13 +848,20 @@ export default class CommonDatagridComponent extends AppComponent {
         });
    }
    prepareFilter(props,filteredColumns){
-
+        filteredColumns.push(props);
    }
    renderFilter(props){
        return <Filter {...props}/>
    }
    prepareColumn(){}
    beforePrepareColumns(){}
+   renderEmpty(){
+        if(typeof this.props.renderEmpty =='function'){
+            const r = this.props.renderEmpty();
+            return React.isValidElement(r)? r : null;
+        }
+        return null;
+   }
    prepareColumns (args){
        this.beforePrepareColumns();
        args = defaultObj(args);
@@ -958,6 +966,7 @@ export default class CommonDatagridComponent extends AppComponent {
                     operator : fCol.operator,
                     action : defaultStr(fCol.originAction,fCol.action),
                 };
+                this.currentFilteringColumns[header.field] = filterProps;
                 this.prepareFilter(filterProps,headerFilters); 
             }
             this.prepareColumn({
@@ -1169,19 +1178,15 @@ export default class CommonDatagridComponent extends AppComponent {
     onFilterChange(arg){
         this.filteredValues = defaultObj(this.filteredValues);
         let {field,operator,originAction,action,value} = defaultObj(arg);     
-        const filters = this.preparedColumns.filters;   
-        if(isNonNullString(field) && isNonNullString(operator) && isNonNullString(action)){
+        const filter = isNonNullString(field)? this.currentFilteringColumns[field] : null;   
+        if(!isObj(filter)) return;
+        if(isNonNullString(operator) && isNonNullString(action)){
             this.filteredValues[field] = {
                 operator,action,value,field
             }
-            Object.map(filters,(filter)=>{
-                if(isObj(filter) && filter.field == field){
-                    filter.originValue = filter.defaultValue = arg.defaultValue;
-                    filter.operator = operator;
-                    filter.action = defaultStr(originAction,action);
-                }
-            });
-            
+            filter.originValue = filter.defaultValue = arg.defaultValue;
+            filter.operator = operator;
+            filter.action = defaultStr(originAction,action);            
         }
         return this.doFilter(arg);
     }

package/src/components/Dialog/confirm/showConfirmOrAlertOrPrompt.js

@@ -30,6 +30,7 @@ export default function showConfirm (p,cb){
         buttons,
         messageProps,
         inputProps,
+        format,
         placeholder,
         children,
         withInputField,
@@ -116,8 +117,11 @@ export default function showConfirm (p,cb){
             {messageContent}
             {withInputField !== false ? <Component
                 type = {type}
+                enableCopy = {false}
                 defaultValue = {defaultValue}
                 placeholder = {placeholder}
+                affix = {false}
+                format = {format}
                 {...inputProps}
                 ref = {inputRef}
                 onChange = {(args)=>{

package/src/components/Fab/Group.js

@@ -7,7 +7,7 @@ import {MENU_ICON} from "$ecomponents/Icon";
 import theme,{Colors} from "$theme";
 import Group from "./GroupComponent";
 import Portal from "$ecomponents/Portal";
-import Auth from "$cauth";
+import {isAllowedFromStr} from "$cauth/perms";
 
 const FabGroupComponent = React.forwardRef((props,innerRef)=>{
     let {openedIcon,screenName,display:customDisplay,primary,actionMutator,secondary,onOpen,prepareActions,fabStyle,open:customOpen,onClose,onStateChange:customOnStateChange,closedIcon,color,actions:customActions,children,...customRest} = props;
@@ -63,7 +63,7 @@ const FabGroupComponent = React.forwardRef((props,innerRef)=>{
                 if(!isObj(a) || !isNonNullString(a.label)) return null;
                 const {perm,isAllowed,primary,secondary,...restItem} = a;
                 if(typeof isAllowed =='function' && isAllowed() === false) return null;
-                if(isNonNullString(perm) && !Auth.isAllowedFromStr(perm)) return false;
+                if(isNonNullString(perm) && !isAllowedFromStr(perm)) return false;
                 if(primary){
                     restItem.style = StyleSheet.flatten([restItem.style,{color:theme.colors.primaryText,backgroundColor:theme.colors.primary}])
                 } else if(secondary){

package/src/components/Fab/GroupComponent.js

@@ -11,7 +11,7 @@ import {FAB,Text,Card,withTheme} from "react-native-paper";
 import colorFn from 'color';
 import PropTypes from "prop-types";
 import Action from "$ecomponents/Form/Action";
-import theme,{ disabledStyle,StylePropTypes,Colors,cursorNotAllowed } from '$theme';
+import theme,{ disabledStyle,StylePropTypes,cursorPointer,Colors,cursorNotAllowed } from '$theme';
 import {defaultStr} from "$utils";
 
 
@@ -279,6 +279,7 @@ const _FabItem = function({children,label,disabled:customDisabled,pointerEvents,
   style = StyleSheet.flatten(style) || {};
   color = Colors.isValid(color)? color : style.color;
   backgroundColor = Colors.isValid(backgroundColor)? backgroundColor : style.backgroundColor;
+  const cursorStyle = disabled? cursorNotAllowed : cursorPointer;
   const _onPress = ()=>{
     if(onPress){
       onPress();
@@ -312,7 +313,7 @@ const _FabItem = function({children,label,disabled:customDisabled,pointerEvents,
                  accessibilityComponentType="button"
                  accessibilityRole="button"
                >
-                 <Text testID={testID+"_Label"} style={{ color}}>
+                 <Text testID={testID+"_Label"} style={StyleSheet.flatten([{ color},cursorStyle])}>
                    {label}
                  </Text>
                </Card>
@@ -328,7 +329,7 @@ const _FabItem = function({children,label,disabled:customDisabled,pointerEvents,
                [
                  style,
                  dStyle,
-                 disabled? cursorNotAllowed : null,
+                 cursorStyle,
                  {
                   transform: [{ scale}],
                   opacity,

package/src/components/Filter/index.js

@@ -324,7 +324,8 @@ export default class Filter extends AppComponent {
             diff = DateLib.currentMonthDaysLimits(currentDate);
           break;
         case "$week":      
-            diff = DateLib.currentWeekDaysLimits(currentDate)
+            diff = DateLib.currentWeekDaysLimits(currentDate);
+            console.log(diff," is diffffff");
           break;
         case "$prevWeek":      
           diff = DateLib.previousWeekDaysLimits(currentDate)

package/src/components/Table/AbsoluteScrollView.js

@@ -0,0 +1,63 @@
+// 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 { ScrollView,StyleSheet,View,useWindowDimensions} from "react-native";
+import React from "$react";
+import {defaultStr,defaultObj,isObj} from "$utils";
+import Portal from "$ecomponents/Portal";
+
+const AbsoluteScrollView = React.forwardRef(({testID,contentProps,containerProps,...props},ref)=>{
+    containerProps = defaultObj(containerProps);
+    contentProps = defaultObj(contentProps);
+    const win = useWindowDimensions();
+    const scrollViewRef = React.useRef(null);
+    testID = defaultStr(testID,"RN_TableAbsoluteScrollViewComponent");
+    const [styles,setStyles] = React.useState({});
+    React.setRef(ref,{
+        setStyles : (s)=>{
+            if(isObj(s)){
+                setStyles({...styles,...s});
+            }
+        },
+        scrollViewRef
+    })
+    React.useEffect(()=>{
+        return ()=>{
+            React.setRef(ref,null);
+        }
+    },[])
+    return <Portal>
+        <View testID={testID+"_Containter"} {...containerProps} style={[mainStyles.container,containerProps.style,styles.container,{left:win.width-10}]}>
+            <ScrollView
+                {...props}
+                ref = {scrollViewRef}
+                testID={testID}
+                contentContainerStyle = {[props.contentContainerStyle,mainStyles.contentContainer,styles.containerContainer]}
+                vertical
+            >
+                <View
+                    testID={testID+"Content"}
+                    {...contentProps}
+                    style={[mainStyles.content,contentProps.style,styles.content]}
+                />
+            </ScrollView>
+        </View>
+    </Portal>
+});
+
+export default AbsoluteScrollView;
+
+const mainStyles = StyleSheet.create({
+    container : {
+        ...StyleSheet.absoluteFill,
+        width : 10,
+    },
+    content : {
+        width:10,
+    },
+    contentContainer : {
+        
+    }
+})
+AbsoluteScrollView.displayName = "TableVerticalScrollView";

package/src/components/Table/index.js

@@ -1,14 +1,16 @@
-import {FlashList,BigList} from "$ecomponents/List";
+import {FlashList} from "$ecomponents/List";
 import View from "$ecomponents/View";
-import {defaultObj,defaultStr,debounce,isNumber,defaultVal} from "$utils";
+import {defaultObj,defaultStr,debounce,defaultNumber,defaultVal} from "$utils";
 import PropTypes from "prop-types";
 export const DEFAULT_COLUMN_WIDTH = 60;
 import React from "$react";
 import Label from "$ecomponents/Label";
-import { StyleSheet,ScrollView,Dimensions} from "react-native";
+import { StyleSheet,View as RNView,ScrollView,Dimensions} from "react-native";
 import { getRowStyle } from "$ecomponents/Datagrid/utils";
 import {isMobileNative} from "$cplatform";
 import theme from "$theme";
+import AbsoluteScrollView from "./AbsoluteScrollView";
+
 const isSCrollingRef = React.createRef();
 const scrollLists = (opts,refs)=>{
     refs.map((ref)=>{
@@ -18,14 +20,24 @@ const scrollLists = (opts,refs)=>{
     });
     isSCrollingRef.current = false;
 }
-const getOnScrollCb = (refs)=>{
+const getOnScrollCb = (refs,pos,cb2)=>{
     const cb = (args)=>{
         if(isSCrollingRef.current) return;
         if(!isObj(args) || !args.nativeEvent) {
             isSCrollingRef.current = false;
         }
         isSCrollingRef.current = true;
-        scrollLists({x:args.nativeEvent.contentOffset?.x},refs);
+        if(typeof pos =='function'){
+            pos(args);
+            isSCrollingRef.current = false;
+            return;
+        }
+        pos = pos && (pos =='x' || pos=='y')? pos : "x";
+        const a = {[pos]:args.nativeEvent.contentOffset?.[pos]};
+        scrollLists(a,refs);
+        if(typeof cb2 == 'function'){
+            cb2(args);
+        }
     };
     return isMobileNative()? cb : debounce(cb,200);
 }
@@ -178,8 +190,10 @@ const TableComponent = React.forwardRef(({containerProps,isRowSelected,headerScr
         fContent = f.length ? <View testID={testID+"_Footer"} {...footerContainerProps} style={[styles.header,styles.footers,footerContainerProps.style]}>
         {f}
     </View> : null;
+    const absoluteScrollViewRefCanScroll = React.useRef(true);
     React.setRef(tableRef,context);
     const cStyle = {width:listWidth}
+    const absoluteScrollViewRef = React.useRef(null);
     return <View testID= {testID+"_Container"} {...containerProps} style={[styles.container,{alignItems:'stretch'},containerProps.style]}>
             <View autoHeight style={[cStyle]} testID={testID+"_Headers_ScrollViewContainer"}>
                 <ScrollView
@@ -194,12 +208,36 @@ const TableComponent = React.forwardRef(({containerProps,isRowSelected,headerScr
                     {hContent}
                 </ScrollView>
             </View>
-            <ScrollView {...scrollViewProps} scrollEventThrottle = {scrollEventThrottle} horizontal contentContainerStyle={[scrollContentContainerStyle,scrollViewProps.contentContainerStyle]} showsVerticalScrollIndicator={false}  onScroll = {getOnScrollCb([headerScrollViewRef,footerScrollViewRef])} ref={scrollViewRef}  testID={testID+"_ScrollView"}>    
+            <ScrollView {...scrollViewProps} scrollEventThrottle = {scrollEventThrottle} horizontal contentContainerStyle={[scrollContentContainerStyle,scrollViewProps.contentContainerStyle]} showsVerticalScrollIndicator={false}  
+            onScroll = {getOnScrollCb([headerScrollViewRef,footerScrollViewRef],null,(args)=>{
+            })} ref={scrollViewRef}  testID={testID+"_ScrollView"}>    
                 <FlashList
                     containerProps = {{style:[cStyle]}}
                     //prepareItems = {Array.isArray(items)? false : undefined}
                     estimatedItemSize = {200}
                     {...props}
+                    onContentSizeChange = {(width,height)=>{
+                        if(props.onContentSizeChange){
+                            props.onContentSizeChange(width,height);
+                        }
+                        if(!absoluteScrollViewRef.current) return;
+                        absoluteScrollViewRef.current.setStyles({
+                            content : {height}
+                        });
+                    }}
+                    onLayout = {(args)=>{
+                        if(props.onLayout){
+                            props.onLayout(args);
+                        }
+                        if(!absoluteScrollViewRef.current) return;
+                        const {nativeEvent:{layout}}=args;
+                        const top = defaultNumber(layout.top,layout.y);
+                        const height = layout.height;
+                        absoluteScrollViewRef.current.setStyles({
+                            container : {top,height},
+                            contentContainer : {height},
+                        });
+                    }}
                     ref = {listRef}
                     numberOfLines = {1}
                     responsive = {false}
@@ -209,6 +247,17 @@ const TableComponent = React.forwardRef(({containerProps,isRowSelected,headerScr
                     style = {[styles.datagrid,{width:listWidth,minWidth:totalWidths}]}
                     keyExtractor = {typeof getRowKey =='function'? getRowKey : React.getKey}
                     //stickyHeaderIndices={[0]}
+                    onScroll = {getOnScrollCb([absoluteScrollViewRef],(args)=>{
+                        const offset = args?.nativeEvent?.contentOffset.y;
+                        const scrollViewRef = absoluteScrollViewRef.current?.scrollViewRef;
+                        if(typeof offset =='number' && scrollViewRef.current && scrollViewRef.current.scrollTo){
+                            absoluteScrollViewRefCanScroll.current = false;
+                            scrollViewRef.current.scrollTo({animated:false,y:offset});
+                            setTimeout(()=>{
+                                absoluteScrollViewRefCanScroll.current = true;
+                            },500);
+                        }
+                    })}
                     renderItem = {(arg)=>{
                         const item = arg.item, data = arg.item,allData=Array.isArray(item.items)? item.items : data;
                         const cells = visibleColumns.map((i,index)=>{
@@ -237,11 +286,21 @@ const TableComponent = React.forwardRef(({containerProps,isRowSelected,headerScr
                         </View>;
                     }}
                 />
+                <AbsoluteScrollView
+                    ref={absoluteScrollViewRef}
+                    scrollEventThrottle = {scrollEventThrottle} 
+                    onScroll = {(args)=>{
+                        if(!absoluteScrollViewRefCanScroll.current) return;
+                        const offset = args?.nativeEvent?.contentOffset.y;
+                        if(typeof offset =='number' && listRef.current && listRef.current.scrollToOffset){
+                            listRef.current.scrollToOffset({animated:true,offset});
+                        }
+                    }}
+                />
         </ScrollView>
     </View>
 });
 
-
 const ColumnType = PropTypes.shape({
     field : PropTypes.string,
     label : PropTypes.text,
@@ -364,19 +423,6 @@ TableComponent.popTypes = {
     footerScrollViewProps : PropTypes.object,
 }
 
-const ScrollViewCustom = React.forwardRef((props,ref)=>{
-    const {testID,onScroll,style,handle} = props;
-    const context = {};
-    React.setRef(ref,context);
-    return <View 
-        {...props}
-        ref = {ref} 
-        style = {[styles.scrollViewCustom,style,{backgroundColor:theme.colors.primary}]}
-        onScroll={onScroll} 
-        testID={(testID||'RN_TableComponentScrollViewCustom')}
-    />
-});
-ScrollViewCustom.displayName = "TableComponentScrollViewCustom";
 
 TableComponent.displayName = "TableComponent";