@fto-consult/expo-ui 1.0.4

package/src/components/AutoLink/index.js

@@ -0,0 +1,45 @@
+import * as Linking from 'expo-linking';
+import { Pressable } from 'react-native';
+import {isValidUrl,isValidEmail,defaultStr,isSms} from "$utils";
+import PropTypes from "prop-types";
+import Browser from "$ecomponents/Browser";
+
+export default function AutolinkComponent({onPress,withBrowser,mailto,email,tel,phone,sms,url,href,...props}){
+    url = defaultStr(url,href);
+    phone = defaultStr(phone,tel).trim(); 
+    const isPhone = phone ? true : false;
+    const isUrl = isValidUrl(url);
+    email = defaultStr(email,mailto);
+    const isEmail = isValidEmail(email);
+    return <Pressable 
+        testID={"RN_AutoLinkComponent"}
+        {...props}
+        onPress = {(e)=>{
+            if(onPress && onPress(e) === false) return;
+            if(isUrl){
+                if(withBrowser !== false){
+                    return Browser.openURL(url);
+                }
+                return Linking.openURL(url);
+            }
+            if(isEmail){
+                return Linking.openURL('mailto:'+email);
+            }
+            if(isPhone){
+                Linking.openURL((sms?"sms:":"tel:")+phone);
+            }
+        }}
+    />
+}
+
+AutolinkComponent.propTypes = {
+    onPress : PropTypes.func,
+    phone : PropTypes.string,//le numéro à utiliser
+    tel : PropTypes.string,
+    sms :PropTypes.bool, //si l'application sms sera ouverte au numéro passé en paramètre
+    email : PropTypes.string, //si l'on doit envoyer un mail à l'adresse sur laquelle on a cliqué
+    mailto : PropTypes.string, ///alias à email
+    url : PropTypes.string,
+    href : PropTypes.string, ///si ca ouvrira une url
+    withBrowser : PropTypes.bool,///si l'on ouvrira l'url avec le navigateur
+}

package/src/components/Avatar/AutoHeightImage/AnimatableImage.js

@@ -0,0 +1,22 @@
+import React from 'react';
+import { Animated, Image, ImageBackground } from 'react-native';
+
+function AnimatableImage(props) {
+  const { animated, children, ...rest } = props;
+
+  const ImageComponent = children
+    ? ImageBackground
+    : animated
+    ? Animated.Image
+    : Image;
+
+  return <ImageComponent {...rest}>{children}</ImageComponent>;
+}
+
+AnimatableImage.propTypes = Image.propTypes | Animated.Image.propTypes;
+
+AnimatableImage.defaultProps = {
+  animated: false
+};
+
+export default AnimatableImage;

package/src/components/Avatar/AutoHeightImage/ImagePolyfill.js

@@ -0,0 +1,33 @@
+import React, { useEffect } from 'react';
+import { Platform, Image } from 'react-native';
+import AnimatableImage from './AnimatableImage';
+
+const isAndroid = () => Platform.OS === 'android';
+
+/**
+ * An extension of the Image class which fixes an Android bug where remote images wouldn't fire the
+ * Image#onError() callback when the image failed to load due to a 404 response.
+ *
+ * This component should only be used for loading remote images, not local resources.
+ */
+function ImagePolyfill(props) {
+  const { source, onError, ...rest } = props;
+
+  const verifyImage = () => {
+    const { uri } = source;
+    Image.prefetch(uri).catch((e) => onError(e));
+  };
+
+  useEffect(() => {
+    if (source && source.uri && onError && isAndroid()) {
+      verifyImage();
+    }
+  }, [source, onError]);
+
+  return <AnimatableImage source={source} {...rest} />;
+}
+
+ImagePolyfill.propTypes = AnimatableImage.propTypes;
+ImagePolyfill.defaultProps = AnimatableImage.defaultProps;
+
+export default ImagePolyfill;

package/src/components/Avatar/AutoHeightImage/cache.js

