@meatech/payblend_app_ui_component 1.0.69

package/components/Header/type.ts

@@ -0,0 +1,14 @@
+import { StyleProp, ViewStyle } from "react-native";
+import { Images } from "@ui/themes";
+export interface CustomHeaderProps {
+  onRightPress?: () => void;
+  onLeftPress?: () => void;
+  onClose?: () => void;
+  style?: StyleProp<ViewStyle>;
+  screenName?: string;
+  subScreenName?: string;
+  isShowLeftIcon?: boolean;
+  textColors?: string;
+  children?: React.ReactNode;
+  leftIcon?: keyof typeof Images;
+}

package/components/IconWithLabel/IconWithLabel.tsx

@@ -0,0 +1,89 @@
+import * as React from 'react';
+import { StyleSheet, TouchableOpacity } from 'react-native';
+import { IconWithLabelProps } from './type';
+import {
+  ACTIVE_OPACITY,
+  colors,
+  deviceWidth,
+  metrics,
+  pf,
+  pw,
+} from '@ui/themes';
+import { Icon } from '@ui/components';
+import { formatNumber } from '@ui/utils';
+import Text from '@ui/components/Text';
+
+export const SIZE_ICON_WITH_LABEL_DEFAULT = (deviceWidth() - 52) / 3;
+
+export const IconWithLabel: React.FC<IconWithLabelProps> = ({
+  label,
+  icon,
+  balance = 0,
+  width = SIZE_ICON_WITH_LABEL_DEFAULT,
+  height = SIZE_ICON_WITH_LABEL_DEFAULT,
+  disabled,
+  style,
+  labelStyle,
+  isShowBalance = false,
+  ...rest
+}) => {
+  return (
+    <TouchableOpacity
+      disabled={disabled}
+      style={[
+        styles.container,
+        style,
+        { width: pw(width), height: pw(height) },
+        disabled && styles.disabled,
+      ]}
+      activeOpacity={ACTIVE_OPACITY}
+      {...rest}
+    >
+      <Icon
+        name={icon}
+        width={metrics.iconSemiLarge}
+        height={metrics.iconSemiLarge}
+        tintColor={colors.neutral['60']}
+      />
+      <Text
+        size="xs"
+        color="tertiary"
+        style={[styles.label, labelStyle]}
+        numberOfLines={2}
+      >
+        {label}
+      </Text>
+      {isShowBalance && (
+        <Text
+          fontWeight="700"
+          size="large"
+          color="tertiary"
+          style={styles.txtBalance}
+        >
+          ¥{formatNumber(balance.toString())}
+        </Text>
+      )}
+    </TouchableOpacity>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    borderWidth: metrics.borderWidthMedium,
+    borderColor: colors.neutral['20'],
+    alignItems: 'center',
+    justifyContent: 'center',
+    padding: metrics.width.spacingTiny,
+  },
+  label: {
+    lineHeight: pf(18),
+    textAlign: 'center',
+  },
+  txtBalance: {
+    lineHeight: pf(30),
+    marginTop: metrics.width.spacingTiny,
+  },
+  disabled: {
+    opacity: 0.4,
+  },
+});

package/components/IconWithLabel/index.ts

@@ -0,0 +1,2 @@
+export * from './IconWithLabel';
+export * from './type';

package/components/IconWithLabel/type.ts

@@ -0,0 +1,16 @@
+import { StyleProp, TextStyle, TouchableOpacityProps } from 'react-native';
+import { Images } from '@ui/themes';
+export interface IconWithLabelProps
+  extends Pick<
+    TouchableOpacityProps,
+    'onPress' | 'disabled' | 'style' | 'onLayout'
+  > {
+  label: string;
+  icon: keyof typeof Images;
+  balance?: number;
+  width?: number;
+  height?: number;
+  labelStyle?: StyleProp<TextStyle>;
+  disabled?: boolean;
+  isShowBalance?: boolean;
+}

package/components/Icons/Icon.tsx

