Commit 7444f26c by Nguyễn Thị Thúy

change bank view

parent 456d9095
...@@ -25,6 +25,7 @@ import {getListBank, addMethodBank} from '../../apis/Functions/Widthdraw'; ...@@ -25,6 +25,7 @@ import {getListBank, addMethodBank} from '../../apis/Functions/Widthdraw';
import {showLoading, hideLoading} from '../../actions/loadingAction'; import {showLoading, hideLoading} from '../../actions/loadingAction';
import {useNavigation} from '@react-navigation/native'; import {useNavigation} from '@react-navigation/native';
import I18n from '../../helper/i18/i18n'; import I18n from '../../helper/i18/i18n';
import SelectBankModal from './SelectBankModal';
const {width} = Dimensions.get('window'); const {width} = Dimensions.get('window');
...@@ -104,12 +105,20 @@ const AddMethodPay = (props) => { ...@@ -104,12 +105,20 @@ const AddMethodPay = (props) => {
<View style={styles.container}> <View style={styles.container}>
<View style={{flex: 1}}> <View style={{flex: 1}}>
<Text style={styles.txtTitle}>Chn ngân hàng </Text> <Text style={styles.txtTitle}>Chn ngân hàng </Text>
<PickerItem {/*<PickerItem*/}
value={bank_id} {/* value={bank_id}*/}
data={data} {/* data={data}*/}
onValueChange={(value, items) => { {/* onValueChange={(value, items) => {*/}
setBankID(items); {/* setBankID(items);*/}
}} {/* }}*/}
{/*/>*/}
<SelectBankModal
title={'Chọn ngân hàng'}
data={data}
onPressItem = {(item) => {
console.log(item)
setBankID(item)
}}
/> />
<TextField <TextField
onChangeText={(val) => setBankName(val)} onChangeText={(val) => setBankName(val)}
......
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,
},
});
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;
...@@ -43,6 +43,7 @@ const colors = { ...@@ -43,6 +43,7 @@ const colors = {
gray2: '#cccccc', gray2: '#cccccc',
gray1: '#bfbfbf', gray1: '#bfbfbf',
gray4: '#e6e6e6', gray4: '#e6e6e6',
gray5: 'rgba(226,232,235, 1)',
orange: '#FF9C00', orange: '#FF9C00',
lightBlue: '#1a8cff', lightBlue: '#1a8cff',
lightBlue1: '#008ae6', lightBlue1: '#008ae6',
...@@ -51,7 +52,7 @@ const colors = { ...@@ -51,7 +52,7 @@ const colors = {
rgbaBtn: 'rgba(127, 127, 191, 0.2)', rgbaBtn: 'rgba(127, 127, 191, 0.2)',
yellow: '#e6e600', yellow: '#e6e600',
red: '#A60014', red: '#A60014',
red1: '#ff4d4d', red1: '#e2e8eb',
}; };
export default colors; export default colors;
...@@ -74,4 +74,7 @@ export default { ...@@ -74,4 +74,7 @@ export default {
Success: 'Success', Success: 'Success',
OK: 'Ok', OK: 'Ok',
Can_not_get_data: "Can't get data", Can_not_get_data: "Can't get data",
Search: 'Search',
NullDataSearch: "Data not found",
}; };
...@@ -75,4 +75,7 @@ export default { ...@@ -75,4 +75,7 @@ export default {
Can_not_get_data: 'Không lấy được dữ liệu!', Can_not_get_data: 'Không lấy được dữ liệu!',
Cancel: 'Huỷ', Cancel: 'Huỷ',
Search: 'Tìm kiếm',
NullDataSearch: "Không tìm thấy kết quả",
}; };
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