@fto-consult/expo-ui 1.0.4

package/src/components/Dropdown/utils.js

@@ -0,0 +1,19 @@
+import {isMobileOrTabletMedia} from "$cplatform/dimensions";
+import {isNativeMobile} from "$cplatform";
+
+export const matchOperators = /[|\\{}()[\]^$+*?.]/g;
+
+export const SEARCH_TIMEOUT = 1500;
+
+export const MAX_AUTO_FOCUS_ITEMS = 10;
+
+export const getSearchTimeout = (itemCount)=>{
+    if(typeof itemCount !=='number') return SEARCH_TIMEOUT;
+    return itemCount <= (isMobileOrTabletMedia()? 100 : 1000) ? 0 : SEARCH_TIMEOUT;
+}
+
+/**** voir si le champ de recherche du composant peut être autofocus enf onction du nombre d'items et du type d'environnement */
+export const canAutoFocusSearchField = ({visible,items})=>{
+    const count = typeof items =='number'? items : typeof (items) === 'object' ? Object.size(items) : 0;
+    return visible && (!isNativeMobile() || count > MAX_AUTO_FOCUS_ITEMS) ? true : false;
+}

package/src/components/ErrorBoundary/ErrorMessage.js

@@ -0,0 +1,107 @@
+import * as React from 'react'
+import Types from 'prop-types';
+import {StyleSheet,View,TouchableOpacity,useWindowDimensions} from "react-native";
+import ScrollView  from "$ecomponents/ScrollView";
+import {Paragraph,Button,List } from "react-native-paper";
+import Portal from "$ecomponents/Portal";
+import theme from "$theme";
+import {navigationRef,sanitizeName} from "$enavigation/utils";
+import {isMobileNative} from "$cplatform";
+import Expandable from "$ecomponents/Expandable";
+import Label from "$ecomponents/Label";
+
+const homeRoute = sanitizeName("Home");
+import {isWeb} from "$cplatform";
+
+const ErrorMessage = React.forwardRef(function(props,ref){
+  const { error,resetError,onGoBack, info } = props
+    const goToHome = ()=> {
+      if(navigationRef){
+        navigationRef.navigate(homeRoute);
+        if(typeof onGoBack =='function'){
+          onGoBack();
+        }
+        return;
+      }
+    }
+    if(!error || !info || !error.toString) return null;
+    const pointerEvents = 'auto';
+    const {width,height} = useWindowDimensions();
+    return <Portal>
+          <View ref={ref} testID='RN_ErrorBoundary_Container' pointerEvents={pointerEvents} style={[styles.container,isWeb()?{position:'fixed'}:null,{backgroundColor:theme.colors.surface,width,height}]}>
+            <View style={styles.content} pointerEvents={pointerEvents}>
+              <Label style={styles.title}>Oops!</Label>
+              <Label style={styles.subtitle}>{'Une erreur est survenue'}</Label>
+              <Label style={styles.error}>{error.toString()}</Label>
+              <Button mode="contained" pointerEvents={pointerEvents} iconProps={{marginVertical:0,paddingVertical:0}} icon='home-variant' style={{backgroundColor:theme.colors.primary,marginHorizontal:10}} labelStyle={{color:theme.colors.primaryLabel}} onPress={goToHome}>
+                  Retour à l'accueil
+              </Button>
+              <Expandable title="Plus de détail sur l'erreur">
+                  <View style={{maxHeight:height}}>
+                    <ScrollView style={{flex:1}} contentContainerStyle={{flex:1,flexGrow:1,paddingBottom:30,maxHeight:Math.max(height-200,200)}} testID='RN_ErrorBoundary_ScrollView'>
+                      <Paragraph testID='RN_ErrorBoundary_StackDetails' style={[styles.componentStack,{color:theme.colors.text}]}>
+                        {info.componentStack}
+                      </Paragraph>
+                    </ScrollView>
+                </View>
+              </Expandable>
+            </View>
+        </View>
+    </Portal>
+});
+
+ErrorMessage.displayName = "ErroBoundaryMessageComponent";
+
+ErrorMessage.propTypes = {
+  error: Types.object,//.isRequired,
+  info: Types.shape({
+    componentStack: Types.string.isRequired
+  }),//.isRequired,
+  customStyles: Types.shape({
+    container: Types.object,
+    errorMessage: Types.object,
+    componentStack: Types.object,
+    browserInfo: Types.object,
+    arrow: Types.object
+  })
+}
+
+const styles = StyleSheet.create({
+  container: {
+    backgroundColor: '#fafafa',
+    flex: 1,
+    justifyContent: 'center',
+    ...StyleSheet.absoluteFillObject,
+    paddingHorizontal : 16,
+    top : 0,
+    left : 0,
+    paddingVertical : 16,
+  },
+  content : {
+    flex : 1,
+  },
+  title: {
+    fontSize: 48,
+    fontWeight: '300',
+    paddingBottom: 16,
+  },
+  subtitle: {
+    fontSize: 32,
+    fontWeight: '800',
+  },
+  error: {
+    paddingVertical:16
+  },
+  button: {
+    backgroundColor: '#2196f3',
+    borderRadius: 50,
+    padding: 16
+  },
+  buttonLabel: {
+    fontWeight: '600',
+    textAlign: 'center'
+  },
+})
+
+
+export default ErrorMessage