@@ -0,0 +1,75 @@
+import { Image } from 'react-native';
+
+/**
+ * store with
+ *  key: image
+ *  value: {
+ *      width: 100,
+ *      height: 100,
+ *  }
+ */
+const cache = new Map();
+
+const getImageSizeFromCache = (image) => {
+  if (typeof image === 'number') {
+    return cache.get(image);
+  } else {
+    return cache.get(image.uri);
+  }
+};
+
+const loadImageSize = (image) => {
+  return new Promise((resolve, reject) => {
+    //number indicates import X or require(X) was used (i.e. local file)
+    if (typeof image === 'number') {
+      const { width, height } = Image.resolveAssetSource(image);
+      resolve({ width, height });
+    } else {
+      Image.getSize(
+        image.uri,
+        (width, height) => {
+          // success
+          resolve({ width, height });
+        },
+        reject
+      );
+    }
+  });
+};
+
+export const getImageSizeFitWidthFromCache = (image, toWidth, maxHeight) => {
+  const size = getImageSizeFromCache(image);
+  if (size) {
+    const { width, height } = size;
+    if (!width || !height) return { width: 0, height: 0 };
+    const scaledHeight = (toWidth * height) / width;
+    return {
+      width: toWidth,
+      height: scaledHeight > maxHeight ? maxHeight : scaledHeight
+    };
+  }
+  return {};
+};
+
+const getImageSizeMaybeFromCache = async (image) => {
+  let size = getImageSizeFromCache(image);
+  if (!size) {
+    size = await loadImageSize(image);
+    if (typeof image === 'number') {
+      cache.set(image, size);
+    } else {
+      cache.set(image.uri, size);
+    }
+  }
+  return size;
+};
+
+export const getImageSizeFitWidth = async (image, toWidth, maxHeight) => {
+  const { width, height } = await getImageSizeMaybeFromCache(image);
+  if (!width || !height) return { width: 0, height: 0 };
+  const scaledHeight = (toWidth * height) / width;
+  return {
+    width: toWidth,
+    height: scaledHeight > maxHeight ? maxHeight : scaledHeight
+  };
+};

package/src/components/Avatar/AutoHeightImage/helpers.js

@@ -0,0 +1,2 @@
+export const NOOP = () => {};
+export const DEFAULT_HEIGHT = 0;

package/src/components/Avatar/AutoHeightImage/index.js

@@ -0,0 +1,97 @@
+///@see : https://github.com/vivaxy/react-native-auto-height-image
+import React, { useEffect, useState, useRef } from 'react';
+import ImagePolyfill from './ImagePolyfill';
+import AnimatableImage from './AnimatableImage';
+import PropTypes from 'prop-types';
+import { ActivityIndicator } from 'react-native-paper';
+import theme from "$theme";
+import View from "$ecomponents/View";
+import {defaultStr} from "$utils";
+
+import { getImageSizeFitWidth, getImageSizeFitWidthFromCache } from './cache';
+import { NOOP, DEFAULT_HEIGHT } from './helpers';
+
+const {...ImagePropTypes } = AnimatableImage.propTypes;
+
+function AutoHeightImage(props) {
+  const {
+    onHeightChange,
+    source,
+    width,
+    style,
+    maxHeight,
+    onError,
+    testID:cTestID,
+    ...rest
+  } = props;
+  const [height, setHeight] = useState(
+    getImageSizeFitWidthFromCache(source, width, maxHeight).height ||
+      DEFAULT_HEIGHT
+  );
+  const mountedRef = useRef(false);
+
+  useEffect(function () {
+    mountedRef.current = true;
+    return function () {
+      mountedRef.current = false;
+    };
+  }, []);
+
+  useEffect(
+    function () {
+      (async function () {
+        try {
+          const { height: newHeight } = await getImageSizeFitWidth(
+            source,
+            width,
+            maxHeight
+          );
+          if (mountedRef.current) {
+            // might trigger `onHeightChange` with same `height` value
+            // dedupe maybe?
+            setHeight(newHeight);
+            onHeightChange(newHeight);
+          }
+        } catch (e) {
+          if(onError){
+            onError(e);
+          }
+        }
+      })();
+    },
+    [source, onHeightChange, width, maxHeight]
+  );
+
+  // StyleSheet.create will cache styles, not what we want
+  const imageStyles = { width, height };
+  const testID = defaultStr(cTestID,"RN_AutoHeightImageComponent")
+  // Since it only makes sense to use polyfill with remote images
+  const ImageComponent = source.uri ? ImagePolyfill : AnimatableImage;
+  return (<View testID={testID+"_Container"} style={{flexDirection:'row'}}>
+      <ImageComponent
+        testID = {testID}
+        source={source}
+        style={[imageStyles, style]}
+        onError={onError}
+        {...rest}
+      />
+      {!mountedRef.current ? <ActivityIndicator testID={testID+"_ActivityIndicator"} color={theme.colors.primary}/> : null}
+  </View>
+  );
+}
+
+AutoHeightImage.propTypes = {
+  ...ImagePropTypes,
+  width: PropTypes.number.isRequired,
+  maxHeight: PropTypes.number,
+  onHeightChange: PropTypes.func,
+  animated: PropTypes.bool
+};
+
+AutoHeightImage.defaultProps = {
+  maxHeight: Infinity,
+  onHeightChange: NOOP,
+  animated: false
+};
+
+export default AutoHeightImage;

