@fto-consult/expo-ui 1.0.4

package/src/components/Animations/Animation/utils.js

@@ -0,0 +1,78 @@
+import {defaultStr,isObj} from "$utils";
+import PropTypes from "prop-types";
+import {FadeIn,FadeInRight,FadeInLeft,FadeInUp,FadeInDown,SlideInRight,SlideInLeft,SlideInUp,SlideInDown} from "react-native-reanimated"; 
+import {FadeOut,FadeOutRight,FadeOutLeft,FadeOutUp,FadeOutDown,SlideOutRight,SlideOutLeft,SlideOutUp,SlideOutDown} from "react-native-reanimated";
+
+export const InAnimations = {FadeIn,FadeInRight,FadeInLeft,FadeInUp,FadeInDown,SlideInRight,SlideInLeft,SlideInUp,SlideInDown};
+export const OutAnimations = {FadeOut,FadeOutRight,FadeOutLeft,FadeOutUp,FadeOutDown,SlideOutRight,SlideOutLeft,SlideOutUp,SlideOutDown};
+
+/*** les types d'animations pris en compte */
+export const supportedTypes = {
+    fade : 'fade', slide : 'slide'
+}
+
+/***
+ * @param inOrOut {string : in |out}, spécifie si c'est une animation entrante ou non
+ * @param type {string}, le type de l'animation exemple : fade | slide
+ * @param position {string}, la position de l'animation ('','up','left','right','down')
+ *      lorque la position n'est pas définie, les seules animations supportées sont fadeIn et FadeOut
+ */
+export function getInOrOutAnimation (inOrOut,type,position){
+    inOrOut = defaultStr(inOrOut,'in').toLowerCase();
+    if(inOrOut !== 'in' && inOrOut !=='out'){
+        inOrOut = 'in';
+    }
+    const isIn = inOrOut == 'in'? true : false;
+    type = defaultStr(type,'fade').trim().toLowerCase();
+    if(!supportedTypes[type]){
+        type = supportedTypes.fade;
+    }
+    let animationName = type.ucFirst()+inOrOut.ucFirst();
+    position = defaultStr(position).trim().toLowerCase();
+    if(position){
+        const a = animationName+position.ucFirst();
+        if(isIn){
+            return InAnimations[a] || undefined;
+        }
+        return OutAnimations[a] || undefined;
+    } 
+    return isIn ? FadeIn : FadeOut;
+}
+
+/*** retourne un composant react-native-animated en fonction du type passé en paramètre
+ * 
+ */
+export const getInAnimation = (type,position)=>{
+    return getInOrOutAnimation('in',type,position);
+}
+
+export const getOutAnimation = (type,position)=>{
+    return getInOrOutAnimation('out',type,position);
+}
+
+/**** retourne un objet constitué des animations à utiliser en entrant et en sortant
+ * @param type {string} le type de l'animation
+ * @param position {string} la position de l'animation
+ */
+export const getAnimations = (type,position) =>{
+    return {
+        entering : getInAnimation(type,position),
+        exiting : getOutAnimation(type,position),
+    }
+}
+
+export const animationTypePropTypes = PropTypes.oneOf([
+    'none','slide', 'fade'
+]);
+
+export const animationPositionPropTypes = PropTypes.oneOf([
+    "","up","right","left","down",
+]);
+
+
+export const animationsPropTypes = {
+    animationType : animationTypePropTypes,
+    animationPosition : animationPositionPropTypes,
+    animationDuration : PropTypes.number,
+    animationDelay : PropTypes.number,
+}

package/src/components/Animations/OpacityAnimation/index.js

