@fto-consult/expo-ui 1.0.4

package/src/components/PhoneInput/index.js

@@ -0,0 +1,217 @@
+import React from "$react";
+import {defaultObj,defaultStr,isNonNullString} from "$utils";
+import TextField from "$ecomponents/TextField";
+import { StyleSheet,Image,TouchableOpacity} from 'react-native';
+import PropTypes from "prop-types";
+import theme,{DISABLED_OPACITY} from "$theme";
+import {keyboardTypes,flatMode} from "$ecomponents/TextField";
+import Icon from "$ecomponents/Icon";
+import PhoneNumber from "./PhoneNumber";
+import SelectCountry from "$ecomponents/Countries/SelectCountry";
+import {getFlag} from "$ecomponents/Countries";
+import View from "$ecomponents/View";
+
+import libPhoneNumber from 'google-libphonenumber';
+const asYouTypeFormatter = libPhoneNumber.AsYouTypeFormatter;
+
+// eslint-disable-next-line class-methods-use-this
+export const format = (number, iso2) => {
+    const formatter = new asYouTypeFormatter(iso2); // eslint-disable-line new-cap
+    let formatted;
+    number.replace(/-/g, '')
+        .replace(/ /g, '')
+        .replace(/\(/g, '')
+        .replace(/\)/g, '')
+        .split('')
+        .forEach((n) => {
+            formatted = formatter.inputDigit(n);
+        });
+
+    return formatted;
+}
+const prepareState = ({defaultValue,country})=>{
+    defaultValue = defaultStr(defaultValue);
+    country = defaultStr(country);
+    if (defaultValue) {
+        if (defaultValue[0] !== '+') {
+            defaultValue = `+${defaultValue}`;
+        }
+        country = PhoneNumber.getCountryCodeOfNumber(defaultValue);
+        const displayValue = format(defaultValue,country);
+        if(displayValue){
+            return {displayValue,defaultValue,country}
+        }
+    } else if(country) {
+        const countryData = PhoneNumber.getCountryDataByCode(country);
+        return {displayValue:countryData ? `+${countryData.dialCode}` : '',defaultValue:'',country};
+    }
+    return {defaultValue:'',displayValue:'',country:''};
+}
+
+const  possiblyEliminateZeroAfterCountryCode = (number) => {
+    if(!isNonNullString(number)) return "";
+    const dialCode = PhoneNumber.getDialCode(number);
+    return number.startsWith(`${dialCode}0`)
+        ? dialCode + number.substr(dialCode.length + 1)
+        : number;
+}
+
+export default function PhoneInputComponent(props){
+    let {country,onChange,contentContainerProps,allowZeroAfterCountryCode,testID,inputProps,selectionColor,label,error,errorText,helperText,defaultValue,text,setRef,...rest} = props;
+    rest = defaultObj(rest);
+    contentContainerProps = defaultObj(contentContainerProps);
+    contentContainerProps.style = [styles.inputContainer,contentContainerProps.style];
+    const ref = React.useRef(null);
+    const [state,setState] = React.useStateIfMounted({
+        visible : false,
+        ...prepareState({defaultValue,country})
+    })
+    const prevVisible = React.usePrevious(state.visible);
+    label = defaultVal(label,text);
+    React.useEffect(()=>{
+        React.setRef(ref,ref.current,setRef);
+        setState({...state})
+    },[])
+    React.useEffect(()=>{
+        const nState = prepareState({defaultValue,country});
+        if(nState.defaultValue !== state.defaultValue && nState.country !== state.country){
+            setState({...state,...nState});
+        }
+    },[defaultValue,country])
+    const onPressFlag = (e)=>{
+        if(!state.visible){
+            setState({...state,visible:true})
+        }
+    }
+    inputProps = defaultObj(inputProps);
+    const disabledStyle = props.disabled ?{opacity:DISABLED_OPACITY}:undefined; 
+    const flagImageSource = getFlag(state.country);
+    const getValue = (text) => {
+        return isNonNullString(text) ? text.replace(/[^0-9]/g, '') : defaultStr(state.defaultValue);
+    }
+    
+    const updateValue = (number) => {
+        let modifiedNumber = getValue(number);
+
+        if (modifiedNumber[0] !== '+' && number.length) {
+            modifiedNumber = `+${modifiedNumber}`;
+        }
+        modifiedNumber = allowZeroAfterCountryCode
+            ? modifiedNumber
+            : possiblyEliminateZeroAfterCountryCode(modifiedNumber);
+        const iso2 = PhoneNumber.getCountryCodeOfNumber(modifiedNumber);
+    
+        let countryDialCode;
+        if (iso2) {
+            const countryData = PhoneNumber.getCountryDataByCode(iso2);
+            countryDialCode = countryData.dialCode;
+        }
+    
+        let displayValue;
+        if (modifiedNumber === `+${countryDialCode}`) {
+            displayValue = modifiedNumber;
+        } else {
+            displayValue = format(modifiedNumber);
+        }
+        const nState = {
+            country : iso2,
+            displayValue,
+            defaultValue : modifiedNumber,
+        }
+        setState(nState);
+        return nState;
+    }
+    const pointerEvents = props.disabled || props.editable === false || props.readOnly ? "none":"auto";
+    const isFlatMode = theme.textFieldMode === flatMode;
+    testID = defaultStr(testID,"RN_PhoneInputComponent");
+    return <SelectCountry
+        label = {label}
+        controlled = {true}
+        visible = {state.visible}
+        defaultValue = {state.country}
+        testID = {testID+"_SelectCountry"}
+        onDismiss = {({value},force) =>{
+            if(force !== true && value === state.country && state.visible == prevVisible) return;
+            setState({...state,...prepareState({country:value,defaultValue:state.country==value?state.defaultValue:""}),visible:false})
+        }}
+        anchor = {
+            <>
+                <TextField
+                    {...rest}
+                    testID = {testID}
+                    error = {error}
+                    errorText = {errorText}
+                    helperText = {helperText}
+                    contentContainerProps = {contentContainerProps}
+                    label = {label}
+                    accessibilityLabel = {defaultStr(label,text)}
+                    formatValue = {false}
+                    disabled = {props.disabled}
+                    pointerEvents = {pointerEvents}
+                    left = {
+                        <TouchableOpacity testID={testID+"_Left"} style={[styles.flag,disabledStyle,!isFlatMode && styles.notFlatModeFlag]}
+                            accessibilityRole="button"
+                            disabled = {props.disabled}
+                            pointerEvents = {pointerEvents}
+                            onPress={onPressFlag}
+                        >
+                            <>
+                                {flagImageSource && <Image testID={testID+"_FlagImage"} source={flagImageSource} height={20} width={30} style={[styles.flagImage]} />}
+                                <Icon testID={testID+"_FlagChevronIcon"} name="chevron-down" size={16} style={[styles.flagIcon]} onPress={onPressFlag} />
+                            </>
+                        </TouchableOpacity>
+                    }
+                    keyboardType ={keyboardTypes.number}
+                    defaultValue = {state.displayValue}
+                    onChange = {({value:nValue})=>{
+                        const prevState = state;
+                        const nState = updateValue(nValue);
+                        if(prevState.defaultValue === nState.defaultValue || (prevState.defaultValue.length <= 3 && nState.defaultValue.length <= 3)) return;
+                            let value = nState.displayValue;
+                            if(value.length <=3){
+                                value = "";
+                            }
+                            if(prevState.defaultValue === value) return;
+                            if(onChange){
+                                onChange({value,country:nState.country,displayValue:nState.displayValue,realValue:nState.defaultValue})
+                            }
+                    }}
+                    ref = {ref}
+                    style = {[props.style,inputProps.style,disabledStyle]}
+                />
+            </>
+        }
+    />
+}
+
+const styles = StyleSheet.create({
+    notFlatModeFlag : {
+        marginLeft : 7,
+    },
+    flagImage : {
+        borderWidth:0,
+        width : 30,
+        height : 20,
+        marginLeft : 10
+    },
+    flagIcon : {
+        marginRight : 4,
+        marginLeft : -3
+    },
+    flag : {
+        width : 50,
+        flexDirection : "row",
+        alignItems : 'center',
+        justifyContent : 'center'
+    },
+    inputContainer : {
+        paddingVertical : 5,
+        paddingHorizontal : 0,
+    }
+})
+
+PhoneInputComponent.propTypes = {
+    onChange : PropTypes.func,
+    autoFormat : PropTypes.bool, //si le texte de telephone sera formatté automatiquement
+    allowZeroAfterCountryCode : PropTypes.bool,
+}

