@tima2025/react-native-timalender 1.0.0

package/src/common/HeaderClose/HeaderClose.tsx

@@ -0,0 +1,76 @@
+// @ts-nocheck
+import React from 'react';
+import { View } from 'react-native';
+import DeviceInfo from 'react-native-device-info';
+import { isIphoneX } from 'react-native-iphone-x-helper';
+import LinearGradient from 'react-native-linear-gradient';
+import ButtonIcon from '../ButtonIcon';
+import Colors from '../Colors';
+import RText from '../RText';
+import SpaceBetween from '../SpaceBetween';
+const HeaderClose = ({
+  onPress,
+  iconNoti,
+  onPressNoti,
+}: {
+  onPress: () => void;
+  iconNoti?: boolean;
+  onPressNoti?: () => void;
+}) => {
+  return (
+    <LinearGradient
+      start={{ x: 0, y: 0 }}
+      end={{ x: 1, y: 0 }}
+      colors={['#EF592E', '#FF8E4F']}
+      style={{
+        flexDirection: 'row',
+        height: isIphoneX() ? 90 : DeviceInfo.hasDynamicIsland() ? 90 : 62,
+        paddingHorizontal: 16,
+        paddingBottom: 12,
+        alignItems: 'flex-end',
+        justifyContent: 'space-between',
+      }}
+    >
+      <RText
+        textStyle={{
+          fontWeight: '600',
+          fontSize: 16,
+          color: Colors.WHITE,
+        }}
+      >
+        Đầu tư nhanh
+      </RText>
+      <SpaceBetween
+        style={{
+          borderWidth: 1,
+          borderRadius: 32,
+          borderColor: Colors.WHITE,
+          height: 32,
+          paddingHorizontal: 8,
+        }}
+      >
+        <ButtonIcon
+          iconName={iconNoti ? 'notifications' : 'information-circle-outline'}
+          iconSize={20}
+          iconColor={Colors.WHITE}
+          onPress={iconNoti && onPressNoti}
+        />
+        <View
+          style={{
+            height: '100%',
+            width: 1,
+            backgroundColor: Colors.WHITE,
+            marginHorizontal: 4,
+          }}
+        />
+        <ButtonIcon
+          onPress={onPress}
+          iconName="close"
+          iconSize={20}
+          iconColor={Colors.WHITE}
+        />
+      </SpaceBetween>
+    </LinearGradient>
+  );
+};
+export default HeaderClose;

package/src/common/InputBox.tsx

@@ -0,0 +1,34 @@
+//@ts-nocheck
+import React from 'react';
+import { StyleSheet, TextInput } from 'react-native';
+import { actuatedNormalize } from './Metrics';
+
+const InputBox = (props) => {
+  const { placeholder, value, keyboardType, onChangeText, maxLength } = props;
+  return (
+    <TextInput
+      placeholder={placeholder}
+      placeholderTextColor={'grey'}
+      value={value}
+      onChangeText={onChangeText}
+      keyboardType={keyboardType}
+      maxLength={maxLength}
+      style={styles.input}
+    />
+  );
+};
+
+export default InputBox;
+
+const styles = StyleSheet.create({
+  input: {
+    borderWidth: 1,
+    width: '100%',
+    borderColor: '#E0E0E0',
+    borderRadius: actuatedNormalize(40),
+    height: actuatedNormalize(48),
+    paddingLeft: actuatedNormalize(16),
+    marginTop: actuatedNormalize(16),
+    color: 'black',
+  },
+});

package/src/common/LazyImage.tsx

