change bank view

src/Screens/MethodPay/AddMethod.js

@@ -25,6 +25,7 @@ import {getListBank, addMethodBank} from '../../apis/Functions/Widthdraw';
 import {showLoading, hideLoading} from '../../actions/loadingAction';
 import {useNavigation} from '@react-navigation/native';
 import I18n from '../../helper/i18/i18n';
+import SelectBankModal from './SelectBankModal';
 
 const {width} = Dimensions.get('window');
 
@@ -104,11 +105,19 @@ const AddMethodPay = (props) => {
           <View style={styles.container}>
             <View style={{flex: 1}}>
               <Text style={styles.txtTitle}>Chọn ngân hàng </Text>
-              <PickerItem
-                value={bank_id}
+              {/*<PickerItem*/}
+              {/*  value={bank_id}*/}
+              {/*  data={data}*/}
+              {/*  onValueChange={(value, items) => {*/}
+              {/*    setBankID(items);*/}
+              {/*  }}*/}
+              {/*/>*/}
+              <SelectBankModal
+                  title={'Chọn ngân hàng'}
                   data={data}
-                onValueChange={(value, items) => {
-                  setBankID(items);
+                  onPressItem = {(item) => {
+                    console.log(item)
+                    setBankID(item)
                   }}
               />
               <TextField

src/Screens/MethodPay/ItemBank.js

+import React from 'react';
+import {View, Text, StyleSheet, TouchableOpacity, Image} from 'react-native';
+import {getFontXD, HEIGHTXD, WIDTHXD, toPriceVnd, getWidth} from '../../Config/Functions';
+import R from '../../assets/R';
+import Block from '../../components/Block';
+import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
+import {useNavigation} from '@react-navigation/native';
+import {METHODPAYDETAIL} from '../../routers/ScreenNames';
+const Item = (props) => {
+  const {item} = props;
+  return (
+    <TouchableOpacity onPress={() => props.onPress(item)}>
+      <View style={[styles.container, {marginBottom: props.isEndItem ? HEIGHTXD(100) : HEIGHTXD(15)}]}>
+        <Block flex={1} row center padding={[HEIGHTXD(10), WIDTHXD(10)]}>
+          <Image source={{uri: item.logo}} style={styles.imgIcon} />
+          <Block padding={[0, 10]}>
+            <Text style={styles.txtBig}>{item.title}</Text>
+            <Block space={'between'} row flex={1}>
+              <Block>
+                <Text style={styles.txtRight}>{item.code}</Text>
+                <Text style={styles.txtRight}>{item.name}</Text>
+              </Block>
+            </Block>
+          </Block>
+        </Block>
+      </View>
+    </TouchableOpacity>
+  );
+};
+
+export default React.memo(Item);
+
+const styles = StyleSheet.create({
+  container: {
+    marginTop: HEIGHTXD(10),
+    shadowColor: '#000',
+    shadowOffset: {
+      width: 0,
+      height: 1,
+    },
+    shadowOpacity: 0.25,
+    shadowRadius: 3.84,
+    elevation: 2,
+    marginHorizontal: HEIGHTXD(10),
+    backgroundColor: R.colors.white,
+    marginBottom: 10,
+    borderRadius: HEIGHTXD(15),
+    width: getWidth() - WIDTHXD(105),
+  },
+
+  wrapLeft: {
+    width: WIDTHXD(16),
+    borderTopLeftRadius: HEIGHTXD(30),
+    borderBottomStartRadius: HEIGHTXD(30),
+  },
+  wrapDate: {
+    justifyContent: 'center',
+    paddingHorizontal: 10,
+  },
+  txtTitle: {
+    fontSize: getFontXD(42),
+    color: R.colors.black,
+    fontWeight: 'bold',
+  },
+  txt: {
+    fontSize: getFontXD(39),
+    color: '#929292',
+    fontStyle: 'italic',
+  },
+  rowBet: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+  },
+  txtBlack: {
+    fontSize: getFontXD(42),
+    color: 'black',
+  },
+  imgIcon: {
+    width: WIDTHXD(200),
+    height: WIDTHXD(200),
+    resizeMode: 'contain',
+  },
+  txtLeft: {
+    fontSize: getFontXD(36),
+    color: '#929292',
+    marginBottom: 5,
+  },
+  txtBig: {
+    fontSize: getFontXD(42),
+    color: '#00359C',
+  },
+  txtRight: {
+    fontSize: getFontXD(36),
+    marginBottom: 5,
+  },
+});

src/Screens/MethodPay/SelectBankModal.js

+import React, {useState,useEffect} from 'react';
+import {
+    Text,
+    View,
+    Modal,
+    TouchableOpacity,
+    FlatList,
+    StyleSheet,
+    TextInput,
+    ActivityIndicator,
+} from 'react-native';
+import _ from 'lodash';
+import AntDesign from 'react-native-vector-icons/AntDesign';
+import R from '../../assets/R';
+import {
+    HEIGHTXD,
+    WIDTHXD,
+    getFontXD,
+    getWidth,
+    getHeight,
+} from '../../Config/Functions';
+import I18n from '../../helper/i18/i18n';
+import ItemBank from './ItemBank';
+
+const SelectBankModal = (props) => {
+    console.log(props)
+    const [modalVisible, setModalVisible] = useState(false);
+    const [valueSearch, setValueSearch] = useState('');
+    const [result, setResult] = useState(props.data);
+    const [keySearch, setKeySearch] = useState('');
+    useEffect(()=>{
+        setResult(props.data)
+    },[props.data])
+    const localFilter = (data, allowFields = [], search_text) => {
+        if (!data) return [];
+        if (!search_text || search_text === '') return data;
+
+        let result = [];
+        data.map((item) => {
+            if (!allowFields) {
+                result.push(item);
+            } else {
+                let added = false;
+                allowFields.map((param) => {
+                    if (
+                        !added &&
+                        (item[param + ''] + '')
+                            .toLowerCase()
+                            .includes(search_text.toLowerCase())
+                    ) {
+                        result.push(item);
+                        added = true;
+                    }
+                });
+            }
+        });
+        return result;
+    };
+    const _onSearch = async (keySearch) => {
+        const data = props.data
+            ? localFilter(props.data, ['code', 'name'], keySearch)
+                .map(
+                    (x) => ({
+                        id: x.id,
+                        code: x.code,
+                        name: x.name,
+                        logo: x.logo,
+                    })
+                )
+            : [];
+
+        // remove duplicate
+        let result = [];
+        data.map((item) => {
+            let exists = result.filter((x) => x.id === item.id);
+            if (!exists || exists.length === 0) result.push(item);
+        });
+        setResult(result);
+    };
+    const _onPressItem = (item) => {
+        console.log('_onPressItem', item)
+        props.onPressItem(item)
+        setValueSearch(item ? item.name : '');
+        setModalVisible(false);
+    };
+
+    return (
+        <View>
+            <TouchableOpacity
+                style={[styles.buttonShowModal]}
+                onPress={() => {
+                    setModalVisible(true);
+                    setKeySearch('');
+                    _onSearch(keySearch);
+                }}>
+                <View style={styles.flexRowJustifyBetween}>
+                    <Text
+                        style={[styles.txtTitle, {flex: 1, flexWrap: 'wrap'}]}
+                        numberOfLines={1}
+                        ellipsizeMode="tail">
+                        {valueSearch.trim()}
+                    </Text>
+                    <View>
+                        {valueSearch === '' ? (
+                            <TouchableOpacity
+                                onPress={() => {
+                                    setModalVisible(true);
+                                    _onSearch(keySearch);
+                                }}
+                                hitSlop={{left: WIDTHXD(50), right: WIDTHXD(50)}}>
+                                <AntDesign
+                                    name="search1"
+                                    size={WIDTHXD(43)}
+                                    color={R.colors.iconGray}
+                                />
+                            </TouchableOpacity>
+                        ) : (
+                            <TouchableOpacity
+                                onPress={() => {
+                                    _onPressItem(null);
+                                }}
+                                hitSlop={{left: WIDTHXD(50), right: WIDTHXD(50)}}>
+                                <AntDesign
+                                    name="close"
+                                    size={WIDTHXD(43)}
+                                    color={R.colors.iconGray}
+                                />
+                            </TouchableOpacity>
+                        )}
+                    </View>
+                </View>
+            </TouchableOpacity>
+
+            <Modal
+                animated={true}
+                animationType="fade"
+                visible={modalVisible}
+                transparent={true}>
+                <View style={styles.overViewModal}>
+                    <View style={[styles.container]}>
+                        <View style={styles.viewTitle}>
+                            <Text style={[styles.title]}>{props.title}</Text>
+                            <TouchableOpacity
+                                style={styles.btClose}
+                                onPress={() => setModalVisible(false)}>
+                                <AntDesign
+                                    name="close"
+                                    size={WIDTHXD(48)}
+                                    color={R.colors.black}
+                                />
+                            </TouchableOpacity>
+                        </View>
+                        <View style={styles.viewContent}>
+                            <View style={styles.inputSearch}>
+                                <TextInput
+                                    style={styles.input}
+                                    value={keySearch}
+                                    placeholder={I18n.t('Search')}
+                                    placeholderTextColor={R.colors.color777}
+                                    onChangeText={(keySearch) => {
+                                        setKeySearch(keySearch);
+                                        _onSearch(keySearch);
+                                    }}
+                                />
+                                <AntDesign
+                                    name="search1"
+                                    size={WIDTHXD(40)}
+                                    color={R.colors.gray}
+                                    style={{position: 'absolute', left: WIDTHXD(28)}}
+                                />
+                            </View>
+                            {!_.isEmpty(result) ? (
+                                <View style={styles.viewResult}>
+                                    <FlatList
+                                        data={result}
+                                        extraData={result}
+                                        style={styles.flatlist}
+                                        renderItem={({item, index}) => (
+                                            <ItemBank
+                                                item={item}
+                                                isEndItem = {index == result.length - 1}
+                                                onPress={(item) => _onPressItem(item)}
+                                            />
+                                        )}
+                                    />
+                                </View>
+                            ) : (
+                                <Text style={styles.txtEmpty}>
+                                    {I18n.t('NullDataSearch')}
+                                </Text>
+                            )}
+                        </View>
+                    </View>
+                </View>
+            </Modal>
+        </View>
+    );
+};
+
+const styles = StyleSheet.create({
+    container: {
+        backgroundColor: R.colors.white,
+        width: getWidth(),
+        height: getHeight(),
+    },
+
+    txtEmpty: {
+        textAlign: 'center',
+        color: R.colors.black,
+        fontSize: getFontXD(36),
+        marginTop: HEIGHTXD(48),
+    },
+    viewTitle: {
+        width: getWidth(),
+        height: HEIGHTXD(85),
+        marginTop: WIDTHXD(90),
+        flexDirection: 'row',
+        justifyContent: 'center',
+        position: 'relative',
+    },
+    txtTitle: {
+        marginRight: WIDTHXD(24),
+        color: R.colors.black0,
+        fontSize: getFontXD(42),
+    },
+    viewContent: {
+        marginTop: WIDTHXD(30),
+        marginBottom: WIDTHXD(36),
+        paddingHorizontal: WIDTHXD(46),
+    },
+    inputSearch: {
+        flexDirection: 'row',
+        position: 'relative',
+        alignItems: 'center',
+    },
+    viewResult: {
+        marginTop: WIDTHXD(37),
+        paddingBottom: WIDTHXD(54),
+    },
+    flatlist: {
+        width: getWidth(),
+        marginBottom: HEIGHTXD(300)
+    },
+    input: {
+        height: WIDTHXD(99),
+        width: getWidth() - WIDTHXD(90),
+        borderRadius: WIDTHXD(20),
+        backgroundColor: R.colors.gray5,
+        fontSize: getFontXD(35),
+        paddingLeft: WIDTHXD(90),
+        paddingRight: WIDTHXD(90),
+        color: R.colors.black,
+    },
+    flexRow: {
+        flexDirection: 'row',
+    },
+    title: {
+        width: getWidth(),
+        textAlign: 'center',
+        alignItems: 'center',
+        fontSize: getFontXD(48),
+        color: R.colors.black,
+    },
+    buttonShowModal: {
+        justifyContent: 'center',
+        height: HEIGHTXD(109),
+        color: 'black',
+        borderRadius: 7,
+        borderWidth: 0.7,
+        borderColor: '#DBDBDB',
+        fontSize: getFontXD(42),
+        paddingVertical: 5,
+        paddingHorizontal: 10,
+        backgroundColor: 'white',
+        shadowColor: '#AFA9A9',
+        shadowOffset: {
+            width: 0,
+            height: 1,
+        },
+        shadowOpacity: 0.25,
+        shadowRadius: 1.84,
+        elevation: 1,
+    },
+    flexRowJustifyBetween: {
+        flexDirection: 'row',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+        paddingHorizontal: WIDTHXD(24),
+    },
+    overViewModal: {
+        flex: 1,
+        justifyContent: 'center',
+        alignItems: 'center',
+        backgroundColor: '#rgba(0,0,0,0.7)',
+    },
+    btClose: {
+        alignSelf: 'center',
+        position: 'absolute',
+        left: WIDTHXD(48),
+        width: WIDTHXD(48),
+        height: WIDTHXD(48),
+    },
+    btItem: {
+        paddingVertical: WIDTHXD(6),
+        // paddingBottom: WIDTHXD(18),
+        justifyContent: 'center',
+        borderBottomWidth: WIDTHXD(1),
+        borderBottomColor: R.colors.borderD4,
+    },
+    txtResult: {
+        paddingLeft: WIDTHXD(28),
+        paddingRight: WIDTHXD(28),
+        lineHeight: HEIGHTXD(100),
+        // width: '100%'
+        // textAlign: 'center'
+    },
+    loading: {
+        alignSelf: 'center',
+        marginTop: 24,
+    },
+});
+export default SelectBankModal;

src/assets/colors.js

@@ -43,6 +43,7 @@ const colors = {
   gray2: '#cccccc',
   gray1: '#bfbfbf',
   gray4: '#e6e6e6',
+  gray5: 'rgba(226,232,235, 1)',
   orange: '#FF9C00',
   lightBlue: '#1a8cff',
   lightBlue1: '#008ae6',
@@ -51,7 +52,7 @@ const colors = {
   rgbaBtn: 'rgba(127, 127, 191, 0.2)',
   yellow: '#e6e600',
   red: '#A60014',
-  red1: '#ff4d4d',
+  red1: '#e2e8eb',
 };
 
 export default colors;

src/helper/i18/locales/en.js

@@ -74,4 +74,7 @@ export default {
   Success: 'Success',
   OK: 'Ok',
   Can_not_get_data: "Can't get data",
+  Search: 'Search',
+  NullDataSearch: "Data not found",
+
 };

src/helper/i18/locales/vn.js

@@ -75,4 +75,7 @@ export default {
 
   Can_not_get_data: 'Không lấy được dữ liệu!',
   Cancel: 'Huỷ',
+  Search: 'Tìm kiếm',
+  NullDataSearch: "Không tìm thấy kết quả",
+
 };