@fto-consult/expo-ui 1.4.9 → 1.4.11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fto-consult/expo-ui",
-  "version": "1.4.9",
+  "version": "1.4.11",
   "description": "Bibliothèque de composants UI Expo,react-native",
   "main": "index.js",
   "scripts": {
@@ -61,7 +61,7 @@
     "@expo/html-elements": "^0.2.0",
     "@expo/metro-config": "^0.4.0",
     "@expo/webpack-config": "^0.17.2",
-    "@fto-consult/common": "^1.7.7",
+    "@fto-consult/common": "^1.7.10",
     "@gorhom/portal": "^1.0.14",
     "@react-native-async-storage/async-storage": "~1.17.3",
     "@react-native-community/datetimepicker": "6.2.0",

package/src/auth/Login.js

@@ -18,6 +18,7 @@ import {Provider as DialogProvider} from "$ecomponents/Dialog";
 import ScreenWithoutAuthContainer from "$escreen/ScreenWithoutAuthContainer";
 import {getTitle} from "$escreens/Auth/utils";
 import {isWeb} from "$cplatform";
+import ProviderSelector from "./ProviderSelector";
 
 import getLoginProps from "$getLoginProps";
 const getProps = typeof getLoginProps =='function'? getLoginProps : x=>null;
@@ -97,6 +98,7 @@ export default function LoginComponent(props){
         focusField,
         formName,
         nextButtonRef,
+        ProviderSelector,
         previousButtonRef,
     }));
     React.useEffect(()=>{

package/src/auth/ProviderSelector.js

@@ -0,0 +1,75 @@
+// 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 Button from "$components/Button";
+import Menu from "$components/Menu";
+import theme from "$theme";
+import React from "$react";
+import {isObj,defaultStr,defaultObj} from "$utils";
+import PropTypes from "prop-types";
+import View from "$components/View";
+
+/****le selecteur de provider, pour l'authentification */
+const ProviderSelector = React.forwardRef(({providers,anchorProps,containerProps,anchor,activeProvider,testID,onChange,...props},ref)=>{
+    activeProvider = defaultObj(activeProvider);
+    containerProps = defaultObj(containerProps);
+    anchorProps = defaultObj(anchorProps);
+    testID = defaultStr(testID,"RN_AuthProviderSelectorComponent");
+    const menuItems = [];
+    Object.map(providers,(provider)=>{
+        if(!isObj(provider) || !provider.id) return;
+        provider.icon = activeProvider.id == provider.id ? "check":null;
+        provider.onPress = ()=>{
+            if(activeProvider.id === provider.id) return;
+            activeProvider = provider;
+            if(typeof onChange =='function'){
+                onChange(provider);
+            }
+        }
+        menuItems.push(provider);
+    });
+    const desc = activeProvider.desc || "";
+    const btnLabel = "Se connecter avec "+(activeProvider.id ? ( "["+activeProvider.label+"]") : "");
+    return <View testID={testID+"_Container"} {...containerProps} style={[{maxWidth:'100%'},containerProps.style]}>
+            <Menu
+                ref = {ref}
+                sameWidth
+                {...props}
+                style = {[{maxWidth:'90%'},props.style]}
+                items = {menuItems}
+                testID = {testID}
+                anchor = {typeof anchor =='function'? (p)=>{
+                    return anchor({...p,activeProvider});
+                } : (p)=>{
+                    return <Button upperCase={false} testID={testID+"_Anchor"} 
+                        secondary
+                        mode={"contained"} 
+                        borderRadius={10} 
+                        {...p}
+                        {...anchorProps}
+                        style = {[p.style,theme.styles.mv1,theme.styles.p05,anchorProps.style]}
+                        contentStyle={[
+                            p.contentStyle,{overflow: 'hidden',textOverflow: 'ellipsis'},
+                            anchorProps.contentStyle
+                        ]} 
+                        title = {btnLabel+(desc?(", "+desc):"")}
+                        labelProps = {{splitText:true}}
+                        
+                    >
+                        {btnLabel}
+                    </Button>
+                }}
+            />
+    </View>
+})
+
+ProviderSelector.displayName = "ProviderSelector";
+ProviderSelector.propTypes = {
+    activeProvider : PropTypes.object,
+    providers : PropTypes.oneOfType([
+        PropTypes.arrayOf(PropTypes.object),
+        PropTypes.objectOf(PropTypes.object)
+    ])
+}
+
+export default ProviderSelector;

package/src/components/Avatar/index.js

@@ -6,6 +6,8 @@ import React from "react";
 import Text from "./Text";
 import theme from "$theme";
 import AvatarImage from "./Image";
+import { Pressable } from "react-native";
+import Tooltip from "$components/Tooltip";
 
 const defaultSize = 40;
 
@@ -17,10 +19,11 @@ const defaultSize = 40;
  */
 const AvatarComponent = React.forwardRef((props,ref)=>{
     let Component = undefined;
-    let {image,icon,testID,color,src,useSuffix,suffix,size,children,label,source,text,...rest} = props;
+    let {image,icon,testID,color,title,toolip,src,onPress,containerProps,useSuffix,suffix,size,children,label,source,text,...rest} = props;
     label = defaultVal(label,text,children);
 	if(typeof label =='number') label = label+"";
     rest = defaultObj(rest);
+    containerProps = defaultObj(containerProps);
     size = defaultDecimal(size,defaultSize)
     let cProps = {size};
     if(source || image || src){
@@ -52,14 +55,16 @@ const AvatarComponent = React.forwardRef((props,ref)=>{
         style.backgroundColor = color;
         style.color = Colors.getContrast(color);
     }
-    return <Component
-        {...rest}
-        {...cProps}
-        ref={ref}
-        testID = {defaultStr(testID,"RN_AvatarComponent")}
-        style = {style}
-        size= {size}
-    />
+    const c = <Component
+            {...rest}
+            {...cProps}
+            ref={ref}
+            title = {onPress?null : defaultVal(toolip,title)}
+            testID = {defaultStr(testID,"RN_AvatarComponent")}
+            style = {style}
+            size= {size}
+        />;
+    return onPress ?  <Tooltip title={title} toolip={toolip} Component = {Pressable} testID={testID+"_Container"} {...containerProps} onPress={onPress}>{c}</Tooltip> : c;
 });
 
 AvatarComponent.displayName = "AvatarComponent";

package/src/components/SimpleSelect/index.js

@@ -68,6 +68,7 @@ const  SimpleSelect = React.forwardRef((props,ref)=>{
         return React.getTextContent(content);
     }
     const prevMenuItems = React.usePrevious(menuItems,stableHash);
+    const areItemsEquals = prevMenuItems == menuItems;//JSON.stringify(prevMenuItems) == JSON.stringify(menuItems);
     const prepareItems = React.useCallback(()=>{
         const items = [];
         selectedRef.current = null;
@@ -108,8 +109,8 @@ const  SimpleSelect = React.forwardRef((props,ref)=>{
         setState({...state,value:currentSelectedValue,items});
     },[stableHash(menuItems)])
     React.useEffect(()=>{
-        if(defaultValue == value && menuItems == prevMenuItems) return;
-        if(menuItems != prevMenuItems){
+        if(compare(defaultValue == value) && areItemsEquals) return;
+        if(!areItemsEquals){
             prepareItems();
         } else {
             selectValue(defaultValue);
@@ -133,7 +134,7 @@ const  SimpleSelect = React.forwardRef((props,ref)=>{
     context.getValue = ()=> value;
     
     React.useEffect(()=>{
-        if((value !== undefined || prevValue !== undefined) && compare(value,prevValue)) return;
+        if(compare(value,prevValue)) return;
         if(onChange){
             onChange(defaultObj(selectedRef.current));
         }