@fto-consult/expo-ui 1.0.4

package/src/components/Menu/utils.js

@@ -0,0 +1,81 @@
+import Divider from "$ecomponents/Divider";
+import {defaultObj,defaultFunc,defaultStr,isObjOrArray,defaultVal,isObj} from "$utils";
+import React from "$react";
+import {StyleSheet} from "react-native";
+import Action from '$ecomponents/Form/Action';
+import Expandable from "$ecomponents/Expandable";
+import {cursorPointer} from "$theme";
+import Item from "./Item";
+
+
+export const renderItems = (props)=>{
+    let _items = [];
+    let {items,renderItem,testID,isBottomSheetItem,onPressItem,filter,closeOnPressItem,openMenu,closeMenu,itemProps} = props;
+    itemProps = defaultObj(itemProps);
+    testID = defaultStr(testID,"RN_MenuComponents.Items")
+    filter = defaultFunc(filter,x=> true);
+    Object.map(items,(item,index,_index)=>{
+        if(!isObj(item) || React.isValidElement(item) || !filter({items,item,_index,index})) return null;
+        if(item.divider === true && !item.title && !item.text && !item.label && !item.icon){
+            _items.push(<Divider testID={testID+"_Divider"+index} {...item} key={index}/>);
+            return
+        }
+        let {onPress,isFormAction,title,text,label,children,closeOnPress,items:itemItems,...rest} = item;
+        let Component = Item;
+        rest = defaultObj(rest);
+        if(isFormAction){
+            rest.Component = Item;
+            Component = Action;
+            rest.isMenuItem = true;
+        }
+        let itemsR = isObjOrArray(itemItems)? renderItems({closeOnPress,testID:testID+index+".Items"+index+".Items",...props,closeOnPress:defaultVal(closeOnPress,props.closeOnPress,undefined),onPressItem,renderItem,items:itemItems}) : null;
+        if(!Array.isArray(itemsR) || !itemsR.length){
+            itemsR = null;
+        }
+        title = defaultVal(title,text,label,children);
+        let _render = null;
+        if(itemsR){
+             _render = <Expandable testID={testID+index+"_Expandable"} {...itemProps} {...rest} title={title} key={index}>
+                {itemsR}
+            </Expandable>
+        } else {
+            const itProps = {
+                ...itemProps,
+                testID : testID+index,
+                ...rest,
+                title,
+                label : title,
+                onPress : (args)=>{
+                    if((props.closeOnPress !== false && closeOnPress !== false && closeOnPressItem !== false && closeMenu)) {
+                       closeMenu();
+                    }
+                    const ag = {closeMenu,openMenu,fromMenu:true,item,title,label,...React.getOnPressArgs(args),index,_index};
+                    if(onPressItem){
+                        onPressItem(ag);
+                    }
+                    if(onPress){
+                        onPress(ag)
+                    }
+                },
+                index,
+                _index,
+            };
+           itProps.titleStyle = [StyleSheet.flatten(itemProps.style),StyleSheet.flatten(rest.style),cursorPointer];
+            
+           if(typeof renderItem ==='function'){
+               _render = renderItem(itProps);
+           } else {
+             if(title  || itProps.icon){
+                _render = <Component testID={testID+"_"+index} {...itProps} isBottomSheetItem={isBottomSheetItem} title={title} key={index}/>
+             }
+           }
+        }
+        if(React.isValidElement(_render)){
+            _items.push(_render);
+            if(item.divider === true){
+                _items.push(<Divider testID={testID+"_DividerItem"+index} {...item} key={index+"divider"}/>);
+            }
+        }
+    });
+    return _items;
+}

package/src/components/Modal/index.js

