@fto-consult/expo-ui 2.4.0 → 2.4.5

package/package.json

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

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)=>{
@@ -62,6 +64,7 @@ const FabGroupComponent = React.forwardRef((props,innerRef)=>{
                 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 +75,7 @@ const FabGroupComponent = React.forwardRef((props,innerRef)=>{
             }); 
         }
         return actions;
-    },[customActions,prepareActions])();
+    },[customActions,prepareActions,open])();
     
     React.useEffect(()=>{
         React.setRef(innerRef,context);
@@ -85,7 +88,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 +138,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";
 
 
 
@@ -181,7 +182,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 +279,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_FabGroupComponent")
   const _onPress = ()=>{
     if(onPress){
       onPress();
@@ -289,8 +291,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,7 +314,7 @@ export const FabItem = function(props){
                  accessibilityComponentType="button"
                  accessibilityRole="button"
                >
-                 <Text style={{ color : labelColor }}>
+                 <Text testID={testID+"_Label"} style={{ color : labelColor }}>
                    {label}
                  </Text>
                </Card>
@@ -347,7 +350,7 @@ export const FabItem = function(props){
              accessibilityRole="button"
              testID={testID}
              visible={open}
-         />
+        />
   </>
 }
 

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;