package/src/components/Avatar/Image.js

@@ -0,0 +1,115 @@
+import React from '$react';
+import {Image,StyleSheet,TouchableOpacity} from 'react-native';
+import PropTypes from "prop-types";
+import { StyleProp } from '$theme';
+import {defaultStr,isNumber,defaultNumber} from "$utils";
+import AutoHeightImage from "./AutoHeightImage";
+
+export const SIZE = 64;
+
+export const MIN_SIZE = 30;
+const isV = x=> isNumber(x) && x ? true : false;
+
+const AvatarImage = React.forwardRef(({
+  size = SIZE,
+  source,
+  style,
+  width,
+  height,
+  onError,
+  onLayout,
+  onLoad,
+  onLoadEnd,
+  onLoadStart,
+  onProgress,
+  testID,
+  imageProps,
+  rounded,
+  ...rest
+},ref) => {
+  imageProps = defaultObj(imageProps);
+  testID = defaultStr(testID,'RN_AvatarImageComponent');
+  const isRounded = rounded !== false ? true : false;
+  let borderRadius = 0;
+  const flattenedStyle = StyleSheet.flatten(style) || {};
+  width = width || flattenedStyle.width;
+  height = height || flattenedStyle.height;
+  if(isRounded && isV(size)){
+    width = height = size;
+    borderRadius = size / 2;
+  }
+  const hasImage = isV(width) && isV(height) && (isRounded || width === height);
+  const C = hasImage ? Image : AutoHeightImage;
+  if(!isV(width)){
+    width = defaultNumber(height,MIN_SIZE);
+  }
+  const cProps = !hasImage? {width,height} : {};
+  return (
+    <TouchableOpacity
+      ref = {ref}
+      testID = {testID}
+      style={[
+        isRounded && {
+          width,
+          height,
+          borderRadius,
+        },
+        flattenedStyle,
+      ]}
+      {...rest}
+    >
+      {typeof source === 'function' && source({ size })}
+      {typeof source !== 'function' && (
+        <C
+          testID={testID+"_Image"}
+          source={source}
+          {...cProps}
+          {...imageProps}
+          style={[
+            hasImage && { width,height,borderRadius},
+            //!hasImage &&  width && {width},
+          ]}
+          onError={onError}
+          onLayout={onLayout}
+          onLoad={onLoad}
+          onLoadEnd={onLoadEnd}
+          onLoadStart={onLoadStart}
+          onProgress={onProgress}
+        />
+      )}
+    </TouchableOpacity>
+  );
+});
+
+AvatarImage.displayName = 'Avatar.Image';
+
+AvatarImage.propTypes = {
+  rounded : PropTypes.bool,
+  source: PropTypes.oneOfType([
+    PropTypes.number,
+    PropTypes.string,
+    PropTypes.object,
+    PropTypes.func,
+  ]),
+  /**
+   * Size of the avatar.
+   */
+  size : PropTypes.number,
+  style : StyleProp,
+  onError : PropTypes.func,
+  onLayout : PropTypes.func,
+  onLoad : PropTypes.func,
+  onLoadEnd : PropTypes.func,
+  onLoadStart : PropTypes.func,
+  onProgress : PropTypes.func,
+  width : PropTypes.oneOfType([
+    //PropTypes.string,
+    PropTypes.number,
+  ]),
+  height : PropTypes.oneOfType([
+    //PropTypes.string,
+    PropTypes.number,
+  ])
+}
+
+export default AvatarImage;

package/src/components/Avatar/Text.js

