@meatech/payblend_app_ui_component 1.0.69

package/components/Inputs/InputField.tsx

@@ -0,0 +1,336 @@
+import * as React from "react";
+import { useEffect, useMemo, useState } from "react";
+import {
+  KeyboardTypeOptions,
+  NativeSyntheticEvent,
+  Pressable,
+  StyleProp,
+  StyleSheet,
+  TextInputEndEditingEventData,
+  TextStyle,
+  View,
+  ViewStyle,
+} from "react-native";
+import MaskInput, { Mask } from "react-native-mask-input";
+import Text from "@ui/components/Text";
+import { FontSizes, Space, colors, metrics, pw } from "@ui/themes";
+import CountryCode from "../../jsons/CountryCode.json";
+import { Icon, SelectField } from "@ui/components";
+import { inputFieldFontSize, inputFieldHeight } from "./styles";
+import { useDebounce } from "@ui/hooks";
+
+type SelectItemT = {
+  label: string;
+  value: string;
+};
+
+export const InputField = ({
+  value,
+  label,
+  placeholder,
+  errMessage,
+  size = "medium",
+  variant = "default",
+  type = "default",
+  labelSize,
+  isShowPassword = true,
+  disabled = false,
+  isHideIcon = false,
+  maxLength,
+  keyboardType,
+  debounceTime = 0,
+  mask,
+  obfuscationCharacter,
+  showObfuscatedValue = false,
+  onChangeText,
+  onEndEditing,
+  onToggleShowPassword,
+  onSearch,
+  onDebounceChangeText,
+  onSubmitEditing,
+  onBlur,
+}: {
+  value: string;
+  label?: string;
+  errMessage?: string;
+  placeholder?: string;
+  isShowPassword?: boolean;
+  disabled?: boolean;
+  size?: "small" | "medium" | "large";
+  labelSize?:
+    | "xxxs"
+    | "xxs"
+    | "xs"
+    | "small"
+    | "medium"
+    | "large"
+    | "xl"
+    | "xxl"
+    | "xxxl"
+    | "xxxxl";
+  variant?: "default" | "quite" | "none";
+  type?: "default" | "phone-number" | "password" | "search";
+  isHideIcon?: boolean;
+  maxLength?: number;
+  keyboardType?: KeyboardTypeOptions;
+  debounceTime?: number;
+  mask?: Mask;
+  obfuscationCharacter?: string;
+  showObfuscatedValue?: boolean;
+  onChangeText?: (
+    text: string,
+    maskedText?: string,
+    obfuscatedText?: string
+  ) => void;
+  onEndEditing?: (text: string) => void;
+  onToggleShowPassword?: () => void;
+  onSearch?: () => void;
+  onDebounceChangeText?: (text: string) => void;
+  onSubmitEditing?: (text: string) => void;
+  onBlur?: (text: string) => void;
+}) => {
+  const { height, fontSize } = useMemo(
+    () => ({
+      height: inputFieldHeight[size],
+      fontSize: inputFieldFontSize[size],
+    }),
+    [size]
+  );
+  const inputHeightStyle: StyleProp<TextStyle> = {
+    backgroundColor: disabled ? colors.neutral[20] : colors.white[10],
+    height: height - 2,
+    fontSize,
+  };
+  const inputWrapperHeightStyle: StyleProp<ViewStyle> = {
+    height: height,
+    backgroundColor: disabled ? colors.neutral[20] : colors.white[10],
+  };
+  const inputWrapperBorderStyle: StyleProp<ViewStyle> = {
+    borderRadius: variant === "default" ? metrics.borderRadiusBase : 0,
+    borderWidth:
+      variant === "default"
+        ? metrics.borderWidthMedium
+        : metrics.borderWidthNone,
+    borderColor: disabled
+      ? colors.neutral[20]
+      : errMessage
+      ? colors.red[90]
+      : colors.neutral[60],
+    borderBottomWidth:
+      variant === "none" ? metrics.borderWidthNone : metrics.borderWidthMedium,
+  };
+
+  const inputBorderStyle: StyleProp<TextStyle> = {
+    borderLeftWidth: variant === "default" ? metrics.borderWidthMedium : 0,
+    borderLeftColor: disabled
+      ? colors.neutral[20]
+      : errMessage
+      ? colors.red[90]
+      : colors.neutral[60],
+  };
+  const countryCodeList = useMemo(
+    () =>
+      CountryCode.map((country: any) => ({
+        label: country.dial_code,
+        value: country.dial_code,
+      })),
+    []
+  );
+  const [countryCodeValue, setCountryCodeValue] = useState<SelectItemT>(
+    countryCodeList[0]
+  );
+  const [inputValue, setInputValue] = useState(value || "");
+  const debouncedOnChangeText = useDebounce(inputValue, debounceTime);
+
+  useEffect(() => {
+    if (onDebounceChangeText) {
+      onDebounceChangeText(debouncedOnChangeText);
+    }
+  }, [debouncedOnChangeText, onDebounceChangeText]);
+
+  const handleEndEdit = (
+    e: NativeSyntheticEvent<TextInputEndEditingEventData>
+  ) => {
+    if (onEndEditing) {
+      if (
+        type === "phone-number" &&
+        countryCodeValue &&
+        debouncedOnChangeText
+      ) {
+        onEndEditing(countryCodeValue.value + e.nativeEvent.text);
+      } else {
+        onEndEditing(e.nativeEvent.text);
+      }
+    }
+  };
+  const handleToggleShowPassword = () => {
+    onToggleShowPassword && onToggleShowPassword();
+  };
+  const handleSearch = () => onSearch && onSearch();
+
+  const handleSubmitEditing = () => {
+    if (onSubmitEditing) {
+      onSubmitEditing(inputValue);
+    }
+  };
+
+  const handleChangeText = (
+    maskedText: string,
+    text: string,
+    obfuscatedText?: string
+  ) => {
+    setInputValue(maskedText);
+    if (onChangeText) {
+      if (text) {
+        if (type === "phone-number" && countryCodeValue && text) {
+          onChangeText(
+            countryCodeValue.value + text,
+            maskedText,
+            obfuscatedText
+          );
+        } else {
+          onChangeText(text, maskedText, obfuscatedText);
+        }
+      } else {
+        setInputValue("");
+        onChangeText("", maskedText, obfuscatedText);
+      }
+    }
+  };
+
+  const handleBlur = () => {
+    if (onBlur) {
+      if (type === "phone-number" && countryCodeValue && inputValue) {
+        onBlur(countryCodeValue.value + inputValue);
+      } else {
+        onBlur(inputValue);
+      }
+    }
+  };
+
+  return (
+    <View style={styles.inputFieldContainer}>
+      {label && <Text size={labelSize || size}>{label}</Text>}
+      <View>
+        <View
+          style={[
+            styles.inputFieldWrapper,
+            inputWrapperHeightStyle,
+            inputWrapperBorderStyle,
+          ]}
+        >
+          {type === "phone-number" && (
+            <SelectField
+              value={countryCodeValue}
+              listData={countryCodeList}
+              cusHeight={height - 2}
+              disabled={disabled}
+              variant="none"
+              size={size}
+              cusWidth={pw(100)}
+              onChangeValue={setCountryCodeValue}
+            />
+          )}
+          <MaskInput
+            value={inputValue}
+            editable={!disabled}
+            secureTextEntry={type === "password" && isShowPassword}
+            onEndEditing={handleEndEdit}
+            obfuscationCharacter={obfuscationCharacter}
+            showObfuscatedValue={showObfuscatedValue}
+            onChangeText={(
+              masked: string,
+              unmasked: string,
+              obfuscated: string
+            ) => {
+              handleChangeText(masked, unmasked, obfuscated);
+            }}
+            placeholder={placeholder}
+            keyboardType={keyboardType || "default"}
+            style={[
+              styles.inputFieldBox,
+              inputHeightStyle,
+              type === "phone-number" && inputBorderStyle,
+            ]}
+            mask={mask || undefined}
+            maxLength={maxLength}
+            onBlur={handleBlur}
+            onSubmitEditing={handleSubmitEditing}
+          />
+          {!isHideIcon && type === "password" && (
+            <Pressable
+              disabled={disabled}
+              onPress={handleToggleShowPassword}
+              style={[styles.rightBtn, inputBorderStyle]}
+            >
+              <Icon name="ic_eye" />
+            </Pressable>
+          )}
+          {type === "search" && (
+            <Pressable
+              disabled={disabled}
+              onPress={handleSearch}
+              style={[styles.rightBtn, inputBorderStyle]}
+            >
+              <Icon name="ic_search" />
+            </Pressable>
+          )}
+        </View>
+        {errMessage && (
+          <Text color="error" size="xs">
+            {errMessage}
+          </Text>
+        )}
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  inputFieldContainer: {
+    gap: Space.xs,
+    width: "100%",
+  },
+  inputFieldWrapper: {
+    flexDirection: "row",
+    width: "100%",
+    overflow: "hidden",
+  },
+  innerInputFieldWrapper: {
+    flex: 1,
+  },
+  inputFieldMaskedBox: {
+    flexGrow: 1,
+    justifyContent: "center",
+    backgroundColor: colors.white[10],
+    color: colors.neutral[80],
+    paddingVertical: Space.xs,
+  },
+  inputFieldBoxAbsolute: {
+    position: "absolute",
+    // opacity: 0,
+    backgroundColor: "transparent",
+  },
+  inputFieldBox: {
+    flexGrow: 1,
+    justifyContent: "center",
+    backgroundColor: colors.white[10],
+    color: colors.neutral[80],
+    paddingVertical: Space.xs,
+    paddingHorizontal: Space.medium,
+    fontSize: FontSizes.fontLarge,
+    borderWidth: 0,
+  },
+  picker: {
+    width: pw(100),
+  },
+  pickerIconContainer: {
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  rightBtn: {
+    width: pw(52),
+    justifyContent: "center",
+    alignItems: "center",
+  },
+});

package/components/Inputs/SelectField.tsx

@@ -0,0 +1,230 @@
+import * as React from 'react';
+import {useEffect, useMemo, useState} from 'react';
+import {
+  FlatList,
+  ListRenderItemInfo,
+  Pressable,
+  StyleProp,
+  StyleSheet,
+  TextStyle,
+  View,
+  ViewStyle,
+} from 'react-native';
+import Modal from 'react-native-modal';
+import Text from '@ui/components/Text';
+import {Space, colors, metrics, ph} from '@ui/themes';
+import {Icon} from '@ui/components';
+import {inputFieldFontSize, inputFieldHeight} from './styles';
+
+type SelectItemT = {
+  label: string;
+  value: string;
+};
+
+export const SelectField = ({
+  value,
+  label,
+  labelColor = 'tertiary',
+  listData,
+  size = 'medium',
+  variant = 'default',
+  cusHeight,
+  cusWidth,
+  cusFontSize,
+  disabled = false,
+  isWhiteDisabledBackground = false,
+  placeholder,
+  isShowIcon = true,
+  textAlign = 'left',
+  onChangeValue,
+}: {
+  value: SelectItemT;
+  label?: string;
+  labelColor?:
+    | 'primary'
+    | 'secondary'
+    | 'tertiary'
+    | 'disabled'
+    | 'error'
+    | 'success'
+    | 'warning'
+    | 'info'
+    | 'interactive'
+    | 'hover'
+    | 'active'
+    | 'focus'
+    | 'brand'
+    | 'white'
+    | 'white';
+  listData: Array<SelectItemT>;
+  size?:
+    | 'xxxs'
+    | 'xxs'
+    | 'xs'
+    | 'small'
+    | 'medium'
+    | 'large'
+    | 'xl'
+    | 'xxl'
+    | 'xxxl'
+    | 'xxxxl';
+  variant?: 'default' | 'quite' | 'none';
+  cusHeight?: number;
+  cusWidth?: number;
+  cusFontSize?: number;
+  disabled?: boolean;
+  isWhiteDisabledBackground?: boolean;
+  placeholder?: string;
+  isShowIcon?: boolean;
+  textAlign?: 'auto' | 'left' | 'right' | 'center' | 'justify' | undefined;
+  onChangeValue?: (item: SelectItemT) => void;
+}) => {
+  const {height, fontSize} = useMemo(
+    () => ({
+      height: inputFieldHeight[size],
+      fontSize: inputFieldFontSize[size],
+    }),
+    [size],
+  );
+  const selectInputContainer: StyleProp<ViewStyle> = {
+    width: cusWidth || '100%',
+  };
+  const selectFieldStyle: StyleProp<ViewStyle> = {
+    backgroundColor: isWhiteDisabledBackground
+      ? colors.white[10]
+      : disabled
+        ? colors.neutral[20]
+        : colors.white[10],
+    height: cusHeight || height,
+  };
+
+  const selectFieldTextStyle: StyleProp<TextStyle> = {
+    fontSize: cusFontSize || fontSize,
+    textAlign,
+  };
+
+  const selectFieldBorderStyle: StyleProp<ViewStyle> = {
+    borderRadius: variant === 'default' ? metrics.borderRadiusBase : 0,
+    borderWidth:
+      variant === 'default'
+        ? metrics.borderWidthMedium
+        : metrics.borderWidthNone,
+    borderBottomWidth:
+      variant === 'none' ? metrics.borderWidthNone : metrics.borderWidthMedium,
+    borderColor: disabled ? colors.neutral[20] : colors.neutral[60],
+  };
+
+  const [isVisible, setIsVisible] = useState(false);
+  const [currentValue, setCurrentValue] = useState<SelectItemT | null>(
+    value || null,
+  );
+  useEffect(() => {
+    if (currentValue && onChangeValue) {
+      onChangeValue(currentValue);
+    }
+  }, [currentValue]);
+  const handleToggleModal = () => setIsVisible(!isVisible);
+  const handleSelectItem = (itemSelected: SelectItemT) => {
+    setIsVisible(false);
+    setCurrentValue(itemSelected);
+  };
+  const renderSelectItem = ({item}: ListRenderItemInfo<SelectItemT>) => {
+    return (
+      <Pressable
+        onPress={() => handleSelectItem(item)}
+        style={styles.selectItemWrapper}>
+        <View style={styles.textWrapper}>
+          <Text>{item.label}</Text>
+        </View>
+        {item.value === currentValue?.value && (
+          <Icon name="ic_checkmark_circle" />
+        )}
+      </Pressable>
+    );
+  };
+  const renderItemSeparatorComponent = () => {
+    return <View style={styles.itemSeparator} />;
+  };
+  return (
+    <View style={selectInputContainer}>
+      {label && (
+        <Text color={labelColor} size={size}>
+          {label}
+        </Text>
+      )}
+      <Pressable
+        disabled={disabled}
+        onPress={handleToggleModal}
+        style={[styles.selectInput, selectFieldStyle, selectFieldBorderStyle]}>
+        <View style={styles.textWrapper}>
+          <Text color="tertiary" style={selectFieldTextStyle}>
+            {currentValue
+              ? currentValue.label
+                ? currentValue.label
+                : placeholder
+                ? placeholder
+                : ''
+              : ''}
+          </Text>
+        </View>
+        {isShowIcon && <Icon name="ic_chevron_down" />}
+      </Pressable>
+      <Modal
+        isVisible={isVisible}
+        animationIn="zoomInDown"
+        animationOut="zoomOutUp"
+        backdropColor={'rgba(0,0,0,0.3)'}
+        onBackdropPress={handleToggleModal}
+        style={styles.modal}>
+        <View style={styles.modalContainer}>
+          <FlatList<SelectItemT>
+            data={listData}
+            showsVerticalScrollIndicator={false}
+            ItemSeparatorComponent={renderItemSeparatorComponent}
+            removeClippedSubviews={false}
+            renderItem={renderSelectItem}
+          />
+        </View>
+      </Modal>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  selectInputContainer: {
+    width: '100%',
+  },
+  selectInput: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    backgroundColor: colors.white[10],
+    paddingHorizontal: Space.medium,
+  },
+  modal: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+
+  modalContainer: {
+    width: '90%',
+    maxHeight: '90%',
+    backgroundColor: colors.white[10],
+    borderRadius: metrics.borderRadiusBase,
+  },
+  selectItemWrapper: {
+    height: ph(40),
+    paddingVertical: Space.xs,
+    paddingHorizontal: Space.medium,
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+  },
+  textWrapper: {
+    flex: 1,
+  },
+  itemSeparator: {
+    height: 1,
+    backgroundColor: colors.neutral[60],
+  },
+});

