@fto-consult/expo-ui 1.0.4

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

@@ -0,0 +1,173 @@
+import React from '$react';
+import { StyleSheet,} from 'react-native';
+import View from "$ecomponents/View";
+import theme,{Colors,ALPHA} from "$theme";
+import Icon from "$ecomponents/Icon"
+import {defaultStr,defaultObj} from "$utils";
+import {TouchableRipple} from 'react-native-paper';
+import Divider from "$ecomponents/Divider";
+import Label from "$ecomponents/Label";
+import { MINIMIZED_ICON_SIZE,ICON_SIZE,getBackgroundColor } from '../utils';
+import PropTypes from "prop-types";
+
+/** 
+ * update by @borisFouomene. for usage, @see : https://callstack.github.io/react-native-paper/drawer-item.html
+ */
+const DrawerItem = ({icon,iconProps,borderRadius,color,minimized,contentContainerProps,labelProps,contentProps,label,
+    active,style,onPress,accessibilityLabel,isExpandable,right,divider, dividerProps,
+    testID,
+    left,
+    title,
+    children,
+    ...rest}) => {
+  style = StyleSheet.flatten(style) || {};
+  testID = defaultStr(testID,"RN_DrawerItemComponent");
+  const contentColor = active ? theme.colors.primary : Colors.isValid(color)? color : Colors.isValid(style.color)? style.color : Colors.setAlpha(theme.colors.text,ALPHA);
+  const backgroundColor = getBackgroundColor(active);
+  const fontWeight = active ? '400': 'normal';
+  const font = theme.fonts.medium;
+  contentContainerProps = defaultObj(contentContainerProps);
+  contentProps = defaultObj(contentProps);
+  labelProps = defaultObj(labelProps);
+  iconProps = defaultObj(iconProps);
+  label = defaultVal(label,children);
+  if(!label && !icon) return null;
+  const rProps = {};
+  if(active){
+    rProps.color = contentColor;
+  }
+  dividerProps = defaultObj(dividerProps);
+  const iconSize = minimized ? 20 : ICON_SIZE;
+  const iP = {color:contentColor,size:iconSize,marginHorizontal:5};
+  left = typeof left =="function"? left(iP) : left;
+  right = typeof right =='function'? right (iP) : right;
+  icon = typeof icon =='function'? icon (iP) : icon;
+  right = React.isValidElement(right)? right : null;
+  left = React.isValidElement(left)? left : null;
+  
+  borderRadius = typeof borderRadius =='number'? borderRadius : 18;
+  accessibilityLabel = defaultStr(accessibilityLabel);
+  const lProps = {
+    testID:testID+"_DrawerItemLabel",
+    selectable:false,
+    numberOfLines:1,
+    ...labelProps,
+    style : [{
+        color: contentColor,
+        ...font,
+        fontWeight,
+      },labelProps.style,rProps
+    ],
+  }
+  label = typeof label =='function'? label(lProps) : label;
+  label = React.isValidElement(label,true)? <Label testID={testID+"_Label"} {...lProps}>
+    {label}
+  </Label> : null;
+  return (
+    <View {...rest} testID={testID} style={[rest.style,{paddingVertical:0,marginVertical:0},minimized?styles.containerMinimized:null]}>
+      <TouchableRipple
+        borderless
+        delayPressIn={0}
+        onPress={onPress}
+        testID = {testID+"_Ripple"}
+        style={[
+          styles.container,
+          { backgroundColor },
+          active ? {borderTopRightRadius: borderRadius,borderBottomRightRadius:borderRadius} : null,
+          minimized ? styles.cMinimized : null,
+          style,
+          isExpandable ? {paddingVertical:3} : null
+        ]}
+        // @ts-expect-error We keep old a11y props for backwards compat with old RN versions
+        accessibilityTraits={active ? ['button', 'selected'] : 'button'}
+        accessibilityComponentType="button"
+        accessibilityRole="button"
+        accessibilityState={{ selected: active }}
+        accessibilityLabel={accessibilityLabel}
+      >
+        <View  {...contentContainerProps} style={[styles.contentContainer,contentContainerProps.style]} testID={testID+"_Wrapper"}>
+          <View {...contentProps} style={[styles.content,contentProps.style]} testID={testID+"_Content"}>
+            {left}
+            {icon ? (
+              <Icon testID={testID+"_Icon"} icon={icon} {...iconProps} 
+              style={[iconProps.style,styles.icon,!minimized?{
+                 alignItems : 'flex-start'
+              }:{alignItems:isExpandable?'flex-end':'center'}]} tooltip={minimized?defaultStr(title,label,accessibilityLabel):""} 
+              position={minimized?'top':"right"} 
+              size={minimized ?MINIMIZED_ICON_SIZE : ICON_SIZE} onPress={minimized?onPress:undefined} color={contentColor} />
+            ) : null}
+            {!minimized ? label : null}
+          </View>
+          {right}
+        </View>
+      </TouchableRipple>
+      {divider ? <Divider testID={testID+"_Divider"} {...dividerProps} style={[dividerProps.style,{width:'100%',marginVertical:4}]}/> : null}
+    </View>
+  );
+};
+
+DrawerItem.displayName = 'DrawerItem';
+
+const styles = StyleSheet.create({
+  icon : {
+      marginVertical:0,
+      paddingVertical:0,
+      marginHorizontal : 2,
+      marginRight : 5,
+  },
+  containerMinimized : {
+    alignItems : 'center',
+    justifyContent : 'center',
+  },
+  container: {
+    paddingVertical : 0,
+    paddingLeft : 7,
+    marginLeft: 0,
+    marginRight : 7,
+    marginVertical: 5,
+  },
+  cMinimized : {
+    marginRight : 0,
+    borderTopRightRadius : 0,
+    borderBottomRightRadius : 0,
+    marginLeft : 0,
+    paddingLeft : 2,
+    paddingRight : 2,
+  },
+  contentContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingVertical: 5,
+  },
+  content: {
+    flex: 1,
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+});
+
+export default DrawerItem;
+
+const icTye = PropTypes.oneOfType([
+   PropTypes.func,
+   PropTypes.node,
+   PropTypes.string,
+])
+DrawerItem.propTypes = {
+  icon : icTye,
+  active : PropTypes.bool,
+  borderRadius : PropTypes.oneOfType([
+      PropTypes.string,
+      PropTypes.number,
+  ]),
+  divider : PropTypes.bool,
+  dividerProps  : PropTypes.object,
+  left : PropTypes.oneOfType([
+      PropTypes.func,
+      PropTypes.node,
+  ]),
+  right : PropTypes.oneOfType([
+      PropTypes.func,
+      PropTypes.node,
+  ])
+}

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