package/src/components/ErrorBoundary/Provider.js

@@ -0,0 +1,68 @@
+import ErrorMessage from "./ErrorMessage";
+import Portal from "$ecomponents/Portal";
+let providerRef = null;
+import * as React from "react";
+import useForceRender from "$react/useForceRender";
+import setRef from "$react/setRef";
+
+const providerState = {};
+
+export const createProviderRef = (cb)=>{
+    const ref = React.useRef(null);
+    React.useEffect(()=>{
+        if(typeof cb =='function'){
+            cb(ref.current);
+        } else if(cb !== false) {
+            providerRef = ref.current;
+        }
+    },[ref.current])
+    return ref;
+};
+
+export const getProviderRef = ()=> providerRef;
+
+const Provider = React.forwardRef((_props,innerRef)=>{
+    const ref = innerRef || createProviderRef();
+    const propRef = React.useRef(_props);
+    const forceRender = useForceRender();
+    const messageRef = React.useRef(null);
+    const [context] = React.useState({
+        open : (props)=>{
+           if(typeof props =='object' && props){
+             propRef.current = props;
+             forceRender();
+           }
+        },
+        isOpen : x=> {
+            console.log("checking message ref",messageRef.current);
+            return messageRef.current && messageRef.current.setNativeProps ? true : false
+        },
+    });
+    setRef(ref,context);        
+
+    return <Portal>
+        <ErrorMessage {...propRef.current} ref={el=>{
+            messageRef.current = el;
+            setRef(propRef.current.messageRef);
+        }}/>
+    </Portal>
+});
+
+Provider.displayName = "ErrorBoundaryProvider";
+
+
+export default Provider;
+
+export const isOpen = ()=>{
+    const ref = getProviderRef();
+    if(ref && typeof ref.isOpen =='function') return ref.isOpen();
+    return false;
+}
+export const isClosed = x=> !isOpen();
+
+
+export const open = (props)=>{
+    const ref = getProviderRef();
+    if(ref && typeof ref.open =='function') return ref.open(props);
+    return false;
+}

package/src/components/ErrorBoundary/index.js

