@fto-consult/expo-ui 1.0.4

package/src/components/Dialog/dialogs.js

@@ -0,0 +1,70 @@
+import {isFunction,defaultArray,isNonNullString} from "$utils";
+
+const isDialog = dialog => dialog && typeof dialog !='boolean' && dialog.getId && dialog.getId() ? true : false;
+const dialogs = {
+    current : null, //la boîte de dialogue actuelle
+    previous : null, //la boîte de dialogue précédente,
+    all : [], //la liste des Dialogs overts,
+    /*** retourne la dernière boîte de dialogue */
+    get current (){
+        dialogs.all = defaultArray(dialogs.all);
+        if(dialogs.all.length > 0) return dialogs.all[dialogs.all.length-1]
+        return null;
+    },
+    /*** définit la boîte de dialogue active */
+    set current(dialog){
+        return setCurrentDialog.call(APP,dialog)
+    },
+    /*** Démonte la boîte de dialogue passée en paramètre
+     *  @param dialog, si dialog est omi alors c'est la boîte de dialogue active qui est supprimée
+    */
+    unmount :function(dialog){
+        return unmountDialog.call(APP,dialog);
+    },
+    isDialog,
+    isValid : isDialog,
+    isCurrentActive :(dialog)=>{
+        return dialogs.current && dialogs.current.isVisible()? true : false;
+    },
+    /**** si la boîte de dialogue passé en paramètre est active */
+    isActive : (dialog)=>{
+        return isDialog(dialogs.current) && isDialog(dialog) && dialog.getId() === dialogs.current.getId() && dialog.isVisible()? true : false;
+    }
+};
+
+
+export const setCurrentDialog = dialogs.mount = dialogs.setCurrent = (dialog)=>{
+    if(isDialog(dialog) && dialog.isVisible() && dialogs.current !== dialog){
+        let _d = [];
+        dialogs.all = defaultArray(dialogs.all);
+        for(let i in dialogs.all){
+            if(dialogs.all[i] && dialogs.all[i].getId() != dialog.getId() && dialogs.all[i].isVisible()){
+                _d.push(dialogs.all[i]);
+            }
+        }
+        _d.push(dialog);
+        dialogs.all = _d;
+        return true;
+    }
+    return false;
+}
+
+export const unmountDialog = window.unmountDialog = (dialog) =>{
+    let _d = [];
+    dialog = isDialog(dialog) && isFunction(dialog.isVisible) ? dialog : dialogs.current;
+    let hasFound = false;
+    if(dialog){
+        dialogs.all = defaultArray(dialogs.all);
+        for(let i in dialogs.all){
+            if(dialogs.all[i] && dialogs.all[i].getId() == dialog.getId()){
+                hasFound = true;
+            } else if(dialogs.all[i] && dialogs.all[i].isVisible()){
+                _d.push(dialogs.all[i]);
+            }
+        } 
+    }
+    dialogs.all = _d;
+    return hasFound;
+}
+
+export default dialogs;

package/src/components/Dialog/index.js

@@ -0,0 +1,17 @@
+import Dialog from "./Dialog";
+import notify from "$notify";
+import Provider from "./Provider";
+
+export {notify};
+
+export * from "./utils";
+
+export * from "./Dialog";
+
+export {default as Provider} from "./Provider";
+
+Dialog.Provider = Provider;
+
+export * from "./confirm";
+
+export default Dialog;

package/src/components/Dialog/showConfirmOrAlertOrPrompt.js

