Skip to content

I
InvestCustomer
Commit 7e120a1c by Giang Tran
Options

merge code

parent bdfbad02
Showing with 295 additions and 298 deletions
src/Screens/Action/Deposit/ChooseMethod.js
......@@ -5,7 +5,7 @@ import HeaderBack from '../../../components/Header/HeaderBack';
import Item from './Item';
import {getListMethod} from '../../../apis/Functions/Deposit';
import {connect} from 'react-redux';
import I18n from '../../../helper/i18/i18n';
const MethodPayView = (props) => {
const [data, setData] = useState([]);
......@@ -20,7 +20,7 @@ const MethodPayView = (props) => {
if (res.data.code == 200 && res.data.data) {
setData(res.data.data);
} 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 {
Text,
View,
Modal,
TouchableOpacity,
FlatList,
StyleSheet,
TextInput,
ActivityIndicator,
Text,
View,
Modal,
TouchableOpacity,
FlatList,
StyleSheet,
TextInput,
ActivityIndicator,
SafeAreaView,
StatusBar,
} 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,
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;
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;
}
});
}
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,
})
)
: [];
}
});
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);
};
// 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]}
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={() => {
setModalVisible(true);
setKeySearch('');
_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}
presentationStyle="pageSheet">
<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);
}}>
<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>
}}
/>
<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>
</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>
) : (
<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(),
},
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,
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(250),
},
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: {
height: '100%',
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#rgba(0,0,0,0.7)',
margin: 0,
},
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;
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