@@ -0,0 +1,212 @@
+import React from "$react";
+import {
+  BackHandler,
+  StyleSheet,
+  View,
+  TouchableWithoutFeedback,
+  Animated,
+} from 'react-native';
+import PropTypes from "prop-types";
+import theme,{StyleProp} from "$theme";
+//import Animated  from "react-native-reanimated";
+//import Animation,{OpacityAnimation} from "$ecomponents/Animations";
+import OpacityAnimation from "$ecomponents/Animations/OpacityAnimation";
+import { Platform } from "react-native";
+import {isWeb} from "$cplatform";
+import {isAndroid} from "$cplatform";
+import Portal from "$ecomponents/Portal";
+import {
+  getStatusBarHeight,
+  getBottomSpace,
+} from 'react-native-iphone-x-helper';
+
+import {defaultObj} from "$utils";
+
+const TOP_INSET = getStatusBarHeight(true);
+const BOTTOM_INSET = getBottomSpace();
+
+const ModalComponent = React.forwardRef((props,ref)=>{
+    let  {
+        dismissable = true,visible = false,
+        overlayAccessibilityLabel = 'Close modal',
+        backdropProps,
+        onPressOut,
+        onPressIn,
+        onLongPress,
+        contentContainerProps,
+        animationType,
+        animationDuration,
+        animationPosition,
+        contentContainerRef,
+        onShow,
+        animate,
+        onDismiss,
+        isPreloader,
+        children,
+        ...rest
+      } = props;
+      rest = defaultObj(rest);
+    contentContainerProps = defaultObj(contentContainerProps);
+    backdropProps = defaultObj(backdropProps);
+    const subscription = React.useRef(null);
+    const handleBack = React.useCallback((e)=>{
+      if (dismissable) {
+        hideModal(e);
+      }
+      return true;
+    },[dismissable])
+    const removeListeners = ()=>{
+      if (subscription.current?.remove) {
+        subscription.current.remove();
+      } else {
+        BackHandler.removeEventListener('hardwareBackPress', handleBack);
+      }
+    }
+    const addListener = ()=>{
+      removeListeners();
+      subscription.current = React.addEventListener(
+        BackHandler,
+        'hardwareBackPress',
+        handleBack
+      );
+    }
+    const hideModal = (e)=>{
+      removeListeners();
+      if(onDismiss){
+        onDismiss(e);
+      }
+    }
+    React.useEffect(()=>{
+      addListener();
+       return ()=>{
+         removeListeners();
+       }
+    },[]);
+    const callback = React.useCallback((e) => {
+      //console.log(e," is animation callback, ",visible);
+    },[onDismiss, onShow, visible]);
+    const prevVisible = React.usePrevious(visible);
+    React.useEffect((e) => {
+      if(visible){
+        addListener();
+      } else {
+        removeListeners();
+      }
+      setTimeout(()=>{
+        if(prevVisible.current ===visible) return;
+        if(visible){
+           if(onShow){
+            onShow();
+           }
+        }
+      },100);
+    },[visible]);
+    const Anim = animate !== false ? OpacityAnimation  : View;
+    const wrapperProps = animate !== false ? {enteringCallback:callback,exitingCallback:callback} : {};
+    return !visible?null: <Portal>
+      <Animated.View
+        ref={ref}
+        testID={'RN__ModalComponent'}
+        {...rest}
+        pointerEvents={visible ? 'auto' : 'none'}
+        accessibilityViewIsModal
+        accessibilityLiveRegion="polite"
+        onAccessibilityEscape={hideModal}
+        style = {[styles.modal,rest.style]}
+      >
+          <TouchableWithoutFeedback
+            accessibilityLabel={overlayAccessibilityLabel}
+            accessibilityRole="button"
+            disabled={!dismissable}
+            onPress={dismissable ? hideModal : undefined}
+            importantForAccessibility="no"
+            testID="RN__ModalComponent__backdrop_Container"
+          >
+            <View
+              testID="RN__ModalComponent__backdrop"
+              {...backdropProps}
+              style={[
+                styles.backdrop,
+                {backgroundColor:theme.colors.backdrop},
+                backdropProps.style,
+              ]}
+            />
+          </TouchableWithoutFeedback>
+          <Anim testID="RN__ModalComponent__ContentContainer"
+              {...contentContainerProps}
+              {...wrapperProps}
+              animationType = {animationType}
+              animationDuration = {animationDuration}
+              animationPosition = {animationPosition}
+              ref = {contentContainerRef}
+              style={[styles.contentContainer,{ marginTop: TOP_INSET, marginBottom: BOTTOM_INSET },contentContainerProps.style]}
+              pointerEvents="box-none"
+          >
+            {children}  
+          </Anim>
+      </Animated.View>
+    </Portal>
+});
+
+
+const styles = StyleSheet.create({
+  modal : {
+    ...StyleSheet.absoluteFillObject,
+  },
+  backdrop: {
+    flex: 1,
+  },
+  contentContainer: {
+    ...StyleSheet.absoluteFillObject,
+    alignItems : 'center',
+    justifyContent : 'center',
+    flex : 1,
+    alignSelf : 'center',
+    ...Platform.select({
+      android: {
+        elevation: 2,
+      },
+      default: {
+        shadowColor: 'rgba(0, 0, 0, .3)',
+        shadowOffset: { width: 0, height: 1 },
+        shadowRadius: 4,
+      },
+    }),
+  },
+  hidden : {opacity:0},
+});
+
+ModalComponent.displayName = 'ModalComponent';
+
+export default ModalComponent;
+
+ModalComponent.propTypes = {
+    /**
+   * Determines whether clicking outside the modal dismiss it.
+   */
+  dismissable : PropTypes.bool,
+  /**
+   * Callback that is called when the user dismisses the modal.
+   */
+  onDismiss : PropTypes.func,
+  onShow : PropTypes.func,
+  /**
+   * Accessibility label for the overlay. This is read by the screen reader when the user taps outside the modal.
+   */
+  overlayAccessibilityLabel : PropTypes.string,
+  /**
+   * Determines Whether the modal is visible.
+   */
+  visible: PropTypes.bool,
+  /**
+   * Content of the `Modal`.
+   */
+  children : PropTypes.node,
+  /**
+   * Style for the contentContainer of the modal.
+   * Use this prop to change the default contentContainer style or to override safe area insets with marginTop and marginBottom.
+   */
+  style : StyleProp,
+  animate : PropTypes.bool,
+  backdropProps : PropTypes.object,
+}