@@ -0,0 +1,90 @@
+import {isDecimal,isObj,defaultObj,extendObj,isNonNullString,isArray,defaultFunc,defaultStr,defaultVal} from "$utils";
+import {getTheme,flattenStyle} from "$theme";
+import React from "$react";
+import {NotificationManager} from 'react-notifications';
+
+export default function showConfirm (p,cb){
+    let {
+        yes,
+        title,
+        text,
+        defaultValue,
+        message,
+        msg,
+        onCancel,
+        onSuccess,
+        alert,
+        ok,
+        prompt,
+        confirm,
+        no,
+        type,
+        alertType,
+        buttons,
+        ...options
+    } = defaultObj(p);
+    const theme = getTheme();
+    if(isDecimal(text)){
+        text = text+"";
+    }
+    title = defaultStr(title)
+
+    if(isNonNullString(no)){
+        no = {text:no}
+    }
+    if(isNonNullString(yes)){
+        yes = {text:yes}
+    }
+    if(buttons !== false && buttons !== null){
+        if(!isArray(buttons)){
+            buttons = [];
+        }    
+        no = defaultObj(no)
+        if(!alert && no !== false){
+            no.text  = defaultStr(no.text,'Non')
+            /*if(typeof no.onClick !=='function'){
+                no.onClick = defaultFunc(onCancel,cb);
+            }*/
+            no.style = flattenStyle([{color:theme.secondaryText,backgroundColor:theme.secondary},no.style]);
+            buttons.push(no);
+        } else no = null;
+        if(yes !== false){
+            yes = defaultObj(yes,ok)
+            yes.text = defaultStr(yes.text,alert?'OK':'Oui');
+            yes.style = flattenStyle([{color:theme.primaryText,backgroundColor:theme.primary},yes.style]);
+            /*if(typeof yes.onClick !=='function'){
+                yes.onClick = defaultFunc(onSuccess,cb);
+            }*/
+            buttons.push(yes);
+        }
+    } else {
+        buttons = [];
+    }
+    message = defaultVal(message,msg)
+    options = defaultObj(options);
+    if(isObj(yes)){
+        options.okButtonProps = extendObj(true,{},options.okButtonProps,yes);
+        options.okText = defaultVal(options.okText,yes.text,yes.label);
+    }
+    if(isObj(no)){
+        options.cancelButtonProps = extendObj(true,{},options.cancelButtonProps,no);
+        options.cancelText = defaultVal(options.cancelText,no.text,no.label);
+        options.closeIcon = React.isValidElement(no.icon)? no.icon : options.closeIcon;
+    }
+    //options.closeIcon = React.isValidElement(options.closeIcon)? options.closeIcon : <CloseOutlined />
+    options.onOk = defaultFunc(onSuccess,cb);
+    options.onCancel = onCancel;
+    if(alert){
+        options.closable = confirm? false : true;
+        type = "info";
+    }
+    type = defaultStr(alertType,type,"confirm").toLowerCase().trim();
+    const cB = defaultFunc(NotificationManager[type],NotificationManager.confirm);
+    return cB(message,title);
+    return cB({
+        ...options,
+        content : message,
+        title,
+        onCancel,
+    })
+}

package/src/components/Dialog/style.css

