@fto-consult/expo-ui 2.4.5 → 2.4.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fto-consult/expo-ui",
-  "version": "2.4.5",
+  "version": "2.4.7",
   "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

@@ -8,11 +8,10 @@ import {
 } from 'react-native';
 import View from "$ecomponents/View";
 import {FAB,Text,Card,withTheme} from "react-native-paper";
-import color from 'color';
+import colorFn from 'color';
 import PropTypes from "prop-types";
-import { StylePropTypes } from '$theme';
 import Action from "$ecomponents/Form/Action";
-import { disabledStyle,cursorNotAllowed } from '$theme';
+import theme,{ disabledStyle,StylePropTypes,Colors,cursorNotAllowed } from '$theme';
 import {defaultStr} from "$utils";
 
 
@@ -24,18 +23,17 @@ const FABGroup = ({
   open,
   onPress,
   accessibilityLabel,
-  theme,
   label,
   style,
   screenName,
   fabStyle,
   visible,
-  testID,
   onStateChange,
   color: colorProp,
+  testID,
   ...rest
 }) => {
-  
+  testID = defaultStr(testID,"RN_FabGroupComponent")
   const { current: backdrop } = React.useRef(
     new Animated.Value(0)
   );
@@ -90,11 +88,8 @@ const FABGroup = ({
 
   const toggle = () => onStateChange({ open: !open });
 
-  const { colors } = theme;
+  const colors = theme.colors;
 
-  const labelColor = theme.dark
-    ? colors.text
-    : color(colors.text).fade(theme.ALPHA).rgb().string();
   const backdropOpacity = open
     ? backdrop.interpolate({
         inputRange: [0, 0.5, 1],
@@ -121,9 +116,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,12 +130,10 @@ 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,
-                backgroundColor : theme.colors.surface,
                 ...it,
                 open,
                 scale:scales[i],
@@ -148,12 +142,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'}
@@ -278,10 +273,12 @@ 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 _FabItem = function({children,label,disabled:customDisabled,pointerEvents,open,close,testID:customTestID,labelStyle,accessibilityLabel,icon,backgroundColor,scale,opacity,color,style,small,onPress}){
   const disabled = typeof customDisabled =='boolean'? customDisabled : false;
-  const testID = defaultStr(customTestID,"RN_FabGroupComponent")
+  const testID = defaultStr(customTestID,"RN_FabItemComponent")
+  style = StyleSheet.flatten(style) || {};
+  color = Colors.isValid(color)? color : style.color;
+  backgroundColor = Colors.isValid(backgroundColor)? backgroundColor : style.backgroundColor;
   const _onPress = ()=>{
     if(onPress){
       onPress();
@@ -297,11 +294,12 @@ export const FabItem = function(props){
                  style={
                    [
                      styles.label,
+                     labelStyle,
                      {
                        transform: [{ scale }],
                        opacity,
+                       backgroundColor,
                      },
-                     labelStyle,
                    ] 
                  }
                  onPress={_onPress}
@@ -314,28 +312,28 @@ export const FabItem = function(props){
                  accessibilityComponentType="button"
                  accessibilityRole="button"
                >
-                 <Text testID={testID+"_Label"} style={{ color : labelColor }}>
+                 <Text testID={testID+"_Label"} style={{ color}}>
                    {label}
                  </Text>
                </Card>
              </View>
            ) : null}
            <FAB
-             small={typeof small !== 'undefined' ? small : true}
+             small={typeof small =='boolean' ? small : true}
              icon={icon}
              color={color}
              disabled = {disabled}
              pointerEvents={pointerEvents}
              style={
                [
-                 {
-                   transform: [{ scale}],
-                   opacity,
-                   backgroundColor,
-                 },
                  style,
                  dStyle,
                  disabled? cursorNotAllowed : null,
+                 {
+                  transform: [{ scale}],
+                  opacity,
+                  backgroundColor,
+                },
                ] 
              }
              onPress={_onPress}
@@ -354,10 +352,14 @@ export const FabItem = function(props){
   </>
 }
 
+export const FabItem = theme.withStyles(_FabItem,{displayName:"FabItemComponent",mode:"contained"});
 const styles = StyleSheet.create({
   safeArea: {
     alignItems: 'flex-end',
   },
+  itemsContainer : {
+    marginBottom : 70,
+  },
   container: {
     ...StyleSheet.absoluteFillObject,
     justifyContent: 'flex-end',