package/src/components/NewLine/index.js

@@ -0,0 +1,4 @@
+import {Text} from "react-native"
+export default function BrComponent(props){
+    return <Text>{"\n"}{props.children|| null}</Text>
+}

package/src/components/NewLine/index.web.js

@@ -0,0 +1,3 @@
+export default function BrComponent(props){
+    return <><br/>{props.children|| null}</>
+}

package/src/components/Paragraph/index.js

@@ -0,0 +1,32 @@
+import React from "$react";
+import { Paragraph } from "react-native-paper";
+import {canTextBeSelectable} from "$cplatform";
+import {defaultObj,defaultStr,defaultNumber} from "$utils";
+import PropTypes from "prop-types";
+import theme from "$theme";
+
+const defaultSelectable = canTextBeSelectable();
+
+function ParagraphComponent({splitText,...props}){
+    props = defaultObj(props);
+    const restProps = {};
+    if(splitText){
+        restProps.numberOfLines = defaultNumber(props.numberOfLines,2);
+        restProps.ellipsizeMode = defaultStr(props.ellipsizeMode,'tail');
+    }
+    return <Paragraph
+        selectable = {defaultSelectable}
+        {...props}
+        {...restProps}
+    />
+}
+
+ParagraphComponent.propTypes = {
+    ...defaultObj(Paragraph.propTypes),
+    numberOfLines : PropTypes.number,
+    splitText : PropTypes.bool,
+}
+
+export default theme.withStyles(ParagraphComponent,{
+    mode : "normal"
+});

package/src/components/PasswordText/index.js

@@ -0,0 +1,29 @@
+import React from "$react";
+import {defaultObj} from "$utils";
+import { Text } from "react-native-paper";
+import {DISABLED_OPACITY} from "$theme";
+import {defaultStr} from "$utils";
+const PassWordTextComponent = React.forwardRef((props,ref)=>{
+    const {children,label,text,...rest} = props;
+    const l = defaultStr(children,label,text);
+    let counter = 0,ret = "";
+    while(counter < l.length){
+        ret+="."
+        counter++;
+    }
+    return <Text
+        {...defaultObj(rest)}
+        style = {[props.style,props.disabled ? {opacity:DISABLED_OPACITY} : undefined]}
+        ref = {ref}
+    >
+        {ret}
+    </Text>
+})
+
+export default PassWordTextComponent;
+
+PassWordTextComponent.propTypes = {
+    ...defaultObj(Text.propTypes)
+}
+
+PassWordTextComponent.displayName = "PassWordTextComponent";

package/src/components/PhoneInput/PhoneNumber.js