@@ -0,0 +1,53 @@
+//@ts-nocheck
+/* eslint-disable react-native/no-inline-styles */
+import React, { memo, useState } from 'react';
+import {
+  ActivityIndicator,
+  ColorValue,
+  StyleProp,
+  View,
+  ViewStyle,
+} from 'react-native';
+import FastImage, { ImageStyle, Source } from 'react-native-fast-image';
+import Colors from './Colors';
+
+type ImageType = {
+  source: Source;
+  resizeMode?: 'contain' | 'center' | 'stretch' | 'cover';
+  borderRadius?: number;
+  borderBottomLeftRadius?: number;
+  borderBottomRightRadius?: number;
+  style?: StyleProp<ImageStyle>;
+  changeColor?: boolean | undefined;
+  containerStyle?: ViewStyle;
+  tintColor?: ColorValue;
+};
+
+const LazyImage = (props: ImageType) => {
+  const { source, style, resizeMode, containerStyle, tintColor } = props;
+  const [loading, setLoading] = useState(true);
+  return (
+    <View style={containerStyle}>
+      <FastImage
+        onLoadEnd={() => setLoading(false)}
+        resizeMode={resizeMode}
+        source={source}
+        style={style}
+        tintColor={tintColor}
+      />
+      <ActivityIndicator
+        color={Colors.ORANGE}
+        style={{
+          position: 'absolute',
+          left: 0,
+          right: 0,
+          top: 0,
+          bottom: 0,
+        }}
+        animating={loading}
+      />
+    </View>
+  );
+};
+
+export default memo(LazyImage);

package/src/common/Loading.tsx

@@ -0,0 +1,48 @@
+//@ts-nocheck
+import Lottie from 'lottie-react-native';
+import React, { memo } from 'react';
+import { StyleSheet, View } from 'react-native';
+import Spinner from 'react-native-loading-spinner-overlay';
+import loading from '../assets/JSON/loading1.json';
+import Colors from './Colors';
+import { actuatedNormalize } from './Metrics';
+import RText from './RText';
+
+const Loading = () => {
+  return (
+    <Spinner visible={true} overlayColor="rgba(0,0,0,0.5)">
+      <View style={styles.container}>
+        <View style={styles.inner}>
+          <Lottie
+            source={loading}
+            autoPlay
+            loop
+            style={{
+              width: actuatedNormalize(50),
+              height: actuatedNormalize(50),
+            }}
+          />
+          <RText textStyle={{ color: Colors.GREY }}>Vui lòng đợi...</RText>
+        </View>
+      </View>
+    </Spinner>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+
+  inner: {
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: Colors.WHITE,
+    padding: 8,
+    borderRadius: 8,
+  },
+});
+
+export default memo(Loading);

package/src/common/Metrics.tsx