@@ -0,0 +1,49 @@
+import * as React from 'react';
+import {useMemo} from 'react';
+import {
+  Image,
+  ImageResizeMode,
+  StyleProp,
+  TouchableOpacity,
+  ViewStyle,
+} from 'react-native';
+import {ACTIVE_OPACITY, Images, pw} from '@ui/themes';
+
+interface IconProps {
+  name: keyof typeof Images;
+  width?: number;
+  height?: number;
+  tintColor?: string;
+  resizeMode?: ImageResizeMode;
+  style?: StyleProp<ViewStyle>;
+  onPress?: () => void;
+}
+
+export const Icon: React.FC<IconProps> = ({
+  name,
+  width = pw(20),
+  height = pw(20),
+  tintColor,
+  resizeMode = 'contain',
+  style,
+  onPress,
+}) => {
+  const iconStyle = useMemo(
+    () => ({width: width, height: height}),
+    [width, height],
+  );
+  return (
+    <TouchableOpacity
+      style={style}
+      disabled={!onPress}
+      onPress={onPress}
+      activeOpacity={ACTIVE_OPACITY}>
+      <Image
+        source={Images[name]}
+        style={iconStyle}
+        resizeMode={resizeMode}
+        tintColor={tintColor}
+      />
+    </TouchableOpacity>
+  );
+};

package/components/Icons/index.ts

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

package/components/Image/Image.tsx

@@ -0,0 +1,60 @@
+import * as React from 'react';
+import {useState} from 'react';
+import FastImage from 'react-native-fast-image';
+import {Props} from './type';
+import {SkeletonLoader} from '../SkeletonLoader';
+import {isWeb} from '@ui/themes';
+
+const DEFAULT_IMAGE = '';
+
+export const Image: React.FC<Props> = ({
+  uri,
+  resizeMode = 'contain',
+  unUseSkeleton = false,
+  children,
+  width,
+  height,
+  style,
+  ...rest
+}) => {
+  const [isError, setError] = useState<boolean>(false);
+  const [isLoading, setLoading] = useState<boolean>(true);
+
+  const handleTurnOffLoading = () => setLoading(false);
+  const handleTurnOnError = () => setError(true);
+
+  if (isWeb) {
+    return (
+      <FastImage
+        source={{
+          uri: !!uri || !isError ? uri : DEFAULT_IMAGE,
+          priority: FastImage.priority.low,
+        }}
+        resizeMode={resizeMode}
+        onError={handleTurnOnError}
+        onLoadEnd={handleTurnOffLoading}
+        {...rest}
+        style={[style, {width, height}]}
+      />
+    );
+  }
+
+  return (
+    <FastImage
+      source={{
+        uri: !!uri || !isError ? uri : DEFAULT_IMAGE,
+        priority: FastImage.priority.low,
+      }}
+      resizeMode={resizeMode}
+      onError={handleTurnOnError}
+      onLoadEnd={handleTurnOffLoading}
+      {...rest}
+      style={[style, {width, height}]}>
+      {isLoading && !unUseSkeleton && width && height ? (
+        <SkeletonLoader width={width} height={height} />
+      ) : (
+        children
+      )}
+    </FastImage>
+  );
+};

package/components/Image/index.ts

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

package/components/Image/type.ts

@@ -0,0 +1,11 @@
+import {StyleProp} from 'react-native';
+import {FastImageProps, ImageStyle} from 'react-native-fast-image';
+
+export interface Props
+  extends Pick<FastImageProps, 'fallback' | 'resizeMode' | 'children'> {
+  uri: string;
+  unUseSkeleton?: boolean;
+  width?: number;
+  height?: number;
+  style?: StyleProp<Omit<ImageStyle, 'width' | 'height'>>;
+}

package/components/Inputs/Input.tsx

