@tima2025/react-native-timalender 1.0.0

package/src/screens/Confirm/Components/ModalChooseBank.tsx

@@ -0,0 +1,158 @@
+/* eslint-disable react-native/no-inline-styles */
+//@ts-nocheck
+import React, { useState } from 'react';
+import { Image, StyleSheet, TouchableOpacity, View } from 'react-native';
+import Modal from 'react-native-modal';
+import Icon from 'react-native-vector-icons/Ionicons';
+import imageBanks from '../../../assets/images/Banks';
+import Colors from '../../../common/Colors';
+import FlexRow from '../../../common/FlexRow';
+import RText from '../../../common/RText';
+import SpaceBetween from '../../../common/SpaceBetween';
+
+const ModalChooseBank = (props) => {
+  const { isVisible, listBank, onPress, onClose } = props;
+  const [currentIndex, setCurrentIndex] = useState(-1);
+
+  const getIconBank = (bank: string) => {
+    switch (bank) {
+      case 'GPAY':
+        return imageBanks.icon_gpay;
+      case 'Gpay':
+        return imageBanks.icon_gpay;
+      // case 'NamA':
+      //   return imageBanks.icon_nama;
+      case 'NCB':
+        return imageBanks.icon_ncb;
+      case 'VIB':
+        return imageBanks.icon_vib;
+      default:
+        break;
+    }
+  };
+
+  const mapText = (bank: string) => {
+    switch (bank) {
+      case 'GPAY':
+        return 'Miễn phí chuyển tiền';
+      case 'Gpay':
+        return 'Miễn phí chuyển tiền';
+      // case 'NamA':
+      //   return 'Ngân hàng Nam Á';
+      case 'NCB':
+        return 'Ngân hàng QUốc Dân NCB';
+      case 'VIB':
+        return 'Ngân hàng quốc tế VIB';
+      default:
+        break;
+    }
+  };
+  return (
+    <Modal
+      isVisible={isVisible}
+      backdropOpacity={0.3}
+      useNativeDriver={true}
+      animationOutTiming={500}
+      onBackdropPress={onClose}
+      useNativeDriverForBackdrop={true}
+      hideModalContentWhileAnimating={true}
+      style={{ margin: 0, justifyContent: 'flex-end' }}
+    >
+      <View style={styles.containerModal}>
+        <SpaceBetween style={{ paddingBottom: 16 }}>
+          <Icon name="close" color={Colors.WHITE} />
+          <RText textStyle={{ fontSize: 16 }}>CHỌN PHƯƠNG THỨC GIẢI NGÂN</RText>
+          <TouchableOpacity onPress={onClose}>
+            <Icon name="close" size={28} />
+          </TouchableOpacity>
+        </SpaceBetween>
+        {listBank.map((item: any, index: number) => {
+          let checked = false;
+          if (index === currentIndex) {
+            checked = true;
+          }
+          return (
+            <TouchableOpacity
+              onPress={() => {
+                setCurrentIndex(index);
+                onPress(item);
+              }}
+              key={item?.linkageBankId}
+              disabled={checked}
+              style={styles.btnChooseBank}
+            >
+              <FlexRow>
+                <Image
+                  source={getIconBank(item?.bankCode)}
+                  style={styles.image}
+                />
+                <View style={{ paddingLeft: 12 }}>
+                  <RText>{item?.bankCode}</RText>
+                  <RText textStyle={styles.text}>
+                    {mapText(item?.bankCode)}
+                  </RText>
+                </View>
+              </FlexRow>
+              {checked ? (
+                <View style={styles.border}>
+                  <View style={styles.inner} />
+                </View>
+              ) : (
+                <View style={[styles.border, { borderColor: '#4F4F4F' }]} />
+              )}
+            </TouchableOpacity>
+          );
+        })}
+      </View>
+    </Modal>
+  );
+};
+
+export default ModalChooseBank;
+
+const styles = StyleSheet.create({
+  containerModal: {
+    backgroundColor: Colors.WHITE,
+    borderTopLeftRadius: 24,
+    borderTopRightRadius: 24,
+    padding: 16,
+  },
+
+  btnChooseBank: {
+    borderRadius: 4,
+    borderWidth: 1,
+    borderColor: '#BDBDBD',
+    padding: 16,
+    marginBottom: 16,
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+  },
+
+  image: {
+    width: 28,
+    height: 28,
+    borderRadius: 30,
+  },
+
+  text: {
+    color: '#828282',
+  },
+
+  border: {
+    borderWidth: 1,
+    borderColor: Colors.ORANGE,
+    borderRadius: 40,
+    width: 18,
+    height: 18,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+
+  inner: {
+    width: 10,
+    height: 10,
+    borderRadius: 20,
+    backgroundColor: Colors.ORANGE,
+  },
+});