package/components/Inputs/index.ts

@@ -0,0 +1,2 @@
+export * from './InputField'
+export * from './SelectField'

package/components/Inputs/styles.ts

@@ -0,0 +1,13 @@
+import {FontSizes, ph} from '@ui/themes';
+
+export const inputFieldHeight: {[key: string]: number} = {
+  small: ph(33),
+  medium: ph(40),
+  large: ph(46),
+};
+
+export const inputFieldFontSize: {[key: string]: number} = {
+  small: FontSizes.fontSmall,
+  medium: FontSizes.fontMedium,
+  large: FontSizes.fontLarge,
+};

package/components/LoadingOverlay/LoadingOverlay.tsx

@@ -0,0 +1,42 @@
+import React, {useState, useImperativeHandle, createRef} from 'react';
+import {ActivityIndicator, View, StyleSheet} from 'react-native';
+import {colors} from '@ui/themes';
+
+export interface LoadingOverlayRef {
+  setLoading: (status: boolean) => void;
+}
+
+const refLoading = createRef<LoadingOverlayRef>();
+
+export const LoadingGlobal = (status: boolean) => {
+  return refLoading?.current?.setLoading?.(status);
+};
+
+export const LoadingOverlay = () => {
+  const [isLoading, setIsLoading] = useState(false);
+  useImperativeHandle(refLoading, () => ({
+    setLoading: (status: boolean) => setIsLoading(status),
+  }));
+
+  if (!isLoading) return null;
+
+  return (
+    <View style={styles.container}>
+      <ActivityIndicator size="large" color={colors.primary[100]} />
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    backgroundColor: 'rgba(0, 0, 0, 0.5)',
+  },
+});

package/components/LoadingOverlay/index.ts

@@ -0,0 +1 @@
+export * from './LoadingOverlay';