@fto-consult/expo-ui 2.3.5 → 2.4.5

package/package.json

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

package/src/components/Dialog/Dialog.js

@@ -20,6 +20,7 @@ import {ACTION_ICON_SIZE} from "$ecomponents/AppBar";
 import DialogFooter from "./DialogFooter";
 import { Dimensions } from "react-native";
 import Surface from "$ecomponents/Surface";
+import stableHash from "stable-hash";
 
 export const FOOTER_HEIGHT = 50;
 export const HEADER_HEIGHT = 50;
@@ -307,14 +308,14 @@ DialogComponent.propTypes= {
 }
 
 
-export const DialogControlledComponent = React.forwardRef((props,ref)=>{
-    const [visible,setVisible] = React.useStateIfMounted(defaultBool(props.visible,false));
+export const DialogControlledComponent = React.forwardRef(({visible:dVisible,...props},ref)=>{
+    const [visible,setVisible] = React.useStateIfMounted(defaultBool(dVisible,false));
     const {onDismiss,onClose,onVisibilityChanged,...rest} = props;
     React.useEffect(()=>{
-        if(typeof props.visible =='boolean' && props.visible !== visible){
-            setVisible(props.visible);
+        if(typeof dVisible =='boolean' && dVisible !== visible){
+            setVisible(dVisible);
         }
-    },[props])
+    },[dVisible])
     const close = x=> setVisible(false);
     const open = x => setVisible(true);
     const isOpen=x=>visible,isClosed = x=>!visible;

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/components/Filter/index.js

@@ -88,6 +88,12 @@ export default class Filter extends AppComponent {
     Object.defineProperties(this,{
       fireFilterSearch : {
          value : this.filterValidationTimeout ? debounce(this.fireValueChanged.bind(this),this.filterValidationTimeout) : this.fireValueChanged.bind(this),
+      },
+      isInitializedRef : {
+        value : {current:false}
+      },
+      previousRef : {
+        value : {current : null}
       }
     })
     extendObj(this.state,{
@@ -134,7 +140,7 @@ export default class Filter extends AppComponent {
      if(JSON.stringify(this.state.defaultValue) === JSON.stringify(arg.value)){
         return;
      }
-     this.setState({prevDefaultValue:this.state.defaultValue,defaultValue:arg.value},()=>{
+     this.setState({defaultValue:arg.value},()=>{
        this.callOnValidate(arg);
        if(!isNumber(this.filterValidationTimeout)){
           this.filterValidationTimeout = 0;
@@ -178,7 +184,7 @@ export default class Filter extends AppComponent {
   }
   fireValueChanged (forceRun){
       if(this.willRunManually() && !forceRun) return;
-      let {defaultValue:value,prevDefaultValue,action,ignoreCase,operator} = this.state;
+      let {defaultValue:value,action,ignoreCase,operator} = this.state;
       let force = forceRun ===true ? true : false;
       if(!isObjOrArray(value) && (isNullOrEmpty(value,true) || value ==='undefined') ){
           value = undefined;
@@ -189,18 +195,17 @@ export default class Filter extends AppComponent {
       if(action =="$today" || action =='$yesterday'){
          force = true;
       }
-      let prev = JSON.stringify(defaultObj(this.previousObj)),//{value:this.previousValue,operator:this.previousOperator,action:this.previousAction}
-          current = {value,operator,action,ignoreCase};
+      const prev = JSON.stringify(defaultObj(this.previousRef.current)), current = {value,operator,action,ignoreCase};
           let tV = isArray(value) && value.length <= 0 ? undefined : value;
-      let isFilterInitialized = this.props.dynamicRendered || this.isFilterInitialized;
-      if(prev == "{}" && (isNullOrEmpty(tV) || value === 0) && (!isFilterInitialized) && (force !== true))  {
+      this.isInitializedRef.current = this.props.dynamicRendered || this.isInitializedRef.current;
+      if(prev == "{}" && (isNullOrEmpty(tV) || value === 0) && (!this.isInitializedRef.current) && (force !== true))  {
         return this;
       }
       if(prev == JSON.stringify(current) && (force !== true)){
           return this;
       }
-      this.isFilterInitialized = true;
-      this.previousObj = current;
+      this.isInitializedRef.current = true;
+      this.previousRef.current = current;
       if(isFunction(this.props.onChange)){
           let selector = {};
           selector[this.props.field] = action;
@@ -353,7 +358,7 @@ export default class Filter extends AppComponent {
       })
   }
   clearFilter(event){
-    this.setState({defaultValue:undefined,prevDefaultValue:this.state.defaultValue},()=>{
+    this.setState({defaultValue:undefined},()=>{
       this.callOnValidate();
       this.fireValueChanged(true);
       let {onClearFilter,onResetFilter} = this.props;

package/src/components/Form/FormData/DialogProvider.js

@@ -21,6 +21,7 @@ const FormDataDialogProvider = React.forwardRef((props,innerRef)=>{
     const {closeAction,onDismiss} = props;
     const context = {
         open : (props)=>{
+            if(state.visible) return;
             let sData = {};
             if(formRef.current && formRef.current.formDataContext && formRef.current.formDataContext.getData){
                 sData.data = formRef.current.formDataContext.getData();
@@ -28,6 +29,7 @@ const FormDataDialogProvider = React.forwardRef((props,innerRef)=>{
             return setState({...state,...sData,onDismiss:undefined,...defaultObj(props),visible:true})
         },
         close : (props)=>{
+            if(!state.visible) return;
             setState({...state,...defaultObj(props),visible:false});
         },
     };

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;