@@ -0,0 +1,64 @@
+import React from 'react'
+import Types from 'prop-types'
+import ErrorMessage from './ErrorMessage'
+import {open,close} from "$preloader";
+
+
+class ErrorBoundary extends React.Component {
+  state = {
+    error: null,
+    info: null,
+    hasError: false
+  }
+
+  componentDidCatch (error, info) {
+    close();
+    this.setState({
+      hasError : true,
+      error,info
+    },()=>{
+      const args =  {context:this,error, info: info.componentStack,stack:info.componentStack};
+      if (typeof this.props.onError === 'function') {
+        this.props.onError(args);
+      } else if(typeof this.props.onCatch =='function'){
+         this.props.onCatch(args);
+      }
+    })
+  }
+  resetError(){
+    this.setState({ hasError: false })
+  }
+
+  render () {
+    const { error, info, hasError } = this.state
+    const { render, customStyles } = this.props
+    if (hasError) {
+      if (typeof (render) === 'function') {
+        return render(error, info)
+      } else {
+        return (
+          <ErrorMessage
+            error={error}
+            info={info}
+            resetError={this.resetError}
+            customStyles={customStyles}
+          />
+        )
+      }
+    }
+
+    return this.props.children
+  }
+}
+
+ErrorBoundary.propTypes = {
+  render: Types.func,
+  customStyles: Types.shape({
+    container: Types.object,
+    errorMessage: Types.object,
+    componentStack: Types.object,
+    arrow: Types.object
+  })
+}
+
+export default ErrorBoundary

package/src/components/Expandable/Item.js

@@ -0,0 +1,159 @@
+import color from 'color';
+import * as React from 'react';
+import {defaultObj,defaultStr} from "$utils";
+import Label from "$ecomponents/Label"
+import theme from "$theme";
+import View from "$ecomponents/View";
+import {
+  StyleSheet,
+} from 'react-native';
+
+import {TouchableRipple,withTheme} from "react-native-paper";
+
+const ExpandableItem = ({left,right,title,description,
+  onPress,
+  style,
+  titleStyle,
+  titleNumberOfLines = 1,
+  descriptionNumberOfLines = 2,
+  titleEllipsizeMode,
+  descriptionEllipsizeMode,
+  descriptionStyle,
+  leftProps,
+  rightProps,
+  titleProps,
+  contentProp,
+  containerProps,
+  descriptionProps,
+  testID,
+  ...rest
+}) => {
+  leftProps = defaultObj(leftProps);
+  rightProps = defaultObj(rightProps);
+  titleProps = defaultObj(titleProps);
+  contentProp = defaultObj(contentProp);
+  containerProps = defaultObj(containerProps);
+  descriptionProps = defaultObj(descriptionProps);
+  testID = defaultStr(testID,"RN_ExpandableItemComponent")
+  const renderDescription = (descriptionColor,description) => {
+    return typeof description === 'function' ? (description({
+        selectable: false,
+        ellipsizeMode: descriptionEllipsizeMode,
+        color: descriptionColor,
+        fontSize: styles.description.fontSize,
+      })
+    ) : (
+      <Label
+        selectable={false}
+        numberOfLines={descriptionNumberOfLines}
+        ellipsizeMode={descriptionEllipsizeMode}
+        testID = {testID+"_Description"}
+        {...descriptionProps}
+        style={[
+          styles.description,
+          { color: descriptionColor },
+          descriptionStyle,
+          descriptionProps.style
+        ]}
+      >
+        {description}
+      </Label>
+    );
+  };
+
+  const renderTitle = () => {
+    const titleColor = color(theme.colors.text).alpha(0.87).rgb().string();
+
+    return typeof title === 'function' ? (
+      title({
+        selectable: false,
+        ellipsizeMode: titleEllipsizeMode,
+        color: titleColor,
+        fontSize: styles.title.fontSize,
+      })
+    ) : (
+      <Label
+        selectable={false}
+        ellipsizeMode={titleEllipsizeMode}
+        numberOfLines={titleNumberOfLines}
+        testID = {testID+'_Title'}
+        {...titleProps}
+        style={[styles.title, { color: titleColor }, titleStyle,titleProps.style]}
+      >
+        {title}
+      </Label>
+    );
+  };
+  
+  const descriptionColor = color(theme.colors.text).alpha(theme.ALPHA).rgb().string();
+  left  = typeof left =='function'? left ({
+      color: descriptionColor,
+      style: description
+      ? styles.iconMarginLeft
+      : {
+          ...styles.iconMarginLeft,
+          ...styles.marginVerticalNone,
+        },
+  }) : React.isValidElement(left)? left : null;
+  right = typeof right =='function'? right ({
+    color: descriptionColor,
+    style: description
+      ? styles.iconMarginRight
+      : {
+          ...styles.iconMarginRight,
+          ...styles.marginVerticalNone,
+        },
+}): React.isValidElement(right)? right : null;
+
+  return (<TouchableRipple
+                {...rest}
+                testID = {testID}
+                style={[styles.container, style]}
+                onPress={onPress}
+            >
+              <View testID={testID+'_Container'} {...containerProps} style={[styles.row,containerProps.style]}>
+                {left ? <View testID={testID+'_Left'} {...leftProps} style={[leftProps.style]}>
+                      {left}
+                  </View>: null}
+                <View testID={testID+'_Content'} {...contentProp} style={[styles.item, styles.content,contentProp.style]}>
+                  {renderTitle()}
+                  {description ? renderDescription(descriptionColor, description): null}
+                </View>
+                {right  ? <View testID={testID+'_Right'} {...rightProps} style={[rightProps.style]}>
+                        {right}
+                  </View>
+                  : null}
+              </View>
+        </TouchableRipple>);
+};
+
+ExpandableItem.displayName = 'ExpandableItem';
+
+const styles = StyleSheet.create({
+  container: {
+    padding: 8,
+  },
+  row: {
+    flexDirection: 'row',
+    alignItems : 'center',
+    justifyContent : "center",
+  },
+  title: {
+    fontSize: 16,
+  },
+  description: {
+    fontSize: 14,
+  },
+  marginVerticalNone: { marginVertical: 0 },
+  iconMarginLeft: { marginLeft: 0, marginRight: 16 },
+  iconMarginRight: { marginRight: 0 },
+  item: {
+    marginVertical: 6,
+    paddingLeft: 8,
+  },
+  content: {
+    flex: 1,
+    justifyContent: 'center',
+  },
+});
+export default ExpandableItem;