@@ -0,0 +1,121 @@
+import _ from 'lodash';
+import libPhoneNumber from 'google-libphonenumber';
+
+import Country from './country';
+import numberType from './numberType.json'; // eslint-disable-line @typescript-eslint/no-unused-vars
+
+const phoneUtil = libPhoneNumber.PhoneNumberUtil.getInstance();
+const asYouTypeFormatter = libPhoneNumber.AsYouTypeFormatter;
+
+
+export const parse = (number,iso2)=>{
+    try {
+        return phoneUtil.parse(number, iso2);
+    } catch (err) {
+        console.log(`Exception was thrown on parsing phone number : ${err.toString()}`);
+        return null;
+    }
+}
+
+export const isValidNumber = (number,iso2)=>{
+    const phoneInfo = parse(number, iso2);
+    if (phoneInfo) {
+        return phoneUtil.isValidNumber(phoneInfo);
+    }
+    return false;
+}
+
+class PhoneNumber {
+    // eslint-disable-next-line class-methods-use-this
+    getAllCountries() {
+        return Country.getAll();
+    }
+
+    getDialCode(number) {
+        let dialCode = '';
+        // only interested in international numbers (starting with a plus)
+        if (number.charAt(0) === '+') {
+            let numericChars = '';
+            // iterate over chars
+            for (let i = 0; i < number.length; i++) {
+                const c = number.charAt(i);
+                // if char is number
+                if (this.isNumeric(c)) {
+                    numericChars += c;
+                    // if current numericChars make a valid dial code
+                    // if (this.countryCodes[numericChars]) {
+                    if (Country.getCountryCodes()[numericChars]) {
+                        // store the actual raw string (useful for matching later)
+                        dialCode = number.substr(0, i + 1);
+                    }
+                    // longest dial code is 4 chars
+                    if (numericChars.length === 4) {
+                        break;
+                    }
+                }
+            }
+        }
+        return dialCode;
+    }
+
+    // eslint-disable-next-line class-methods-use-this
+    getNumeric(str) {
+        return str.replace(/\D/g, '');
+    }
+
+    // eslint-disable-next-line class-methods-use-this
+    isNumeric(n) {
+        return !Number.isNaN(parseFloat(n)) && Number.isFinite(Number(n));
+    }
+
+    getCountryCodeOfNumber(number) {
+        const dialCode = this.getDialCode(number);
+        const numeric = this.getNumeric(dialCode);
+        const countryCode = Country.getCountryCodes()[numeric];
+
+        // countryCode[0] can be null -> get first element that is not null
+        if (countryCode) {
+            return _.first(countryCode.filter((iso2) => iso2));
+        }
+
+        return '';
+    }
+
+    // eslint-disable-next-line class-methods-use-this
+    parse(number, iso2) {
+        return parse(number,iso2);
+    }
+
+    isValidNumber(number, iso2) {
+        return this.isValidNumber(number,iso2);
+    }
+
+    // eslint-disable-next-line class-methods-use-this
+    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;
+    }
+
+    getNumberType(number, iso2) {
+        const phoneInfo = this.parse(number, iso2);
+        const typeIndex = phoneInfo ? phoneUtil.getNumberType(phoneInfo) : -1;
+        return _.findKey(numberType, (noType) => noType === typeIndex);
+    }
+
+    // eslint-disable-next-line class-methods-use-this
+    getCountryDataByCode(iso2) {
+        return Country.getCountryDataByCode(iso2);
+    }
+}
+
+export default new PhoneNumber();

package/src/components/PhoneInput/country.js

@@ -0,0 +1,54 @@
+import { find, orderBy } from 'lodash';
+import allCountries from "$ecomponents/Countries/resources/countries.json"
+
+class Country {
+    constructor() {
+        this.countryCodes = [];
+        this.countriesData = null;
+    }
+
+    setCustomCountriesData(json) {
+        this.countriesData = json;
+    }
+
+    addCountryCode(iso2, dialCode, priority) {
+        if (!(dialCode in this.countryCodes)) {
+            this.countryCodes[dialCode] = [];
+        }
+
+        const index = priority || 0;
+        this.countryCodes[dialCode][index] = iso2;
+    }
+
+    getAll() {
+        if (!this.countries) {
+            this.countries = orderBy(
+                this.countriesData || allCountries, // eslint-disable-line global-require
+                ['name'],
+                ['asc'],
+            );
+        }
+
+        return this.countries;
+    }
+
+    getCountryCodes() {
+        if (!this.countryCodes.length) {
+            this.getAll().forEach((country) => {
+                this.addCountryCode(country.iso2, country.dialCode, country.priority);
+                if (country.areaCodes) {
+                    country.areaCodes.forEach((areaCode) => {
+                        this.addCountryCode(country.iso2, country.dialCode + areaCode);
+                    });
+                }
+            });
+        }
+        return this.countryCodes;
+    }
+
+    getCountryDataByCode(iso2) {
+        return find(this.getAll(), (country) => country.iso2 === iso2);
+    }
+}
+
+export default new Country();