@@ -0,0 +1,53 @@
+import React from "$react";
+import { Animated} from "react-native";
+import PropTypes from "prop-types";
+import {translateByAppearFrom,inputRangeByAppearFrom,animationType,outputRangeByAppearFrom,initialPositionByAppearFrom} from "./utils";
+
+const OpacityAnimationComponent = React.forwardRef(({ delay,children,style, animationPosition,animationDuration,enteringCallback,exitingCallback,...viewProps},ref) => {
+  if(!animationPosition || !initialPositionByAppearFrom[animationPosition]){
+    animationPosition = 'up';
+  }
+  const [animatedValue] = React.useState(new Animated.Value(initialPositionByAppearFrom[animationPosition]));
+  const animate = () => {
+    Animated.timing(animatedValue, {
+      toValue: 0,
+      duration: animationDuration,
+      useNativeDriver: true,
+    }).start((args)=>{
+      if(enteringCallback){
+        enteringCallback(args);
+      }
+    });
+  };
+  React.useEffect(() => {
+    const timeout = setTimeout(animate, delay);
+    return () => {
+      clearTimeout(timeout);
+      animate();
+    };
+  }, []);
+
+  const inputRange = inputRangeByAppearFrom[animationPosition];
+  const outputRange = outputRangeByAppearFrom[animationPosition];
+  const opacity = animatedValue.interpolate({
+    inputRange,
+    outputRange,
+  });
+  const transform = [{ [translateByAppearFrom[animationPosition]]: animatedValue }];
+
+  return (
+    <Animated.View ref={ref} {...viewProps} style={[style,{ opacity, transform }]}>
+      {children}
+    </Animated.View>
+  );
+});
+
+OpacityAnimationComponent.propTypes = {
+  delay: PropTypes.number,
+  enteringCallback : PropTypes.func,
+  animationPosition: PropTypes.oneOf([
+    'left','down',"right","up"
+  ]),
+  animationDuration: PropTypes.number
+}
+export default OpacityAnimationComponent;

package/src/components/Animations/OpacityAnimation/utils.js

@@ -0,0 +1,38 @@
+
+const INITIAL_POSITION_POSITIVE = 20;
+const INITIAL_POSITION_NEGATIVE = -INITIAL_POSITION_POSITIVE;
+
+const initialPositionByAppearFrom = {
+  ["left"]: INITIAL_POSITION_NEGATIVE,
+  ["up"]: INITIAL_POSITION_NEGATIVE,
+  ["right"]: INITIAL_POSITION_POSITIVE,
+  ["down"]: INITIAL_POSITION_POSITIVE,
+};
+
+const inputRangeByAppearFrom = {
+  ["left"]: [INITIAL_POSITION_NEGATIVE, 0],
+  ["up"]: [INITIAL_POSITION_NEGATIVE, 0],
+  ["right"]: [0, INITIAL_POSITION_POSITIVE],
+  ["down"]: [0, INITIAL_POSITION_POSITIVE],
+};
+
+const outputRangeByAppearFrom = {
+  ["left"]: [0, 1],
+  ["up"]: [0, 1],
+  ["right"]: [1, 0],
+  ["down"]: [1, 0],
+};
+
+const translateByAppearFrom = {
+  ["left"]: "translateX",
+  ["up"]: "translateY",
+  ["right"]: "translateX",
+  ["down"]: "translateY",
+};
+
+export {
+  inputRangeByAppearFrom,
+  outputRangeByAppearFrom,
+  translateByAppearFrom,
+  initialPositionByAppearFrom,
+};

package/src/components/Animations/index.js

@@ -0,0 +1,6 @@
+
+export * from "./Animation/utils";
+
+export {default} from "./Animation";
+
+export {default as OpacityAnimation} from "./OpacityAnimation";

package/src/components/AppBar/Content.js