package/src/components/Expandable/index.js

@@ -0,0 +1,229 @@
+import {Colors} from "$theme";
+import React from 'react';
+import View from "$ecomponents/View";
+import {StyleSheet,TouchableWithoutFeedback} from 'react-native';
+import {withTheme,TouchableRipple} from "react-native-paper"
+import Label from "$ecomponents/Label";
+import Icon from "$ecomponents/Icon"
+import {defaultObj,isNonNullString,defaultStr} from "$utils";
+import PropTypes from "prop-types";
+import Item from "./Item";
+import Surface from "$ecomponents/Surface";
+import theme from "$theme";
+
+const ExpandableComponent = React.forwardRef(({
+  left,
+  right,
+  title,
+  description,
+  children,
+  titleStyle,
+  descriptionStyle,
+  titleNumberOfLines = 1,
+  descriptionNumberOfLines = 2,
+  testID,
+  onPress,
+  onLongPress,
+  expanded: expandedProp,
+  accessibilityLabel,
+  expandedIcon,
+  expandIconProps,
+  unexpandedIcon,
+  leftProps,
+  titleProps,
+  noPadding,
+  rightProps,
+  descriptionProps,
+  contentProps,
+  centerProps,
+  contentContainerProps,
+  showExpandIcon,
+  icon,
+  containerProps,
+  autoMountChildren = false,
+  expandIconPosition,
+  ...props
+},ref) => {
+  props = defaultObj(props);
+  leftProps = defaultObj(leftProps)
+  rightProps = defaultObj(rightProps);
+  titleProps = defaultObj(titleProps);
+  contentProps = defaultObj(contentProps);
+  centerProps = defaultObj(centerProps),
+  contentContainerProps = defaultObj(contentContainerProps);
+  descriptionProps = defaultObj(descriptionProps);
+  containerProps = defaultObj(containerProps);
+  expandIconPosition = defaultStr(expandIconPosition,"right").toLowerCase().trim();
+  const isIconPositionLeft = expandIconPosition =='left'? true : false;
+  const isControlled = typeof expandedProp =='boolean'? true : false;
+  const [expanded, setExpanded] = React.useState(isControlled ? expandedProp : false);
+  const handlePressAction = (e) => {
+    onPress?.({...React.getOnPressArgs(e),expanded:!expanded,checked:!expanded});
+    if (!isControlled) {
+       setExpanded((expanded) => !expanded);
+    }
+  };
+  if(isControlled){
+    React.useEffect(()=>{
+      if(typeof expandedProp =='boolean' && expandedProp !== expanded){
+        setExpanded(expandedProp)
+      }
+    },[expandedProp])
+  }
+  const titleColor = Colors.toAlpha(theme.colors.text,0.87);
+  const descriptionColor = Colors.toAlpha(theme.colors.text,theme.ALPHA);
+  const isExpanded = expanded ? true : false;
+  titleProps.style = [styles.title,{color: isExpanded ? theme.colors.primary : titleColor},titleStyle,titleProps.style]
+  const eProps = {color: isExpanded ? theme.colors.primary : descriptionColor}
+  left = typeof left =='function'? left(eProps) : React.isValidElement(left)? left : null;
+  right = typeof right =="function" ? right(eProps) : React.isValidElement(right)? right : null;
+  if((isNonNullString(icon) || isObj(icon)) && !left){
+    icon = isNonNullString(icon)? {icon} : icon;
+    left = <Icon {...eProps} {...icon} />
+  }
+  if(!React.isValidElement(left)){
+    left = null;
+  }
+  if(!React.isValidElement(right)){
+    right = null;
+  }
+  testID = defaultStr(testID,"RN_ExpandableComponent");
+  const expandIcon = showExpandIcon !== false ? <Icon
+    color={titleColor}
+    size={24}  
+    {...defaultObj(expandIconProps)}
+    icon = {isExpanded ? defaultVal(expandedIcon,"chevron-up") : defaultVal(unexpandedIcon,"chevron-down")}
+    onPress = {handlePressAction}
+  />:null;
+  return ( <View testID={testID+"_ExpandableContainer"} {...containerProps}>
+        <Surface {...props} ref={ref} testID={testID}>
+          <TouchableWithoutFeedback
+            delayPressIn={0}
+            borderless = {false}  
+            accessibilityTraits="button"
+            accessibilityComponentType="button"
+            accessibilityRole="button"
+            style={[styles.container,props.style]}
+            onPress={handlePressAction}
+            onLongPress={onLongPress}
+            accessibilityState={{ expanded: isExpanded }}
+            accessibilityLabel={accessibilityLabel}
+            testID={testID+"_Container"}
+          >
+            <View testID={testID+'_ContentContainer'} {...contentContainerProps} style={[styles.row,theme.styles.cursorPointer,contentContainerProps.style]} pointerEvents1="none">
+              {left || (expandIcon && isIconPositionLeft)
+                ? <View testID={testID+'_Left'} {...leftProps} style={[styles.left]}>
+                    {isIconPositionLeft ? expandIcon : null}
+                    {left}
+                </View>
+                : null}
+              <View testID={testID+'_Center'} {...centerProps} style={[styles.item, styles.content,styles.center,centerProps.style]}>
+                {isNonNullString(title)? <Label
+                  selectable={false}
+                  numberOfLines={titleNumberOfLines}
+                  {...titleProps}
+                >
+                  {title}
+                </Label> : React.isValidElement(title)? title : null}
+                {isNonNullString(description) ? (
+                  <Label
+                    testID={testID+'_Description'}
+                    selectable={false}
+                    numberOfLines={descriptionNumberOfLines}
+                    {...descriptionProps}
+                    style={[
+                      styles.description,
+                      {
+                        color: descriptionColor,
+                      },
+                      descriptionStyle,
+                      descriptionProps.style,
+                    ]}
+                  >
+                    {description}
+                  </Label>
+                ) : null}
+              </View>
+              <View testID={testID+'_Right'} {...rightProps} style={[styles.item, description ? styles.multiline : undefined,styles.row,rightProps.style]}>
+                {right}
+                {!isIconPositionLeft ? expandIcon:null}
+              </View>
+            </View>
+          </TouchableWithoutFeedback>
+        {(autoMountChildren !== false || isExpanded) ? <View testID={testID+'_Content'} {...contentProps} 
+          style={[styles.children,contentProps.style,!isExpanded && {opacity:0,height:0}]}>
+            {children}
+        </View> : null}
+      </Surface>
+    </View>
+  );
+});
+
+ExpandableComponent.displayName = 'ExpandableComponent';
+
+const styles = StyleSheet.create({
+  center : {
+    justifyContent : 'flex-start',
+  },
+  container: {
+    padding: 8,
+  },
+  left : {
+    flexDirection : 'row',
+    alignItems : 'center',
+    justifyContent : 'flex-start',
+  },
+  row: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent:'center'
+  },
+  multiline: {
+    height: 40,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  title: {
+    fontSize: 16,
+    paddingHorizontal:10,
+  },
+  description: {
+    fontSize: 14,
+  },
+  item: {
+    margin:0,
+  },
+  child: {
+    paddingLeft: 64,
+  },
+  content: {
+    flex: 1,
+    justifyContent: 'center',
+  },
+  children : {
+    marginLeft : 8,
+  }
+});
+
+ExpandableComponent.propTypes = {
+    left : PropTypes.oneOfType([
+      PropTypes.func,
+      PropTypes.node,
+    ]),
+    right : PropTypes.oneOfType([
+      PropTypes.func,
+      PropTypes.node,
+    ]),
+    expandIconPosition : PropTypes.oneOf([
+      'left','right'
+    ]),
+    autoMountChildren : PropTypes.bool,///si les enfants du composant seront montés mais masqués et lorsqu'on cliquera sur toggle ceux-ci seront affichés
+    leftProps : PropTypes.object, ///les props à paser à la vue qui rend le contenu gouche
+    rightProps : PropTypes.object, ///les props à passer à la vue qui rend le contenu droit
+    descriptionProps : PropTypes.object,///les props à passer à la valeur de la description de l'expandable
+
+}
+
+ExpandableComponent.Item = Item;
+
+export default ExpandableComponent;

