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'; ...@@ -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,
SafeAreaView,
StatusBar,
} 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';
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).map((x) => ({
id: x.id, id: x.id,
code: x.code, code: x.code,
name: x.name, name: x.name,
logo: x.logo, 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={() => {
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={() => { onPress={() => {
setModalVisible(true); _onPressItem(null);
setKeySearch(''); }}
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); _onSearch(keySearch);
}}> }}
<View style={styles.flexRowJustifyBetween}> />
<Text <AntDesign
style={[styles.txtTitle, {flex: 1, flexWrap: 'wrap'}]} name="search1"
numberOfLines={1} size={WIDTHXD(40)}
ellipsizeMode="tail"> color={R.colors.gray}
{valueSearch.trim()} style={{position: 'absolute', left: WIDTHXD(28)}}
</Text> />
<View> </View>
{valueSearch === '' ? ( {!_.isEmpty(result) ? (
<TouchableOpacity <View style={styles.viewResult}>
onPress={() => { <FlatList
setModalVisible(true); data={result}
_onSearch(keySearch); extraData={result}
}} style={styles.flatlist}
hitSlop={{left: WIDTHXD(50), right: WIDTHXD(50)}}> renderItem={({item, index}) => (
<AntDesign <ItemBank
name="search1" item={item}
size={WIDTHXD(43)} isEndItem={index == result.length - 1}
color={R.colors.iconGray} onPress={(item) => _onPressItem(item)}
/> />
</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> </View>
</TouchableOpacity> ) : (
<Text style={styles.txtEmpty}>{I18n.t('NullDataSearch')}</Text>
<Modal )}
animated={true} </View>
animationType="fade" </View>
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> </View>
); </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(90), marginTop: WIDTHXD(90),
flexDirection: 'row', flexDirection: 'row',
justifyContent: 'center', justifyContent: 'center',
position: 'relative', position: 'relative',
}, },
txtTitle: { txtTitle: {
marginRight: WIDTHXD(24), marginRight: WIDTHXD(24),
color: R.colors.black0, color: R.colors.black0,
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(250),
}, },
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(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,
}, },
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; 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