@@ -0,0 +1,103 @@
+.ftc-dialog.dialog,
+.ftc-dialog.dialog .dialog-container,
+.ftc-dialog.ftc-dialog-fullscreen .dialog-container > .dialog-content-container{
+    overflow: hidden!important;
+    overflow-y: hidden!important;
+    overflow-x: hidden!important;
+    width: 100%;
+    height: 100%;
+    padding-left: 0px!important;
+    padding-right: 0px!important;
+    margin: 0px!important;
+}
+.ftc-dialog.dialog,
+.ftc-dialog.ftc-dialog-fullscreen .dialog-container{
+    width: 100%!important;
+    height: 100%!important;
+}
+.ftc-dialog.ftc-dialog-modal > .dialog-container {
+    display: flex!important;
+    flex-direction: column!important;
+    justify-content: center!important;
+    align-items: center!important;
+}
+.ftc-dialog.dialog .dialog-container > .dialog-content-container{
+    position: relative!important;
+    background-color: white;
+}
+.ftc-dialog.ftc-dialog-modal .dialog-container > .dialog-content-container {
+    max-width: 600px;
+    max-height: 80%;
+    padding: 0px!important;
+    margin: auto!important;
+    overflow-y: hidden!important;
+    overflow-x: hidden!important;
+    flex-grow:0!important;
+}
+
+.ftc-dialog.ftc-dialog-fullscreen > .dialog-container .dialog-content-container,
+.ftc-dialog.ftc-dialog-fullscreen > .dialog-container{
+    display:  block!important;
+    max-width: 100%!important;
+    max-height: 100%!important;
+}
+.ftc-dialog.ftc-dialog-fullscreen > .dialog-container {
+    padding-top: 56px;
+}
+.ftc-dialog.dialog > .dialog-container .dialog-content-container .dialog-content {
+    overflow: auto;
+    max-height: inherit;
+    max-width: inherit;
+    overflow-y: auto;
+    overflow-x: auto;
+    padding-bottom: 30px;
+}
+.ftc-dialog.dialog > .dialog-container .dialog-content-container .dialog-content > * {
+    padding-bottom: 30px;
+    padding-bottom: 0px;
+    margin-top: 0px;
+    margin-bottom: 0px;
+}
+.ftc-dialog.ftc-dialog-modal > .dialog-container .dialog-content-container .dialog-content > *{
+    margin-top: 0px!important;
+}
+.ftc-dialog.dialog > .dialog-container .dialog-content-container .dialog-content.has-scrollbar > * {
+    padding-bottom: 50px!important;
+    display: block;
+}
+
+.ftc-dialog.ftc-dialog-modal .dialog-container > .dialog-content-container .dialog-header{
+    padding-top: 0;
+    padding-bottom: 0;
+    width: 100%;
+}
+.ftc-dialog.ftc-dialog-modal .dialog-container > .dialog-content-container .dialog-footer {
+    position: absolute!important;
+    right: 0;
+    bottom: 0;
+    top: auto!important;
+    left : auto!important;
+    padding: 0px!important;
+    padding-top: 5px!important;
+    padding-bottom: 5px!important;
+    margin: 0px!important;
+    margin-bottom: 0px!important;
+    background-color:inherit;
+    width: 100%!important;
+}
+
+.ftc-dialog.ftc-dialog-modal .dialog-container > .dialog-content-container .dialog-content .md-grid .md-cell{
+    width: 100%!important;
+    margin-left: auto!important;
+    margin-right: auto!important;
+}
+
+.ftc-dialog.ftc-dialog.ftc-dialog-fullscreen .dialog-container > .dialog-content-container .dialog-content{
+    max-height: 100%!important;
+    max-width: 100%!important;
+}
+
+.ftc-btn.ftc-dialog-action {
+    padding: 5px;
+    border-radius: 1px;
+}

package/src/components/Dialog/utils.js

@@ -0,0 +1,33 @@
+import {defaultObj} from "$utils";
+import {flattenStyle} from "$theme";
+import {Dimensions} from "react-native";
+import {splitActions} from "$ecomponents/AppBar/utils";
+
+const MIN_DIALOG_HEIGHT = 250;
+
+export const MAX_WIDTH = 380;
+
+export const MIN_WIDTH = 300;
+
+export const SCREEN_INDENT = 50;
+
+export const MIN_HEIGHT = 250;
+
+export const renderActions = ({actions,actionProps,maxActions,isFullScreen,fullScreen,...rest})=>{
+    actionProps = defaultObj(actionProps);
+    fullScreen = defaultBool(fullScreen,false);
+    maxActions = maxActions !== undefined ? maxActions : fullScreen ? undefined : 2;
+    const {width:wWidth} = Dimensions.get("window");
+    let windowWidth = undefined;
+    if(!fullScreen){
+        windowWidth = MAX_WIDTH+100;
+        if(windowWidth > wWidth){
+            windowWidth = wWidth - 50;
+        }
+        actionProps.style = {marginLeft:10,...Object.assign({},flattenStyle(actionProps.style))}
+    }
+    if(typeof actions ==='function'){
+        actions = actions({actions,actionProps,maxActions,fullScreen,...defaultObj(rest)})
+    }
+    return splitActions({...defaultObj(rest),windowWidth,isAppBarAction:fullScreen,actionProps,actions,maxActions,stylingAction:fullScreen,isDialogAction:true,isFullScreenDialog:fullScreen});
+}