@@ -0,0 +1,132 @@
+import React from '$react';
+import {Platform,StyleSheet,TouchableWithoutFeedback,View} from 'react-native';
+import Label from "$ecomponents/Label";
+import theme,{Colors,StyleProp} from "$theme";
+import PropTypes from "prop-types";
+import {defaultObj,defaultStr} from "$utils";
+import {isIos,isAndroid,isWeb} from "$cplatform";
+
+const AppbarContent = React.forwardRef(({
+  color: titleColor,
+  subtitle,
+  subtitleProps,
+  subtitleStyle,
+  onPress,
+  style,
+  titleProps,
+  titleRef,
+  titleStyle,
+  title,
+  testID,
+  containerProps,
+  ...rest
+},ref) => {
+
+  const titleTextColor = titleColor ? titleColor : theme.colors.primaryText;
+  titleProps = defaultObj(titleProps);
+  subtitleProps = defaultObj(subtitleProps);
+  testID = defaultStr(testID,"RN_AppBarContentComponent")
+  subtitle = subtitle === false ? null : subtitle;
+  const subtitleColor = Colors.setAlpha(titleTextColor,0.7);
+
+  return (
+    <TouchableWithoutFeedback testID={testID+"_Container"} {...defaultObj(containerProps)} onPress={onPress} disabled={!onPress}>
+      <View
+        pointerEvents="box-none"
+        style={[styles.container, style]}
+        {...rest}
+        testID = {testID}
+        ref = {ref}
+      >
+        <Label
+          ref={titleRef}
+          testID = {testID+"_Title"}
+          {...titleProps}
+          style={[
+            {
+              color: titleTextColor,
+              ...(isIos()? theme.fonts.regular: theme.fonts.medium),
+            },
+            isWeb() && theme.styles.webFontFamilly,
+            titleProps.style,
+            titleStyle,
+          ]}
+          numberOfLines={1}
+          accessible
+          // @ts-ignore Type '"heading"' is not assignable to type ...
+          accessibilityRole={Platform.OS === 'web' ? 'heading' : 'header'}
+        >
+          {title}
+        </Label>
+        {subtitle ? (
+          <Label
+            testID = {testID+"_Subtitle"}
+            {...subtitleProps}
+            style={[styles.subtitle, { color: subtitleColor }, subtitleProps.style, subtitleStyle]}
+            numberOfLines={1}
+          >
+            {subtitle}
+          </Label>
+        ) : null}
+      </View>
+    </TouchableWithoutFeedback>
+  );
+});
+
+AppbarContent.displayName = 'Appbar.Content';
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    paddingHorizontal: 5,
+    justifyContent : 'center',
+    alignItems : 'flex-start',
+  },
+  title: {
+    fontSize: Platform.OS === 'ios' ? 17 : 20,
+  },
+  subtitle: {
+    fontSize: Platform.OS === 'ios' ? 11 : 14,
+  },
+});
+
+export default AppbarContent;
+const titleType = PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.node,
+    PropTypes.bool,
+])
+
+AppbarContent.propTypes = {
+    /**
+   * Custom StyleProp for the text.
+   */
+  StyleProp: PropTypes.string,
+  /**
+   * Text for the title.
+   */
+  title: titleType,
+  /**
+   * Style for the title.
+   */
+  titleStyle: StyleProp,
+  /**
+   * Reference for the title.
+   */
+  titleRef : PropTypes.any,
+  /**
+   * @deprecated Deprecated in v5.x
+   * Text for the subtitle.
+   */
+  subtitle : titleType,
+  /**
+   * @deprecated Deprecated in v5.x
+   * Style for the subtitle.
+   */
+  subtitleStyle: StyleProp,
+  /**
+   * Function to execute on press.
+   */
+  onPress : PropTypes.func,
+  style : StyleProp
+}

package/src/components/AppBar/index.js

