@fto-consult/expo-ui 1.2.3 → 1.2.5

package/babel.config.alias.js

@@ -17,8 +17,15 @@ module.exports = (opts)=>{
     r["$emedia"] = path.resolve(expo,"media");
     r["$enavigation"] = path.resolve(expo,"navigation");
     r["$escreens"] = path.resolve(expo,"screens");
+    r["$emainScreens"] = path.resolve(expo,"screens","mainScreens");
+    ///les screens principaux de l'application
+    r["$mainScreens"] = r["$mainScreens"] || r["$emainScreens"];
     r["$escreen"] = path.resolve(expo,"layouts/Screen");
     r["$eassets"] = path.resolve(dir,"assets");
+    r["$ethemeSelectorComponent"] = path.resolve(expo,"auth","ThemeSelector");
+    /*** le composant permettant de sélectionner un theme utilisateur */
+    r["$themeSelectorComponent"] = r["$themeSelectorComponent"] || r["$ethemeSelectorComponent"];
+
 
     ///pour personnaliser les écrans de l'application, il suffit de redefinir l'alis $screens, pointant vers le repertoire racine des écrans personnalisés
     ///cependant, ce repertoire doit contenir un fichier mainScreens.js qui contient la liste de tous les écrans de lapplicaiton

package/package.json

@@ -1,101 +1,102 @@
-{
-  "name": "@fto-consult/expo-ui",
-  "version": "1.2.3",
-  "description": "Bibliothèque de composants UI Expo,react-native",
-  "main": "index.js",
-  "scripts": {
-    "publish1": "npm publish --access=public",
-    "unpublish": "npm -f unpublish @fto-consult/expo-ui",
-    "build-web": "",
-    "dev": "npx expo start -c --no-minify",
-    "start": "npx expo start --dev --no-minify",
-    "start-d": "npx expo start -c --no-dev --no-minify",
-    "start-p": "npm run start-d",
-    "expo-start-client": "npx expo start --dev --no-minify --dev-client",
-    "start-m": "npx expo start - c--dev--no -minify",
-    "android": "npx expo start --android -c",
-    "ios": "npx expo start --ios",
-    "web": "npx expo start --web",
-    "web-c": "npx expo start --web -c",
-    "eject": "expo eject",
-    "emulator": "npm run android-emulator",
-    "web-server": "npx serve web-build",
-    "build-android": "eas build --clear-cache -p android --profile preview",
-    "build-android-local": "eas build --platform android --local",
-    "build-android-dist": "eas build --clear-cache -p android",
-    "build-ios": "eas build --clear-cache -p ios --profile preview",
-    "build-ios-dist": "eas build --clear-cache -p ios",
-    "install-apk": "adb -s emulator-5554 install myapp.apk",
-    "android-emulator": "emulator -avd EMULATOR",
-    "flipper": "npx cross-env METRO_SERVER_PORT=19000 E:\\Studies\\react-native\\debugger\\Flipper-win\\Flipper.exe",
-    "build-electron": "electron-webpack && electron-builder --dir -c.compression=store",
-    "test:build": "electron-webpack && electron-builder --dir -c.compression=store -c.mac.identity=null",
-    "compile-electron": "webpack --config ./electron/webpack.config.js",
-    "compile-electron-p": "webpack --config ./electron/webpack.config.js --mode=production",
-    "electron": "electron ./electron",
-    "logcat": "adb -d logcat com.ftc.apps.salite1:E > errors.txt",
-    "logcat-export": "adb -d logcat com.ftc.apps.salite1 *:S > logcat.txt",
-    "electron-c": "npm run compile-electron && npm run electron",
-    "electron-p": "npm run compile-electron-p && npm run electron",
-    "update-app-version": "node ./update-app-version.js",
-    "find-licenses": "node ./find-licenses.js",
-    "fix-dependencies": "expo doctor --fix-dependencies"
-  },
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/borispipo/expo-ui.git"
-  },
-  "keywords": [
-    "Expo",
-    "React-Native"
-  ],
-  "author": "Boris Fouomene",
-  "license": "ISC",
-  "bugs": {
-    "url": "https://github.com/borispipo/expo-ui/issues"
-  },
-  "homepage": "https://github.com/borispipo/expo-ui#readme",
-  "dependencies": {
-    "@babel/preset-react": "^7.18.6",
-    "@emotion/native": "^11.10.0",
-    "@expo/html-elements": "^0.2.0",
-    "@expo/metro-config": "^0.4.0",
-    "@expo/webpack-config": "^0.17.2",
-    "@fto-consult/common": "^1.3.3",
-    "@gorhom/portal": "^1.0.14",
-    "@react-native-async-storage/async-storage": "~1.17.3",
-    "@react-native-community/datetimepicker": "6.2.0",
-    "@react-native-community/netinfo": "9.3.0",
-    "@react-navigation/native": "^6.0.13",
-    "@react-navigation/native-stack": "^6.9.1",
-    "@shopify/flash-list": "1.1.0",
-    "babel-plugin-inline-dotenv": "^1.7.0",
-    "babel-plugin-module-resolver": "^4.1.0",
-    "babel-plugin-transform-inline-environment-variables": "^0.4.4",
-    "expo": "^46.0.15",
-    "expo-camera": "~12.3.0",
-    "expo-linking": "~3.2.2",
-    "expo-sqlite": "~10.3.0",
-    "expo-status-bar": "~1.4.0",
-    "expo-system-ui": "~1.3.0",
-    "expo-web-browser": "~11.0.0",
-    "google-libphonenumber": "^3.2.31",
-    "htmlparser2-without-node-native": "^3.9.2",
-    "parent-package-json": "^2.0.1",
-    "prop-types": "^15.8.1",
-    "react-apexcharts": "^1.4.0",
-    "react-content-loader": "^6.2.0",
-    "react-dom": "18.0.0",
-    "react-native-big-list": "^1.5.5",
-    "react-native-gesture-handler": "~2.5.0",
-    "react-native-paper": "^4.12.5",
-    "react-native-paper-dates": "^0.9.2",
-    "react-native-reanimated": "~2.9.1",
-    "react-native-safe-area-context": "4.3.1",
-    "react-native-svg": "12.3.0",
-    "react-native-web": "~0.18.7",
-    "react-native-webview": "11.23.0",
-    "sharp-cli": "^2.1.0",
-    "tippy.js": "^6.3.7"
-  }
-}
+{
+  "name": "@fto-consult/expo-ui",
+  "version": "1.2.5",
+  "description": "Bibliothèque de composants UI Expo,react-native",
+  "main": "index.js",
+  "scripts": {
+    "publish1": "npm publish --access=public",
+    "unpublish": "npm -f unpublish @fto-consult/expo-ui",
+    "build-web": "",
+    "dev": "npx expo start -c --no-minify",
+    "start": "npx expo start --dev --no-minify",
+    "start-d": "npx expo start -c --no-dev --no-minify",
+    "start-p": "npm run start-d",
+    "expo-start-client": "npx expo start --dev --no-minify --dev-client",
+    "start-m": "npx expo start - c--dev--no -minify",
+    "android": "npx expo start --android -c",
+    "ios": "npx expo start --ios",
+    "web": "npx expo start --web",
+    "web-c": "npx expo start --web -c",
+    "eject": "expo eject",
+    "emulator": "npm run android-emulator",
+    "web-server": "npx serve web-build",
+    "build-android": "eas build --clear-cache -p android --profile preview",
+    "build-android-local": "eas build --platform android --local",
+    "build-android-dist": "eas build --clear-cache -p android",
+    "build-ios": "eas build --clear-cache -p ios --profile preview",
+    "build-ios-dist": "eas build --clear-cache -p ios",
+    "install-apk": "adb -s emulator-5554 install myapp.apk",
+    "android-emulator": "emulator -avd EMULATOR",
+    "flipper": "npx cross-env METRO_SERVER_PORT=19000 E:\\Studies\\react-native\\debugger\\Flipper-win\\Flipper.exe",
+    "build-electron": "electron-webpack && electron-builder --dir -c.compression=store",
+    "test:build": "electron-webpack && electron-builder --dir -c.compression=store -c.mac.identity=null",
+    "compile-electron": "webpack --config ./electron/webpack.config.js",
+    "compile-electron-p": "webpack --config ./electron/webpack.config.js --mode=production",
+    "electron": "electron ./electron",
+    "logcat": "adb -d logcat com.ftc.apps.salite1:E > errors.txt",
+    "logcat-export": "adb -d logcat com.ftc.apps.salite1 *:S > logcat.txt",
+    "electron-c": "npm run compile-electron && npm run electron",
+    "electron-p": "npm run compile-electron-p && npm run electron",
+    "update-app-version": "node ./update-app-version.js",
+    "find-licenses": "node ./find-licenses.js",
+    "fix-dependencies": "expo doctor --fix-dependencies"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/borispipo/expo-ui.git"
+  },
+  "keywords": [
+    "Expo",
+    "React-Native"
+  ],
+  "author": "Boris Fouomene",
+  "license": "ISC",
+  "bugs": {
+    "url": "https://github.com/borispipo/expo-ui/issues"
+  },
+  "homepage": "https://github.com/borispipo/expo-ui#readme",
+  "dependencies": {
+    "@babel/preset-react": "^7.18.6",
+    "@emotion/native": "^11.10.0",
+    "@expo/html-elements": "^0.2.0",
+    "@expo/metro-config": "^0.4.0",
+    "@expo/webpack-config": "^0.17.2",
+    "@fto-consult/common": "^1.4.3",
+    "@gorhom/portal": "^1.0.14",
+    "@react-native-async-storage/async-storage": "~1.17.3",
+    "@react-native-community/datetimepicker": "6.2.0",
+    "@react-native-community/netinfo": "9.3.0",
+    "@react-navigation/native": "^6.0.13",
+    "@react-navigation/native-stack": "^6.9.1",
+    "@shopify/flash-list": "1.1.0",
+    "babel-plugin-inline-dotenv": "^1.7.0",
+    "babel-plugin-module-resolver": "^4.1.0",
+    "babel-plugin-transform-inline-environment-variables": "^0.4.4",
+    "expo": "^46.0.15",
+    "expo-camera": "~12.3.0",
+    "expo-image-picker": "~13.3.1",
+    "expo-linking": "~3.2.2",
+    "expo-sqlite": "~10.3.0",
+    "expo-status-bar": "~1.4.0",
+    "expo-system-ui": "~1.3.0",
+    "expo-web-browser": "~11.0.0",
+    "google-libphonenumber": "^3.2.31",
+    "htmlparser2-without-node-native": "^3.9.2",
+    "parent-package-json": "^2.0.1",
+    "prop-types": "^15.8.1",
+    "react-apexcharts": "^1.4.0",
+    "react-content-loader": "^6.2.0",
+    "react-dom": "18.0.0",
+    "react-native-big-list": "^1.5.5",
+    "react-native-gesture-handler": "~2.5.0",
+    "react-native-paper": "^4.12.5",
+    "react-native-paper-dates": "^0.9.2",
+    "react-native-reanimated": "~2.9.1",
+    "react-native-safe-area-context": "4.3.1",
+    "react-native-svg": "12.3.0",
+    "react-native-web": "~0.18.7",
+    "react-native-webview": "11.23.0",
+    "sharp-cli": "^2.1.0",
+    "tippy.js": "^6.3.7"
+  }
+}