package/src/components/Divider/index.js

@@ -0,0 +1,44 @@
+import * as React from '$react';
+import { StyleSheet} from 'react-native';
+import View from "$ecomponents/View";
+import theme,{StylePropTypes,DISABLED_OPACITY } from '$theme';
+import PropTypes from "prop-types";
+
+
+const Divider = React.forwardRef(({ inset,disabled, style,...rest },ref) => {
+  return (
+    <View
+      {...rest}
+      ref = {ref}
+      style={[
+        styles.main,
+        {backgroundColor : theme.colors.divider},
+        inset && styles.inset,
+        style,
+        disabled && theme.styles.disabled,
+      ]}
+    />
+  );
+});
+
+const styles = StyleSheet.create({
+  main : {
+    width:'100%',
+    height : StyleSheet.hairlineWidth,
+  },
+  inset: {
+    marginLeft: 72,
+  },
+});
+
+Divider.displayName = "DividerComponent";
+
+Divider.propTypes = {
+    /**
+   *  Whether divider has a left inset.
+   */
+  inset : PropTypes.bool,
+  style : StylePropTypes,
+  disabled : PropTypes.bool,
+}
+export default Divider;

package/src/components/Drawer/DrawerHeader.js

@@ -0,0 +1,70 @@
+import React from "$react";
+import Divider from "$ecomponents/Divider";
+import { StyleSheet } from "react-native";
+import View from "$ecomponents/View";
+import {flattenStyle} from "$theme";
+import {defaultStr} from "$utils";
+
+const DrawerHeader = React.forwardRef(({minimized,testID,withMinimizedIcon,drawerWidth,containerProps,isLeftPosition,divider,dividerProps,toggleButton,children,...rest},ref)=>{
+    rest = Object.assign({},rest);
+    dividerProps = defaultObj(dividerProps);
+    containerProps = defaultObj(containerProps);
+    toggleButton = React.isValidElement(toggleButton)? toggleButton : null;
+    children = React.isValidElement(children)? children : null;
+    if(!children && !toggleButton) return null;
+    if(minimized && !withMinimizedIcon) return null;
+    testID = defaultStr(testID,"RN_DrawerHeaderComponent");
+    return <View testID={testID} {...containerProps} ref = {ref} style = {[styles.drawerHeaderContainer,containerProps.style]}>
+          <View testID={testID+"_Content"} {...rest} 
+              style={flattenStyle([
+                styles.drawerHeaderContent,
+                rest.style,
+                minimized ? styles.drawerHeaderContentMinimized : null,
+                !minimized ? (isLeftPosition?styles.drawerHeaderContainerLeft:styles.drawerHeaderContainerRight) : null,
+                !minimized && !children ? {justifyContent:'flex-end',flexDirection:'row'} : null,
+              ])}
+          >
+          {minimized ? toggleButton : <>
+              {children}
+              {toggleButton}
+          </> }
+      </View>
+      {divider !== false?  <Divider testID={testID+"_Divider"} {...dividerProps} style={flattenStyle([{width:'100%'},minimized?{marginTop:4}:null,dividerProps.style])}/> : null}
+    </View>
+});
+
+DrawerHeader.displayName = "DrawerHeaderComponent";
+
+export default DrawerHeader;
+
+
+const styles = StyleSheet.create({
+    drawerHeaderContainer : {
+        flexDirection : 'column',
+        alignItems : 'center',
+        justifyContent : 'flex-start',
+    },
+    drawerHeaderContent : {
+      margin : 0, 
+      justifyContent : 'space-between',
+      flexDirection : 'row',
+      alignItems : 'center',
+      paddingHorizontal : 10,
+      width : '100%',
+    },
+    drawerHeaderContentMinimized : {
+        textAlign : 'center',
+        alignSelf : 'center',
+        justifyContent : 'center',
+        alignContent : 'center',
+        paddingTop : 10,
+    },
+    drawerHeaderContainerLeft : {
+      flexDirection : 'row',
+      //paddingRight : 20,
+    },  
+    drawerHeaderContainerRight : {
+      flexDirection : 'row-reverse',
+      //paddingLeft : 20,
+    },
+  });

