Skip to content

I
InvestCustomer
Commit 966d0e67 by Nguyễn Thị Thúy
Options

fix bug bank dialog

parents 37ad78ef 7e120a1c
Showing with 298 additions and 298 deletions
src/Screens/Action/Deposit/ChooseMethod.js
...@@ -5,7 +5,7 @@ import HeaderBack from '../../../components/Header/HeaderBack'; ...@@ -5,7 +5,7 @@ import HeaderBack from '../../../components/Header/HeaderBack';
import Item from './Item'; import Item from './Item';
import {getListMethod} from '../../../apis/Functions/Deposit'; import {getListMethod} from '../../../apis/Functions/Deposit';
import {connect} from 'react-redux'; import {connect} from 'react-redux';
import I18n from '../../../helper/i18/i18n';
const MethodPayView = (props) => { const MethodPayView = (props) => {
const [data, setData] = useState([]); const [data, setData] = useState([]);
...@@ -20,7 +20,7 @@ const MethodPayView = (props) => { ...@@ -20,7 +20,7 @@ const MethodPayView = (props) => {
if (res.data.code == 200 && res.data.data) { if (res.data.code == 200 && res.data.data) {
setData(res.data.data); setData(res.data.data);
} else { } else {
alert('Không lấy được danh sách phương thức!'); Alert.alert(I18n.t('Notification'), I18n.t(''));
} }
}; };
......
src/Screens/MethodPay/SelectBankModal.js
import React, {useState,useEffect} from 'react'; import React, {useState,useEffect} from 'react';
import { import {
Text, Text,
View, View,
Modal, Modal,
TouchableOpacity, TouchableOpacity,
FlatList, FlatList,
StyleSheet, StyleSheet,
TextInput, TextInput,
ActivityIndicator, ActivityIndicator,
} from 'react-native'; } from 'react-native';
import _ from 'lodash'; import _ from 'lodash';
import AntDesign from 'react-native-vector-icons/AntDesign'; import AntDesign from 'react-native-vector-icons/AntDesign';
import R from '../../assets/R'; import R from '../../assets/R';
import { import {
HEIGHTXD, HEIGHTXD,
WIDTHXD, WIDTHXD,
getFontXD, getFontXD,
getWidth, getWidth,
getHeight, getHeight,
} from '../../Config/Functions'; } from '../../Config/Functions';
import I18n from '../../helper/i18/i18n'; import I18n from '../../helper/i18/i18n';
import ItemBank from './ItemBank'; import ItemBank from './ItemBank';
import {SafeAreaView} from 'react-native-safe-area-context'; import {SafeAreaView} from 'react-native-safe-area-context';
const SelectBankModal = (props) => { const SelectBankModal = (props) => {
console.log(props) console.log(props)
const [modalVisible, setModalVisible] = useState(false); const [modalVisible, setModalVisible] = useState(false);
const [valueSearch, setValueSearch] = useState(''); const [valueSearch, setValueSearch] = useState('');
const [result, setResult] = useState(props.data); const [result, setResult] = useState(props.data);
const [keySearch, setKeySearch] = useState(''); const [keySearch, setKeySearch] = useState('');
useEffect(()=>{ useEffect(()=>{
setResult(props.data) setResult(props.data)
},[props.data]) },[props.data])
const localFilter = (data, allowFields = [], search_text) => { const localFilter = (data, allowFields = [], search_text) => {
if (!data) return []; if (!data) return [];
if (!search_text || search_text === '') return data; if (!search_text || search_text === '') return data;
let result = []; let result = [];
data.map((item) => { data.map((item) => {
if (!allowFields) { if (!allowFields) {
result.push(item); result.push(item);
} else { } else {
let added = false; let added = false;
allowFields.map((param) => { allowFields.map((param) => {
if ( if (
!added && !added &&
(item[param + ''] + '') (item[param + ''] + '')
.toLowerCase() .toLowerCase()
.includes(search_text.toLowerCase()) .includes(search_text.toLowerCase())
) { ) {
result.push(item); result.push(item);
added = true; added = true;
} }
});
}
}); });
return result; }
}; });
const _onSearch = async (keySearch) => { return result;
const data = props.data };
? localFilter(props.data, ['code', 'name'], keySearch) const _onSearch = async (keySearch) => {
.map( const data = props.data
(x) => ({ ? localFilter(props.data, ['code', 'name'], keySearch)
id: x.id, .map(
code: x.code, (x) => ({
name: x.name, id: x.id,
logo: x.logo, code: x.code,
}) name: x.name,
) logo: x.logo,
: []; })
)
: [];
// remove duplicate // remove duplicate
let result = []; let result = [];
data.map((item) => { data.map((item) => {
let exists = result.filter((x) => x.id === item.id); let exists = result.filter((x) => x.id === item.id);
if (!exists || exists.length === 0) result.push(item); if (!exists || exists.length === 0) result.push(item);
}); });
setResult(result); setResult(result);
}; };
const _onPressItem = (item) => { const _onPressItem = (item) => {
console.log('_onPressItem', item) console.log('_onPressItem', item)
props.onPressItem(item) props.onPressItem(item)
setValueSearch(item ? item.name : ''); setValueSearch(item ? item.name : '');
setModalVisible(false); setModalVisible(false);
}; };
return ( return (
<View> <View>
<TouchableOpacity <TouchableOpacity
style={[styles.buttonShowModal]} style={[styles.buttonShowModal]}
onPress={() => { onPress={() => {
setModalVisible(true); setModalVisible(true);
setKeySearch(''); setKeySearch('');
_onSearch(keySearch); _onSearch(keySearch);
}}> }}>
<View style={styles.flexRowJustifyBetween}> <View style={styles.flexRowJustifyBetween}>
<Text <Text
style={[styles.txtTitle, {flex: 1, flexWrap: 'wrap'}]} style={[styles.txtTitle, {flex: 1, flexWrap: 'wrap'}]}
numberOfLines={1} numberOfLines={1}
ellipsizeMode="tail"> ellipsizeMode="tail">
{valueSearch.trim()} {valueSearch.trim()}
</Text> </Text>
<View> <View>
{valueSearch === '' ? ( {valueSearch === '' ? (
<TouchableOpacity <TouchableOpacity
onPress={() => { onPress={() => {
setModalVisible(true); setModalVisible(true);
_onSearch(keySearch); _onSearch(keySearch);
}} }}
hitSlop={{left: WIDTHXD(50), right: WIDTHXD(50)}}> hitSlop={{left: WIDTHXD(50), right: WIDTHXD(50)}}>
<AntDesign <AntDesign
name="search1" name="search1"
size={WIDTHXD(43)} size={WIDTHXD(43)}
color={R.colors.iconGray} color={R.colors.iconGray}
/> />
</TouchableOpacity> </TouchableOpacity>
) : ( ) : (
<TouchableOpacity <TouchableOpacity
onPress={() => { onPress={() => {
_onPressItem(null); _onPressItem(null);
}} }}
hitSlop={{left: WIDTHXD(50), right: WIDTHXD(50)}}> hitSlop={{left: WIDTHXD(50), right: WIDTHXD(50)}}>
<AntDesign <AntDesign
name="close" name="close"
size={WIDTHXD(43)} size={WIDTHXD(43)}
color={R.colors.iconGray} color={R.colors.iconGray}
/> />
</TouchableOpacity> </TouchableOpacity>
)} )}
</View> </View>
</View> </View>
</TouchableOpacity> </TouchableOpacity>
<Modal <Modal
animated={true} animated={true}
animationType="fade" animationType="fade"
visible={modalVisible} visible={modalVisible}
> >
<SafeAreaView> <SafeAreaView>
<View style={styles.overViewModal}> <View style={styles.overViewModal}>
<View style={[styles.container]}> <View style={[styles.container]}>
<View style={styles.viewTitle}> <View style={styles.viewTitle}>
<Text style={[styles.title]}>{props.title}</Text> <Text style={[styles.title]}>{props.title}</Text>
<TouchableOpacity <TouchableOpacity
style={styles.btClose} style={styles.btClose}
onPress={() => setModalVisible(false)}> onPress={() => setModalVisible(false)}>
<AntDesign <AntDesign
name="close" name="close"
size={WIDTHXD(48)} size={WIDTHXD(48)}
color={R.colors.black} color={R.colors.black}
/> />
</TouchableOpacity> </TouchableOpacity>
</View> </View>
<View style={styles.viewContent}> <View style={styles.viewContent}>
<View style={styles.inputSearch}> <View style={styles.inputSearch}>
<TextInput <TextInput
style={styles.input} style={styles.input}
value={keySearch} value={keySearch}
placeholder={I18n.t('Search')} placeholder={I18n.t('Search')}
placeholderTextColor={R.colors.color777} placeholderTextColor={R.colors.color777}
onChangeText={(keySearch) => { onChangeText={(keySearch) => {
setKeySearch(keySearch); setKeySearch(keySearch);
_onSearch(keySearch); _onSearch(keySearch);
}} }}
/> />
<AntDesign <AntDesign
name="search1" name="search1"
size={WIDTHXD(40)} size={WIDTHXD(40)}
color={R.colors.gray} color={R.colors.gray}
style={{position: 'absolute', left: WIDTHXD(28)}} 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>
{!_.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>
) : (
<Text style={styles.txtEmpty}>
{I18n.t('NullDataSearch')}
</Text>
)}
</View> </View>
</SafeAreaView> </View>
</Modal> </View>
</View> </SafeAreaView>
); </Modal>
</View>
);
}; };
const styles = StyleSheet.create({ const styles = StyleSheet.create({
container: { container: {
backgroundColor: R.colors.white, backgroundColor: R.colors.white,
width: getWidth(), width: getWidth(),
height: getHeight(), height: getHeight(),
}, },
txtEmpty: { txtEmpty: {
textAlign: 'center', textAlign: 'center',
color: R.colors.black, color: R.colors.black,
fontSize: getFontXD(36), fontSize: getFontXD(36),
marginTop: HEIGHTXD(48), marginTop: HEIGHTXD(48),
}, },
viewTitle: { viewTitle: {
width: getWidth(), width: getWidth(),
height: HEIGHTXD(85), height: HEIGHTXD(85),
marginTop: WIDTHXD(30), marginTop: WIDTHXD(30),
flexDirection: 'row', flexDirection: 'row',
justifyContent: 'center', justifyContent: 'center',
position: 'relative', position: 'relative',
}, },
txtTitle: { txtTitle: {
marginRight: WIDTHXD(24), marginRight: WIDTHXD(24),
color: R.colors.black, color: R.colors.black,
fontSize: getFontXD(42), fontSize: getFontXD(42),
}, },
viewContent: { viewContent: {
marginTop: WIDTHXD(30), marginTop: WIDTHXD(30),
marginBottom: WIDTHXD(36), marginBottom: WIDTHXD(36),
paddingHorizontal: WIDTHXD(46), paddingHorizontal: WIDTHXD(46),
}, },
inputSearch: { inputSearch: {
flexDirection: 'row', flexDirection: 'row',
position: 'relative', position: 'relative',
alignItems: 'center', alignItems: 'center',
}, },
viewResult: { viewResult: {
marginTop: WIDTHXD(37), marginTop: WIDTHXD(37),
paddingBottom: WIDTHXD(54), paddingBottom: WIDTHXD(54),
}, },
flatlist: { flatlist: {
width: getWidth(), width: getWidth(),
marginBottom: HEIGHTXD(300) marginBottom: HEIGHTXD(300)
}, },
input: { input: {
height: WIDTHXD(99), height: WIDTHXD(99),
width: getWidth() - WIDTHXD(90), width: getWidth() - WIDTHXD(90),
borderRadius: WIDTHXD(20), borderRadius: WIDTHXD(20),
backgroundColor: R.colors.gray5, backgroundColor: R.colors.gray5,
fontSize: getFontXD(35), fontSize: getFontXD(35),
paddingLeft: WIDTHXD(90), paddingLeft: WIDTHXD(90),
paddingRight: WIDTHXD(90), paddingRight: WIDTHXD(90),
color: R.colors.black, color: R.colors.black,
}, },
flexRow: { flexRow: {
flexDirection: 'row', flexDirection: 'row',
}, },
title: { title: {
width: getWidth(), width: getWidth(),
textAlign: 'center', textAlign: 'center',
alignItems: 'center', alignItems: 'center',
fontSize: getFontXD(48), fontSize: getFontXD(48),
color: R.colors.black, color: R.colors.black,
}, },
buttonShowModal: { buttonShowModal: {
justifyContent: 'center', justifyContent: 'center',
height: HEIGHTXD(109), height: HEIGHTXD(109),
color: 'black', color: 'black',
borderRadius: 7, borderRadius: 7,
borderWidth: 0.7, borderWidth: 0.7,
borderColor: '#DBDBDB', borderColor: '#DBDBDB',
fontSize: getFontXD(42), fontSize: getFontXD(42),
paddingVertical: 5, paddingVertical: 5,
paddingHorizontal: 10, paddingHorizontal: 10,
backgroundColor: 'white', backgroundColor: 'white',
shadowColor: '#AFA9A9', shadowColor: '#AFA9A9',
shadowOffset: { shadowOffset: {
width: 0, width: 0,
height: 1, height: 1,
},
shadowOpacity: 0.25,
shadowRadius: 1.84,
elevation: 1,
},
flexRowJustifyBetween: {
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
paddingHorizontal: WIDTHXD(5),
},
overViewModal: {
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,
}, },
shadowOpacity: 0.25,
shadowRadius: 1.84,
elevation: 1,
},
flexRowJustifyBetween: {
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
paddingHorizontal: WIDTHXD(5),
},
overViewModal: {
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; export default SelectBankModal;
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment