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