package/src/components/Drawer/DrawerItems/DrawerItem.js

@@ -0,0 +1,88 @@
+import {isNonNullString,defaultStr,uniqid} from "$utils";
+import PropTypes from "prop-types"
+import _DrawerItem from "./_DrawerItem";
+import {navigate} from "$enavigation/utils";
+import { useDrawer } from "../Provider";
+
+import {setActiveRoute} from "$enavigation/utils";
+import { setActiveItem,getOnPressAction,closeDrawer as nCloseDrawer,previousActiveItemRef,activeItemRef} from "./utils";
+import React from "$react";
+
+
+
+/**** wrapper du drawerItem */
+export default function DrawerItem(props){
+    let {navigation,closeOnPress,routeName,routeParams,...rest} = props;
+    const {drawerRef,isItemActive} = useDrawer();
+    const isActive = isItemActive(props);
+    const [active,setActive] = React.useState(isActive);
+    const isMounted = React.useIsMounted();
+    const itemId = React.useState(uniqid("drawer-item-id"));
+    routeName = defaultStr(routeName);
+    const [context] = React.useState({
+        activate : x=> isMounted() && setActive(true),
+        desactivate : x=> isMounted() && setActive(false),
+        isMounted,
+        id:itemId,
+        routeName
+    });
+    if(active){
+        setActiveItem(context);
+    }
+    const closeDrawer = (cb,force)=>{
+        return nCloseDrawer(drawerRef,cb,force);
+    }
+    React.useEffect(()=>{
+        if(isActive !== active){
+            setActive(isActive); 
+        }
+    },[isActive])
+    React.useEffect(()=>{
+        const onScreenFocus = ({sanitizedName,screenName})=>{
+            if(screenName == routeName || sanitizedName === routeName){
+                setActiveRoute({name:routeName,params:routeParams})  
+                if(isMounted()){
+                    setActiveItem(context,true);
+                } 
+            }   
+        };
+        APP.on(APP.EVENTS.SCREEN_FOCUS,onScreenFocus);
+        return ()=>{
+            APP.off(APP.EVENTS.SCREEN_FOCUS,onScreenFocus);
+        }
+    },[])
+    return <_DrawerItem 
+        {...rest} 
+        drawerRef = {drawerRef}
+        onPress = {getOnPressAction({
+            ...props,
+            drawerRef,
+            beforePress : (args)=>{
+                if(isNonNullString(routeName)){
+                    const cItem = activeItemRef.current;
+                    setActiveRoute({name:routeName,params:routeParams})  
+                    if(isMounted()){
+                       setActiveItem(context,true);
+                    }  
+                    closeDrawer(()=>{
+                        routeParams = defaultObj(routeParams);
+                        navigate({...rest,routeName,routeParams,from:"drawer",source:'drawer'});
+                    },cItem?.routeName === routeName?true : false);
+                    return false;
+                } else {
+                    if(closeOnPress === false) return false;
+                }
+            }
+        })}
+        active={active}
+    />
+}
+
+DrawerItem.propTypes = {
+    onPress : PropTypes.oneOfType([
+        PropTypes.func,
+        PropTypes.bool,
+    ]),
+    /*** l'objet navigation, pour la navigation dans les containers */
+    navigation : PropTypes.object,
+}