@@ -0,0 +1,194 @@
+//@ts-nocheck
+import { Dimensions, PixelRatio, Platform, StatusBar } from 'react-native';
+import Colors from './Colors';
+
+export const { width, height } = Dimensions.get('window');
+
+// based on iphone 11's scale (design)
+const scale = width / 414;
+
+export const actuatedNormalize = (size: number) => {
+  const newSize = size * scale;
+  if (Platform.OS === 'ios') {
+    return Math.round(PixelRatio.roundToNearestPixel(newSize));
+  } else {
+    return Math.round(PixelRatio.roundToNearestPixel(newSize));
+  }
+};
+
+// check if devices is ipX, ipXS, ipXSMAx
+const getPaddingTopByDevice = () => {
+  let padTop = 0;
+  if (Platform.OS === 'ios') {
+    // check ipX, XS, XS max
+    if (width === 812 || height === 812 || width === 896 || height === 896) {
+      padTop = 24;
+    }
+  }
+  return padTop;
+};
+
+// check if devices is ipX, ipXS, ipXSMAx
+const getPaddingBottomByDevice = () => {
+  let padBottom = 0;
+  if (Platform.OS === 'ios') {
+    // check ipX, XS, XS max
+    if (width === 812 || height === 812 || width === 896 || height === 896) {
+      padBottom = 25;
+    }
+  }
+  return padBottom;
+};
+
+export const STATUSBAR_HEIGHT =
+  Platform.OS === 'ios'
+    ? 20 + getPaddingTopByDevice()
+    : StatusBar.currentHeight;
+
+export const PADDING_BOTTOM = getPaddingBottomByDevice();
+
+const Metrics = {
+  fontSize: {
+    h1: actuatedNormalize(20),
+    h2: actuatedNormalize(18),
+    h3: actuatedNormalize(16),
+    h4: actuatedNormalize(14),
+    small: actuatedNormalize(12),
+  },
+  screenWidth: width,
+  screenHeight: height,
+};
+
+export const fontWeight = {
+  SemiBold: Platform.OS === 'ios' ? '600' : '700',
+  Light: Platform.OS === 'ios' ? '500' : '600',
+  Medium: Platform.OS === 'ios' ? '400' : '500',
+};
+
+export const Shadow = {
+  shadowColor: Colors.GREY,
+  shadowOffset: {
+    width: 0,
+    height: 1,
+  },
+  shadowOpacity: 0.23,
+  shadowRadius: 6,
+  elevation: 2,
+};
+
+export function replaceAccent(str: string) {
+  try {
+    if (__DEV__) {
+      console.log('replaceAccent', str);
+    }
+    str = str.replace(/à|á|ạ|ả|ã|â|ầ|ấ|ậ|ẩ|ẫ|ă|ằ|ắ|ặ|ẳ|ẵ/g, 'a');
+    str = str.replace(/è|é|ẹ|ẻ|ẽ|ê|ề|ế|ệ|ể|ễ/g, 'e');
+    str = str.replace(/ì|í|ị|ỉ|ĩ/g, 'i');
+    str = str.replace(/ò|ó|ọ|ỏ|õ|ô|ồ|ố|ộ|ổ|ỗ|ơ|ờ|ớ|ợ|ở|ỡ/g, 'o');
+    str = str.replace(/ù|ú|ụ|ủ|ũ|ư|ừ|ứ|ự|ử|ữ/g, 'u');
+    str = str.replace(/ỳ|ý|ỵ|ỷ|ỹ/g, 'y');
+    str = str.replace(/đ/g, 'd');
+    str = str.replace(/À|Á|Ạ|Ả|Ã|Â|Ầ|Ấ|Ậ|Ẩ|Ẫ|Ă|Ằ|Ắ|Ặ|Ẳ|Ẵ/g, 'A');
+    str = str.replace(/È|É|Ẹ|Ẻ|Ẽ|Ê|Ề|Ế|Ệ|Ể|Ễ/g, 'E');
+    str = str.replace(/Ì|Í|Ị|Ỉ|Ĩ/g, 'I');
+    str = str.replace(/Ò|Ó|Ọ|Ỏ|Õ|Ô|Ồ|Ố|Ộ|Ổ|Ỗ|Ơ|Ờ|Ớ|Ợ|Ở|Ỡ/g, 'O');
+    str = str.replace(/Ù|Ú|Ụ|Ủ|Ũ|Ư|Ừ|Ứ|Ự|Ử|Ữ/g, 'U');
+    str = str.replace(/Ỳ|Ý|Ỵ|Ỷ|Ỹ/g, 'Y');
+    str = str.replace(/Đ/g, 'D');
+  } catch (e) {
+    if (__DEV__) {
+      console.log(e);
+    }
+  }
+
+  return str;
+}
+
+export function numberWithCommas(x: string | number | null) {
+  if (x) {
+    x = Math.round(x);
+    return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
+  } else {
+    return '0';
+  }
+}
+
+export function timeConverter(UNIX_timestamp: string | number | Date) {
+  let a = new Date(UNIX_timestamp);
+  // let months = [
+  //   'Jan',
+  //   'Feb',
+  //   'Mar',
+  //   'Apr',
+  //   'May',
+  //   'Jun',
+  //   'Jul',
+  //   'Aug',
+  //   'Sep',
+  //   'Oct',
+  //   'Nov',
+  //   'Dec',
+  // ];
+  let year = a.getFullYear();
+  // let month = months[a.getMonth()];
+  let month = a.getMonth() + 1;
+  let date = a.getDate();
+  // let hour = a.getHours();
+  // let min = a.getMinutes();
+  // let sec = a.getSeconds();
+  let time = date + '/' + month + '/' + year;
+  return time;
+}
+
+export function timeDifference(previous: string | number | Date) {
+  try {
+    let msPerMinute = 60 * 1000;
+    let msPerHour = msPerMinute * 60;
+    let msPerDay = msPerHour * 24;
+    let msPerMonth = msPerDay * 30;
+    let msPerYear = msPerDay * 365;
+
+    let elapsed = new Date() - new Date(previous) + 25200000;
+
+    if (elapsed < msPerMinute) {
+      return Math.round(elapsed / 1000) + ' giây trước';
+    } else if (elapsed < msPerHour) {
+      return Math.round(elapsed / msPerMinute) + ' phút trước';
+    } else if (elapsed < msPerDay) {
+      return Math.round(elapsed / msPerHour) + ' giờ trước';
+    } else if (elapsed < msPerMonth) {
+      return Math.round(elapsed / msPerDay) + ' ngày trước';
+    } else if (elapsed < msPerYear) {
+      return Math.round(elapsed / msPerMonth) + ' tháng trước';
+    } else {
+      return Math.round(elapsed / msPerYear) + ' năm trước';
+    }
+  } catch (e) {
+    return '';
+  }
+}
+
+export function formatMoneyText(x: string) {
+  if (x) {
+    try {
+      // x = parseInt(x) + ''
+      x = x.replace(/^0+|,|-|\.| /g, '');
+      return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
+    } catch (e) {
+      return '';
+    }
+  } else {
+    return '';
+  }
+}
+
+export function getMoney(x: string) {
+  if (x) {
+    x = x.toString().replace(/,|\.| /g, '');
+    return x;
+  } else {
+    return '0';
+  }
+}
+
+export default Metrics;