@@ -0,0 +1,74 @@
+import React from '$react';
+import {Text,StyleSheet} from 'react-native';
+import View from "$ecomponents/View";
+import PropTypes from 'prop-types';
+import {Colors,StylePropTypes} from "$theme";
+import {defaultStr,defaultNumber} from "$utils";
+
+const defaultSize = 64;
+
+const AvatarTextComponent = (props) => {
+  const {
+    label : customLabel,
+    size : customSize,
+    containerProps : customContainerProps,
+    color : customColor,
+    labelStyle,
+    children,
+    style : customStyle,
+  } = props;
+  const containerProps = defaultObj(customContainerProps);
+  const size = defaultNumber(customSize,defaultSize);
+  const style = Object.assign({},StyleSheet.flatten(customStyle));
+  let label = defaultStr(customLabel,children);
+  if(!label) return null;
+  label = label.trim();
+  const color = Colors.isValid(customColor)? customColor : Colors.isValid(style.color)? style.color : undefined;
+  const words = label.split(" ");
+  let l = "";
+  for(let i in words){
+    if(l.length == 2) break;
+    if(words[i]){
+       words[i] = words[i].trim()
+       if(words[i][0]){
+         l+= words[i][0].toUpperCase();
+       }
+    }
+  }
+  const textContainerStyle = {
+    marginTop: -(size / 20),
+    height: size,
+    width: size,
+  };
+  return (
+    <View  pointerEvents='none' {...containerProps} style={[styles.container,style,containerProps.style,textContainerStyle,{borderRadius:size/2}]}>
+      { <Text
+        style={[{
+          color: color,
+          fontSize: size / 2.5,
+        }, labelStyle]}
+        adjustsFontSizeToFit={true}
+      >
+        {l}
+      </Text>}
+    </View>
+  );
+};
+
+AvatarTextComponent.propTypes = {
+  label: PropTypes.string,
+  size: PropTypes.number,
+  color: PropTypes.string,
+  labelStyle: PropTypes.object,
+  style: StylePropTypes,
+};
+
+const styles = StyleSheet.create({
+    container : {
+        flexDirection: 'column',
+        alignItems: 'center',
+        justifyContent: 'center',
+    }
+})
+
+export default AvatarTextComponent;

package/src/components/Avatar/index.js

@@ -0,0 +1,89 @@
+import { Avatar } from "react-native-paper";
+import {Colors} from "$theme"; 
+import {defaultDecimal,isNumber,defaultVal,isValid,defaultStr,defaultObj} from "$utils";
+import {StyleSheet} from "react-native";
+import React from "react";
+import Text from "./Text";
+import theme from "$theme";
+import AvatarImage from "./Image";
+
+const defaultSize = 40;
+
+/*** for more documentation 
+ * @see : https://callstack.github.io/react-native-paper/avatar-text.html
+ * @see : https://callstack.github.io/react-native-paper/avatar-image.html
+ * @see : https://callstack.github.io/react-native-paper/avatar-icon.html
+ * 
+ */
+const AvatarComponent = React.forwardRef((props,ref)=>{
+    let Component = undefined;
+    let {image,icon,testID,color,src,useSuffix,suffix,size,children,label,source,text,...rest} = props;
+    label = defaultVal(label,text,children);
+	if(typeof label =='number') label = label+"";
+    rest = defaultObj(rest);
+    size = defaultDecimal(size,defaultSize)
+    let cProps = {size};
+    if(source || image || src){
+        Component = AvatarImage;
+        cProps.source = source || {uri:src};
+    } else if(icon){
+        Component = Avatar.Icon;
+        cProps.icon = icon;
+    } else if(label){
+        cProps.label = label;
+        cProps.pointerEvents = "none";
+        cProps.labelStyle = StyleSheet.flatten(cProps.labelStyle) || {};
+        Component = Text;
+    }
+    if(!Component){
+        console.error("Error on avatar, components not defined using props",props,label);
+        return null;
+    }
+    if(React.isValidElement(icon)){
+        return icon
+    }
+
+    let style = StyleSheet.flatten([styles.container,cProps.style,rest.style,styles.center]);
+    const hasColor = Colors.isValid(color);
+    color = hasColor? color : Colors.isValid(style.color) ? style.color : undefined;
+    if((!color || useSuffix) && isNumber(suffix)){
+        style = [style,{...cProps,...Colors.getAvatarStyleFromSuffix(suffix)}];
+    } else if(hasColor){
+        style.backgroundColor = color;
+        style.color = Colors.getContrast(color);
+    }
+    return <Component
+        {...rest}
+        {...cProps}
+        ref={ref}
+        testID = {defaultStr(testID,"RN_AvatarComponent")}
+        style = {style}
+        size= {size}
+    />
+});
+
+AvatarComponent.displayName = "AvatarComponent";
+
+export default theme.withStyles(AvatarComponent,{
+    displayName : "AvatarComponent",
+    mode  : "contained",
+});
+
+const styles = StyleSheet.create({
+    container : {
+        paddingVertical : 0,
+        marginVertical : 0,
+    },
+    center : {
+        justifyContent : 'center',
+        paddingHorizontal:0,
+        paddingVertical : 0,
+        alignItems : 'center',
+        alignSelf:'center'
+    },
+})
+
+AvatarComponent.Text = Text;
+
+
+export {Text};