package/src/components/Drawer/DrawerItems/DrawerSection.js

@@ -0,0 +1,34 @@
+import View from "$ecomponents/View";
+import {defaultObj,defaultBool} from "$utils";
+import Divider from "$ecomponents/Divider";
+import Label from "$ecomponents/Label";
+import theme,{Colors,tinyColor,ALPHA_OPACITY} from "$theme";
+export default function DrawerSection (props){
+    let {children,divider,labelStyle,minimized,labelProps,dividerProps,label,text,...rest} = props;
+    label = defaultStr(label,text);
+    if(!label) return children;
+    dividerProps = defaultObj(dividerProps);
+    labelProps = defaultObj(labelProps);
+    rest = defaultObj(rest);
+    let color = theme.colors.text;
+    if(Colors.isValid(color)){
+        color = tinyColor(color).setAlpha(ALPHA_OPACITY).toRgbString();
+    } else color = undefined;
+    return <View {...rest} style={[{marginVertical:0,marginBottom: 0,marginTop:5},rest.style]}>
+        {label && (
+             <Label
+                numberOfLines={1}
+                {...labelProps}
+                style={[{justifyContent: 'center',color,marginLeft: minimized?5:16,paddingVertical:0,marginVertical:0,fontWeight:'bold'
+                },labelProps.style,labelStyle,minimized?{
+                    alignItems : 'center',
+                    textAlign : 'center',
+                }:null]}
+            >
+                {label}
+         </Label>
+        )}
+        {children}
+      {divider !== false? <Divider {...dividerProps} style={[{marginVertical:4,width:'100%'},dividerProps.style]}/> : null} 
+    </View>
+}

package/src/components/Drawer/DrawerItems/ExpandableItem.js

@@ -0,0 +1,44 @@
+import {Pressable} from "react-native";
+import View from "$ecomponents/View";
+import Icon from "$ecomponents/Icon";
+import {defaultObj,isBool,defaultBool} from "$utils";
+import PropTypes from "prop-types"
+import React from "$react";
+import DrawerItem from "./DrawerItem";
+import theme from "$theme";
+
+export default function ExpandableItem(props){
+    let {children,expanded,expandedIcon,minimized,onPress,expandIconProps,unexpandedIcon,onToggleExpand,wrapperProps,...rest} = props;
+    wrapperProps = defaultObj(wrapperProps);
+    const [expandedControled,setExpended] = React.useStateIfMounted(defaultBool(expanded,false))
+    let _expanded = expanded;
+    if(!isBool(expanded)){
+        _expanded = expandedControled;
+    }
+    const _onToggleExpand = (e)=>{
+        _expanded = !_expanded;
+        setExpended(_expanded)
+        if(onPress){
+            onPress(e,_expanded);
+        }
+    }
+    expandIconProps = defaultObj(expandIconProps);
+    const icon = _expanded ? defaultVal(expandedIcon,"chevron-up") : defaultVal(unexpandedIcon,"chevron-down")
+    rest.right = (props)=> <Icon {...props} style={{margin:0}} size={minimized?15:24} icon={icon} onPress={_onToggleExpand}/>
+    return <View {...wrapperProps}>
+        <DrawerItem  color={_expanded?theme.colors.primary:undefined} {...rest} minimized={minimized} isExpandable onPress={_onToggleExpand}/>
+        {_expanded && <Pressable style={{marginLeft:10}}>
+            <React.Fragment>{children}</React.Fragment>
+        </Pressable>}
+    </View>
+}
+
+ExpandableItem.propTypes = {
+    ///lorsqu'on clique sur le press menu
+    onPress : PropTypes.oneOfType([
+        PropTypes.func,
+        PropTypes.bool,
+    ]),
+    wrapperProps : PropTypes.object, //les props de la vue qui wrapp le contenu expand
+    onToggleExpand : PropTypes.func, //lorsqu'on modifie la valeur expanded
+}