package/src/components/PhoneInput/numberType.json

@@ -0,0 +1,14 @@
+{
+  "FIXED_LINE": 0,
+  "MOBILE": 1,
+  "FIXED_LINE_OR_MOBILE": 2,
+  "TOLL_FREE": 3,
+  "PREMIUM_RATE": 4,
+  "SHARED_COST": 5,
+  "VOIP": 6,
+  "PERSONAL_NUMBER": 7,
+  "PAGER": 8,
+  "UAN": 9,
+  "VOICEMAIL": 10,
+  "UNKNOWN": -1
+}

package/src/components/PhoneInput/styles.js

@@ -0,0 +1,52 @@
+import { StyleSheet, Dimensions } from 'react-native';
+
+const { width } = Dimensions.get('window');
+
+const SCREEN_WIDTH = width;
+
+export default StyleSheet.create({
+    container: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'center',
+    // borderWidth:1,
+    },
+    mainBox: {
+
+    },
+    basicContainer: {
+        flex: 1,
+        justifyContent: 'flex-end',
+        alignItems: 'center',
+    },
+    modalContainer: {
+        width: SCREEN_WIDTH,
+        justifyContent: 'center',
+        alignItems: 'center',
+        padding: 0,
+    },
+    buttonView: {
+        width: SCREEN_WIDTH,
+        padding: 8,
+        borderTopWidth: 0.5,
+        borderTopColor: 'lightgrey',
+        justifyContent: 'space-between',
+        flexDirection: 'row',
+    },
+    bottomPicker: {
+        width: SCREEN_WIDTH,
+    },
+    flag: {
+        height: 20,
+        width: 30,
+        borderRadius: 2,
+        borderWidth: 0.5,
+        borderColor: '#cecece',
+        backgroundColor: '#cecece',
+    },
+    text: {
+        height: 20,
+        padding: 0,
+        justifyContent: 'center',
+    },
+});

