@fto-consult/expo-ui 2.4.0 → 2.4.6

package/package.json

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

@@ -7,15 +7,16 @@ import {MENU_ICON} from "$ecomponents/Icon";
 import theme,{Colors} from "$theme";
 import Group from "./GroupComponent";
 import Portal from "$ecomponents/Portal";
+import Auth from "$cauth";
 
 const FabGroupComponent = React.forwardRef((props,innerRef)=>{
     let {openedIcon,screenName,display:customDisplay,primary,actionMutator,secondary,onOpen,prepareActions,fabStyle,open:customOpen,onClose,onStateChange:customOnStateChange,closedIcon,color,actions:customActions,children,...customRest} = props;
-
     const [state, setState] = React.useStateIfMounted({ 
         open: typeof customOpen =='boolean'? customOpen : false,
         display : typeof customDisplay ==='boolean'? customDisplay : true,
     });
     const onStateChange = ({ open,...rest}) => {
+        if(state.open == open) return;
         setState({ ...state,open });
         if(customOnStateChange){
             customOnStateChange({open,...rest})
@@ -52,6 +53,7 @@ const FabGroupComponent = React.forwardRef((props,innerRef)=>{
         color = theme.colors.secondaryText;
     }
     const actions = React.useCallback(()=>{
+        if(!open) return []
         const actions =  prepareActions === false && Array.isArray(customActions)? customActions : [];
         if((prepareActions !== false || !actions.length)){
             Object.map(customActions,(act,i)=>{
@@ -59,9 +61,9 @@ 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;
                 if(primary){
                     restItem.style = StyleSheet.flatten([restItem.style,{color:theme.colors.primaryText,backgroundColor:theme.colors.primary}])
                 } else if(secondary){
@@ -72,7 +74,7 @@ const FabGroupComponent = React.forwardRef((props,innerRef)=>{
             }); 
         }
         return actions;
-    },[customActions,prepareActions])();
+    },[customActions,prepareActions,open])();
     
     React.useEffect(()=>{
         React.setRef(innerRef,context);
@@ -85,7 +87,7 @@ const FabGroupComponent = React.forwardRef((props,innerRef)=>{
           {...rest}
           color = {color}
           style = {[rest.style,styles.container]}
-          fabStyle = {[styles.fab,fabStyle,{backgroundColor},display?null: styles.hidden]}
+          fabStyle = {[styles.fab,fabStyle,{backgroundColor},!display && styles.hidden]}
           open={open ?true : false}
           icon={open ? openedIcon : closedIcon}
           actions={actions}
@@ -135,6 +137,12 @@ const styles = StyleSheet.create({
     },
     hidden : {
         display : 'none'
+    },
+    fab : {
+        position: 'absolute',
+        margin: 16,
+        right: 0,
+        bottom: 0,
     }
 })
 

package/src/components/Fab/GroupComponent.js

@@ -13,6 +13,7 @@ import PropTypes from "prop-types";
 import { StylePropTypes } from '$theme';
 import Action from "$ecomponents/Form/Action";
 import { disabledStyle,cursorNotAllowed } from '$theme';
+import {defaultStr} from "$utils";
 
 
 
@@ -29,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)
   );
@@ -120,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,
@@ -133,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,
@@ -147,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'}
@@ -181,7 +184,7 @@ const FABGroup = ({
           accessibilityComponentType="button"
           accessibilityRole="button"
           accessibilityState={{ expanded: open }}
-          style={[styles.fab, fabStyle]}
+          style={StyleSheet.flatten([styles.fab, fabStyle])}
           visible={visible}
           testID={testID}
         />
@@ -278,8 +281,9 @@ FABGroup.propTypes = {
 
 
 export const FabItem = function(props){
-  const {children,label,disabled:customDisabled,pointerEvents,open,close,testID,labelStyle,labelColor,accessibilityLabel,icon,backgroundColor,scale,opacity,color,style,small,onPress,...rest} = 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_FabItemComponent")
   const _onPress = ()=>{
     if(onPress){
       onPress();
@@ -289,8 +293,9 @@ export const FabItem = function(props){
   const dStyle = disabled ? disabledStyle : null;
   return <>
        {label ? (
-         <View style={dStyle} pointerEvents={pointerEvents}>
+         <View testID = {testID+"_LabelContainer"} style={dStyle} pointerEvents={pointerEvents}>
                <Card
+                testID={testID+"_Card"}
                  style={
                    [
                      styles.label,
@@ -311,14 +316,14 @@ export const FabItem = function(props){
                  accessibilityComponentType="button"
                  accessibilityRole="button"
                >
-                 <Text style={{ color : labelColor }}>
+                 <Text testID={testID+"_Label"} style={{ color : labelColor }}>
                    {label}
                  </Text>
                </Card>
              </View>
            ) : null}
            <FAB
-             small={typeof small !== 'undefined' ? small : true}
+             small={typeof small =='boolean' ? small : true}
              icon={icon}
              color={color}
              disabled = {disabled}
@@ -347,7 +352,7 @@ export const FabItem = function(props){
              accessibilityRole="button"
              testID={testID}
              visible={open}
-         />
+        />
   </>
 }
 
@@ -355,6 +360,9 @@ const styles = StyleSheet.create({
   safeArea: {
     alignItems: 'flex-end',
   },
+  itemsContainer : {
+    marginBottom : 70,
+  },
   container: {
     ...StyleSheet.absoluteFillObject,
     justifyContent: 'flex-end',

package/src/layouts/Fab/index.js

@@ -11,7 +11,6 @@ import {sanitizeName} from "$escreens/utils";
 export * from "./utils";
 
 const FABContainer = React.forwardRef((props,ref)=>{
-   return null;
   const {state,actions:customActions,screenName,...rest} = props;
   const sScreenName = sanitizeName(screenName);
   ref = ref || createFabRef(screenName);
@@ -55,6 +54,6 @@ const styles = StyleSheet.create({
   export default FABContainer;
 
   FABContainer.propTypes = {
-     screenName : PropTypes.string.isRequired,
+     screenName : PropTypes.string,
   }
   FABContainer.displayName = "FABContainer";

package/src/layouts/Screen/ScreenWithOrWithoutAuthContainer.js

@@ -83,9 +83,6 @@ export default function MainScreenScreenWithOrWithoutAuthContainer(props) {
   if(authRequired === false){
     withFab = false;
   }
-  if(typeof withFab !=='boolean'){
-    withFab = withDrawer;
-  }
   React.useEffect(() => {
     if((title||subtitle) && navigation && navigation.setOptions){
       const appName = APP.getName().toUpperCase();
@@ -106,7 +103,7 @@ export default function MainScreenScreenWithOrWithoutAuthContainer(props) {
     }
   }, [title,subtitle]);
   const Wrapper =  modal ? Portal : React.Fragment;
-  const fab = withFab !== false ? <Fab 
+  const fab = withFab ? <Fab 
       {...fabProps}
       screenName={screenName}
   />  : null;