@meatech/payblend_app_ui_component 1.0.69

package/hooks/useKeyboard.ts

@@ -0,0 +1,72 @@
+import {useLayoutEffect, useState} from 'react';
+import {Keyboard, KeyboardEventListener, KeyboardMetrics} from 'react-native';
+
+const emptyCoordinates = Object.freeze({
+  screenX: 0,
+  screenY: 0,
+  width: 0,
+  height: 0,
+});
+const initialValue = {
+  start: emptyCoordinates,
+  end: emptyCoordinates,
+};
+
+export function useKeyboard(
+  keyboardDidShow?: () => void,
+  keyboardDidHide?: () => void,
+  keyboardWillShow?: () => void,
+  keyboardWillHide?: () => void,
+) {
+  const [shown, setShown] = useState(false);
+  const [coordinates, setCoordinates] = useState<{
+    start: undefined | KeyboardMetrics;
+    end: KeyboardMetrics;
+  }>(initialValue);
+  const [keyboardHeight, setKeyboardHeight] = useState<number>(0);
+
+  const handleKeyboardWillShow: KeyboardEventListener = e => {
+    setCoordinates({start: e.startCoordinates, end: e.endCoordinates});
+    keyboardWillShow?.();
+  };
+  const handleKeyboardDidShow: KeyboardEventListener = e => {
+    setShown(true);
+    setCoordinates({start: e.startCoordinates, end: e.endCoordinates});
+    setKeyboardHeight(e.endCoordinates.height);
+    keyboardDidShow?.();
+  };
+  const handleKeyboardWillHide: KeyboardEventListener = e => {
+    setCoordinates({start: e.startCoordinates, end: e.endCoordinates});
+    keyboardWillHide?.();
+  };
+  const handleKeyboardDidHide: KeyboardEventListener = e => {
+    setShown(false);
+    if (e) {
+      setCoordinates({start: e.startCoordinates, end: e.endCoordinates});
+    } else {
+      setCoordinates(initialValue);
+      setKeyboardHeight(0);
+    }
+    keyboardDidHide?.();
+  };
+
+  useLayoutEffect(() => {
+    const subscriptions = [
+      Keyboard.addListener('keyboardWillShow', handleKeyboardWillShow),
+      Keyboard.addListener('keyboardDidShow', handleKeyboardDidShow),
+      Keyboard.addListener('keyboardWillHide', handleKeyboardWillHide),
+      Keyboard.addListener('keyboardDidHide', handleKeyboardDidHide),
+    ];
+
+    return () => {
+      subscriptions.forEach(subscription => subscription.remove());
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  return {
+    keyboardShown: shown,
+    coordinates,
+    keyboardHeight,
+  };
+}

package/hooks/useKeyboardVisible.ts

@@ -0,0 +1,28 @@
+import {useState, useEffect} from 'react';
+import {Keyboard} from 'react-native';
+
+export const useKeyboardVisible = () => {
+  const [isKeyboardVisible, setKeyboardVisible] = useState(false);
+
+  useEffect(() => {
+    const keyboardDidShowListener = Keyboard.addListener(
+      'keyboardDidShow',
+      () => {
+        setKeyboardVisible(true);
+      },
+    );
+    const keyboardDidHideListener = Keyboard.addListener(
+      'keyboardDidHide',
+      () => {
+        setKeyboardVisible(false);
+      },
+    );
+
+    return () => {
+      keyboardDidHideListener.remove();
+      keyboardDidShowListener.remove();
+    };
+  }, []);
+
+  return isKeyboardVisible;
+};

package/hooks/usePanResponder.ts

@@ -0,0 +1,93 @@
+import React, {RefObject} from 'react';
+import {
+  Animated,
+  GestureResponderEvent,
+  PanResponder,
+  PanResponderGestureState,
+} from 'react-native';
+
+export function shouldSetPanResponder(
+  _event: GestureResponderEvent,
+  gesture: PanResponderGestureState,
+) {
+  const {dx, dy} = gesture;
+  // Fixes onPress handler
+  // https://github.com/calintamas/react-native-toast-message/issues/113
+  const offset = 2;
+  return Math.abs(dx) > offset || Math.abs(dy) > offset;
+}
+
+export function shouldDismissView(
+  newAnimatedValue: number,
+  gesture: PanResponderGestureState,
+) {
+  const dismissThreshold = 0.65;
+  const {vy, dy} = gesture;
+  return (
+    newAnimatedValue <= dismissThreshold ||
+    (Math.abs(vy) >= dismissThreshold && dy < 0)
+  );
+}
+
+export type UsePanResponderParams = {
+  animatedValue: RefObject<Animated.Value>;
+  computeNewAnimatedValueForGesture: (
+    gesture: PanResponderGestureState,
+  ) => number;
+  onDismiss: () => void;
+  onRestore: () => void;
+  disable?: boolean;
+};
+
+export function usePanResponder({
+  animatedValue,
+  computeNewAnimatedValueForGesture,
+  onDismiss,
+  onRestore,
+  disable,
+}: UsePanResponderParams) {
+  const onMove = React.useCallback(
+    (_event: GestureResponderEvent, gesture: PanResponderGestureState) => {
+      if (disable) {
+        return;
+      }
+
+      const newAnimatedValue = computeNewAnimatedValueForGesture(gesture);
+      animatedValue.current?.setValue(newAnimatedValue);
+    },
+    [animatedValue, computeNewAnimatedValueForGesture, disable],
+  );
+
+  const onRelease = React.useCallback(
+    (_event: GestureResponderEvent, gesture: PanResponderGestureState) => {
+      if (disable) {
+        return;
+      }
+
+      const newAnimatedValue = computeNewAnimatedValueForGesture(gesture);
+      if (shouldDismissView(newAnimatedValue, gesture)) {
+        onDismiss();
+      } else {
+        onRestore();
+      }
+    },
+    [computeNewAnimatedValueForGesture, onDismiss, onRestore, disable],
+  );
+
+  const panResponder = React.useMemo(
+    () =>
+      PanResponder.create({
+        onMoveShouldSetPanResponder: shouldSetPanResponder,
+        onMoveShouldSetPanResponderCapture: shouldSetPanResponder,
+        onPanResponderMove: onMove,
+        onPanResponderRelease: onRelease,
+      }),
+    [onMove, onRelease],
+  );
+
+  return {
+    panResponder,
+    onMove,
+    onRelease,
+  };
+}

package/hooks/usePermission.ts

@@ -0,0 +1,50 @@
+import {useEffect, useState} from 'react';
+import {Platform} from 'react-native';
+import type {Permission, PermissionStatus} from 'react-native-permissions';
+import Permissions, {PERMISSIONS} from 'react-native-permissions';
+
+type PermissionResults = Record<Permission, PermissionStatus>;
+const nativePermissionGranted = (
+  stats: PermissionResults,
+  limitedCallback?: () => void,
+) => {
+  return Object.values(stats).every(result => {
+    if (result === 'granted') {
+      return true;
+    }
+    if (result === 'limited') {
+      limitedCallback?.();
+      return true;
+    }
+    return false;
+  });
+};
+
+export const CALL_PERMISSIONS = Platform.select({
+  android: [],
+  ios: [],
+  default: [],
+});
+
+export const usePermission = (perms: Permission[]) => {
+  const [state, setState] = useState<'pending' | 'granted' | 'rejected'>(
+    'pending',
+  );
+  useEffect(() => {
+    const checkAndRequest = async () => {
+      const checkResult = await Permissions.checkMultiple(perms);
+      const alreadyGranted = nativePermissionGranted(checkResult);
+      if (alreadyGranted) {
+        return setState('granted');
+      }
+
+      const requestResult = await Permissions.requestMultiple(perms);
+      const isGranted = nativePermissionGranted(requestResult);
+      setState(isGranted ? 'granted' : 'rejected');
+    };
+
+    checkAndRequest();
+  }, []);
+
+  return state;
+};

package/hooks/useSlideAnimation.ts

@@ -0,0 +1,77 @@
+import React from 'react';
+import {Animated, Platform} from 'react-native';
+
+import {additiveInverseArray} from '@ui/utils';
+import {ToastPosition} from '@ui/types';
+
+type UseSlideAnimationParams = {
+  position: ToastPosition;
+  height: number;
+  topOffset: number;
+  bottomOffset: number;
+};
+
+export function translateYOutputRangeFor({
+  position,
+  height,
+  topOffset,
+  bottomOffset,
+}: UseSlideAnimationParams) {
+  const offset = position === 'bottom' ? bottomOffset : topOffset;
+  const range = [-(height * 2), Math.max(offset)];
+  const outputRange =
+    position === 'bottom' ? additiveInverseArray(range) : range;
+
+  return outputRange;
+}
+
+const useNativeDriver = Platform.select({native: true, default: false});
+
+export function useSlideAnimation({
+  position,
+  height,
+  topOffset,
+  bottomOffset,
+}: UseSlideAnimationParams) {
+  const animatedValue = React.useRef(new Animated.Value(0));
+
+  const animate = React.useCallback((toValue: number) => {
+    Animated.spring(animatedValue.current, {
+      toValue,
+      useNativeDriver,
+      friction: 8,
+    }).start();
+  }, []);
+
+  const translateY = React.useMemo(
+    () =>
+      animatedValue.current.interpolate({
+        inputRange: [0, 1],
+        outputRange: translateYOutputRangeFor({
+          position,
+          height,
+          topOffset,
+          bottomOffset,
+        }),
+      }),
+    [position, height, topOffset, bottomOffset],
+  );
+
+  const opacity = animatedValue.current.interpolate({
+    inputRange: [0, 0.7, 1],
+    outputRange: [0, 1, 1],
+  });
+
+  return {
+    animatedValue,
+    animate,
+    animationStyles: {
+      opacity,
+      transform: [
+        {
+          translateY,
+        },
+      ],
+    },
+  };
+}

package/hooks/useTimeout.ts

@@ -0,0 +1,32 @@
+import React from 'react';
+
+export function useTimeout<CbParams>(
+  cb: (params?: CbParams) => void,
+  delayMs = 0,
+) {
+  const ref = React.useRef<NodeJS.Timeout>();
+
+  const clearTimer = React.useCallback(() => {
+    if (ref.current) {
+      clearTimeout(ref.current);
+      ref.current = undefined;
+    }
+  }, []);
+
+  const startTimer = React.useCallback(() => {
+    clearTimer();
+    ref.current = setTimeout(() => {
+      cb();
+
+      ref.current = undefined;
+    }, delayMs);
+  }, [clearTimer, delayMs, cb]);
+
+  React.useEffect(() => () => clearTimer(), [clearTimer]);
+
+  return {
+    startTimer,
+    clearTimer,
+    isActive: ref.current !== undefined,
+  };
+}

package/hooks/useToast.ts

@@ -0,0 +1,138 @@
+import React from 'react';
+
+import {useTimeout} from '@ui/hooks';
+import {
+  ToastData,
+  ToastOptions,
+  ToastProps,
+  ToastShowParams,
+  ToastTypeE,
+} from '@ui/types';
+import {mergeIfDefined} from '@ui/utils';
+
+const noop = () => undefined;
+
+export const DEFAULT_DATA: ToastData = {
+  title: undefined,
+  subTitle: undefined,
+};
+
+export const DEFAULT_OPTIONS: Required<ToastOptions> = {
+  type: ToastTypeE.default,
+  titleStyle: null,
+  subTitleStyle: null,
+  position: 'top',
+  autoHide: true,
+  swipeable: false,
+  visibilityTime: 4000,
+  topOffset: 40,
+  bottomOffset: 40,
+  onShow: noop,
+  onHide: noop,
+  onPress: noop,
+  props: {},
+  isShowLeftIcon: false,
+  isShowRightIcon: false,
+};
+
+export type UseToastParams = {
+  defaultOptions: Omit<ToastProps, 'config'>;
+};
+
+export const useToast = ({defaultOptions}: UseToastParams) => {
+  const [isVisible, setIsVisible] = React.useState(false);
+  const [data, setData] = React.useState<ToastData>(DEFAULT_DATA);
+
+  const initialOptions = mergeIfDefined(
+    DEFAULT_OPTIONS,
+    defaultOptions,
+  ) as Required<ToastOptions>;
+  const [options, setOptions] =
+    React.useState<Required<ToastOptions>>(initialOptions);
+
+  const onAutoHide = React.useCallback(() => {
+    setIsVisible(false);
+    options.onHide();
+  }, [options]);
+  const {startTimer, clearTimer} = useTimeout(
+    onAutoHide,
+    options.visibilityTime,
+  );
+
+  const hide = React.useCallback(() => {
+    setIsVisible(false);
+    clearTimer();
+    options.onHide();
+  }, [clearTimer, options]);
+
+  const show = React.useCallback(
+    (params: ToastShowParams) => {
+      const {
+        title = DEFAULT_DATA.title,
+        subTitle = DEFAULT_DATA.subTitle,
+        type = initialOptions.type,
+        titleStyle = initialOptions.titleStyle,
+        subTitleStyle = initialOptions.subTitleStyle,
+        position = initialOptions.position,
+        autoHide = initialOptions.autoHide,
+        visibilityTime = initialOptions.visibilityTime,
+        topOffset = initialOptions.topOffset,
+        bottomOffset = initialOptions.bottomOffset,
+        onShow = initialOptions.onShow,
+        onHide = initialOptions.onHide,
+        onPress = initialOptions.onPress,
+        swipeable = initialOptions.swipeable,
+        props = initialOptions.props,
+        isShowLeftIcon = initialOptions.isShowLeftIcon,
+        isShowRightIcon = initialOptions.isShowRightIcon,
+      } = params;
+      setData({
+        title,
+        subTitle,
+      });
+      setOptions(
+        mergeIfDefined(initialOptions, {
+          type,
+          titleStyle,
+          subTitleStyle,
+          position,
+          autoHide,
+          visibilityTime,
+          topOffset,
+          bottomOffset,
+          onShow,
+          onHide,
+          onPress,
+          swipeable,
+          props,
+          isShowLeftIcon,
+          isShowRightIcon,
+        }) as Required<ToastOptions>,
+      );
+      // TODO: validate input
+      // TODO: use a queue when Toast is already visible
+      setIsVisible(true);
+      onShow();
+    },
+    [initialOptions],
+  );
+
+  React.useEffect(() => {
+    const {autoHide} = options;
+    if (isVisible) {
+      if (autoHide) {
+        startTimer();
+      } else {
+        clearTimer();
+      }
+    }
+  }, [isVisible, options, startTimer, clearTimer]);
+
+  return {
+    isVisible,
+    data,
+    options,
+    show,
+    hide,
+  };
+};

package/hooks/useViewDimensions.ts

@@ -0,0 +1,38 @@
+import React from 'react';
+import {LayoutChangeEvent} from 'react-native';
+
+export type UseViewDimensionsParams = {
+  heightOffset?: number;
+  widthOffset?: number;
+};
+
+const getLayoutValue =
+  (key: 'height' | 'width') => (event: LayoutChangeEvent) =>
+    event?.nativeEvent?.layout?.[key] ?? 0;
+
+/**
+ * Retrieves View dimensions (height, width) from a LayoutChangeEvent and sets them on state
+ */
+export function useViewDimensions({
+  heightOffset = 0,
+  widthOffset = 0,
+}: UseViewDimensionsParams = {}) {
+  const [height, setHeight] = React.useState(0);
+  const [width, setWidth] = React.useState(0);
+
+  const computeViewDimensions = React.useCallback(
+    (event: LayoutChangeEvent) => {
+      const h = getLayoutValue('height')(event);
+      const w = getLayoutValue('width')(event);
+      setHeight(h + heightOffset);
+      setWidth(w + widthOffset);
+    },
+    [heightOffset, widthOffset],
+  );
+
+  return {
+    computeViewDimensions,
+    height,
+    width,
+  };
+}

package/hooks/useYupValidationResolver.ts

@@ -0,0 +1,31 @@
+import {ObjectSchema, ValidationError} from 'yup';
+
+export const useYupValidationResolver =
+  <T extends object>(validationSchema: ObjectSchema<T>) =>
+  async (data: T) => {
+    try {
+      const values = await validationSchema.validate(data, {
+        abortEarly: false,
+      });
+
+      return {
+        values,
+        errors: {},
+      };
+    } catch (err) {
+      const errors = err as ValidationError;
+      return {
+        values: {},
+        errors: errors.inner.reduce(
+          (allErrors, currentError) => ({
+            ...allErrors,
+            [`${currentError.path}`]: {
+              type: currentError.type ?? 'validation',
+              message: currentError.message,
+            },
+          }),
+          {},
+        ),
+      };
+    }
+  };

package/jsons/CountryCode.json

@@ -0,0 +1,22 @@
+[
+  {
+    "name": "Nigeria (070)",
+    "dial_code": "+070",
+    "code": "NG"
+  },
+  {
+    "name": "Nigeria (84)",
+    "dial_code": "+84",
+    "code": "VN"
+  },
+  {
+    "name": "Nigeria (080)",
+    "dial_code": "+080",
+    "code": "NG"
+  },
+  {
+    "name": "Nigeria (090)",
+    "dial_code": "+090",
+    "code": "NG"
+  }
+]