@@ -0,0 +1,155 @@
+import React from '$react';
+import {isObj} from "$utils";
+import ExpandableItem from './ExpandableItem';
+import DrawerItem from './DrawerItem';
+import DrawerSection from "./DrawerSection"
+import PropTypes from "prop-types";
+import Divider from "$ecomponents/Divider";
+import View from "$ecomponents/View";
+
+export * from "./utils";
+
+const DrawerItemsComponent = React.forwardRef((props,ref)=> {
+  let {items:_items,minimized} = props;
+  _items = typeof _items ==='function'? _items(props) : _items;
+  if(React.isValidElement(_items)){
+     return _items;
+  }
+  const r = React.useMemo(()=>{
+    let items = []
+    const renderExpandableOrSection = ({item,key,items})=>{
+          const {section,items:itx2,...rest} = item;
+          if(section){
+            return <DrawerSection 
+                {...rest}
+                minimized={minimized} 
+                key={key}
+            >
+              {items}
+            </DrawerSection>
+          } else {
+            return <ExpandableItem 
+                {...rest}
+                minimized={minimized} 
+                key={key}
+              >
+                {items}
+            </ExpandableItem>;
+          }
+    }
+    Object.map(_items,(item,i)=>{
+      if(React.isValidElement(item)){
+         items.push(<React.Fragment key={i}>{item}</React.Fragment>)
+      }
+      if(typeof item ==='string' || typeof item =='number'){
+         item = {label:item+''};
+      } 
+      if(!isObj(item)) return null;
+      if(isObj(item.items) || Array.isArray(item.items)){
+          const itx = []
+          Object.map(item.items,(it,j)=>{
+              if(!isObj(it)) return ;
+              getDefaultProps(it);
+              const r = renderItem({minimized,renderExpandableOrSection,items:item.items,item:it,key:i+j,props});
+              if(r){
+                itx.push(r);
+              }
+          });
+          if(itx.length){
+              items.push(renderExpandableOrSection({items:itx,key:i,item}))
+          }
+      } else {
+          const r = renderItem({minimized,renderExpandableOrSection,items:_items,item,key:i+"",props});
+          if(r){
+            items.push(r);
+          }
+      }
+    })
+    return items;
+  },[_items,minimized]);
+  return <View ref={ref}>
+      {r}
+      <View style={{height:30}}></View>
+  </View>
+});
+
+
+export default DrawerItemsComponent;
+
+DrawerItemsComponent.displayName = "DrawerItemsComponent";
+
+/*** les props des items du drawer */
+const itemType = PropTypes.oneOfType([
+   PropTypes.shape({
+      label : PropTypes.string,
+      section : PropTypes.bool, //si le drawer est de type section
+      items : PropTypes.oneOfType([
+        PropTypes.arrayOf(PropTypes.object),
+        PropTypes.objectOf(PropTypes.object),
+      ]),
+      divider : PropTypes.bool,
+   }),
+   PropTypes.string,
+   PropTypes.number,
+   PropTypes.node,
+])
+
+DrawerItemsComponent.propTypes = {
+  items : PropTypes.oneOfType([
+    PropTypes.array,
+    PropTypes.object,
+    PropTypes.arrayOf(itemType),
+    PropTypes.objectOf(itemType),
+    PropTypes.func,
+    PropTypes.node,
+  ]).isRequired,
+  minimized : PropTypes.bool,
+}
+
+const getDefaultProps = function(item){
+  if(!isObj(item)) return null;
+  item.label = defaultVal(item.label,item.text,item.accessibilityLabel);
+  item.accessibilityLabel = defaultVal(item.accessibilityLabel,item.tooltip,item.label);
+  item.title = defaultVal(item.title,item.label);
+  return item;
+}
+
+const renderItem = ({item,minimized,renderExpandableOrSection,index,key})=>{
+  key = key||index;
+  if(React.isValidElement(item)){
+    return <React.Fragment key={key}>
+        {item}
+    </React.Fragment>
+  } else {
+    if(!item.label && !item.text && !item.icon) {
+        if(item.divider === true){
+          const {divider,...rest} = item;
+          return (<Divider key={key} {...rest}/>)
+      }
+      return null;
+    }
+    item = getDefaultProps(item);
+    if(isObj(item.items) || Array.isArray(item.items)){
+       const itx = [];
+       Object.map(item.items,(it,i)=>{
+          if(!isObj(it)) return null;
+          it = getDefaultProps(it);
+          itx.push(<DrawerItem 
+                {...it}  
+                minimized = {minimized}
+                key={key+i}
+          
+          />)
+       })
+       if(itx.length){
+          return renderExpandableOrSection({items:itx,key,item})
+       }
+    } else {
+       return <DrawerItem 
+          minimized={minimized}  
+          key={key} 
+          {...item}
+       />
+    }
+  }
+}

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

