@fto-consult/expo-ui 2.4.5 → 2.4.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fto-consult/expo-ui",
-  "version": "2.4.5",
+  "version": "2.4.6",
   "description": "Bibliothèque de composants UI Expo,react-native",
   "main": "index.js",
   "scripts": {

package/src/components/Fab/Fab.js

@@ -19,7 +19,6 @@ const FabComponent = React.forwardRef((props,ref)=>{
         color = theme.colors.secondaryText;
     }
     return  <FAB
-        //small
         testID='RN_FabComponent'
         {...rest}
         color = {color}

package/src/components/Fab/Group.js

@@ -61,7 +61,6 @@ const FabGroupComponent = React.forwardRef((props,innerRef)=>{
                 act.label = defaultStr(act.label,act.text);
                 const a = actionMutator ? actionMutator ({action:act,key:i,isFab:true,fab:true}) : act;
                 if(!isObj(a) || !isNonNullString(a.label)) return null;
-                a.small = typeof a.small =='boolean'? a.small : false;
                 const {perm,isAllowed,primary,secondary,...restItem} = a;
                 if(typeof isAllowed =='function' && isAllowed() === false) return null;
                 if(isNonNullString(perm) && !Auth.isAllowedFromStr(perm)) return false;

package/src/components/Fab/GroupComponent.js

@@ -30,12 +30,12 @@ const FABGroup = ({
   screenName,
   fabStyle,
   visible,
-  testID,
   onStateChange,
   color: colorProp,
+  testID,
   ...rest
 }) => {
-  
+  testID = defaultStr(testID,"RN_FabGroupComponent")
   const { current: backdrop } = React.useRef(
     new Animated.Value(0)
   );
@@ -121,9 +121,10 @@ const FABGroup = ({
   const Item = isFormAction ? Action : FabItem;
   const itemComponentProps = isFormAction ? {Component : FabItem} : {};
   return (
-    <View pointerEvents="box-none" style={[styles.container, style]}>
-      <TouchableWithoutFeedback onPress={close}>
+    <View testID={testID+"_Container"} pointerEvents="box-none" style={[styles.container, style]}>
+      <TouchableWithoutFeedback testID={testID+"_TouchableOpacity"} onPress={close}>
         <Animated.View
+          testID={testID+"_AnimatedView"}
           pointerEvents={open ? 'auto' : 'none'}
           style={[
             styles.backdrop,
@@ -134,8 +135,8 @@ const FABGroup = ({
           ]}
         />
       </TouchableWithoutFeedback>
-      <SafeAreaView pointerEvents="box-none" style={styles.safeArea}>
-        <View pointerEvents={open ? 'box-none' : 'none'}>
+      <SafeAreaView testID={testID+"_SafeAreaView"} pointerEvents="box-none" style={styles.safeArea}>
+        <View testID={testID+"_ItemsContainer"} style={[styles.itemsContainer]} pointerEvents={open ? 'box-none' : 'none'}>
           {actions.map((it, i) => {
              const itemProps = {
                 labelColor : it.labelTextColor ??  it.labelColor ?? labelColor,
@@ -148,12 +149,13 @@ const FABGroup = ({
              }
              return (
               <View
+                testID={testID+"_Item_"+i}
                 key={i} // eslint-disable-line react/no-array-index-key
                 style={[
                   styles.item,
                   {
                     marginHorizontal:
-                      typeof it.small === 'undefined' || it.small ? 24 : 16,
+                      typeof it.small || it.small ? 24 : 16,
                   },
                 ]}
                 pointerEvents={open ? 'box-none' : 'none'}
@@ -281,7 +283,7 @@ FABGroup.propTypes = {
 export const FabItem = function(props){
   const {children,label,disabled:customDisabled,pointerEvents,open,close,testID:customTestID,labelStyle,labelColor,accessibilityLabel,icon,backgroundColor,scale,opacity,color,style,small,onPress,...rest} = props;
   const disabled = typeof customDisabled =='boolean'? customDisabled : false;
-  const testID = defaultStr(customTestID,"RN_FabGroupComponent")
+  const testID = defaultStr(customTestID,"RN_FabItemComponent")
   const _onPress = ()=>{
     if(onPress){
       onPress();
@@ -321,7 +323,7 @@ export const FabItem = function(props){
              </View>
            ) : null}
            <FAB
-             small={typeof small !== 'undefined' ? small : true}
+             small={typeof small =='boolean' ? small : true}
              icon={icon}
              color={color}
              disabled = {disabled}
@@ -358,6 +360,9 @@ const styles = StyleSheet.create({
   safeArea: {
     alignItems: 'flex-end',
   },
+  itemsContainer : {
+    marginBottom : 70,
+  },
   container: {
     ...StyleSheet.absoluteFillObject,
     justifyContent: 'flex-end',