@@ -0,0 +1,164 @@
+import React from "$react"
+import { Appbar} from 'react-native-paper';
+import {defaultObj,defaultVal,defaultStr} from "$utils";
+import APP from "$capp/instance"
+import {isSplitedActions,renderSplitedActions,splitActions,TITLE_FONT_SIZE} from "./utils";
+import theme,{Colors,flattenStyle} from "$theme";
+import {StyleSheet} from "react-native";
+import {goBack as navGoBack} from "$enavigation/utils";
+import PropTypes from "prop-types";
+import { Dimensions,TouchableWithoutFeedback} from "react-native";
+import { useNavigation,useRoute,useScreenOptions } from "$enavigation/utils";
+import Content from "./Content";
+import Icon from "$ecomponents/Icon";
+import {Elevations} from "$ecomponents/Surface";
+
+export * from "./utils";
+
+export const GO_BACK_EVENT = "STACK_NAVIGATOR_GO_BACK";
+/*** usage 
+ *      @param title {string|Element|null|false} si l'on passe en paramètre la valeur nulle ou false du titre, alors le titre sera ignoré, sinon, le titre 
+ *      sera soit l'une des valeur passée en paramètre, soit l'une des valeurs prises depuis les options du Screen composant, soit le nom de l'application
+ *      @param backAction {Apppbar.BackAction}, Element réact rendant l'action BackButton, voir @https://callstack.github.io/react-native-paper/appbar-action.html
+ *      @param backActionProps {Object} les props à passer au BackAction, voir : https://callstack.github.io/react-native-paper/appbar-action.html
+ *      @param contentProps : les props à paser au content de l'appBar
+*       @param titleProps {object}, les props du titre
+        @param subtitleProps {object}, les props du subtitle
+        @param actionProps : les props à passer aux différentes actions de l'appBar,
+*       @param menuProps : les props à passer au menu au cas où les actions de l'appBar son segmentés avec certaines qui sont découpées dans un menu more 
+
+ */
+const isNullOrE = x => x === null || x === false;
+
+const AppBarComponent = React.forwardRef((props,ref)=> {
+    let { bindResizeEvent,elevation,isMainDrawer,
+      drawerId,handleDrawerStateEvent,drawerMinimized,isStackNavigation,onMount,
+      onUnmount,drawerType,options,allowDrawer,back,menuProps,appBarType, 
+      drawerRef,beforeGoBack,title,subtitle,titleProps,backAction,backActionProps,
+      subtitleProps,testID,
+      onBackActionPress : customOnBackActionPress,actions,backActionRef,route,
+      ...appBarProps} = props;
+    const customOptions = options;
+    route = defaultObj(route,useRoute());
+    options = defaultObj(options,useScreenOptions());
+    const navigation = useNavigation();
+    const isDark = theme.isDark();
+    const primaryText = isDark? theme.colors.surfaceText : theme.colors.primaryText,
+    backgroundColor = isDark? theme.colors.surface : theme.colors.primary;
+    const anchorStyle = {color:primaryText};
+    const params = defaultObj(route.params);
+    appBarProps = Object.assign({},appBarProps);
+    const getCallAgs = ()=>{
+      options = defaultObj(options,useScreenOptions());
+      return {navigation,
+          canGoBack:typeof navigation.canGoBack=='function'?navigation.canGoBack:x=>false,
+          back : options.back,
+          route,params,
+          props,
+          isAppBar : true,
+          options:defaultObj(customOptions,useScreenOptions),
+          route,routeName:route.name,
+          beforeGoBack : defaultFunc(beforeGoBack,x=>true)
+      };
+    }
+    const goBack  = (force)=>{
+      return navGoBack({...appBarProps,goBack:undefined,...getCallAgs(),force});
+    }
+    title = defaultVal(title,params.title,APP.getName());
+    backActionProps = Object.assign({},backActionProps);
+    
+    let BackActionComponent  = backAction === false ? null : React.isComponent(backAction)? backAction : back ? Appbar.BackAction : Icon ;
+    backActionProps.color = backActionProps.color && Colors.isValid(backActionProps.color)? backActionProps.color : anchorStyle.color;
+    
+    let {onPress} = backActionProps;
+    const onBackActionPress =  (e,source)=>{
+        const args = {...React.getOnPressArgs(e),...getCallAgs(),goBack};
+        if(typeof onPress =="function" && onPress(args) === false){
+            return;
+        } 
+        if(typeof customOnBackActionPress =='function' && customOnBackActionPress(args) === false) return;
+        goBack();
+    }
+    backAction =  React.isValidElement(backAction)? backAction : null;
+    if(!backAction && BackActionComponent){
+      backAction = <BackActionComponent back={options.back} ref={backActionRef} {...backActionProps} onPress={onBackActionPress} />
+    } else if(backAction){
+        backAction = <TouchableWithoutFeedback
+          {...backActionProps}
+          ref = {backActionRef}
+          onPress={onBackActionPress}
+          children = {backAction}
+        /> 
+    }
+    const [context] = React.useState({});
+    actions = typeof actions =='function'? actions(getCallAgs()) : actions;
+    const dimensions = Dimensions.get("window");
+    const [layout,setLayout] = React.useStateIfMounted({
+       width : dimensions.width,
+       height : dimensions.height,
+    })
+    context.forceUpdate = ()=>{
+      return setLayout({...Dimensions.get("window")});
+    }
+    const splitedActions = isSplitedActions(actions)? actions:  splitActions({...appBarProps,windowWidth:layout.width,canGoBack:back || options.back?true:false,isAppBarAction:true,onBackActionPress,goBack,route,navigation,actions});
+    const onPageResize = bindResizeEvent !== false ? (e)=>{
+          if(!e || !e.nativeEvent || !e.nativeEvent.layout) return null;
+          const {width,height} = e.nativeEvent.layout;
+          if(Math.abs(layout.width-width)<50) return;
+          setLayout({width,height});
+    } : undefined;
+  
+    elevation = typeof elevation === 'number'? elevation : undefined;
+    const elevStyle = elevation && Elevations[elevation];
+    titleProps = defaultObj(titleProps);
+    React.setRef(ref,context);
+    testID = defaultStr(testID,"RN_AppBarComponent")
+    return (
+      <Appbar.Header elevation={elevation} {...appBarProps}  testID={testID} style={[styles.header,{backgroundColor},elevStyle,appBarProps.style]} onLayout={onPageResize}>
+        {backAction}
+        <Content {...defaultObj(appBarProps.contentProps)} 
+            title={title}
+            titleProps = {{...titleProps,style:[styles.title,{color:primaryText},titleProps.style]}}
+            subtitle = {defaultVal(subtitle,params.subtitle,options.subtitle)}
+            subtitleProps = {subtitleProps}
+        />
+        {renderSplitedActions(splitedActions,{
+           ...defaultObj(menuProps,appBarProps.menuProps),
+           anchorProps : {
+            style : anchorStyle,
+            color : anchorStyle.color,
+           }
+        })}
+      </Appbar.Header>
+    );
+});
+
+AppBarComponent.displayName = "AppBarComponent";
+
+export default AppBarComponent;
+
+const styles = StyleSheet.create({
+  title : {
+    fontSize : TITLE_FONT_SIZE,
+    fontWeight : 'bold'
+  },
+  header : {
+    paddingHorizontal : 5,
+    paddingRight : 10,
+  }
+})
+
+AppBarComponent.GO_BACK_EVENT = GO_BACK_EVENT;
+
+AppBarComponent.propTypes = {
+  ...defaultObj(Appbar.propTypes),
+  title : PropTypes.string,
+  subtitle : PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.bool,
+    PropTypes.node,
+  ]),
+  backActionProps : PropTypes.oneOfType([
+    PropTypes.object,
+  ]),
+}

