Skip to content

I
InvestCustomer
Commit b0c4f993 by Giang Tran
Options

update exchange rate

parent 89a27f91
Showing with 538 additions and 452 deletions
src/Screens/Tool/EscrowCalculator/EscrowCalculatorView.js
import React from 'react';
import {FlatList, StyleSheet, Text, TouchableOpacity, View, ScrollView} from 'react-native';
import {
FlatList,
StyleSheet,
Text,
TouchableOpacity,
View,
ScrollView,
} from 'react-native';
import HeaderBack from '../../../components/Header/HeaderBack';
import {getFontXD, HEIGHTXD, toPriceVnd, WIDTHXD} from '../../../Config/Functions';
import {
getFontXD,
HEIGHTXD,
toPriceVnd,
WIDTHXD,
} from '../../../Config/Functions';
import R from '../../../assets/R';
import I18n from '../../../helper/i18/i18n';
import TextMoney from '../../../components/Input/InputMoney';
......@@ -9,131 +21,144 @@ import Icon from 'react-native-vector-icons/Entypo';
import ItemEscrowCalculator from './ItemEscrowCalculator';
const EscrowCalculatorView = (props) => {
return (
<View style={{flex: 1, flexDirection: 'column', backgroundColor: 'white'}}>
<HeaderBack title={'EscrowCalculator'} isWhite={true}/>
<ScrollView style={{paddingVertical:HEIGHTXD(60)}}>
<View >
<FlatList
keyExtractor={(item) => item.id}
data={props.listInput}
renderItem={({item, index}) => <ItemEscrowCalculator item={item}
dataProduct={props.dataProduct}
setProduct={(product) => {
item.product = product
props.setItemInput(item, index)
}}
setLotNumber={(lotNumber) => {
item.lotNumber = lotNumber.split('.').join('')
item.firstEscrow = parseFloat(item.lotNumber)*12312
props.setItemInput(item, index)
}}/>}
/>
<View style={{flexDirection: 'row', justifyContent: 'flex-end'}}>
<TouchableOpacity
onPress={() => {
props.onAdd();
}}
style={styles.containerBtn}>
<Icon name={'plus'} size={27} color={R.colors.white}/>
</TouchableOpacity>
</View>
<View style={{paddingHorizontal: WIDTHXD(60)}}>
<TextMoney
onChangeText={(val) => {
props.setFirstEscrow(val.split('.').join(''))
}}
title={I18n.t('FirstEscrow')}
value={props.firstEscrow}
titleStyle={{
marginTop: HEIGHTXD(180),
fontSize: getFontXD(39),
}}
/>
<TextMoney
editable={false}
title={I18n.t('FirstEscrowTotal')}
value={props.firstEscrowTotal}
titleStyle={{marginTop: HEIGHTXD(20), fontSize: getFontXD(39)}}
inputStyle={{backgroundColor: R.colors.gray7}}
/>
<Text style={styles.textMessage}>Bạn có thể giao dịch các hợp đồng kể trên với mức ký quỹ
khả dung hiện tại</Text>
</View>
return (
<View style={{flex: 1, flexDirection: 'column', backgroundColor: 'white'}}>
<HeaderBack title={'EscrowCalculator'} isWhite={true} />
<ScrollView style={{paddingVertical: HEIGHTXD(60)}}>
<View>
<FlatList
keyExtractor={(item) => item.id}
data={props.listInput}
renderItem={({item, index}) => (
<ItemEscrowCalculator
item={item}
dataProduct={props.dataProduct}
setProduct={(product) => {
item.product = product;
props.setItemInput(item, index);
}}
setLotNumber={(lotNumber) => {
item.lotNumber = lotNumber.split('.').join('');
item.firstEscrow = parseFloat(item.lotNumber) * 12312;
props.setItemInput(item, index);
}}
/>
)}
/>
<View style={{flexDirection: 'row', justifyContent: 'flex-end'}}>
<TouchableOpacity
onPress={() => {
props.onAdd();
}}
style={styles.containerBtn}>
<Icon name={'plus'} size={27} color={R.colors.white} />
</TouchableOpacity>
</View>
<View style={{paddingHorizontal: WIDTHXD(60)}}>
<TextMoney
onChangeText={(val) => {
props.setFirstEscrow(val.split('.').join(''));
}}
title={I18n.t('FirstEscrow')}
value={props.firstEscrow}
titleStyle={{
marginTop: HEIGHTXD(180),
fontSize: getFontXD(39),
}}
/>
<TextMoney
editable={false}
title={I18n.t('FirstEscrowTotal')}
value={props.firstEscrowTotal}
titleStyle={{marginTop: HEIGHTXD(20), fontSize: getFontXD(39)}}
inputStyle={{backgroundColor: R.colors.gray7}}
/>
<Text style={styles.textMessage}>
Bạn có thể giao dịch các hợp đồng kể trên với mức ký quỹ khả dung
hiện tại
</Text>
</View>
<View style={{
width: '100%',
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
marginTop: HEIGHTXD(80),
marginBottom: HEIGHTXD(150)
}}>
<TouchableOpacity onPress={() => {
props.onDelete();
}} style={[styles.btn, {backgroundColor: R.colors.red2, marginRight: WIDTHXD(72)}]}>
<Text style={styles.txtButton}>{I18n.t('Delete')}</Text>
</TouchableOpacity>
<TouchableOpacity onPress={() => {
props.onCalculator();
}} style={styles.btn}>
<Text style={styles.txtButton}>{I18n.t('Calculator')}</Text>
</TouchableOpacity>
</View>
</View>
</ScrollView>
<View
style={{
width: '100%',
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
marginTop: HEIGHTXD(80),
marginBottom: HEIGHTXD(150),
}}>
<TouchableOpacity
onPress={() => {
props.onDelete();
}}
style={[
styles.btn,
{backgroundColor: R.colors.red2, marginRight: WIDTHXD(72)},
]}>
<Text style={styles.txtButton}>{I18n.t('Delete')}</Text>
</TouchableOpacity>
<TouchableOpacity
onPress={() => {
props.onCalculator();
}}
style={styles.btn}>
<Text style={styles.txtButton}>{I18n.t('Calculator')}</Text>
</TouchableOpacity>
</View>
</View>
);
</ScrollView>
</View>
);
};
export default EscrowCalculatorView;
const styles = StyleSheet.create({
viewInput: {
marginHorizontal: WIDTHXD(36),
marginTop: WIDTHXD(69),
marginBottom: WIDTHXD(44),
borderWidth: 0.3,
borderColor: '#707070',
paddingHorizontal: WIDTHXD(24),
paddingVertical: WIDTHXD(24),
},
textTitle: {
fontSize: getFontXD(39),
color: R.colors.color777,
},
textMessage: {
fontSize: getFontXD(39),
color: R.colors.black,
marginTop: HEIGHTXD(68),
},
containerBtn: {
marginHorizontal: WIDTHXD(36),
backgroundColor: R.colors.main,
width: WIDTHXD(144),
height: WIDTHXD(144),
justifyContent: 'center',
alignItems: 'center',
shadowColor: '#000',
shadowOffset: {
width: 0,
height: 2,
},
shadowOpacity: 0.25,
shadowRadius: 3.84,
elevation: 3,
borderRadius: 30,
},
btn: {
width: WIDTHXD(428),
height: HEIGHTXD(120),
justifyContent: 'center',
alignItems: 'center',
backgroundColor: R.colors.main,
borderRadius: 5,
marginBottom: HEIGHTXD(42),
},
txtButton: {
color: R.colors.white,
fontSize: getFontXD(48),
viewInput: {
marginHorizontal: WIDTHXD(36),
marginTop: WIDTHXD(69),
marginBottom: WIDTHXD(44),
borderWidth: 0.3,
borderColor: '#707070',
paddingHorizontal: WIDTHXD(24),
paddingVertical: WIDTHXD(24),
},
textTitle: {
fontSize: getFontXD(39),
color: R.colors.color777,
},
textMessage: {
fontSize: getFontXD(39),
color: R.colors.black,
marginTop: HEIGHTXD(68),
},
containerBtn: {
marginHorizontal: WIDTHXD(36),
backgroundColor: R.colors.main,
width: WIDTHXD(144),
height: WIDTHXD(144),
justifyContent: 'center',
alignItems: 'center',
shadowColor: '#000',
shadowOffset: {
width: 0,
height: 2,
},
shadowOpacity: 0.25,
shadowRadius: 3.84,
elevation: 3,
borderRadius: 30,
},
btn: {
width: WIDTHXD(428),
height: HEIGHTXD(120),
justifyContent: 'center',
alignItems: 'center',
backgroundColor: R.colors.main,
borderRadius: 5,
marginBottom: HEIGHTXD(42),
},
txtButton: {
color: R.colors.white,
fontSize: getFontXD(48),
},
});
src/Screens/Tool/EscrowCalculator/ItemEscrowCalculator.js
......@@ -2,59 +2,60 @@ import React from 'react';
import {StyleSheet, Text, TouchableOpacity, View} from 'react-native';
import I18n from '../../../helper/i18/i18n';
import PickerItem from '../../../components/Picker/PickerItem';
import {getFontXD, HEIGHTXD, toPriceVnd, WIDTHXD} from '../../../Config/Functions';
import {
getFontXD,
HEIGHTXD,
toPriceVnd,
WIDTHXD,
} from '../../../Config/Functions';
import R from '../../../assets/R';
import TextMoney from '../../../components/Input/InputMoney';
import Icon from 'react-native-vector-icons/Entypo';
const ItemEscrowCalculator = (props) => {
return (
<View style={styles.viewInput}>
<Text
style={styles.textTitle}>
{I18n.t('Product')}
</Text>
<PickerItem
data={props.dataProduct}
onValueChange={(value, item) => {
props.setProduct(item);
}}
iconSize={WIDTHXD(40)}
iconColor={R.colors.black}
/>
return (
<View style={styles.viewInput}>
<Text style={styles.textTitle}>{I18n.t('Product')}</Text>
<PickerItem
data={props.dataProduct}
onValueChange={(value, item) => {
props.setProduct(item);
}}
iconSize={WIDTHXD(40)}
iconColor={R.colors.black}
/>
<TextMoney
onChangeText={(val) => {
props.setLotNumber(val);
}}
title={I18n.t('LotTransactionNumber')}
value={toPriceVnd(props.item.lotNumber)}
titleStyle={{marginTop: HEIGHTXD(20), fontSize: getFontXD(39)}}
/>
<TextMoney
onChangeText={(val) => {
}}
title={I18n.t('FirstEscrow')}
value={props.item.firstEscrow}
titleStyle={{ontSize: getFontXD(39)}}
editable={false}
inputStyle={{backgroundColor: R.colors.gray7}}
/>
</View>
);
<TextMoney
onChangeText={(val) => {
props.setLotNumber(val);
}}
title={I18n.t('LotTransactionNumber')}
value={toPriceVnd(props.item.lotNumber)}
titleStyle={{marginTop: HEIGHTXD(20), fontSize: getFontXD(39)}}
/>
<TextMoney
onChangeText={(val) => {}}
title={I18n.t('FirstEscrow')}
value={props.item.firstEscrow}
titleStyle={{ontSize: getFontXD(39)}}
editable={false}
inputStyle={{backgroundColor: R.colors.gray7}}
/>
</View>
);
};
const styles = StyleSheet.create({
viewInput: {
marginHorizontal: WIDTHXD(36),
marginBottom: WIDTHXD(30),
borderWidth: 0.3,
borderColor: '#707070',
paddingHorizontal: WIDTHXD(24),
paddingVertical: WIDTHXD(24),
},
textTitle: {
fontSize: getFontXD(39),
color: R.colors.color777,
},
})
viewInput: {
marginHorizontal: WIDTHXD(36),
marginBottom: WIDTHXD(30),
borderWidth: 0.3,
borderColor: '#707070',
paddingHorizontal: WIDTHXD(24),
paddingVertical: WIDTHXD(24),
},
textTitle: {
fontSize: getFontXD(39),
color: R.colors.color777,
},
});
export default ItemEscrowCalculator;
src/Screens/Tool/ExchangeRate.js
......@@ -13,62 +13,111 @@ import PickerItem from '../../components/Picker/PickerItem';
import I18n from '../../helper/i18/i18n';
import AppText from '../../components/AppText';
import TextField from '../../components/Input/TextField';
import {getFontXD, HEIGHTXD, WIDTHXD} from '../../Config/Functions';
import {getFontXD, HEIGHTXD, toPriceVnd, WIDTHXD} from '../../Config/Functions';
import R from '../../assets/R';
import {showAlert, TYPE} from '../../components/DropdownAlert';
import {getTransactionListByCategory} from '../../apis/Functions/Transaction';
const dataType = [
const DATA = [
{
id: 1,
name: 'Đậu tương',
value: 0.36744,
},
{
id: 2,
name: 'Khô đậu tương',
value: 1.1023,
},
{
id: 3,
name: 'Dầu đậu tương',
value: 22.0462,
},
{
id: 4,
name: 'Ngô',
value: 0.39368,
},
{
id: 5,
name: 'Lúa mỳ',
value: 0.36744,
},
{
id: 6,
name: 'Cà phê arabica',
value: 22.0462,
},
{
value: '0',
name: 'KG',
id: 7,
name: 'Cà phê Robusta',
value: 1,
},
{
id: 8,
name: 'Ca cao',
value: 1,
},
{
id: 9,
name: 'Bông',
value: 22.0462,
},
{
id: 10,
name: 'Đường',
value: 22.0462,
},
{
value: '1',
name: 'Pound',
id: 11,
name: 'Cao su',
value: 9.4,
},
];
const ExchangeRate = (props) => {
const [dataProduct, setDataProduct] = useState([]);
const [product, setProduct] = useState();
const [priceExchange, setPriceExchange] = useState();
const [usdTan, setUsdTan] = useState();
useEffect(() => {
getProductData();
}, []);
caculator();
}, [product, priceExchange]);
const getProductData = async () => {
const res = await getTransactionListByCategory({
keyword: '',
platform: Platform.OS,
page_size: 1000,
page_index: 1,
type: 'PRICE_TABLE',
category_id: -1,
});
if (res.status == 200 && res.data.code == 200) {
setDataProduct(res.data.data);
} else {
showAlert(TYPE.ERROR, I18n.t('Notification', I18n.t('Can_not_get_data')));
}
const caculator = () => {
if (product && priceExchange) {
const total = priceExchange * product.value;
setUsdTan(total + '');
} else if (!priceExchange) setUsdTan('');
};
return (
<View style={{flex: 1}}>
<HeaderBack title={'ConvertUnit'} />
<HeaderBack title={'ExchangeRate'} />
<View style={{flex: 1, paddingTop: 10, paddingHorizontal: 10}}>
<AppText style={styles.txtTitle} i18nKey={'Product'} />
<PickerItem
width={width - 20}
data={dataProduct}
data={DATA}
onValueChange={(value, items) => {
setProduct(items);
}}
/>
<TextField title={I18n.t('UnitsQuotedFloor')} />
<TextField title={I18n.t('ConversionPrice')} />
<TextField title={I18n.t('ConvertUSD')} />
<TextField
value={'US cent/ giạ'}
editable={true}
title={I18n.t('UnitsQuotedFloor')}
/>
<TextField
onChangeText={(val) => setPriceExchange(val)}
title={I18n.t('ConversionPrice')}
/>
<TextField
value={usdTan}
editable={true}
title={I18n.t('ConvertUSD')}
/>
<View style={styles.footer}>
<TouchableOpacity style={styles.btnContainer}>
<AppText style={styles.txtBtn} i18nKey={'Delete'} />
......
src/components/Header/Drawer.js
......@@ -144,12 +144,12 @@ const menus = [
icon: R.images.toolProfitLoss,
screen: CACULATEDPROFITLOSS,
},
{
id: '93',
title: 'CaculatedStopLoss',
icon: R.images.toolStopLoss,
screen: CACULATEDSTOPLOSS,
},
// {
// id: '93',
// title: 'CaculatedStopLoss',
// icon: R.images.toolStopLoss,
// screen: CACULATEDSTOPLOSS,
// },
{
id: '94',
title: 'ConvertUnit',
......
src/components/Input/TextField.js
......@@ -19,30 +19,33 @@ const TextField = (props) => {
<TextInput
maxLength={maxLength ? maxLength : 256}
placeholderTextColor={R.colors.placeHolder}
editable={editable != null ? editable : true}
editable={editable != null ? false : true}
autoCapitalize="none"
value={value}
keyboardType={isNumber ? 'number-pad' : 'default'}
onChangeText={(val) => onChangeText(val)}
style={{
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,
style={[
{
height: HEIGHTXD(109),
color: 'black',
borderRadius: 7,
borderWidth: 0.7,
borderColor: '#DBDBDB',
fontSize: getFontXD(42),
paddingVertical: 5,
paddingHorizontal: 10,
shadowColor: '#AFA9A9',
shadowOffset: {
width: 0,
height: 1,
},
shadowOpacity: 0.25,
shadowRadius: 1.84,
elevation: 1,
},
shadowOpacity: 0.25,
shadowRadius: 1.84,
elevation: 1,
}}
editable ? {backgroundColor: '#DBDBDB'} : {backgroundColor: 'white'},
]}
/>
</View>
);
......
src/components/Picker/PickerItem.js
import React, {Component} from 'react';
import {
StyleSheet,
Text,
View,
Image,
TouchableOpacity,
TouchableHighlight,
Dimensions,
Platform,
StyleSheet,
Text,
View,
Image,
TouchableOpacity,
TouchableHighlight,
Dimensions,
Platform,
} from 'react-native';
import ModalDropdown from 'react-native-modal-dropdown';
import R from '../../assets/R';
import {
WIDTHXD,
getFontXD,
HEIGHTXD,
getHeight,
WIDTHXDICON,
WIDTHXD,
getFontXD,
HEIGHTXD,
getHeight,
WIDTHXDICON,
} from '../../Config/Functions';
import Icon from 'react-native-vector-icons/AntDesign';
......@@ -38,234 +38,242 @@ const data = [];
* other you can make minDate,maxDate... with props of libary react-native-datepicker
*/
export default class PickerItem extends Component {
constructor(props) {
super(props);
this._button = null;
this._buttonFrame = null;
this.state = {
value: '',
showInBottom: true,
};
}
constructor(props) {
super(props);
this._button = null;
this._buttonFrame = null;
this.state = {
value: '',
showInBottom: true,
};
}
componentDidMount() {
this._dropdown.select(0);
componentDidMount() {
this._dropdown.select(0);
}
_dropdownAdjustFrame = (style) => {
const {showInBottom} = this.state;
// alert(showInBottom);
let stylez = style;
if (!showInBottom) {
stylez.height += HEIGHTXD(99) * (6 - Math.min(this.props.data.length, 5));
} else {
stylez.height += HEIGHTXD(99);
}
// stylez.left += 150;
return stylez;
};
_dropdownAdjustFrame = (style) => {
const {showInBottom} = this.state;
// alert(showInBottom);
let stylez = style;
if (!showInBottom) {
stylez.height += HEIGHTXD(99) * (6 - Math.min(this.props.data.length, 5));
} else {
stylez.height += HEIGHTXD(99);
}
// stylez.left += 150;
return stylez;
_calcPosition() {
const {data} = this.props;
let dropdownStyle = {
// maxHeight: HEIGHTXD(99 * Math.min(data.length, 5)) + (6 - Math.min(data.length, 5)) * HEIGHTXD(105),
maxHeight: HEIGHTXD(99 * Math.min(data.length, 5) + 12),
};
const dimensions = Dimensions.get('window');
const windowHeight = dimensions.height;
_calcPosition() {
const {data} = this.props;
let dropdownStyle = {
// maxHeight: HEIGHTXD(99 * Math.min(data.length, 5)) + (6 - Math.min(data.length, 5)) * HEIGHTXD(105),
maxHeight: HEIGHTXD(99 * Math.min(data.length, 5) + 12),
};
const dimensions = Dimensions.get('window');
const windowHeight = dimensions.height;
const dropdownHeight = dropdownStyle.maxHeight;
const dropdownHeight = dropdownStyle.maxHeight;
const bottomSpace =
windowHeight - this._buttonFrame.y - this._buttonFrame.h;
const showInBottom =
bottomSpace >= dropdownHeight || bottomSpace >= this._buttonFrame.y;
this.setState({showInBottom});
}
const bottomSpace =
windowHeight - this._buttonFrame.y - this._buttonFrame.h;
const showInBottom =
bottomSpace >= dropdownHeight || bottomSpace >= this._buttonFrame.y;
this.setState({showInBottom});
_updatePosition() {
if (this._button && this._button.measure) {
this._button.measure((fx, fy, width, height, px, py) => {
this._buttonFrame = {x: px, y: py, w: width, h: height};
this._calcPosition();
});
}
}
_updatePosition() {
if (this._button && this._button.measure) {
this._button.measure((fx, fy, width, height, px, py) => {
this._buttonFrame = {x: px, y: py, w: width, h: height};
this._calcPosition();
});
}
}
render() {
const {
width,
onValueChange,
containerStyle,
height,
value,
defaultValue,
data,
defaultIndex,
iconDropdown,
iconDropdownStyle,
disabled,
isTriangle,
textStyle,
iconSize,
iconColor,
} = this.props;
return (
<View style={styles.cell}>
<TouchableOpacity
disabled={disabled}
ref={(button) => {
this._button = button;
}}
onPress={() => {
this._dropdown.show();
this._updatePosition();
}}
style={[
styles.pickerStyle,
containerStyle !== null && containerStyle,
height && {height},
width && {width},
]}>
<Text
numberOfLines={1}
style={[
styles.dropdown_row_text,
width && {width: width - WIDTHXD(125)},
textStyle ? textStyle : {},
]}>
{defaultValue || this.state.value}
</Text>
{iconDropdown || isTriangle ? (
<Icon name={'up'} size={iconSize ? iconSize : 20} color={iconColor ? iconColor : R.colors.borderGray}/>
) : (
<Icon name={'down'} size={iconSize ? iconSize : 20} color={iconColor ? iconColor : R.colors.borderGray}/>
)}
</TouchableOpacity>
<ModalDropdown
showsVerticalScrollIndicator={false}
ref={(el) => {
this._dropdown = el;
}}
style={[styles.dropdown, width && {width}]}
defaultValue={defaultValue || '0'}
defaultIndex={defaultIndex || 0}
textStyle={styles.dropdown_text}
dropdownStyle={[
styles.dropdown_dropdown,
{maxHeight: HEIGHTXD(99 * Math.min(data.length, 6) + 12)},
width && {width},
]}
options={data !== null && data}
onSelect={(value) => {
onValueChange && onValueChange(value, data[value]);
this.setState({value: data[value].name});
}}
renderRow={(option, index, isSelected) => (
<View
style={[
styles.dropdown_row,
{backgroundColor: isSelected ? '#1C6AF6' : '#f2f2f2'},
]}>
<Text
numberOfLines={1}
style={[
styles.dropdown_row_text,
{
marginHorizontal: WIDTHXD(30),
color: isSelected ? 'white' : 'black',
fontWeight: isSelected ? 'bold' : '300',
},
]}>
{`${option.name}`}
</Text>
</View>
)}
renderButtonText={(rowData) => this.renderButtonText(rowData)}
adjustFrame={(style) => this._dropdownAdjustFrame(style)}
// renderSeparator={(sectionID, rowID, adjacentRowHighlighted) => this.renderSeparator(sectionID, rowID, adjacentRowHighlighted)}
/>
render() {
const {
width,
onValueChange,
containerStyle,
height,
value,
defaultValue,
data,
defaultIndex,
iconDropdown,
iconDropdownStyle,
disabled,
isTriangle,
textStyle,
iconSize,
iconColor,
} = this.props;
return (
<View style={styles.cell}>
<TouchableOpacity
disabled={disabled}
ref={(button) => {
this._button = button;
}}
onPress={() => {
this._dropdown.show();
this._updatePosition();
}}
style={[
styles.pickerStyle,
containerStyle !== null && containerStyle,
height && {height},
width && {width},
]}>
<Text
numberOfLines={1}
style={[
styles.dropdown_row_text,
width && {width: width - WIDTHXD(125)},
textStyle ? textStyle : {},
]}>
{defaultValue || this.state.value}
</Text>
{iconDropdown || isTriangle ? (
<Icon
name={'up'}
size={iconSize ? iconSize : 20}
color={iconColor ? iconColor : R.colors.borderGray}
/>
) : (
<Icon
name={'down'}
size={iconSize ? iconSize : 20}
color={iconColor ? iconColor : R.colors.borderGray}
/>
)}
</TouchableOpacity>
<ModalDropdown
showsVerticalScrollIndicator={false}
ref={(el) => {
this._dropdown = el;
}}
style={[styles.dropdown, width && {width}]}
defaultValue={defaultValue || '0'}
defaultIndex={defaultIndex || 0}
textStyle={styles.dropdown_text}
dropdownStyle={[
styles.dropdown_dropdown,
{maxHeight: HEIGHTXD(99 * Math.min(data.length, 6) + 12)},
width && {width},
]}
options={data !== null && data}
onSelect={(value) => {
onValueChange && onValueChange(value, data[value]);
this.setState({value: data[value].name});
}}
renderRow={(option, index, isSelected) => (
<View
style={[
styles.dropdown_row,
{backgroundColor: isSelected ? '#1C6AF6' : '#f2f2f2'},
]}>
<Text
numberOfLines={1}
style={[
styles.dropdown_row_text,
{
marginHorizontal: WIDTHXD(30),
color: isSelected ? 'white' : 'black',
fontWeight: isSelected ? 'bold' : '300',
},
]}>
{`${option.name}`}
</Text>
</View>
);
}
)}
renderButtonText={(rowData) => this.renderButtonText(rowData)}
adjustFrame={(style) => this._dropdownAdjustFrame(style)}
// renderSeparator={(sectionID, rowID, adjacentRowHighlighted) => this.renderSeparator(sectionID, rowID, adjacentRowHighlighted)}
/>
</View>
);
}
renderButtonText = () => ' ';
renderButtonText = () => ' ';
renderSeparator = (rowID) => {
if (rowID === data.length - 1) {
return [];
}
let key = `spr_${rowID}`;
return <View style={styles.dropdown_separator} key={key}/>;
};
renderSeparator = (rowID) => {
if (rowID === data.length - 1) {
return [];
}
let key = `spr_${rowID}`;
return <View style={styles.dropdown_separator} key={key} />;
};
}
const styles = StyleSheet.create({
cell: {
flex: 0,
},
dropdown: {
alignSelf: 'center',
width: WIDTHXD(960),
height: HEIGHTXD(0),
},
dropdown_text: {
fontSize: getFontXD(42),
},
dropdown_dropdown: {
width: WIDTHXD(960),
maxHeight: HEIGHTXD(200),
borderBottomLeftRadius: WIDTHXD(20),
borderBottomRightRadius: WIDTHXD(20),
shadowColor: '#000',
shadowOffset: {
width: 0,
height: 1,
},
shadowOpacity: 0.2,
shadowRadius: 1.41,
elevation: 2,
marginTop: Platform.OS == 'ios' ? 0 : -21,
},
dropdown_row: {
flexDirection: 'row',
height: HEIGHTXD(100),
alignItems: 'center',
paddingHorizontal: 5,
},
dropdown_row_text: {
// marginHorizontal: 4,
fontSize: getFontXD(42),
textAlignVertical: 'center',
},
dropdown_separator: {
borderBottomWidth: 0.3,
borderBottomColor: R.colors.iconGray,
cell: {
flex: 0,
},
dropdown: {
alignSelf: 'center',
width: WIDTHXD(960),
height: HEIGHTXD(0),
},
dropdown_text: {
fontSize: getFontXD(42),
},
dropdown_dropdown: {
width: WIDTHXD(960),
maxHeight: HEIGHTXD(200),
borderBottomLeftRadius: WIDTHXD(20),
borderBottomRightRadius: WIDTHXD(20),
shadowColor: '#000',
shadowOffset: {
width: 0,
height: 1,
},
pickerStyle: {
width: '100%',
height: HEIGHTXD(109),
flexDirection: 'row',
paddingHorizontal: WIDTHXD(30),
justifyContent: 'space-between',
alignItems: 'center',
alignSelf: 'center',
backgroundColor: 'white',
marginTop: 5,
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,
shadowOpacity: 0.2,
shadowRadius: 1.41,
elevation: 2,
marginTop: Platform.OS == 'ios' ? 0 : -21,
},
dropdown_row: {
flexDirection: 'row',
height: HEIGHTXD(100),
alignItems: 'center',
paddingHorizontal: 5,
},
dropdown_row_text: {
// marginHorizontal: 4,
fontSize: getFontXD(42),
textAlignVertical: 'center',
},
dropdown_separator: {
borderBottomWidth: 0.3,
borderBottomColor: R.colors.iconGray,
},
pickerStyle: {
width: '100%',
height: HEIGHTXD(109),
flexDirection: 'row',
paddingHorizontal: WIDTHXD(30),
justifyContent: 'space-between',
alignItems: 'center',
alignSelf: 'center',
backgroundColor: 'white',
marginTop: 5,
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,
},
});
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