@fto-consult/expo-ui 6.23.9 → 6.23.11

package/app.config.json

@@ -1,6 +1,6 @@
 {
 	"name": "@FTO-CONSULT/EXPO-UI",
-	"version": "6.21.23",
+	"version": "6.23.10",
 	"description": "Bibliothèque de composants UI Expo,react-native",
 	"bin": {
 		"expo-ui": "./bin/index.js"

package/app.json

@@ -0,0 +1,12 @@
+{
+  "expo": {
+    "name": "@fto-consult/expo-ui",
+    "slug": "fto-consult-expo-ui",
+    "version": "1.0.0",
+    "orientation": "portrait",
+    "web": {
+      "bundler": "metro"
+    }
+  },
+  "userInterfaceStyle": "automatic"
+}

package/index.js

@@ -50,10 +50,14 @@ export default function registerApp (opts){
 
 registerRootComponent(MainAppEntry);
 
-/***    
+  
 registerApp({
-    init : ()=>{
+    navigation : {
+        screens : require("./src/test-screens").default
+    },
+    init : ({appConfig})=>{
+        appConfig.set("isAuthSingleUserAllowed",true);
+        appConfig.set("authDefaultUser",{code:"root",password:"admin123",label:"Master admin"})
         return Promise.resolve("test ted")
     }
-})
-*/
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fto-consult/expo-ui",
-  "version": "6.23.9",
+  "version": "6.23.11",
   "description": "Bibliothèque de composants UI Expo,react-native",
   "main": "index.js",
   "scripts": {
@@ -118,6 +118,7 @@
   },
   "devDependencies": {
     "@expo/metro-config": "latest",
+    "@faker-js/faker": "^8.0.2",
     "babel-plugin-inline-dotenv": "^1.7.0",
     "babel-plugin-module-resolver": "^5.0.0"
   }

package/src/App.js

@@ -5,6 +5,7 @@ import Index from './index';
 import notify  from "$notify";
 import { SafeAreaProvider } from 'react-native-safe-area-context';
 import {GestureHandlerRootView} from "react-native-gesture-handler";
+import KeyboardAvoidingViewComponent from '$ecomponents/KeyboardAvoidingView';
 import APP from "$app";
 import {isMobileNative} from "$cplatform";
 import {setDeviceIdRef} from "$capp";
@@ -144,9 +145,11 @@ export default function getIndex({onMount,onUnmount,render,onRender,init}){
         }}
       >
         <GestureHandlerRootView style={{ flex: 1,flexGrow:1,flexShrink:1}} testID={"RN_GestureHandlerRootView"}>
-          <SafeAreaProvider>
-            <Index onMount={onMount} render={render} onUnmount={onUnmount} onRender={onRender} init={init}/>
-          </SafeAreaProvider>
+          <KeyboardAvoidingViewComponent>
+            <SafeAreaProvider>
+              <Index onMount={onMount} render={render} onUnmount={onUnmount} onRender={onRender} init={init}/>
+            </SafeAreaProvider>
+          </KeyboardAvoidingViewComponent>
         </GestureHandlerRootView>
       </SWRConfig>
     );

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

@@ -35,11 +35,17 @@ const DatagridFactory = (Factory)=>{
             super(props);
             this.autobind();
             this.frozenItems = 0;
-            this.listRef = React.createRef(null);
+            Object.defineProperties(this,{
+                listRef : {
+                    value : React.createRef(),
+                },
+                backToTopRef : {
+                    value : React.createRef(),
+                },
+            });
             this.state.refreshing = false;
             //this.state.isReady = !this.bindResizeEvents();
             this.updateLayout = this.updateLayout.bind(this);
-            this.backToTopRef = React.createRef(null);
         }
         isDatagrid(){
             return true;

package/src/components/Datagrid/Test/fields.js

@@ -1,150 +1,6 @@
 // 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 i18n from "$i18n";
 export default {
-    type : {
-        text : 'Type',
-        type : 'select',
-        required : true,
-        width : 150,
-        items : {
-            PSA : {code:'PSA',index:0,piece:'RVE',label:i18n.lang("payments_sales","Vente")},
-            PPU : {code:'PPU',index:0,piece:'RAC',label:i18n.lang("payments_purchases","Achat")},
-            PIN : {code:'PIN',index : 0,piece:'REN', label:i18n.lang("payments_increases","Encaissement")},
-            PDE : {code:'PDE',index:0,piece:'RDE',label:i18n.lang("payments_decreases","Décaissement")},
-            PTR : {code:'PTR',index:0,piece:'RTR',label:i18n.lang("payments_transfers","Transfert")},
-        },
-    },
-    date : {
-        text : 'Date',
-        tooltip : 'La date',
-        type : 'date',
-        defaultValue : new Date(),
-    },
-    from : {
-        tooltip : 'Le compte source',
-        idfield  : 'code',
-        //le point d'origine 
-        text : 'Du/De',
-    },
-    to : {
-        idfield  : 'code',
-        tooltip : 'Le compte destination',
-        text : 'Au/A',
-    },
-    amount : {
-        text : 'Montant',
-        type : 'number',
-        format : 'money',
-        defaultValue : 0,
-    },
-    mode : {
-        type : 'selectstructdata',
-        text : 'Mode',
-        tableName : 'payments_methods',
-        required : true,
-        defaultValue : 'ESPECE',
-    },
-    cost : {
-        text : 'Coût',
-        type  : 'number',
-        format : 'money',
-        defaultValue : 0,
-        validType : 'numberGreaterThanOrEquals[0]',
-    },
-    totalAmount : {
-        text : 'Montant Total',
-        type : 'number',
-        format : 'money',
-        defaultValue : 0,
-        form : false,
-    },
-    imputedAmount : {
-        text : 'Montant Imputé',
-        form : false,
-        type : 'number',
-        format : 'money',
-        import : false,
-    },
-    restToImpute :{
-        text : 'Reste à Imputer',
-        form : false,
-        type : 'number',
-        format : 'money',
-        import : false,
-    }, 
-    code : {
-        text : 'Numéro/pièce',
-        type : 'piece',
-        tableName : 'PAYMENTS',
-        dbName : 'default',
-        piece : '',
-        width : 200,
-    },
-    reference : {
-        tooltip : 'La référence ',
-        text : 'Référence',
-        width : 300,
-        sortable : false,
-        filter : false,
-        import : false,
-    },
-    category : {
-        text : 'Catégorie',
-        type : 'selectStructData',
-        table : 'payments_categories',
-        width : 200
-    },
-    label : {
-        text : 'Objet/Motif',
-        tooltip : "L'objet ou le motif du règlement",
-        format : 'hashtag',
-        maxLength : 500,
-        rows : 1,
-        width : 300
-    },
-    approved : {
-        type : 'switch',
-        form : false,
-        width : 100,
-        text : 'Approuvé',
-        defaultValue : 0,
-        checkedTooltip : 'Oui',
-        uncheckedTooltip : 'Non'
-    },
-    transferredAmount : {
-        text : 'Montant transféré',
-        title : "Le montant transféré dans le fichier de donné, si le document a été transféré",
-        type : "number",
-        format : 'money',
-        visible : false,
-        form : false,
-    },
-    netAmount : {
-        text : 'Montant net',
-        title : "Le montant net représente la différence entre le montant réglé et le montant transféré",
-        type : "number",
-        format : 'money',
-        visible : false,
-        filter : false,
-        sortable : false,
-        form : false,
-    },
-    tags : {
-        text : 'Etiquettes',
-        type : 'selectstructdata',
-        table : 'tags',
-        multiple : true,
-        display : 'tags',
-        width : 200
-    },
-    comment : {
-        text : 'Note complémentaire',
-        tootile : 'Note complémentaire au règlement',
-        maxLength : 120,
-        format : 'hashtag',
-        rows : 1,
-        width : 200
-    },
+    
 }

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

@@ -4,7 +4,50 @@
 
 import fields from "./fields";
 import Table from "../Table";
-const data = require("./data.json");
-export default function TestDatagridComponent({...props}){
-    return <Table  columns={fields} data={data.docs} {...props}/>
-}
+import React from "$react";
+import { faker } from '@faker-js/faker';
+export default function TestDatagridComponent({count,...props}){
+    const data = React.useMemo(()=>{
+        count = typeof count =='number' && count > 10 ? count : 5000;
+        return faker.helpers.multiple(createRandomUser, {
+            count,
+        });
+    },[count])
+    return <Table 
+        title = "Utilisateurs"
+    columns={{
+        userId : {
+            primaryKey : true,
+            text :"Id",
+            width : 100,
+        },
+        username : {
+            text : "Name",
+            width : 220,
+        },
+        email : {
+            type : "email",
+            label : 'Email',
+        },
+        avatar : {
+           type : "image",
+           label: 'Avatar',
+        },
+        birthdate : {
+            type : "date",
+            label : "Date",
+        },
+    }} data={data} {...props}/>
+}
+
+export function createRandomUser (){
+    return {
+      userId: faker.string.uuid(),
+      username: faker.internet.userName(),
+      email: faker.internet.email(),
+      avatar: faker.image.avatar(),
+      password: faker.internet.password(),
+      birthdate: faker.date.birthdate(),
+      registeredAt: faker.date.past(),
+    };
+  }

package/src/components/Dialog/Dialog.js

@@ -3,7 +3,7 @@ import {defaultStr,isObj} from "$cutils";
 import {Dialog} from "react-native-paper";
 import {isNonNullString,defaultVal,defaultNumber,defaultObj,defaultBool } from "$cutils";
 import {StyleSheet,ScrollView} from "react-native";
-//import ScrollView  from "$ecomponents/ScrollView";
+import View from "$ecomponents/View";
 import Modal from "$ecomponents/Modal";
 import PropTypes from "prop-types";
 import React from "$react";
@@ -20,6 +20,7 @@ import {ACTION_ICON_SIZE} from "$ecomponents/AppBar";
 import DialogFooter from "./DialogFooter";
 import { Dimensions } from "react-native";
 import Surface from "$ecomponents/Surface";
+import KeyboardAvoidingView from "$ecomponents/KeyboardAvoidingView";
 
 export const FOOTER_HEIGHT = 50;
 export const HEADER_HEIGHT = 50;
@@ -172,9 +173,9 @@ const DialogComponent = React.forwardRef((props,ref)=>{
         paddingVertical : borderRadius?10:0,
     };
     const alertContentStyle = isAlert ? {paddingHorizontal:15} : null;
-    content = <Surface ref={contentRef} testID = {testID+"_Content11"} {...contentProps} style={[fullScreen? {flex:1}:{maxWidth,maxHeight:maxHeight-Math.min(SCREEN_INDENT*2+50,100)},isPreloader && {paddingHorizontal:10},{backgroundColor},alertContentStyle,contentProps.style]}>
+    content = <View ref={contentRef} testID = {testID+"_Content11"} {...contentProps} style={[fullScreen? {flex:1}:{maxWidth,maxHeight:maxHeight-Math.min(SCREEN_INDENT*2+50,100)},isPreloader && {paddingHorizontal:10},{backgroundColor},alertContentStyle,contentProps.style]}>
         {content}
-    </Surface>
+    </View>
     if(withScrollView){
         content = <ScrollView centerContent 
             contentContainerStyle={{ flexGrow: 0, justifyContent: 'flex-start' }}
@@ -197,78 +198,80 @@ const DialogComponent = React.forwardRef((props,ref)=>{
                 testID = {testID}
                 contentContainerProps = {contentContainerProps}
             >
-                <Surface 
-                    testID = {testID+"_Overlay"}
-                    ref={overlayRef}
-                    {...overlayProps} 
-                    style={[styles.overlay,isAlert && styles.overlayAlert,{backgroundColor},overlayProps.style,fullScreenStyle]}
-                >
-                    {(!isAlert && (actions || title || subtitle)) ? <AppBarDialog
-                        actionsProps = {actionsProps}
-                        testID = {testID+"_AppBar"}
-                        {...appBarProps}
-                        actions = {actions}
-                        actionMutator = {actionMutator}
-                        ref = {appBarRef}
-                        responsive = {isResponsive}
-                        isFullScreen = {isFullScreenDialog}
-                        fullScreen = {customFullScreen}
-                        backAction = {backAction}
-                        backActionProps = {{...backActionProps,onPress:(a)=>{
-                            handleBack(a,true);
-                        }}}
-                        title = {title}
-                        subtitle = {subtitle}
-                        titleProps = {titleProps}
-                    />:null}
-                    <DialogTitle 
-                        testID = {testID+"_Title"}
-                        {...titleProps} 
-                        ref = {titleRef}
-                        title = {title}
-                        responsive = {isResponsive}
-                        isFullScreen = {isFullScreenDialog}
-                        fullScreen = {customFullScreen}
-                    />
-                    {content}
-                    {actions ? <DialogActions
-                        testID = {testID+"_Footer"}
-                        {...footerProps}
-                        ref = {footerRef}
-                        isAlert = {isAlert}
-                        onAlertRequestClose = {onAlertRequestClose}
-                        actionsProps = {actionsProps}
-                        responsive = {isResponsive}
-                        isFullScreen = {isFullScreenDialog}
-                        fullScreen = {customFullScreen}
-                        actions = {actions}
-                        style = {[{backgroundColor},footerProps.style]}
-                        actionMutator = {actionMutator}
-                        cancelButton = {isAlert || !cancelButton || isPreloader ? null : {
-                            icon : 'cancel',
-                            mode : 'contained',
-                            error : true,
-                            canSave : false,
-                            ...cancelButton,
-                            text : undefined,
-                            label : defaultVal(cancelButton.label,cancelButton.text,"Annuler"),
-                            onPress : (a1,a2)=>{
-                                return handleBack(a1,true);
-                            }
-                        }}
-                        menuProps = {defaultObj(appBarProps.menuProps)}
-                     /> : null}
-                     {(!isAlert && footer) ? <DialogFooter
-                        {...footerProps}
-                        style = {[{backgroundColor},footerProps.style]}
-                        testID = {testID+"_FullPageFooter"}
-                        ref = {footerContentRef}
-                        responsive = {isResponsive}
-                        isFullScreen = {isFullScreenDialog}
-                        fullScreen = {customFullScreen}
-                        children = {footer}
-                     /> : null}
-                </Surface>
+                <KeyboardAvoidingView>
+                    <Surface 
+                        testID = {testID+"_Overlay"}
+                        ref={overlayRef}
+                        {...overlayProps} 
+                        style={[styles.overlay,isAlert && styles.overlayAlert,{backgroundColor},overlayProps.style,fullScreenStyle]}
+                    >
+                        {(!isAlert && (actions || title || subtitle)) ? <AppBarDialog
+                            actionsProps = {actionsProps}
+                            testID = {testID+"_AppBar"}
+                            {...appBarProps}
+                            actions = {actions}
+                            actionMutator = {actionMutator}
+                            ref = {appBarRef}
+                            responsive = {isResponsive}
+                            isFullScreen = {isFullScreenDialog}
+                            fullScreen = {customFullScreen}
+                            backAction = {backAction}
+                            backActionProps = {{...backActionProps,onPress:(a)=>{
+                                handleBack(a,true);
+                            }}}
+                            title = {title}
+                            subtitle = {subtitle}
+                            titleProps = {titleProps}
+                        />:null}
+                        <DialogTitle 
+                            testID = {testID+"_Title"}
+                            {...titleProps} 
+                            ref = {titleRef}
+                            title = {title}
+                            responsive = {isResponsive}
+                            isFullScreen = {isFullScreenDialog}
+                            fullScreen = {customFullScreen}
+                        />
+                        {content}
+                        {actions ? <DialogActions
+                            testID = {testID+"_Footer"}
+                            {...footerProps}
+                            ref = {footerRef}
+                            isAlert = {isAlert}
+                            onAlertRequestClose = {onAlertRequestClose}
+                            actionsProps = {actionsProps}
+                            responsive = {isResponsive}
+                            isFullScreen = {isFullScreenDialog}
+                            fullScreen = {customFullScreen}
+                            actions = {actions}
+                            style = {[{backgroundColor},footerProps.style]}
+                            actionMutator = {actionMutator}
+                            cancelButton = {isAlert || !cancelButton || isPreloader ? null : {
+                                icon : 'cancel',
+                                mode : 'contained',
+                                error : true,
+                                canSave : false,
+                                ...cancelButton,
+                                text : undefined,
+                                label : defaultVal(cancelButton.label,cancelButton.text,"Annuler"),
+                                onPress : (a1,a2)=>{
+                                    return handleBack(a1,true);
+                                }
+                            }}
+                            menuProps = {defaultObj(appBarProps.menuProps)}
+                         /> : null}
+                         {(!isAlert && footer) ? <DialogFooter
+                            {...footerProps}
+                            style = {[{backgroundColor},footerProps.style]}
+                            testID = {testID+"_FullPageFooter"}
+                            ref = {footerContentRef}
+                            responsive = {isResponsive}
+                            isFullScreen = {isFullScreenDialog}
+                            fullScreen = {customFullScreen}
+                            children = {footer}
+                         /> : null}
+                    </Surface>
+                </KeyboardAvoidingView>
             </ModalComponent>
         </Portal>
 });

package/src/components/Dropdown/index.js

@@ -902,8 +902,7 @@ class DropdownComponent extends AppComponent {
                         label = {labelTextField}
                         style = {[inputProps.style,textInputProps.style,{pointerEvents:"none"}]}
                         disabled = {disabled}
-                        readOnly = {readOnly}
-                        //divider = {canHandle}
+                        readOnly = {true}
                         alwaysUseLabel = {renderTag?true : false}
                         contentContainerProps = {{
                             ...contentContainerProps,

package/src/components/Form/Form.js

@@ -3,7 +3,6 @@ import React from "$react";
 import {classExtends,isFunction,isNonNullString,defaultStr,defaultObj,defaultVal,extendObj} from "$cutils";
 import {warning,Forms} from "./utils";
 import Action from "./Action";
-import View from "$ecomponents/View";
 import KeyboardAvoidingView from "$ecomponents/KeyboardAvoidingView";
 import { StyleSheet } from "react-native";
 import APP from "$capp/instance";
@@ -106,11 +105,9 @@ export default class FormComponent extends React.AppComponent {
             ...rest
         } = this.props;
         testID = defaultStr(testID,"RN_FormComponent");
-        return (<KeyboardAvoidingView testID={testID+"_KeyboardAvoidingView"}>
-            <View  {...rest} testID={testID} style={[styles.container,rest.style]}>
-                {this.props.children}
-            </View>
-        </KeyboardAvoidingView>);
+        return <KeyboardAvoidingView  {...rest} testID={testID+"_FormKeyboardAvoidingView"} style={[styles.container,rest.style]}>
+            {this.props.children}
+        </KeyboardAvoidingView>
     }
 }
 const isField  = (Component)=>{

package/src/components/KeyboardAvoidingView/index.js

@@ -1,4 +1,8 @@
+import View from "$ecomponents/View";
+import React from "$react";
+const KeyboardAvoidingViewComponent = React.forwardRef(({children,...props},ref)=>{
+  return <View {...props}>{children}</View>
+});
 
-export default function KeyboardAvoidingViewComponent({ children}){
-  return children;
-}
+KeyboardAvoidingViewComponent.displayName = "KeyboardAvoidingViewComponent";
+KeyboardAvoidingViewComponent.propTypes = Object.assign({},View.propTypes);

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

@@ -1,10 +1,11 @@
-import {KeyboardAvoidingView,StyleSheet} from 'react-native';
+import {KeyboardAvoidingView,Platform,StyleSheet} from 'react-native';
+import {isAndroid} from "$platform";
 
 export default function KeyboardAvoidingViewComponent({ children,...rest }){
     return (
       <KeyboardAvoidingView
-        behavior="padding"
-        keyboardVerticalOffset={80}
+        behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
+        keyboardVerticalOffset={isAndroid()?0:80}
         {...rest}
         style = {[styles.wrapper,rest.style]}
       >

package/src/components/Switch/index.js

@@ -106,10 +106,11 @@ const SwitchComponent = React.forwardRef((props,ref)=>{
         disabled = {disabled}
         readOnly = {readOnly || !isEditable}
         pointerEvents={pointerEvents}
-        style = {[{paddingHorizontal:0,['margin'+(isLeftPosition?'Right':'Left')]:10},style,disabledStyle]}
+        style = {[{['margin'+(isLeftPosition?'Right':'Left')]:10},style,styles.switch,disabledStyle]}
         value = {isSwitchOn}
         onValueChange = {setIsSwitchOn}
         color = {Colors.isValid(p.color)? p.color : theme.colors.primaryOnSurface}
+        testID={testID+"_MainSwitchComponent"}
     />
    return <Tooltip 
                 {...p} 
@@ -164,6 +165,10 @@ const styles = StyleSheet.create({
       flexShrink: 1,
       flexGrow: 1,
     },
+    switch : {
+        backgroundColor : "transparent",
+        paddingHorizontal:0,
+    }
   });
 
   export default SwitchComponent;

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

@@ -2,15 +2,7 @@ import React from "$react";
 import {Vertical as AutoSizeVertical} from "$ecomponents/AutoSizer";
 import List from "$ecomponents/List/Virtuoso";
 import {defaultStr,isObj,defaultObj} from "$cutils";
-const normalize = (size)=>{
-    if(isObj(size)){
-        ["padding","paddingBottom","paddingTop","paddingLeft","paddingRight"].map(p=>{
-            delete size[p];
-        })
-        return size;
-    }
-    return {};
-}
+
 const AutoSizeVerticalList = React.forwardRef(({testID,autoSizerProps,...props},ref)=>{
     testID = defaultStr(testID,"RN_AutoSizeVerticalListComponent")
     autoSizerProps = defaultObj(autoSizerProps);

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

@@ -0,0 +1 @@
+export {default} from "$ecomponents/List/FlashList";

package/src/components/TextField/index.js

@@ -1,6 +1,6 @@
 import {defaultStr,defaultObj,defaultBool,isNumber,isDecimal,isFunction,defaultVal,defaultNumber,isNonNullString} from "$cutils";
 import { TextInput} from "react-native-paper";
-import { TextInput as RNTextInput,KeyboardAvoidingView,StyleSheet} from "react-native";
+import { TextInput as RNTextInput,StyleSheet} from "react-native";
 import React from "$react";
 import theme,{Colors,DISABLED_OPACITY,READONLY_OPACITY} from "$theme";
 import PropTypes from "prop-types";
@@ -541,11 +541,11 @@ const TextFieldComponent = React.forwardRef((componentProps,inputRef)=>{
                 {label}
             </Label> : null}
             <>
-                <Surface testID={testID+"_ContentContainer"}  {...contentContainerProps} elevation={elevation}  style={[styles.contentContainer,{pointerEvents},!left? styles.paddingLeft:null,styles.row,contentContainerStyle,contentContainerProps.style]}>
+                <Surface testID={testID+"_ContentContainer"}  {...contentContainerProps} elevation={0}  style={[styles.contentContainer,{pointerEvents},!left? styles.paddingLeft:null,styles.row,contentContainerStyle,contentContainerProps.style]}>
                     {left ? (<View testID={testID+"_Left"} {...leftContainerProps} style={[styles.AdornmentContainer,styles.leftAdornment,leftContainerProps.style,disabledStyle]}>
                         {left}
                     </View>) : null}
-                    <KeyboardAvoidingView testID={testID+"_Content"} {...contentProps} style={[styles.inputWrapper,contentProps.style,disabledStyle]}>
+                    <View testID={testID+"_Content"} {...contentProps} style={[styles.inputWrapper,contentProps.style,disabledStyle]}>
                         {
                             typeof render ==="function"? render(inputProps):
                              <RNTextInput 
@@ -553,7 +553,7 @@ const TextFieldComponent = React.forwardRef((componentProps,inputRef)=>{
                                 ref = {componentRef}
                             /> 
                         }
-                    </KeyboardAvoidingView>
+                    </View>
                     {right ? (<View testID={testID+"_Right"} {...rightContainerProps} style={[styles.AdornmentContainer,styles.rightAdornment,rightContainerProps.style,disabledStyle]}>
                         {right}
                     </View>) : null}

package/src/components/TextField/utils.js

@@ -59,7 +59,8 @@ export const keyboardTypes = {
 }
 
 export const inputModes = {
-    default : 'none',
+    default : 'text',
+    none : "none",
     number : "numeric",
     decimal : "decimal",
     numeric : "numeric",