package/src/components/Portal/index.js

@@ -0,0 +1,5 @@
+import { Portal } from "@gorhom/portal";
+
+export * from "@gorhom/portal";
+
+export default Portal;

package/src/components/Preloader/index.js

@@ -0,0 +1,227 @@
+import {ActivityIndicator} from "react-native";
+import Dialog from "$ecomponents/Dialog";
+import {defaultVal,isObj,defaultBool,defaultObj,isObjOrArray,defaultStr,uniqid} from "$utils";
+import Label from "$ecomponents/Label";
+import {StyleSheet} from "react-native";
+import View from "$ecomponents/View";
+import PropTypes from "prop-types";
+import React,{ createContext} from "$react";
+import {isIos} from "$cplatform";
+import theme,{Colors} from "$theme";
+
+export const PRELOADERS = {};
+
+const MAIN_PRELOADER_ID = uniqid("main-preloader-id");
+
+const statesProps = ['visible','content','footer','title'];
+
+const PreloaderContext = createContext(null);
+
+export const usePreloader = ()=> defaultObj(React.useContext(PreloaderContext), {subscribe,unsubscribe});
+
+const PreloaderComponent = React.forwardRef((props,ref)=>{
+    let {content,children,title,visible:customVisible,right,indicatorProps,id,preloaderId:customPreloaderId,contentProps,actions,footer,...rest} = props;
+    const [state,setState] = React.useState({
+        visible : defaultBool(customVisible,true),
+        visibleKey : false,
+    });
+    const {visible} = state;
+    const isMounted = React.useIsMounted();
+    const setVisible = (visible)=>{
+        if(!isMounted()) return;
+        return setState({...state,visible,visibleKey:!state.visibleKey})
+    }
+    const [context] = React.useState({});
+    const titleRef = React.useRef(title);
+    if(titleRef.current !== false){
+        title = titleRef.current;
+    }
+    titleRef.current = false;
+    const contentRef = React.useRef(defaultVal(children,content));
+    const footerRef = React.useRef(footer);
+    if(isObjOrArray(footerRef.current)){
+        footer = footerRef.current;
+    }
+    footerRef.current = null;
+    
+    content = defaultVal(contentRef.current,content,children,defaultContent)
+    contentProps = defaultObj(contentProps);
+    indicatorProps = defaultObj(indicatorProps);
+    indicatorProps.size = defaultVal(indicatorProps.size,isIos()?'large':48);
+    indicatorProps.style = [indicatorProps.style,right?styles.indicatorRight:styles.indicatorLeft];
+    indicatorProps.color = Colors.isValid(indicatorProps.color)? indicatorProps.color : theme.colors.primary;
+    const preloaderId = React.useRef(defaultStr(id,customPreloaderId,uniqid("preloader-ido-dynamic"))).current;
+    const {subscribe,unsubscribe} = usePreloader();
+    context.dialogRef = React.useRef(null);
+    context.close = ()=>{
+        setVisible(false);
+    }
+    context.open = (args)=>{
+        if(!isMounted()) {
+            return;
+        }
+        const arg = getProps(args);
+        contentRef.current = defaultVal(arg.content,arg.children);
+        if("footer" in arg){
+            footerRef.current = arg.footer;
+        }
+        if("title" in arg){
+            titleRef.current = arg.title;
+        }
+        setVisible(true);
+    }
+    context.isOpen = context.isVisible = ()=> visible;
+    context.isClosed = x => !context.isOpen();
+    React.useEffect(()=>{
+        if(typeof customVisible ==='boolean' && customVisible !== visible){
+            setVisible(customVisible);
+        }
+    },[props]);
+    React.setRef(ref,context);
+    subscribe(preloaderId,context);
+    React.useEffect(()=>{
+        return ()=>{
+            React.setRef(ref,null);
+            unsubscribe(preloaderId);
+        }
+    },[]);
+    return <Dialog 
+                animate = {false}
+                overlayProps = {{elevation:5}}
+                {...defaultObj(rest)}
+                actions={defaultVal(footer,actions)} 
+                dismissable={false} 
+                visible={visible} 
+                title={title} 
+                contentProps = {{elevation:0}}
+                fullScreen = {false}
+                ref = {context.dialogRef}
+                isPreloader
+            >
+            <View style={[styles.container]}>
+                {!right ? <ActivityIndicator {...indicatorProps}/>:null}
+                {content ? <Label {...contentProps} style={[styles.text,contentProps.style]}>{content}</Label> : null}
+                {right ? <ActivityIndicator {...indicatorProps}/> : null}
+            </View>    
+        </Dialog>
+});
+const styles = StyleSheet.create({
+    container : {
+        flexDirection:'row',
+        alignItems : 'center',
+        justifyContent : 'center',
+        paddingVertical : 15,
+        paddingHorizontal : 20,
+    },
+    text : {
+        marginLeft:20
+    },
+    content : {},
+    indicatorLeft : {
+        //marginRight : 16,
+    },
+    indicatorRight : {
+        //marginLeft : 16,
+    }
+})
+
+PreloaderComponent.propTypes= {
+    right : PropTypes.bool, //si l'activity indicator sera à la position droite
+    footer : PropTypes.oneOfType([
+        PropTypes.array,
+        PropTypes.object,
+    ]),
+    ///lorsque le contenu enfant est définit, alors le preloader sera chargé en pleinne page
+    children : PropTypes.any,
+    visible : PropTypes.bool,
+    onOpen : PropTypes.func,
+    onClose : PropTypes.func
+}
+export default PreloaderComponent;
+
+PreloaderComponent.displayName = "PreloaderComponent";
+
+export const subscribe = (preloaderId,context)=>{
+    PRELOADERS[preloaderId] = context;
+}
+export const unsubscribe = (preloaderId)=>{
+    delete PRELOADERS[preloaderId];
+}
+
+export const defaultContent = PreloaderComponent.defaultContent = "chargement...";
+
+export function PreloaderProvider({ children }) {
+    React.useEffect(()=>{
+        return ()=>{ unlinkPreloader();}
+    },[])
+    return (<PreloaderContext.Provider value={{subscribe,unsubscribe}}>
+        <PreloaderComponent id={MAIN_PRELOADER_ID} visible = {false}/>
+        {children}
+    </PreloaderContext.Provider>);
+}
+
+const unlinkPreloader = x=> {
+    for(let i in PRELOADERS){
+        delete PRELOADERS[i];
+    };
+    return PRELOADERS;
+}
+
+
+const getProps = (arg,reset)=>{
+    let s = {};
+    if(typeof arg ==="boolean"){
+        s = {visible:arg}
+    } else if(React.isValidElement(arg,true)){
+        s = {content:arg};
+    } else if(isObj(arg)){
+        s = arg;
+    }
+    if(reset !== false){
+        statesProps.map(k=>{
+            if(k !=='visible' && !s.hasOwnProperty(k)){
+                s[k] = null;
+            }
+        })
+    }
+    return s;
+}
+
+export function isVisible  (){
+    for(let i in PRELOADERS){
+        if(PRELOADERS[i] && PRELOADERS[i].isOpen()) return true;
+    }
+    return false;
+}
+export const isOpen = isVisible;
+
+export function show  (args){
+    const preloader = PRELOADERS[MAIN_PRELOADER_ID];
+    if(preloader){
+        return preloader.open(args)
+    }
+    return false;
+}
+
+export const open = PreloaderComponent.open  = PreloaderComponent.show = show;
+
+export const hide = (all)=>{
+    const preloader = PRELOADERS[MAIN_PRELOADER_ID];
+    if(preloader){
+        return preloader.close();
+    }
+    return null;
+}
+
+export const close = PreloaderComponent.close = PreloaderComponent.hide = hide;
+
+
+export const closeAll = PreloaderComponent.hideAll = PreloaderComponent.closeAll = ()=>{
+    Object.map(PRELOADERS,(p,id)=>{
+        if(isObj(p) && p.close){
+            p.close();
+        }
+    })
+};
+
+export const hideAll = closeAll;