@@ -0,0 +1,178 @@
+import * as React from 'react';
+import {useState} from 'react';
+import {
+  StyleProp,
+  StyleSheet,
+  TextInput,
+  TextInputProps,
+  TextStyle,
+  View,
+  ViewStyle,
+} from 'react-native';
+import {FontSizes, Images, colors, metrics, ph, pw} from '@ui/themes';
+import {Icon} from '../Icons';
+import Text from '../Text';
+
+interface InputProps
+  extends Omit<
+    TextInputProps,
+    'value' | 'multiline' | 'secureTextEntry' | 'style' | 'placeholderTextColor'
+  > {
+  label?: string;
+  labelStyle?: StyleProp<TextStyle>;
+  isRequired?: boolean;
+  value?: string;
+  interactIcon?: keyof typeof Images;
+  sizeIcon?: number;
+  tintColor?: string;
+  maxLength?: number;
+  multiline?: boolean;
+  secureTextEntry?: boolean;
+  useIconClearValue?: boolean;
+  errorText?: string;
+  errorTextStyle?: StyleProp<TextStyle>;
+  containerStyle?: StyleProp<ViewStyle>;
+  inputContainerStyle?: StyleProp<ViewStyle>;
+  onClearValue?: () => void;
+  onPressInteract?: () => void;
+}
+
+const HEIGHT_INPUT = ph(44);
+
+export const Input: React.FC<InputProps> = ({
+  label,
+  labelStyle,
+  isRequired = false,
+  value,
+  interactIcon,
+  sizeIcon = metrics.iconSmall,
+  tintColor = colors.neutral[100],
+  multiline,
+  secureTextEntry,
+  useIconClearValue = false,
+  containerStyle,
+  inputContainerStyle,
+  errorText,
+  errorTextStyle,
+  maxLength,
+  onClearValue,
+  onPressInteract,
+  ...rest
+}) => {
+  const [isSecureTextEntry, setSecureTextEntry] = useState<boolean>(true);
+
+  const onChangeSecureTextEntry = () => setSecureTextEntry(prev => !prev);
+
+  return (
+    <View style={[styles.container, containerStyle]}>
+      {label && (
+        <View style={styles.titleContainer}>
+          <Text color="tertiary" size="medium" style={labelStyle}>
+            {label}
+          </Text>
+          {isRequired && (
+            <View style={styles.required}>
+              <Text size="xs" color="tertiary">
+                *
+              </Text>
+            </View>
+          )}
+        </View>
+      )}
+      <View
+        style={[
+          styles.inputContainer,
+          multiline && styles.inputMultiline,
+          inputContainerStyle,
+        ]}>
+        <TextInput
+          value={value}
+          style={styles.input}
+          placeholderTextColor={colors.neutral[60]}
+          multiline={multiline}
+          secureTextEntry={secureTextEntry && isSecureTextEntry}
+          maxLength={maxLength}
+          {...rest}
+        />
+        {useIconClearValue && value && (
+          <Icon
+            name="ic_close"
+            width={sizeIcon}
+            height={sizeIcon}
+            style={styles.icon}
+            tintColor={tintColor}
+            onPress={onClearValue}
+          />
+        )}
+        {secureTextEntry && (
+          <Icon
+            name={'ic_eye'}
+            width={sizeIcon}
+            height={sizeIcon}
+            style={styles.icon}
+            tintColor={tintColor}
+            onPress={onChangeSecureTextEntry}
+          />
+        )}
+        {interactIcon && (
+          <Icon
+            name={interactIcon}
+            width={sizeIcon}
+            height={sizeIcon}
+            style={styles.icon}
+            tintColor={tintColor}
+            onPress={onPressInteract}
+          />
+        )}
+      </View>
+      {errorText && (
+        <Text color="error" size="xs" style={errorTextStyle}>
+          {errorText}
+        </Text>
+      )}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    width: '100%',
+    backgroundColor: colors.white[10],
+  },
+  titleContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    marginBottom: metrics.height.spacingNano,
+  },
+  required: {
+    height: FontSizes.fontLarge,
+    minWidth: pw(42),
+    borderRadius: metrics.borderRadiusBase,
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginLeft: metrics.width.spacingSlightlySmall,
+  },
+  inputContainer: {
+    flexDirection: 'row',
+    width: '100%',
+    height: HEIGHT_INPUT,
+    backgroundColor: colors.white[10],
+    borderColor: colors.neutral[60],
+  },
+  input: {
+    flex: 1,
+    height: '100%',
+    fontSize: FontSizes.fontSmall,
+    color: colors.neutral[80],
+  },
+  inputMultiline: {
+    height: ph(80),
+    paddingVertical: metrics.height.spacingExtraSmall,
+  },
+  icon: {
+    height: HEIGHT_INPUT,
+    width: HEIGHT_INPUT,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+});