package/src/components/Fab/Fab.js

@@ -0,0 +1,46 @@
+import { FAB } from 'react-native-paper';
+import {defaultObj} from "$utils";
+import React from "$react";
+import { StyleSheet } from 'react-native';
+import PropTypes from "prop-types";
+import theme,{Colors} from "$theme";
+
+const FabComponent = React.forwardRef((props,ref)=>{
+    const {primary,secondary,style:customStyle,color:customColor,...restP} = props;
+    const rest = defaultObj(restP);
+    const style = Object.assign({},StyleSheet.flatten(customStyle));
+    let color = Colors.isValid(customColor)? customColor : undefined;
+    let backgroundColor = Colors.isValid(style.backgroundColor)? style.backgroundColor : undefined;
+    if(!backgroundColor || primary){
+        backgroundColor = theme.colors.primary;
+        color = theme.colors.primaryText;
+    } else if(secondary){
+        backgroundColor = theme.colors.secondary;
+        color = theme.colors.secondaryText;
+    }
+    return  <FAB
+        //small
+        testID='RN_FabComponent'
+        {...rest}
+        color = {color}
+        style = {[styles.fab,style,{backgroundColor}]}
+    />
+})
+
+FabComponent.propTTypes = {
+    ...defaultObj(FAB.propTypes),
+    color : PropTypes.string,
+    primary : PropTypes.bool,
+    secondary : PropTypes.bool,
+}
+const styles = StyleSheet.create({
+    fab : {
+        position: 'absolute',
+        margin: 15,
+        bottom : 0,
+    }
+})
+
+export default FabComponent;
+
+FabComponent.displayName = "FabComponent";