package/src/components/Progress/LoadingDots.js

@@ -0,0 +1,126 @@
+import React from 'react'
+import {  StyleSheet, Animated, Easing } from 'react-native';
+import View from "$ecomponents/View";
+import {isNativeMobile} from "$cplatform"; //boris fouomene
+const useNativeDriver = isNativeMobile();
+const SIZE = 16
+const MARGIN = 5
+const BG = 'rgb(172, 172, 172)'
+const ACTIVE_BG = '#808184'
+const dots = [1, 2, 3]
+const INTERVAL = 300
+const ANIMATION_DURATION = 400
+const ANIMATION_SCALE = 1.4
+export default class ThreeDotsLoader extends React.Component {
+  state = {
+    active: 1
+  }
+
+  componentDidMount(){
+    this.interval = setInterval(() => {
+      const active = this.state.active
+      this.setState({ active: active > 2 ? 1 : active + 1})
+    }, INTERVAL);
+  }
+
+  componentWillUnmount(){
+    clearInterval(this.interval)
+  }
+
+  render() {
+  /*** update by boris Fouomene to fix react warning : every child must have an unique key :
+   * Warning: Each child in a list should have a unique "key" prop.
+   */
+  const active = this.state.active
+   return (
+     <View style={styles.main}>
+       {dots.map(i => <Dot {...this.props} key={i} active={i === active}/>)}
+     </View>
+   )
+  }
+}
+
+class Dot extends React.Component {
+  static defaultProps = {
+    size: SIZE,
+    background: BG,
+    activeBackground: ACTIVE_BG,
+    dotMargin: MARGIN,
+    animationDuration: ANIMATION_DURATION,
+    animationScale: ANIMATION_SCALE,
+  }
+
+  constructor(props) {
+    super(props)
+    this.scale = new Animated.Value(1)
+  }
+
+  componentDidMount(){
+    if (this.props.active) this.scaleUp()
+  }
+
+  componentDidUpdate(prevProps){
+    if (prevProps.active && !this.props.active){
+      this.scaleDown()
+    }
+    if (!prevProps.active && this.props.active){
+      this.scaleUp()
+    }
+  }
+
+  scaleDown = () => {
+    Animated.timing(
+      this.scale,
+      {
+        toValue: 1,
+        easing : this.props.easing,
+        duration: this.props.animationDuration,
+        delay : this.props.delay,
+        useNativeDriver,
+      }
+    ).start((o) => {
+      if(o.finished) {
+        this.scaleDown();
+      }
+    })
+  }
+
+  scaleUp = () => {
+    Animated.timing(
+      this.scale,
+      {
+        toValue: this.props.animationScale,
+        easing : this.props.easing,
+        duration: this.props.animationDuration,
+        delay : this.props.delay,
+        useNativeDriver
+      }
+    ).start((o) => {
+      if(o.finished) {
+        this.scaleUp();
+      }
+    })
+  }
+
+  render(){
+    const { active, size, background, activeBackground, dotMargin } = this.props
+    const style = {
+      height: size, 
+      width: size,
+      borderRadius: size / 2,
+      marginHorizontal: dotMargin,
+      backgroundColor: active ? activeBackground : background
+    }
+    return (
+      <Animated.View style={[style, {transform: [{ scale: this.scale }]}]}/>
+    )
+  }
+}
+
+const styles = StyleSheet.create({
+  main: {
+    flexDirection: 'row',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+})

package/src/components/Progress/index.js

@@ -0,0 +1,18 @@
+/****@see : https://www.npmjs.com/package/react-native-indicators */
+export * from 'react-native-indicators'
+
+
+/*** for usage, @see : https://www.npmjs.com/package/react-native-three-dots-loader */ 
+/**** usage : 
+ *  Prop	Description
+    size	Dot size
+    background	Dot background
+    activeBackground	Active dot background
+    dotMargin	Dots horizontal margin
+    animationDuration	Scale animation duration
+    animationScale	Maximum scale
+ *  
+ */
+import LoadingD from "./LoadingDots";
+export const LoadingDots = LoadingD;
+export const ThreeDots = LoadingD;