package/src/components/BackToTop/index.js

@@ -0,0 +1,89 @@
+import Fab from "$ecomponents/Fab";
+import {isObj,defaultStr,defaultVal,defaultObj} from "$utils";
+import React from "$react";
+import { StyleSheet } from 'react-native';
+import PropTypes from "prop-types";
+
+const SCREEN_INDENT = 20;
+export const isNativeScrollEvent = (nativeEvent)=>!isObj(nativeEvent) || !isObj(nativeEvent.layoutMeasurement) || !isObj(nativeEvent.contentOffset) ? false : true;
+export const canBackToTop = (nativeEvent,check) => {
+    if(check !== false && !isNativeScrollEvent(nativeEvent)) return false;
+    const {layoutMeasurement, contentOffset, contentSize} = nativeEvent;
+    return contentOffset.y >= layoutMeasurement.height+SCREEN_INDENT ? true : false || 
+        layoutMeasurement.height + contentOffset.y >=  contentSize.height - SCREEN_INDENT ? true : false;
+};
+
+export const toggleVisibility = (scrollEvent)=>{
+    const event = isObj(scrollEvent) && isNativeScrollEvent(scrollEvent.nativeEvent)? scrollEvent.nativeEvent : isNativeScrollEvent(scrollEvent)? scrollEvent : undefined;
+    if(!event) return undefined;
+    return canBackToTop(event,false);
+}
+
+const BackToTopComponent = React.forwardRef((props,ref)=>{
+    const isMounted = React.useIsMounted();
+    const {onPress,accessibilityLabel,onBackToTop,onVisibilityChange,position,icon,...rProps} = props;
+    const rest = defaultObj(rProps);
+    const [state,setState] = React.useStateIfMounted({
+        visible : false,
+    });
+    const open = ()=>{
+        if(!isMounted() || state.visible)return;
+        setState({...state,visible:true});
+    }
+    const close = ()=>{
+        if(!isMounted() || !state.visible)return;
+        setState({...state,visible:false});
+    }
+ 
+    const context = {open,close,
+        toggleVisibility:(event)=>{
+            if(!isMounted()) return;
+            let v = toggleVisibility(event);
+            if(typeof v =='boolean' && v !== state.visible){
+                return v ? open() : close();
+            }
+            return undefined;
+        }
+    };
+    
+    React.useEffect(()=>{
+        if(onVisibilityChange){
+            onVisibilityChange({context,visible});
+        }
+    },[state.visible])
+    const style = defaultStr(position).toLowerCase() =='right' ? {
+        right: 0
+    }  : {left : 0};
+    React.setRef(ref,context);
+    React.useEffect(()=>{
+        React.setRef(ref,context);
+    },[])
+    return !state.visible ? null :  <Fab
+        {...rest}
+        accessibilityLabel = {defaultStr(rest.accessibilityLabel,'Retour en haut')}
+        onPress = {(e)=>{
+            React.stopEventPropagation(e);
+            if(onPress){
+                onPress({...context,event:e});
+            } else if(onBackToTop){
+                onBackToTop({...context,e});
+            }
+        }}
+        icon = {defaultVal(icon,'arrow-up')}
+        style = {[rest.style,style]}
+    />
+});
+
+
+
+BackToTopComponent.propTypes = {
+    ...Fab.propTypes,
+    onBackToTop : PropTypes.func,
+    onPress : PropTypes.func,
+    /*** lorque la visibilité du boutton change si isVisible est positif, alors le contenu est scrollToTopé*/
+    onVisibilityChange : PropTypes.func,
+}
+
+export default BackToTopComponent;
+
+BackToTopComponent.displayName = "BackToTopComponent";