package/src/components/AppBar/utils.js

@@ -0,0 +1,204 @@
+import {isPlainObj,defaultFunc,defaultStr,isObjOrArray,isObj,defaultObj} from "$utils";
+import {getWindowSizes,isMobileOrTabletMedia,isMobileMedia} from "$cdimensions";
+import { StyleSheet } from "react-native";
+import Button from "$ecomponents/Button";
+import React from "$react";
+import theme from "$theme"
+import Action from "$ecomponents/Form/Action";
+import Menu from "$ecomponents/Menu";
+import Icon,{ MORE_ICON } from "$ecomponents/Icon";
+
+export const ACTION_ICON_SIZE = 30;
+
+export const TITLE_FONT_SIZE = 16;
+
+export const getMaxActions = (windowWidth) => {
+    let iWidth = typeof windowWidth =='number' && windowWidth > 200 ? windowWidth : getWindowSizes().width;
+    return iWidth >= 3000 ? 8 : iWidth >= 2500? 7 : iWidth >= 2000 ? 6 : iWidth >= 1600 ? 5 : iWidth >= 1300 ? 4 : iWidth >= 800 ? 2 : iWidth >= 600 ? 1 : 0
+}
+
+export const isSplitedActions = (actions)=> isObj(actions) && Array.isArray(actions.actions) && Array.isArray(actions.menus);
+
+const renderAction = ({action,isAlert,actionProps,opts,isAppBarAction,isAppBarActionStyle,key,ActionComponent,isMobile}) => {
+    let {Component,isFormAction,...rest} = action;
+    actionProps = defaultObj(actionProps);
+    rest = Object.assign({},rest);
+    rest.accessibilityLabel = defaultStr(rest.accessibilityLabel,rest.title,rest.text,rest.label,rest.children);
+    const color = theme.colors.primaryText;
+    rest.style = {...defaultObj(StyleSheet.flatten(actionProps.style)),elevation:0,...defaultObj(StyleSheet.flatten(rest.style))};
+    if(isAppBarActionStyle !== false && (isAppBarAction || opts.isAppBarAction)){
+        rest.color = defaultVal(color);
+        rest.style.color = defaultVal(rest.style.color,color)
+    }
+    if(isAppBarAction && isMobile){
+        rest.tooltip = defaultVal(rest.title,rest.label,rest.text);
+        delete rest.title;
+        delete rest.label;
+        delete rest.text;
+        ActionComponent = Icon;
+    } else {
+        ActionComponent = Component || ActionComponent;
+        if(!isAlert && rest.style.marginRight === undefined){
+            rest.style.marginRight = 10;
+        }
+        if(opts.isFullScreenDialog ===false){
+            rest.mode = rest.mode !== undefined ? rest.mode : actionProps.mode !==undefined ? actionProps.mode : 'contained';
+        }
+        rest.children = defaultVal(rest.children,rest.label,rest.text,rest.accessibilityLabel);
+    }
+    if(isFormAction){
+        actionProps.componentProps = defaultObj(actionProps.componentProps)
+        actionProps.componentProps.Component = ActionComponent;
+        ActionComponent = Action;
+    }
+    key = key || action.key;
+    return <ActionComponent {...actionProps} isAppBarAction={isAppBarAction} key = {key} {...rest}/>
+}
+
+/*** cette fonction a pour but de prendre les actions qui irons sur la barre de navigation
+ *  puis les subdivisenst en fonction de la taille, en une parties des actions directement visible dans le resultat actions
+ *  et une autre partie qui sera rendu visible par un menu, accessible via un menu moreVert
+ *  ///alwaysSplitOnMobile : PropoTypes.bool
+ * @param alwaysSplitOnMobile {boolean}, si les actions serton toujours éclatées en un menu d'action en environnement mobile, quel qu'en soit le nombre d'actions trouvées
+ * 
+ */
+export const splitActions = (args)=>{
+    let {actions,actionProps,alwaysSplitOnMobile,actionMutator,isAlert,onAlertRequestClose,maxActions,isAppBarActionStyle,cancelButton,...opts} = defaultObj(args)
+    if(isSplitedActions(actions)) {
+        return actions;
+    }
+    if(!isObjOrArray(actions)){
+        return {actions:[],menus:[]};
+    }
+    actionMutator = defaultFunc(actionMutator,({action,actions})=> action);
+    if(isAlert){
+        onAlertRequestClose = defaultFunc(onAlertRequestClose);
+    }
+    opts = defaultObj(opts);
+    const isMobile = isMobileOrTabletMedia();
+    const isAppBarAction = opts.isAppBarAction && isMobile ? true : false;
+    const ActionComponent = isAppBarAction ? Icon : Button;
+    let menus = []
+    let _actions = [];
+    let countActions = 0;
+    if(maxActions !== 0 && typeof maxActions =='number'){
+        maxActions = maxActions > 0 ? Math.trunc(maxActions): getMaxActions(opts.windowWidth);
+    } else if(maxActions !=0){
+        maxActions = getMaxActions(opts.windowWidth);
+    } 
+    for(let i in actions){
+        let act = actions[i];
+        let cEl = null;
+        if(!React.isValidElement(act)&& isPlainObj(act)){
+            let {label,perm,text,...action} = act;
+            if(typeof perm =='function' && perm(args) === false){
+                continue;
+            }
+            action = {...defaultObj(action)};
+            if(isAppBarAction && !action.icon) {
+                console.log("not icon found for appbar action ",action," you must specity icon for this action");
+                continue;
+            }
+            action.key = defaultVal(action.key,i)
+            action.text = defaultVal(text,label)
+            action.isAlert = isAlert;
+            const _action = actionMutator({action,key:action.key,actions});
+            if(isObj(_action)){
+                if(!_action.divider && !_action.text && !_action.label && !_action.title && !_action.icon && !_action.Component) continue;
+                const {onPress} = _action;
+                _action.onPress = (args)=>{
+                    args = {...opts,...React.getOnPressArgs(args),isAlert};
+                    if(isAlert){
+                        args.closeAlert = args.closeDialog = onAlertRequestClose;
+                    }
+                    if(onPress){
+                        return onPress(args);
+                    }
+                    return false;
+                }
+                cEl = _action;
+                countActions++;
+            }
+        } 
+        if(cEl){    
+            if(countActions >= maxActions+1) countActions = maxActions+1;
+            if((countActions <= maxActions && maxActions >1)){
+                _actions.push(renderAction({actionProps,isAlert,isAppBarAction,isAppBarActionStyle,opts,action:cEl,isMenuItem:false,isMobile,ActionComponent}));  
+            } else {
+                menus.push({...cEl,isMenuItem:true});
+            }
+        }
+    }
+    if(isPlainObj(cancelButton) && !React.isValidElement(cancelButton)){
+        let {label,perm,text,...action} = cancelButton;
+        let canAddCancelBtn = typeof perm =='function' ? perm(args)  : true;
+        if(canAddCancelBtn && (text||label)){
+            action = {...defaultObj(action)};
+            action.label = defaultVal(label,text)
+            action.key = defaultStr(action.key,'cancel-btn-action');
+            action.isAction = false;
+            action.isAlert = isAlert;
+            action = actionMutator({action,isAlert,isCancelButton:true,key:action.key});
+            if(isObj(action)){
+                const {onPress} = action;
+                action.onPress = (args)=>{
+                    args = {...opts,...React.getOnPressArgs(args),isAlert};
+                    if(isAlert){
+                        args.closeAlert = args.closeDialog = onAlertRequestClose;
+                    }
+                    if(onPress){
+                        return onPress(args);
+                    }
+                    return false;
+                }
+                if(menus.length && countActions > 1){
+                    menus.push({...action,isMenuItem:true});
+                } else {
+                    _actions.push(<Button testID={'RN_AppBarCancelButton'} {...action} key={action.key}/>)
+                }
+            }
+        }
+    }
+    alwaysSplitOnMobile = isMobileMedia()? alwaysSplitOnMobile : false;
+    if(menus.length === 1 && (alwaysSplitOnMobile !== true)){
+        menus[0].isMenuItem = false;
+        _actions.push(renderAction({actionProps,isAlert,action:menus[0],isAppBarAction,isAppBarActionStyle,opts,isMobile,itemsLength:1,key:"menu-action-"+menus[0].key,ActionComponent}));
+        menus = [];
+    }
+    
+    return {
+        actions : _actions,
+        menus
+    };
+}
+
+export const renderSplitedActions = (splitedActions,menuProps)=>{
+    menuProps = defaultObj(menuProps);
+    const {withBottomSheet,BottomSheetComponent,...rest} = menuProps;
+    const MenuComponent = withBottomSheet && React.isComponent(BottomSheetComponent) ? BottomSheetComponent : Menu;
+    const rest2 = {},anchorProps = {
+        ...defaultObj(menuProps.anchorProps),
+        icon : MORE_ICON,
+    };
+    if(withBottomSheet){
+        rest2.anchor = (props)=>{
+            return <Icon
+                {...anchorProps}
+                {...props}
+            />
+        }
+    }
+    return isSplitedActions(splitedActions) && (splitedActions.actions.length || splitedActions.menus.length) ? <>
+        {splitedActions.actions}
+        {splitedActions.menus.length ?
+            <MenuComponent
+                testID = {"RN_AppBarMenuAnchor"}
+                {...defaultObj(rest)}
+                {...rest2}
+                anchorProps = {anchorProps}
+                items = {splitedActions.menus}
+            />
+        : null}
+    </> : null;
+}
+