package/src/common/RText.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import { StyleSheet, Text, TextStyle } from 'react-native';
+import { Typography } from './FontStyles';
+
+const RText = (props: {
+  [x: string]: any;
+  children: any;
+  textStyle?: TextStyle;
+}) => {
+  const { children, textStyle, ...pr } = props;
+
+  return (
+    <Text style={[styles.text, textStyle]} {...pr}>
+      {children}
+    </Text>
+  );
+};
+
+export default RText;
+
+const styles = StyleSheet.create({
+  text: {
+    ...Typography.SemiSmall,
+    color: '#000000',
+    fontFamily: 'Roboto',
+  },
+});

package/src/common/SpaceBetween.tsx

@@ -0,0 +1,22 @@
+import React, { memo } from 'react';
+import { StyleSheet, View, ViewStyle } from 'react-native';
+
+interface Props {
+  children?: React.ReactElement | React.ReactElement[];
+  style?: ViewStyle;
+}
+
+const SpaceBetween = (props: Props) => {
+  const { children, style } = props;
+  return <View style={[styles.container, style]}>{children}</View>;
+};
+
+const styles = StyleSheet.create({
+  container: {
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    flexDirection: 'row',
+  },
+});
+
+export default memo(SpaceBetween);

package/src/common/VectorIcon/Icon.tsx