@@ -0,0 +1,107 @@
+import {navigate} from "$enavigation/utils";
+import {defaultObj,isPromise,isObj,isNonNullString,isFunction} from "$utils";
+import {open as openPreloader,close as closePreloader} from "$preloader";
+import React from "$react";
+import theme,{Colors} from "$theme";
+
+export const getBackgroundColor = (active)=>{
+    return active ? Colors.setAlpha(theme.colors.primary,0.12) : 'transparent';
+}
+export const closeDrawer = (drawerRef,cb,force)=>{
+    return drawerRef && drawerRef.current && drawerRef.current.runAfterSlide ? drawerRef.current.runAfterSlide(cb,force) : typeof cb == 'function' ? cb({}) : null;
+}
+
+/**** permet de construire l'action onPress à partir de l'props passé en paramète */
+export const getOnPressAction = (props) =>{
+    props = defaultObj(props);
+    let {onPress,drawerRef,closeOnPress,beforePress,isExpandable,preloader,routeParams,routeName} = props;
+    let _onPress = null;
+    _onPress = onPress === false ? null : onPress;
+    if(onPress === null) {
+        return null;
+    }
+    routeName = defaultStr(routeName);
+    if(isFunction(_onPress) || routeName){
+        _onPress = (args)=>{
+            if(isFunction(onPress) && onPress (args) === false) return;
+            if(routeName){
+                navigate(routeName,routeParams);
+                return;
+            }
+        }
+    }
+    if(isFunction(_onPress)){
+        return  (event,ev2)=>{
+            const args = React.getOnPressArgs(event,ev2);
+            const cb = ()=>{
+                if(isExpandable || closeOnPress === false){
+                    return _onPress({...props,...args,drawerRef});;
+                }
+                if(preloader){
+                    openPreloader();
+                }
+                closeDrawer(drawerRef, x=> {
+                    _onPress({...props,...args,drawerRef});
+                    if(preloader){
+                        closePreloader();
+                    }
+                });
+            }
+            if(typeof beforePress =='function'){
+                const r = beforePress(args);
+                if(r === false ) return;
+                if(isPromise(r)){
+                    return r.then(cb);
+                }
+            }
+            cb();
+        }
+    }
+    return _onPress;
+}
+
+const activeRouteKey = "drawerActiveRoute";
+/*** retourne la route active à travers la sesison passé soit dans la 
+ * - la propriété sessionManager de prop, soit la props elle même constituant un gestionnaire de session
+ */
+export const getActiveSessionRoute = (props)=>{
+    const getSession = isObj(props) && isObj(props.sessionManager) && props.sessionManager.get ? props.sessionManager.get : isObj(props) && typeof props.get =='function'? props.get : undefined;
+    if(typeof getSession =='function'){
+        return getSession(activeRouteKey);
+    }
+    return undefined;
+}
+/*** permet de définir la route active à travers els props passé en paramètre */
+export const setActiveSessionRoute = (activeRoute,props)=>{
+    const setSession = isObj(props) && isObj(props.sessionManager) && props.sessionManager.set ? props.sessionManager.set : isObj(props) && typeof props.set =='function'? props.set : undefined;
+    if(typeof setSession =='function'){
+        return setSession(activeRouteKey,defaultStr(activeRoute));
+    }
+    return undefined;
+}
+
+/*** vérifie si la route passée en paramètre est active */
+export const isRouteActive = (route,sessionManager)=>{
+    if(!isNonNullString(route)) return false;
+    const activeRoute = getActiveSessionRoute(sessionManager);
+    if(!isNonNullString(activeRoute)) return false;
+    return route.toLowerCase().trim().ltrim("#").rtrim("/") === activeRoute.toLowerCase().trim().ltrim("#").rtrim("/") ? true : false;
+}
+
+export const previousActiveItemRef = React.createRef(null);
+
+export const activeItemRef = React.createRef(null);
+
+export const getActiveItem = x=> activeItemRef.current;
+
+
+export const setActiveItem = (item,toogleActiveItem)=> {
+    if(toogleActiveItem ===true && activeItemRef.current && activeItemRef.current.desactivate){
+        activeItemRef.current.desactivate();
+    }
+    previousActiveItemRef.current = activeItemRef.current;
+    activeItemRef.current = item;
+    if(toogleActiveItem === true && activeItemRef.current && activeItemRef.current.activate){
+        activeItemRef.current.activate();
+    }
+}