package/src/auth/Login.js

@@ -35,6 +35,7 @@ export default function LoginComponent(props){
     const backgroundColor = theme.colors.surface;
     const Wrapper = withPortal ? ScreenWithoutAuthContainer  : View;
     const _getForm = x=> getForm(formName);
+    const isMounted = React.useIsMounted();
     
     const auth = useAuth();
     const notifyUser = (message,title)=> {
@@ -43,10 +44,15 @@ export default function LoginComponent(props){
         } else if(typeof message =='object') return false;
         return notify.error({message,title,position:'top'});
     }
-    const [state,setState] = React.useState({
+    const [state,_setState] = React.useState({
         step : defaultNumber(step,1),
         data : defaultObj(props.data),
     });
+    const setState = (state2)=>{
+        if(!isMounted()) return;
+        state2 = isObj(state2)? state2 : {};
+        return _setState({...state,...state2});
+    }
     const getData = ()=>{
         const form = _getForm();
         if(form && form.getData){
@@ -79,8 +85,9 @@ export default function LoginComponent(props){
             },1000)
         }
     },[withPortal])
-    const {header,children,data:loginData,canGoToNext,keyboardEvents,onSuccess:onLoginSuccess,canSubmit:canSubmitForm,onStepChange,...loginProps} = defaultObj(getProps({
+    const {header,children,initialize,data:loginData,canGoToNext,keyboardEvents,onSuccess:onLoginSuccess,canSubmit:canSubmitForm,onStepChange,...loginProps} = defaultObj(getProps({
         ...state,
+        setState,
         state,
         showError : notifyUser,
         notifyUser,
@@ -93,6 +100,10 @@ export default function LoginComponent(props){
         previousButtonRef,
     }));
     React.useEffect(()=>{
+        /*** pour initializer les cordonnées du composant login */
+        if(typeof initialize =='function'){
+            initialize();
+        }
         Preloader.closeAll();
     },[]);
     const prevStep = React.usePrevious(state.step);
@@ -120,11 +131,16 @@ export default function LoginComponent(props){
         }
         if(typeof canGoToNext =='function'){
             const s = canGoToNext(args);
-            if(s === false) return;
+            if(s === false) {
+                nextButtonRef.current?.disable();
+                return;
+            }
             if(isNonNullString(s)){
                 notifyUser(s);
+                nextButtonRef.current?.disable();
                 return
             }
+            nextButtonRef.current?.enable();
         }
         if(step > 1){
             if(!form.isValid()){

package/src/auth/ThemeSelector/index.js

@@ -0,0 +1,197 @@
+// 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.
+///permet de sélectionner un theme utilisateur
+import React from "$react";
+import Label from "$ecomponents/Label";
+import Auth,{login} from "$cauth";
+import View from "$ecomponents/View";
+import { StyleSheet } from "react-native";
+import {colors as defaultColors,defaultThemeName} from "$theme/defaultTheme";
+import theme,{defaultDarkTheme,Colors,defaultLightTheme} from "$theme";
+import Provider from "$ecomponents/Form/FormData/DialogProvider";
+import Dropdown from "$ecomponents/Dropdown";
+import {defaultObj} from "$utils";
+import Icon from "$ecomponents/Icon";
+import {open,close} from "$preloader";
+import {fields,getThemeData} from "./utils";
+
+const getStyle = (color)=>{
+    if(!Colors.isValid(color)) return {};
+    return {backgroundColor:color,paddingHorizontal:10,paddingVertical:5,color:Colors.getContrast(color)};       
+}
+
+const ThemeSelectorComponent = React.forwardRef((props,ref)=>{
+    const innerRef = React.useRef(null);
+    return <Dropdown
+        {...getThemeFieldProps(props,innerRef)}
+        ref = {React.useMergeRefs(innerRef,ref)}
+    />
+});
+
+
+const isDocEditing = ({data})=>{
+    return data && isNonNullString(data.name)? true : false;
+};
+
+export const getThemeFieldProps = (props,ref)=>{
+    props = defaultObj(props);
+    let {user,showAdd,onValidate,onChange,onUpsert,...rest} = props;
+    const loggedUser = defaultObj(Auth.getLoggedUser());
+    user = defaultObj(user,loggedUser);
+    const isUserActive = loggedUser.code == user.code && user.code ? true : false;
+    const userTheme = defaultObj(user.theme);
+    const userThemeName = defaultStr(userTheme.name,defaultThemeName);
+    const isDark = theme.isDark() || theme.isDarkUI();
+    const defTheme = isDark ? {...defaultDarkTheme.colors,dark:true} : {...defaultLightTheme.colors,dark:false};
+    const itemsRef = React.useRef({...defaultObj(user.customThemes),...defaultColors});
+    const showThemeExplorer = (data)=>{
+        data = defaultObj(data,defTheme);
+        fields.name.disabled = ({data})=> data && isNonNullString(data.name);
+        const title = data && data.name ? ("Modifier ["+data.name+"]") : ('Nouv theme['+user.code+"]");
+        const isEditing = isDocEditing(data);
+        fields.textFieldMode.defaultValue = theme.textFieldMode;
+        Provider.open({
+            cancelButton : true,
+            dialogProps : {
+                withScrollView : true,
+                fullScreen : true,
+            },
+            data,
+            title,
+            isDocEditing,
+            actions : [{
+                text : 'Enregistrer',
+                primary : true,
+                icon : "check",
+                onPress : ({data,formName,...args})=>{
+                    ///un utilisateur doit avoir au max 10 Thème personnalisés
+                    const customThemes = defaultObj(user.customThemes);
+                    let cKeys = [];
+                    Object.map(customThemes,(cT,i)=>{
+                        if(!isObj(cT) || !cT.custom){
+                            delete customThemes[i];
+                            return;
+                        }
+                        cKeys.push(i);
+                    });
+                    const counter = cKeys.length;
+                    if(counter > 10){
+                        delete customThemes[cKeys[0]]
+                    }
+                    data.custom = true;
+                    customThemes[data.name] = data;
+                    itemsRef.current = user.customThemes = customThemes;
+                    open((isEditing?"Modification ":"Enregistrement ")+"du thème...");
+                    Auth.upsertUser(user,false).then(()=>{
+                        if(Auth.getLoggedUserCode() == user.code){
+                            login(user,false);
+                        }
+                        if(ref && ref.current && ref.current.refresh){
+                            ref.current.refresh(true);
+                        }
+                        if(typeof onUpsert =='function'){
+                            onUpsert({data,theme:data,value:data});
+                        }
+                    }).finally(()=>{
+                        Provider.close();
+                        close();
+                    });
+                }
+            }],
+            fields,
+        });
+    }
+    rest = {
+        multiple : false,
+        ...defaultObj(rest),
+        showAdd : typeof showAdd =='boolean'? showAdd : isUserActive || Auth.isTableDataAllowed({table:'users',action:'"changeTheme"'}),
+        addIconTooltip : "Cliquez pour ajouter un nouveau thème",
+        onAdd : ()=>{
+            showThemeExplorer();
+        },
+        onChange : (args)=>{
+            args = defaultObj(args);
+            const {value} = args
+            if(!value) return;
+            const {theme,value:validValue} = getThemeData(value);
+            args.theme = theme;
+            args.realValue = value;
+            args.value = validValue;
+            if(typeof onValidate =='function'){
+                onValidate(args);
+            } 
+            if(typeof onChange =='function'){
+                onChange(args);
+            }
+        },
+        defaultValue : userThemeName,
+        items : x =>{
+            return itemsRef.current;
+        },
+        compare : (item,selected)=>{
+            if(isNonNullString(selected)){
+                if(isObj(item) && item.name == selected) {
+                    return true;
+                }
+                if(isNonNullString(item)) return item === selected ? true : false;
+            }
+            return isObj(item) && isObj(selected) && item.name == selected.name ? true : false;
+        },
+        itemValue : ({item})=>{return item;},
+        renderText : ({item,index}) =>{ return defaultStr(item?.name,index+"")},
+        renderItem : ({item,index}) =>{
+            let {primary,secondary,name,primaryName,secondaryName,dark} = item
+            let split = index.split("-")
+            let pText = defaultStr(item.custom?name:primaryName,split[0],name,primary)
+            let sText = defaultStr(secondaryName,split[1],secondary);
+            //<Icon icon={dark?'brightness-6':'brightness-4'} size={15} title={dark?'Sombre':'Clair'}/> 
+            return <View style={[styles.buttonContainer]}>
+                <Label style={[getStyle(primary),{height:'100%',borderLeftWidth:10,borderLeftColor:dark?defaultDarkTheme.colors.surface:defaultLightTheme.colors.background}]}>
+                    {pText}
+                </Label>
+                <View style={[styles.labelRight]}>
+                    <Label style={[getStyle(secondary)]}>
+                        {sText}
+                    </Label>
+                    {<Icon size={20} 
+                        name={item.custom?'pencil':'plus'} 
+                        title={(item.custom?'Cliquer pour modifier le thème': ' Ajouter un thème basé sur le thème')+' ['+item.name+"]"} 
+                        onPress = {(e)=>{
+                            React.stopEventPropagation(e);
+                            showThemeExplorer({...Object.clone(item),name:item.custom?item.name:undefined,primaryName:item.custom ? item.primaryName : undefined, secondaryName : item.custom ? item.secondaryName:undefined});
+                        }} 
+                    />}
+                </View>
+            </View>
+        }
+    }
+    rest.text = defaultStr(rest.text,rest.label,'Thème');
+    return rest;
+}
+
+ThemeSelectorComponent.displayName = "ThemeSelectorComponent";
+
+
+export default ThemeSelectorComponent;
+
+const styles = StyleSheet.create({
+    theme : {
+        padding : 2,
+        marginBottom : 2,
+    },
+    itemContainer : {
+        width : '100%',
+    },
+    buttonContainer : {
+        width : '100%',
+        flexDirection :'row',
+        alignItems :'center',
+    },
+    labelRight : {
+        width : '100%',
+        flex : 1,
+        flexDirection :'row',
+        alignItems :'center',
+    }
+});

package/src/auth/ThemeSelector/utils.js

@@ -0,0 +1,141 @@
+// 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 { lightColors,darkColors,primary as defaultPrimary,secondary as defaultSecondary} from "$theme/defaultTheme";
+import {modesObject} from "$ecomponents/TextField/utils";
+
+export const fields = {
+    name : {
+        type : 'text',
+        maxLength : 30,
+        text : 'Nom du thème',
+        required : true,
+        upper : true,
+    }, 
+    dark : {
+        type : 'switch',
+        checkedValue : true,
+        uncheckedValue : false,
+        label : 'Mode Sombre',
+        checkedTooltip : 'Mode sombre actif',
+        uncheckedTooltip : 'Mode sombre inactif',
+        onChange : ({value,checked,context})=>{
+            if(checked === undefined) return;
+            if(context && context.getField){
+                const darkFields = checked ? darkColors  : lightColors;
+                Object.map(darkFields,(dF,i)=>{
+                    const dFContext = context.getField(i);
+                    if(dFContext && dFContext.setValue){
+                        dFContext.validate({value:dF});
+                    }
+                })
+            }
+        }
+    },
+    textFieldMode : {
+        type : 'select',
+        items : {...modesObject,none:{code:'',label:'Dynamique'}},
+        text : 'Mode d\'affichage des champs de texte'
+    },
+    primary : {
+        type : 'color',
+        text : 'Couleur principale [primary]',
+        required : true,
+        onChange : ({value,context})=>{
+            if(context && context.getField){
+                const pOnSurface = context.getField("primaryOnSurface");
+                if(pOnSurface){
+                    pOnSurface.setValue(value);
+                }
+            }
+        }
+    },
+    primaryText : {
+        type :'color',
+        text :'Texte sur couleur principale [primaryText]',
+        required : true,
+    },
+    secondary : {
+        type : 'color',
+        text : ' Couleur secondaire [secondary]',
+        required : true,
+        onChange : ({value,context})=>{
+            if(context && context.getField){
+                const sOnSurface = context.getField("secondaryOnSurface");
+                if(sOnSurface){
+                    sOnSurface.setValue(value);
+                }
+            }
+        }
+    },
+    secondaryText : {
+        type :'color',
+        text :'Texte sur couleur secondaire [secondaryText]',
+        required : true,
+    },
+    text : {
+        type :'color',
+        text : 'Couleur de texte [text]',
+        required : true,
+    },
+    disabled : {
+        type :'color',
+        text :'Texte Inactif [disabeld]'
+    },
+    divider : {
+        type : 'color',
+        text : 'Couleur|Soulignement [divider]'
+    },
+    background : {
+        type : 'color',
+        text : 'Couleur d\'arrière plan [background]',
+    },
+    surface : {
+        type :'color',
+        text :'Couleur de surface [surface]',
+    },
+    surfaceText : {
+        type :'color',
+        text :'Texte sur surface [surfaceText]',
+    },
+    primaryOnSurface : {
+        type :'color',
+        text :'Couleur principale sur surface  [primaryOnSurface]',
+    },
+    secondaryOnSurface : {
+        type :'color',
+        text :'Couleur secondaire sur surface  [secondaryOnSurface]',
+    },
+    info : {
+        type :'color',
+        text :'Notification|info [info]'
+    },
+    success : {
+        type :'color',
+        text :'Notification|Succès [success]'
+    },
+    warning : {
+        type :'color',
+        text :'Notification|Alerte [warning]'
+    },
+    error : {
+        type :'color',
+        text :'Notification|Erreur [error]'
+    },
+};
+export const getThemeData = (value)=>{
+    const theme = {name:value.name,colors:{}};
+    const validValue = {};
+    Object.map(fields,(f,i)=>{
+        if(!f) return;
+        if(f.type =='color'){
+            const fText = i+"Color";
+            theme.colors[i] = value[i] || value[fText];
+        } else {
+            theme[i] = value[i];
+        }
+        validValue[i] = value[i];
+    });
+    return {theme,value:validValue};
+}

package/src/auth/avatarProps/index.js

@@ -0,0 +1,22 @@
+// 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 {isNativeMobile} from "$platform";
+import defaultSrc from "./defaultAvatar";
+export default {
+    accordion:false,
+    editable : !isNativeMobile(),
+    text : 'Avatar',
+    type : 'image',
+    defaultSrc,
+    size : 100,
+    sortable : false,
+    datagrid : {
+        size : 50,
+    },
+    rounded : true,
+    cropProps : {
+        width : 100,
+        heigh : 100
+    },
+}

package/src/components/Dropdown/index.js

@@ -1075,6 +1075,7 @@ class DropdownComponent extends AppComponent {
                         {...listProps}
                         ref = {this.listRef}
                         responsive = {false}
+                        contentContainerStyle = {[{backgroundColor:theme.colors.surface},listProps.contentContainerStyle]}
                         style = {[listProps.style]}
                         prepareItems = {false}
                         items = {renderingItems} 

package/src/components/HeavyScreen/utils.js

@@ -1,6 +1,7 @@
 import React from "$react";
 import {InteractionManager} from "react-native";
 /**** options, les options lié à la transition */
+export const AFTER_INTERACTIONS_TIMEOUT = 10;
 export const useAfterInteractions =  (options) => {
 	const [areInteractionsComplete, setInteractionsComplete] = React.useState(false)
     if(isNumber(options)){

package/src/components/List/Common.js

@@ -1,7 +1,7 @@
 
 import React from "$react";
 import { prepareItems as customPrepareItems,getBToTopRef } from "./utils";
-import {grid,StylePropTypes} from "$theme";
+import theme,{grid,StylePropTypes} from "$theme";
 import PropTypes from "prop-types";
 import {defaultObj,defaultDecimal,defaultArray,defaultFunc} from "$utils";
 import {isMobileMedia} from "$cplatform/dimensions";
@@ -159,7 +159,7 @@ const CommonListComponent = React.forwardRef((props,ref)=>{
     const restP = numColumns > 1 && isFlatList ? {
         columnWrapperStyle : [styles.columnWrapperStyle,props.columnWrapperStyle]
     } : {};
-    return <View {...containerProps} style={[styles.container,containerProps.style]}>
+    return <View {...containerProps} style={[{backgroundColor:theme.colors.surface},styles.container,containerProps.style]}>
         <Component
             onEndReachedThreshold={0}
             scrollEventThrottle={16}

package/src/components/Menu/Menu.js

@@ -1,6 +1,6 @@
 import React,{BaseComponent as AppComponent} from '$react';
-import View from "$ecomponents/View";
-import ScrollView  from "$ecomponents/ScrollView";
+import View from "$components/View";
+import ScrollView  from "$components/ScrollView";
 import {
   Platform,
   StyleSheet,
@@ -14,11 +14,11 @@ import {
 } from 'react-native';
 import PropTypes from "prop-types";
 import { withTheme,Surface,Portal} from 'react-native-paper';
-//import Surface from "$ecomponents/Surface";
+//import Surface from "$components/Surface";
 import { NativeModules} from 'react-native';
 import {defaultDecimal,extendObj} from "$utils";
 import theme,{StylePropTypes} from "$theme";
-import APP from "$capp/instance";
+import APP from "$app/instance";
 import MenuItem from "./Item";
 
 const RESIZE_PAGE = APP.EVENTS.RESIZE_PAGE;

package/src/components/SimpleSelect/index.js

@@ -361,6 +361,7 @@ const  SimpleSelect = React.forwardRef((props,ref)=>{
                     {...listProps}
                     getItemLayout = {getItemLayout}
                     ref = {listRef}
+                    contentContainerStyle = {[{backgroundColor:theme.colors.surface},listProps.contentContainerStyle]}
                     style = {[listProps.style]}
                     prepareItems = {false}
                     items = {renderingItems}

package/src/media/index.js

@@ -1,7 +1,7 @@
 import {isObj} from "$utils";
-import {notify} from "$ecomponents/Dialog";
+import {notify} from "$components/Dialog";
 import Camera from "./camera";
-import {isMobileNative} from "$cplatform";
+import {isMobileNative} from "$platform";
 import React from "react";
 
 let cameraRef = null;
@@ -16,11 +16,7 @@ export const createCameraRef = ()=>{
     return ref;
 }
 
-const ImagePicker = {
-    MediaTypeOptions : {},
-    mediaTypes : {},
-};
-///import * as ImagePicker from 'expo-image-picker';
+import * as ImagePicker from 'expo-image-picker';
 
 export const MEDIA_TYPES = {
     ALL : ImagePicker.MediaTypeOptions.All,

package/src/navigation/Drawer/ProfilAvatar/index.js

@@ -3,10 +3,10 @@ import i18n from "$i18n"
 import Auth from "$cauth";
 import Menu from "$ecomponents/Menu";
 import React from "$react";
-import Tooltip from "$ecomponents/Tooltip";
+import { screenName } from "$escreens/Auth/Profile";
 import Image from "$ecomponents/Image";
 import { StyleSheet,View} from "react-native";
-import defaultSource from "./defaultAvatar";
+import avatarProps from "$eauth/avatarProps";
 import Button from "$ecomponents/Button";
 import Label from "$ecomponents/Label";
 import Icon from "$ecomponents/Icon";
@@ -32,7 +32,7 @@ const UserProfileAvatarComponent = React.forwardRef(({drawerRef,...props},ref)=>
                 onPress : (a)=>{
                     closeDrawer(()=>{
                         return navigate({
-                            //routeName : screenName,
+                            routeName : screenName,
                             params : {
                                 user : u,
                             }
@@ -48,17 +48,16 @@ const UserProfileAvatarComponent = React.forwardRef(({drawerRef,...props},ref)=>
                 }
             }
         ];
-      let pseudo = defaultStr(u.code,u.pseudo,u.email);
-      let pT = pseudo;
-      if(pseudo.length > 8){
-          pT = pseudo.substring(0,7)+".."
-      }
-      pseudo = <Tooltip title={defaultStr(u.label)+" ["+pseudo+"]"}>{pT}</Tooltip>;
+      let pseudo = defaultStr(u.code,u.pseudo,u.email)
+      const label = defaultStr(u.label,u.name,u.fullName,u.userName)
+      //let pT = pseudo;
+      //pseudo = <Tooltip uppserCase={false} title={defaultStr(u.label)+" ["+pseudo+"]"}>{pT}</Tooltip>;
       return <View ref ={ref}>
             <Menu
              anchor = { (aProps)=>{
                 return <Button
                         normal
+                        upperCase = {false}
                         disableRipple
                         {...aProps}
                         style = {[styles.container]}
@@ -69,7 +68,7 @@ const UserProfileAvatarComponent = React.forwardRef(({drawerRef,...props},ref)=>
                             style = {styles.itemLeft}
                             testID = {"RN_ProfilAvatar_Avatar"}
                             editable
-                            defaultSource ={defaultSource}
+                            defaultSource ={avatarProps.defaultSrc}
                             onChange = {({dataURL})=>{
                                 if(u.avatar === dataURL) {
                                     return;
@@ -97,7 +96,7 @@ const UserProfileAvatarComponent = React.forwardRef(({drawerRef,...props},ref)=>
                     <View style={styles.labelContainer}>
                         <Label splitText style={{color:theme.colors.primaryOnSurface}}>{pseudo}</Label>
                         <Label splitText style={{fontSize:12,color:theme.colors.secondaryOnSurface,marginTop:6}}>
-                            {u.label}
+                            {label}
                         </Label>
                     </View>
                     </Button>
@@ -120,6 +119,7 @@ const styles = StyleSheet.create({
         flexDirection : 'column',
         paddingRight : 5,
         maxWidth : 130,
+        minWidth : 100,
     },
     pseudo : {
         flexDirection : "row",

package/src/screens/Auth/Profile.js

@@ -0,0 +1,97 @@
+import FormDataScreen from "$elayouts/Screen/FormData";
+import {defaultStr,defaultObj,isObjOrArray,isObj} from "$utils";
+import Auth from "$auth";
+import {getScreenProps,navigate} from "$cnavigation";
+import SelectTheme from "$themeSelectorComponent";
+import Preloader from "$epreloader";
+import {SignIn2SignOut} from "$cauth";
+import React from "$react";
+import avatarProps from "$eauth/avatarProps";
+
+export const screenName = "UserProfile";
+
+export default function UserProfileScreen(prs){
+    const props = getScreenProps(prs);
+    const user = defaultObj(props.user,Auth.getLoggedUser());
+    const testID = defaultStr(props.testID,"RN_UserProfile_FormData");
+    const themeRef = React.useRef(defaultObj(user.theme));
+    const hasChangeRef = React.useRef(false);
+    const authProfileFields = typeof SignIn2SignOut.authProfileFields =='function'?SignIn2SignOut.authProfileFields(props) : SignIn2SignOut.authProfileFields;
+    const fields = isObj(authProfileFields)? authProfileFields : {};
+    const formFields = {
+        avatar : {
+            ...avatarProps,
+            ...(isObj(fields.avatar)?fields.avatar:{}),
+            text : undefined,
+            label : undefined,
+            responsive : false,
+            responsiveProps : {
+                style : {
+                    width : '100%',
+                    alignItems : 'center',
+                    justifyContent : 'center',
+                }
+            },
+        },
+    }
+    Object.map(fields,(field,i)=>{
+        if(i !='avatar' && isObj(field)){
+            formFields[i] = field;
+        }
+    })
+    formFields.theme = {
+        type  : 'html',
+        text : 'Theme',
+        onChange : ({value})=>{
+            if(isObj(value) && value.name && value.primary && value.name !== themeRef.current.name){
+                hasChangeRef.current = true;
+                themeRef.current = value;
+            }
+        },
+        onUpsert : ({value})=>{
+            if(value.name === themeRef.current.name){
+                hasChangeRef.current = true;
+                themeRef.current = value;
+            }
+        },
+        render : (p)=>{
+            return <SelectTheme {...p} defaultValue = {themeRef.current.name}/>
+        }
+    }
+    formFields.avatar.onChange = (args)=>{
+        if(args.value === user.avatar) return;
+        hasChangeRef.current = true;
+    }
+    const onSaveProfile = ({data,goBack,...rest})=>{
+        data.theme = themeRef.current;
+        Preloader.open("Modification en cours...");
+        Auth.upsertUser(data,true).then(()=>{
+            if(typeof goBack =='function' && !hasChangeRef.current){
+                return goBack(true);
+            }
+            navigate('Home');
+        }).finally(()=>{
+            setTimeout(()=>{
+                Preloader.close();
+            },1000);
+        });
+    }
+    
+    return <FormDataScreen
+        title = {(user.label?(user.label+" ["+user.code+"]  | "):"")+"Profil : Modifier"}
+        {...props}
+        modal
+        withScrollView
+        fields = {formFields}
+        data = {user}
+        testID = {testID}
+        onSave = {onSaveProfile}
+        subtitle = {false}
+    />
+}
+
+UserProfileScreen.screenName = screenName;
+
+UserProfileScreen.Modal = true;
+
+UserProfileScreen.authRequired = true;

package/src/screens/Auth/SignIn.js

@@ -0,0 +1,29 @@
+
+import {SIGN_IN} from "$cauth/routes"
+import Screen from "$escreen";
+import Login from "$eauth/Login";
+import {getScreenProps} from "$cnavigation";
+import {getTitle} from "./utils";
+
+
+function AuthSignInScreen(_props){
+    const props = getScreenProps(_props);
+    const title = getTitle();
+    return <Screen 
+        title = {title}
+        appBarProps = {{
+            title,backAction:false
+        }}
+        contentContainerStyle = {{justifyContent:'center',alignItems:'center'}}
+    >
+        <Login
+            {...props}
+        />
+    </Screen>
+}
+
+AuthSignInScreen.screenName = SIGN_IN;
+AuthSignInScreen.authRequired = false;
+AuthSignInScreen.modal = true;
+AuthSignInScreen.allowDrawer = false;
+export default AuthSignInScreen;

package/src/screens/Auth/index.js

@@ -1,30 +1,8 @@
+// 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 {SIGN_IN} from "$cauth/routes"
-import Screen from "$escreen";
-import Login from "$eauth/Login";
-import {getScreenProps} from "$cnavigation";
-import {getTitle} from "./utils";
+import AuthSignInScreen from "./SignIn";
+import UserProfileScreen from "./Profile";
 
-
-function AuthSignInScreen(_props){
-    const props = getScreenProps(_props);
-    const title = getTitle();
-    return <Screen 
-        title = {title}
-        appBarProps = {{
-            title,backAction:false
-        }}
-        contentContainerStyle = {{justifyContent:'center',alignItems:'center'}}
-    >
-        <Login
-            {...props}
-        />
-    </Screen>
-}
-
-AuthSignInScreen.screenName = SIGN_IN;
-AuthSignInScreen.authRequired = false;
-AuthSignInScreen.modal = true;
-AuthSignInScreen.allowDrawer = false;
-
-export default [AuthSignInScreen];
+export default [AuthSignInScreen,UserProfileScreen];

package/src/screens/index.js

@@ -1,6 +1,6 @@
 import {defaultBool,defaultArray,defaultVal,isObj,isNonNullString,defaultObj,isArray,defaultStr} from "$utils";
 import {sanitizeName,GROUP_NAMES} from "./utils";
-import mainScreens from "$screens/mainScreens"
+import mainScreens from "$mainScreens"
 import React from "$react";
 import { BackHandler } from "react-native";
 import APP from "$capp";

package/src/screens/mainScreens.js

@@ -1,4 +1,4 @@
 import Auth from "./Auth";
 export default  [
-    Auth,
+    ...Auth,
 ]