@@ -0,0 +1,73 @@
+//@ts-nocheck
+import React from 'react';
+import AntIcon from 'react-native-vector-icons/AntDesign';
+import FontistoIcon from 'react-native-vector-icons/Fontisto';
+import IoIcon from 'react-native-vector-icons/Ionicons';
+import MaterialCommunityIcon from 'react-native-vector-icons/MaterialCommunityIcons';
+import MaterialIcon from 'react-native-vector-icons/MaterialIcons';
+import { IconProps } from './types';
+
+export const IoIconApp = (props: IconProps) => {
+  const { name, color, size, onPress } = props;
+  return (
+    <IoIcon
+      {...props}
+      onPress={onPress}
+      name={name}
+      color={color}
+      size={size}
+    />
+  );
+};
+
+export const AntIconApp = (props: IconProps) => {
+  const { name, color, size, onPress } = props;
+  return (
+    <AntIcon
+      {...props}
+      onPress={onPress}
+      name={name}
+      color={color}
+      size={size}
+    />
+  );
+};
+
+export const MaterialIconApp = (props: IconProps) => {
+  const { name, color, size, onPress } = props;
+  return (
+    <MaterialIcon
+      {...props}
+      onPress={onPress}
+      name={name}
+      color={color}
+      size={size}
+    />
+  );
+};
+
+export const FontistoIconApp = (props: IconProps) => {
+  const { name, color, size, onPress } = props;
+  return (
+    <FontistoIcon
+      {...props}
+      onPress={onPress}
+      name={name}
+      color={color}
+      size={size}
+    />
+  );
+};
+
+export const MaterialCommunityIconApp = (props: IconProps) => {
+  const { name, color, size, onPress } = props;
+  return (
+    <MaterialCommunityIcon
+      {...props}
+      onPress={onPress}
+      name={name}
+      color={color}
+      size={size}
+    />
+  );
+};

package/src/common/VectorIcon/types.d.ts

@@ -0,0 +1,6 @@
+export type IconProps = {
+  name: string;
+  color?: string;
+  size?: number;
+  onPress?: () => void;
+};

package/src/common/WToast.tsx

@@ -0,0 +1,26 @@
+//@ts-nocheck
+import { WToast } from 'react-native-smart-tip';
+
+export function WToastShowError(text: string, position?: number) {
+  const toastOpts = {
+    data: text,
+    textColor: '#ffffff',
+    backgroundColor: '#E60A0A',
+    duration: WToast.duration.LONG, //1.SHORT 2.LONG
+    position: position || WToast.position.BOTTOM, // 1.TOP 2.CENTER 3.BOTTOM
+  };
+
+  WToast.show(toastOpts);
+}
+
+export function WToastShowSuccess(text: string, position?: number) {
+  const toastOpts = {
+    data: text,
+    textColor: '#ffffff',
+    backgroundColor: '#0052D4',
+    duration: WToast.duration.LONG, //1.SHORT 2.LONG
+    position: position || WToast.position.BOTTOM, // 1.TOP 2.CENTER 3.BOTTOM
+  };
+
+  WToast.show(toastOpts);
+}

package/src/common/constants/index.ts

@@ -0,0 +1,38 @@
+import {Dimensions} from 'react-native';
+
+const contants = {
+  widthDevice: Math.min(
+    Dimensions.get('window').height,
+    Dimensions.get('window').width,
+  ),
+  heightDevice: Math.max(
+    Dimensions.get('window').height,
+    Dimensions.get('window').width,
+  ),
+  btnDisabledBg: '#b5b5b5',
+  btnDisabledClr: '#f1f1f1',
+  colorTransparent: '#00000000',
+  primaryColor: '#EE4223',
+  totalMoneyColor: '#FF7E59',
+  primaryDarkColor: '#F4511E',
+  colorText: '#1D1B1B',
+  colorGreyText: '#535353',
+  colorRedText: '#F14336',
+  colorYellowText: '#FFA800',
+  colorOrangeText: '#E36D00',
+  colorBgButton: '#1bb581',
+  coloraccent: '#f52a2a',
+  colorActive: '#2ecc71',
+  colorMaxSlider: '#037f5d',
+  colorGradientStart: '#1DB584',
+  colorGradientEnd: '#31B9A5',
+  colorShadow: '#00000040',
+  colorPhoneNumber: '#222222',
+  colorDividerPhoneNumber: '#ECECEC',
+  colorBorderInfo: '#E5E5E5',
+  colorRadioButton: '#E3E3E3',
+  textColor: '#000',
+  colorYellowWarning: '#ffcc00',
+};
+
+export default contants;