1047 lines
46 KiB
JavaScript
1047 lines
46 KiB
JavaScript
import * as React from 'react';
|
|
import { useState, useRef} from 'react';
|
|
import { Platform, View, Text, Image, TouchableOpacity, ScrollView, StyleSheet, TextInput, Modal, ActivityIndicator, Alert } from 'react-native'
|
|
import { Button, Icon, Divider, Input } from 'react-native-elements'
|
|
import { Actionsheet } from 'native-base';
|
|
import { dateFormater } from '../utils/date';
|
|
import { closeModal } from '../redux/actions/AlertActions';
|
|
import { useDispatch } from 'react-redux';
|
|
import DateTimePicker from '@react-native-community/datetimepicker';
|
|
import DateTimePickerModal from "react-native-modal-datetime-picker";
|
|
import DatePicker from "react-native-date-picker";
|
|
import MonthPicker from 'react-native-month-year-picker';
|
|
import moment from 'moment';
|
|
import Theme from './theme.style.js';
|
|
import Assets from './assets.manager.js';
|
|
import CustomIcon from './icons.js';
|
|
|
|
var styles = StyleSheet.create({
|
|
column: {
|
|
flexDirection: 'column',
|
|
alignItems: 'flex-start',
|
|
width: '100%',
|
|
padding: 15
|
|
},
|
|
row: {
|
|
flexDirection: 'row',
|
|
alignItems: 'flex-start',
|
|
flexWrap: 'wrap',
|
|
flex: 1,
|
|
padding: 5,
|
|
fontSize: 16,
|
|
},
|
|
bullet: {
|
|
width: 10
|
|
},
|
|
bulletText: {
|
|
flex: 1,
|
|
color: 'rgba(0, 0, 0, 0.7)'
|
|
},
|
|
boldText: {
|
|
fontWeight: 'bold'
|
|
},
|
|
normalText: {
|
|
color: 'rgba(0, 0, 0, 0.7)'
|
|
},
|
|
container: {
|
|
flex: 1,
|
|
backgroundColor: 'blue',
|
|
flexDirection: 'row',
|
|
flexWrap: 'wrap'
|
|
},
|
|
|
|
item: {
|
|
backgroundColor: 'orange',
|
|
width: Theme.screen.w / 2,
|
|
height: Theme.screen.h / 2,
|
|
margin: 5
|
|
},
|
|
image: {
|
|
width: Theme.screen.w / 2,
|
|
height: Theme.screen.h / 2
|
|
},
|
|
centeredView: {
|
|
flex: 1,
|
|
justifyContent: "center",
|
|
alignItems: "center",
|
|
backgroundColor: '#00000090',
|
|
padding: 30
|
|
},
|
|
bottomView: {
|
|
flex: 1,
|
|
justifyContent: "flex-end",
|
|
alignItems: "center",
|
|
backgroundColor: '#00000090',
|
|
padding: 0
|
|
},
|
|
modalView: {
|
|
backgroundColor: '#fff',
|
|
padding: 20
|
|
},
|
|
modalTitle: {
|
|
padding: 5,
|
|
fontSize: 18,
|
|
fontWeight: 'bold'
|
|
},
|
|
modalText: {
|
|
padding: 5,
|
|
fontSize: 16,
|
|
color: 'gray',
|
|
marginTop: 10
|
|
},
|
|
});
|
|
|
|
const ModalDialogContainer = (props) => {
|
|
const Content = props.content;
|
|
return (
|
|
<View style={{flex: 1, width: '100%', height: '100%', position: 'absolute', zIndex: 1, backgroundColor: '#00000060'}}>
|
|
<TouchableOpacity onPress={props.onCancel} activeOpacity={1} style={{flex: 1, width: '100%', backgroundColor: '#00000060'}}></TouchableOpacity>
|
|
<View style={{flex: 1, flexDirection: 'row'}}>
|
|
<TouchableOpacity onPress={props.onCancel} activeOpacity={1} style={{flex: 1,backgroundColor: '#00000060'}}></TouchableOpacity>
|
|
<View style={{flex: 10, backgroundColor: '#fff'}}>
|
|
<Content props />
|
|
</View>
|
|
<TouchableOpacity onPress={props.onCancel} activeOpacity={1} style={{flex: 1, backgroundColor: '#00000060'}}></TouchableOpacity>
|
|
</View>
|
|
<TouchableOpacity onPress={props.onCancel} activeOpacity={1} style={{flex: 1, width: '100%', backgroundColor: '#00000060'}}></TouchableOpacity>
|
|
</View>)
|
|
}
|
|
|
|
const ul = function(props){
|
|
|
|
const [drop, setdrop] = useState(false);
|
|
|
|
const renderlist = (dataset) => {
|
|
return dataset.map((data, index) => {
|
|
return (
|
|
<View key={index} style={ styles.row }>
|
|
<View style={ styles.bullet }>
|
|
<Text>{'\u2022' + " "}</Text>
|
|
</View>
|
|
<View style={ styles.bulletText }>
|
|
<Text>
|
|
<Text style={ styles.normalText }>{data.label}</Text>
|
|
</Text>
|
|
</View>
|
|
</View>)
|
|
})
|
|
}
|
|
|
|
return (
|
|
<View style={{backgroundColor: 'red'}}>
|
|
<View style={{flex: 1, flexDirection: 'row', justifyContent: 'center'}}>
|
|
<TouchableOpacity activeOpacity={1} style={{flex: 1, flexDirection: 'row'}} onPress={() => {setdrop(!drop)}}>
|
|
<Text style={{flex:3, marginTop: 15, fontWeight: 'bold'}}>{props.title}</Text>
|
|
<View style={{flex: 1, flexDirection: 'column-reverse', alignItems: 'flex-end', fontWeight: 'normal'}}>
|
|
<Icon name={drop ? "expand-more" : "chevron-right"} color="gray" />
|
|
</View>
|
|
</TouchableOpacity>
|
|
</View>
|
|
{drop ? <View style={ styles.column }>{renderlist(props.list || [])}</View> : null}
|
|
</View>)
|
|
}
|
|
|
|
const product = function(props){
|
|
return (
|
|
<TouchableOpacity onPress={props.onPress || null} style={{flexBasis: '45%', width: '45%', padding: 5, margin: '2.5%', borderRadius: 15, borderWidth: 0.08}}>
|
|
<View style={{borderRadius: 15, height: props.height || 120, justifyContent: 'center', alignItems: 'center'}}>
|
|
<Image source={props.image || {uri: null}} style={{width: '90%', height: '90%', borderRadius: 15, resizeMode: 'contain'}} />
|
|
</View>
|
|
<Text style={{padding: 10, fontSize: 16, color: Theme.colors.textPrimary}}>{props.title}</Text>
|
|
</TouchableOpacity>
|
|
)
|
|
}
|
|
|
|
const loyaltycard = function(props){
|
|
return (
|
|
<TouchableOpacity onPress={props.onPress || null} style={{flexBasis: '45%', width: '45%', margin: '2.5%', borderRadius: 15, borderWidth: 0.08}}>
|
|
<View style={{height: props.height || 120, justifyContent: 'center', alignItems: 'center'}}>
|
|
<Image source={props.image} style={{width: '100%', height: '100%', borderTopLeftRadius: 15,borderTopRightRadius: 15, borderBottomLeftRadius: 15, borderBottomRightRadius: 15, resizeMode: 'stretch'}} />
|
|
</View>
|
|
<Text style={{padding: 10, color: Theme.colors.darkGray, fontSize: 16, textAlign: 'center'}}>{props.title}</Text>
|
|
</TouchableOpacity>
|
|
)
|
|
}
|
|
|
|
const card = function(props){
|
|
let h = props.height ? props.height : 130
|
|
return (
|
|
<TouchableOpacity onPress={props.onPress} activeOpacity={ props.disabled || 0} style={{flex: 1, height: h, margin: 5, borderRadius: 15, elevation: 0, borderTopLeftRadius: 15, borderTopRightRadius: 15, overflow: 'hidden'}}>
|
|
<View style={{flex: 1}}>
|
|
<Image
|
|
source={props.image}
|
|
style={
|
|
{
|
|
width: '100%',
|
|
borderTopLeftRadius: 15,
|
|
borderTopRightRadius: 15,
|
|
height: '100%',
|
|
}}
|
|
/>
|
|
</View>
|
|
<Text numberOfLines={1} adjustsFontSizeToFit={true} style={{backgroundColor: '#fff', padding: 5, marginBottom: 0, borderBottomLeftRadius: 15, borderBottomRightRadius: 15, fontSize: 15, color: 'gray', textAlign: props.titlealign || 'center', elevation: 0}}>{props.title}</Text>
|
|
</TouchableOpacity>)
|
|
}
|
|
|
|
const button = function(props){
|
|
return (<Button title={props.title} type={props.type}/>)
|
|
}
|
|
|
|
const input = function(props){
|
|
return (<Input
|
|
leftIcon={props.leftIcon || {}}
|
|
placeholder={props.placeholder}
|
|
errorStyle={props.errorStyle || {}}
|
|
errorMessage={props.errorMessage}
|
|
/>)
|
|
}
|
|
|
|
const icon = function(props){
|
|
return (<Image source={Assets.icons[props.name]} style={{width: props.size || 20, height: props.size || 20, resizeMode: props.resizeMode || 'cover', marginBottom: props.marginBottom || 0}} />)
|
|
}
|
|
|
|
const transaction = function(Props){
|
|
const props = Props.data
|
|
const getTransactionRedeemedPoints = (points, items) => {
|
|
let res = 0
|
|
for(var x=0;x<items.length;x++){ if(items[x].item == 'EPURSE' || items[x].item == '' && items[x].quantity > 0) res += items[x].quantity}
|
|
return res + points
|
|
}
|
|
return (
|
|
<View style={{flex: 0, width: '95%', marginLeft: '2.5%', marginTop: 15, paddingVertical: 6, paddingHorizontal: 10, borderColor: 'gray', backgroundColor: props.station == 'HO' ? '#FFFFFF99' : Props.isDarkMode ? Props.cardBackgroundColor : Theme.colors.lightGray, borderWidth: 0.1, borderRadius: 14, elevation: 1}}>
|
|
<Text style={{fontFamily: 'Arial', paddingBottom: 10, color: Props.isDarkMode ? Props.textColor : Theme.colors.darkerGray}}>{dateFormater(props.date)}</Text>
|
|
<TouchableOpacity activeOpacity={1} onPress={props.station == 'HO' ? null : Props.onPress} style={{flex: 1, flexDirection: 'row', marginTop: 0}}>
|
|
<View style={{flex: 3, paddingTop: 5, paddingBottom: 5}}>
|
|
<View style={{flex: 1, flexDirection: 'column'}}>
|
|
<Text style={{fontFamily: 'Arial', color: Props.isDarkMode ? Props.textColor : Theme.colors.darkerGray}}>{props.station || 'APP'}</Text>
|
|
<View style={{flex: 4, flexDirection: 'row'}}>
|
|
<CustomIcon.AntDesign name={props.rating >= 1 ? "star" : "staro"} color={Theme.colors.yellow} size={16} />
|
|
<CustomIcon.AntDesign name={props.rating >= 2 ? "star" : "staro"} color={Theme.colors.yellow} size={16} />
|
|
<CustomIcon.AntDesign name={props.rating >= 3 ? "star" : "staro"} color={Theme.colors.yellow} size={16} />
|
|
<CustomIcon.AntDesign name={props.rating >= 4 ? "star" : "staro"} color={Theme.colors.yellow} size={16} />
|
|
<CustomIcon.AntDesign name={props.rating >= 5 ? "star" : "staro"} color={Theme.colors.yellow} size={16} />
|
|
</View>
|
|
</View>
|
|
</View>
|
|
<View style={{flex: 5, paddingTop: 5, paddingLeft: 5, paddingBottom: 5}}>
|
|
<View style={{flex: 1, flexDirection: 'column'}}>
|
|
<Text style={{fontFamily: 'Arial', fontWeight: 'bold', color: Props.isDarkMode ? Props.textColor : Theme.colors.black}}>{"\u20B1"} {Theme.formatter.CRNCY(props.total_amount) || "0.00"}</Text>
|
|
<Text style={{fontFamily: 'Arial', color: Props.isDarkMode ? Props.textColor : Theme.colors.darkerGray}}>Earned: {Theme.formatter.CRNCY(props.earned) || "0.00"} PTS</Text>
|
|
<Text style={{fontFamily: 'Arial', color: Props.isDarkMode ? Props.textColor : Theme.colors.darkerGray}}>Redeemed: {Theme.formatter.CRNCY(getTransactionRedeemedPoints(props.redeemed, props.items))} PTS</Text>
|
|
</View>
|
|
</View>
|
|
<View style={{flex: 1, paddingTop: 5, paddingBottom: 5}}>
|
|
<View><CustomIcon.Feather name="chevron-right" size={40} color={props.station == 'HO' ? 'gray' : Theme.colors.primary} /></View>
|
|
</View>
|
|
</TouchableOpacity>
|
|
</View>
|
|
)
|
|
}
|
|
|
|
const transactiontable = function(Props){
|
|
const transaction = Props.data;
|
|
const items = Props.data.items || [];
|
|
const getTransactionRedeemedPoints = (points, items) => {
|
|
let res = 0
|
|
for(var x=0;x<items.length;x++){ if(items[x].item == 'EPURSE' || items[x].item == '' && items[x].quantity > 0) res += items[x].quantity}
|
|
return res + points
|
|
}
|
|
const renderItem = () => {
|
|
return items.map((item, index) => {
|
|
if(item.item == 'EPURSE' || item.item == '') return null
|
|
return (
|
|
<View key={index} style={{flex: 1, flexDirection: 'row', paddingLeft: 15, paddingRight: 15, paddingTop: 10, alignItems: 'center'}}>
|
|
<Text style={{flex: 4,fontFamily: 'Arial', textAlign: 'left', fontSize: 13, color: Props.textColor}}>{item.item}</Text>
|
|
<Text style={{flex: 2,fontFamily: 'Arial', fontWeight: 'bold', textAlign: 'center', fontSize: 13, color: Props.textColor}}>{item.quantity}</Text>
|
|
<Text style={{flex: 2, fontFamily: 'Arial', fontWeight: 'bold',textAlign: 'center', fontSize: 13, color: Props.textColor}}>{"\u20B1"} {Theme.formatter.CRNCY(item.price)}</Text>
|
|
</View>)
|
|
})
|
|
}
|
|
|
|
return (<View style={{width: '100%'}}>
|
|
{/* TABLE HEADER */}
|
|
<Divider />
|
|
<View style={{flex: 1, flexDirection: 'row', padding: 15, alignItems: 'center'}}>
|
|
<Text style={{flex: 4, height: 15, fontFamily: 'Arial', color: Props.textColor, textAlign: 'center'}}>Products</Text>
|
|
<Text style={{flex: 2, height: 15, fontFamily: 'Arial', color: Props.textColor,textAlign: 'center'}}>Qty</Text>
|
|
<Text style={{flex: 2, height: 15, fontFamily: 'Arial', color: Props.textColor, textAlign: 'center'}}>Price</Text>
|
|
</View>
|
|
<Divider />
|
|
{/* TABLE HEADER */}
|
|
|
|
{/* TABLE CONTENT */}
|
|
<ScrollView style={{ width: '100%', height: 170}}>
|
|
{renderItem()}
|
|
<View style={{padding: 10}}></View>
|
|
</ScrollView>
|
|
{/* TABLE CONTENT */}
|
|
|
|
<Divider />
|
|
<View style={{flex: 1, flexDirection: 'row', padding: 15, marginTop: 10, alignItems: 'center'}}>
|
|
<Text style={{flex: 4, height: 30, fontFamily: 'Arial', fontWeight: 'bold', fontSize: 20, textAlign: 'left', color: Theme.colors.darkGray}}>Total</Text>
|
|
<Text style={{flex: 2, height: 30, fontFamily: 'Arial', fontWeight: 'bold', fontSize: 20, textAlign: 'right', color: Props.textColor}}>{"\u20B1"} {Theme.formatter.CRNCY(transaction.total_amount)}</Text>
|
|
</View>
|
|
<View style={{flex: 1, flexDirection: 'row', padding: 15, alignItems: 'center'}}>
|
|
<Text style={{flex: 4, height: 30, fontFamily: 'Arial', textAlign: 'left', fontSize: 16, color: Theme.colors.darkGray}}>Earned</Text>
|
|
<Text style={{flex: 2,height: 30, fontFamily: 'Arial', textAlign: 'right', fontSize: 16, color: Props.isDarkMode ? Props.textColor : "#000"}}>{Theme.formatter.CRNCY(transaction.earned)} PTS</Text>
|
|
</View>
|
|
<View style={{flex: 1, flexDirection: 'row', paddingLeft: 15, paddingRight: 15, marginTop: 5, marginBottom: 20, alignItems: 'center'}}>
|
|
<Text style={{flex: 4, height: 30, fontFamily: 'Arial', textAlign: 'left', fontSize: 16, color: Theme.colors.darkGray}}>Redeemed</Text>
|
|
<Text style={{flex: 2, height: 30, fontFamily: 'Arial', textAlign: 'right', fontSize: 16, color: Props.isDarkMode ? Props.textColor : "#000"}}>{Theme.formatter.CRNCY(getTransactionRedeemedPoints(transaction.redeemed, items))} PTS</Text>
|
|
</View>
|
|
<Divider />
|
|
</View>)
|
|
}
|
|
|
|
const custominput = function(props){
|
|
let customstyle = props.style || {}
|
|
let customtitlestyle = props.titlestyle || {}
|
|
let fontsize = props.fontsize || 15
|
|
let inactiveborderwidth = props.inactiveborderwidth || 0.75
|
|
let activeborderwidth = props.activeborderwidth || 1.5
|
|
const input = () => {
|
|
return (
|
|
<View style={{flex: 1, marginBottom: 15, ...customstyle}}>
|
|
<Text style={{padding: 5, paddingLeft: 15, fontSize: 12, color: props.focused ? Theme.colors.accent : Theme.colors.darkGray, ...customtitlestyle}}>{props.title}</Text>
|
|
<Input
|
|
focused={props.focused|| false}
|
|
disabled={props.disabled || false}
|
|
keyboardType={props.keyboardType || 'default'}
|
|
maxLength={props.maxLength || undefined}
|
|
value={props.value || null}
|
|
placeholder={props.placeholder}
|
|
placeholderTextColor={props.placeholderColor}
|
|
onChangeText={props.onChangeText}
|
|
onFocus={props.onFocus}
|
|
containerStyle={{padding: 0}}
|
|
inputContainerStyle={{padding: 0, borderBottomWidth: props.focused ? 1.5 : 0.75, borderColor: props.hasError ? Theme.colors.primary : props.focused ? Theme.colors.accent : props.disabled ? "lightgray" : "black" }}
|
|
inputStyle={{padding: 5, fontFamily: 'Arial', fontSize: 14, borderWidth: 0, color: props?.isDarkMode ? props.textColor : Theme.colors.black}}
|
|
/>
|
|
{props.bottomText ? <View><Text style={{paddingLeft: 15, marginTop: 5, fontSize: 14, color: Theme.colors.darkGray}}>{props.bottomText}</Text></View> : null}
|
|
{props.bottomOption ?
|
|
<View><Text style={{paddingLeft: 15, marginTop: 5, fontSize: 14, color: Theme.colors.darkGray}}>If you wish to change this, please contact</Text>
|
|
<TouchableOpacity onPress={props.onContact || null}>
|
|
<Text style={{paddingLeft: 15, fontSize: 15, color: Theme.colors.accent}}>Unioil Customer Service</Text>
|
|
</TouchableOpacity></View> : null }
|
|
{props.hasError ? <View><Text style={{paddingLeft: 15, marginTop: 5, fontSize: 14, color: Theme.colors.primary}}>{props.errorMessage}</Text></View> : null}
|
|
</View>
|
|
)
|
|
}
|
|
const select = () => {
|
|
return (
|
|
<View style={{flex: 1, marginBottom: 15, ...customstyle}}>
|
|
<Text style={{padding: 5, paddingLeft: 15, fontSize: fontsize, color: props.focused ? Theme.colors.accent : Theme.colors.darkGray,...customtitlestyle}}>{props.title}</Text>
|
|
<TouchableOpacity onPress={props.onPress} style={{padding: 10, ...customstyle}}>
|
|
<View style={{padding: 0, borderBottomWidth: props.focused ? activeborderwidth : inactiveborderwidth, borderColor: props.hasError ? Theme.colors.primary : props.focused ? Theme.colors.accent : props.disabled ? "lightgray" : "black" }}>
|
|
<Text style={{fontSize: 14, fontFamily: 'Arial', paddingLeft: 5, paddingBottom: 10, color: props?.isDarkMode ? props.textColor : Theme.colors.black}}>{props.value || ""}</Text>
|
|
</View>
|
|
</TouchableOpacity>
|
|
{props.bottomText ? <View><Text style={{paddingLeft: 15, marginTop: 5, fontSize: 14, color: Theme.colors.darkGray}}>{props.bottomText}</Text></View> : null}
|
|
{props.bottomOption ?
|
|
<View><Text style={{paddingLeft: 15, marginTop: 5, fontSize: 14, color: Theme.colors.darkGray}}>If you wish to change this, please contact</Text>
|
|
<TouchableOpacity onPress={props.onContact || null}>
|
|
<Text style={{paddingLeft: 15, fontSize: 14, color: Theme.colors.accent}}>Unioil Customer Service</Text>
|
|
</TouchableOpacity></View> : null }
|
|
{props.hasError ? <View><Text style={{paddingLeft: 15, marginTop: 5, fontSize: 14, color: Theme.colors.primary}}>{props.errorMessage}</Text></View> : null}
|
|
</View>)
|
|
}
|
|
return props.type == "input" ? input() : select();
|
|
}
|
|
|
|
const checkboxdialog = function(props){
|
|
|
|
if(!props.shown) return null;
|
|
let itemsCount = props.items.length;
|
|
let size;
|
|
|
|
if(itemsCount == 2) size = 1.1;
|
|
else if (itemsCount == 4) size = 2.2;
|
|
|
|
const renderItems = () => {
|
|
return props.items.map((item, index) => {
|
|
if(item.string == "") return null
|
|
let color = props.selected == item.value ? Theme.colors.accent : Theme.colors.darkGray;
|
|
let bullet = props.selected == item.value ? "radiobox-marked" : "radiobox-blank";
|
|
return (
|
|
<TouchableOpacity key={index} onPress={() => props.onSelect(item.value, item.string)} style={{flexDirection: 'row', alignItems: 'flex-start', padding:5, marginTop: 10}}>
|
|
<View style={{flex: 1}}>
|
|
<Text style={{textAlign: 'center', padding: 2.5}}>
|
|
<CustomIcon.MaterialCommunityIcons color={color} name={bullet} size={25} />
|
|
</Text>
|
|
</View>
|
|
<View style={{flex: 5}}><Text style={{padding: 5, color: Theme.colors.darkGray, fontSize: 16}}>{item.string}</Text></View>
|
|
</TouchableOpacity>)
|
|
})
|
|
}
|
|
|
|
return (
|
|
<View style={{flex: 1, width: '100%', height: '100%', top: Platform.OS == 'ios' ? 45 : 0, position: 'absolute', zIndex: 1, backgroundColor: '#00000060'}}>
|
|
<TouchableOpacity onPress={props.onCancel} activeOpacity={1} style={{flex: 1, padding: 35, width: '100%', backgroundColor: '#00000060'}}></TouchableOpacity>
|
|
<View style={{flex: size, flexDirection: 'row'}}>
|
|
<TouchableOpacity onPress={props.onCancel} activeOpacity={1} style={{flex: 1, backgroundColor: '#00000060'}}></TouchableOpacity>
|
|
<View style={{flex: 12, backgroundColor: props.isDarkMode ? props.modalBackgroundColor : '#fff'}}>
|
|
<View style={{width: '100%', backgroundColor: props.isDarkMode ? props.modalBackgroundColor : '#fff', padding: 20}}>
|
|
<View style={{padding: 10}}>
|
|
<Text style={{fontWeight: 'bold', fontFamily: 'Arial', fontSize: 18, color: props.isDarkMode ? props.textColor : Theme.colors.darkerGray}}>{props.title}</Text>
|
|
</View>
|
|
<View style={{marginTop: 5}}>
|
|
{props.items ? renderItems() : null}
|
|
</View>
|
|
</View>
|
|
</View>
|
|
<TouchableOpacity onPress={props.onCancel} activeOpacity={1} style={{flex: 1, backgroundColor: '#00000060'}}></TouchableOpacity>
|
|
</View>
|
|
<TouchableOpacity onPress={props.onCancel} activeOpacity={1} style={{flex: 1, padding: 35, width: '100%', backgroundColor: '#00000060'}}></TouchableOpacity>
|
|
</View>
|
|
)
|
|
}
|
|
|
|
const shadowView = function(props) {
|
|
const {
|
|
elevation,
|
|
shadowRadius,
|
|
shadowOpacity,
|
|
shadowOffset,
|
|
shadowColor,
|
|
} = props;
|
|
|
|
const newShadowColor = shadowColor || '#000';
|
|
const newShadowOffset = shadowOffset || { width: 0, height: 1 };
|
|
const newShadowOpacity = shadowOpacity || 0.5;
|
|
const newShadowRadius = shadowRadius || 3;
|
|
const newElevation = elevation || 5;
|
|
|
|
return (
|
|
<View style={{
|
|
...props.style,
|
|
shadowColor: newShadowColor,
|
|
shadowOffset: newShadowOffset,
|
|
shadowOpacity: newShadowOpacity,
|
|
shadowRadius: newShadowRadius,
|
|
elevation: newElevation
|
|
}}>
|
|
{props.children}
|
|
</View>
|
|
)
|
|
}
|
|
|
|
const inputdialog = function(props){
|
|
const _textInput = useRef(null);
|
|
|
|
if(!props.shown) return null;
|
|
let value = "";
|
|
const titlecolor = props.current == props.index && props.focus ? Theme.colors.accent : Theme.colors.darkGray
|
|
const bordercolor = props.error ? Theme.colors.primary : (props.focus && props.current == props.index ? Theme.colors.accent : 'gray')
|
|
const borderwidth = props.error ? 1.6 : (props.focus && props.current == props.index ? 1.5 : 1)
|
|
|
|
const style = {
|
|
container: {flexDirection: 'row', width: '100%', marginTop: props.top || 1, alignItems: 'center'},
|
|
title: {fontSize: 12, color: titlecolor, marginTop: -25, marginBottom: 15},
|
|
input: {width: '100%', fontSize: 16, padding: 0, borderBottomColor: bordercolor, borderBottomWidth: borderwidth, color: props.isDarkMode ? props.textColor : Theme.colors.black},
|
|
error: {fontSize: 12, color: Theme.colors.primary, marginTop: 5, marginBottom: 5}
|
|
}
|
|
return (
|
|
<View style={{flex: 1, width: '100%', height: '100%', position: 'absolute', zIndex: 1, backgroundColor: '#00000060'}}>
|
|
<TouchableOpacity onPress={props.onCancel} activeOpacity={1} style={{flex: 1, padding: 30, width: '100%', backgroundColor: '#00000060'}}></TouchableOpacity>
|
|
<View style={{flex: 1, flexDirection: 'row'}}>
|
|
<TouchableOpacity onPress={props.onCancel} activeOpacity={1} style={{flex: 1, backgroundColor: '#00000060'}}></TouchableOpacity>
|
|
<View style={{flex: 12, backgroundColor: props.isDarkMode ? props.modalBackgroundColor : '#fff'}}>
|
|
<View style={{flex: 1, width: '100%', backgroundColor: props.isDarkMode ? props.modalBackgroundColor : '#fff', padding: 15}}>
|
|
<View style={{padding: 10}}>
|
|
<Text style={{fontWeight: 'bold', fontFamily: 'Arial', fontSize: 19, color: props.isDarkMode ? props.textColor : Theme.colors.darkerGray}}>{props.title}</Text>
|
|
</View>
|
|
<View style={{flex: 0.5, marginTop: 5, padding: 10}}>
|
|
{props.isCustom != undefined && props.isCustom ? (
|
|
<View style={style.container}>
|
|
<View style={{flex: 1}}>
|
|
{props.error ? <Text style={{fontSize: 12, color: Theme.colors.primary, marginBottom: 10}}>{props.title}</Text> : null }
|
|
<TextInput
|
|
ref={_textInput}
|
|
keyboardType={props.keyboardType || null}
|
|
maxLength={props.maxlength || null}
|
|
placeholder={props.error ? null : props.placeholder || props.title || null}
|
|
placeholderTextColor={props.isDarkMode ? Theme.colors.darkGray : Theme.colors.gray}
|
|
value={props.value || null}
|
|
onFocus={props.onFocus || null}
|
|
onChangeText={(val) => value = val}
|
|
style={style.input}
|
|
/>
|
|
{props.error ? <Text style={style.error}>{props.errorMessage}</Text> : null }
|
|
</View>
|
|
</View>
|
|
) : (
|
|
<TextInput
|
|
onChangeText={(val) => value = val}
|
|
placeholderTextColor={Theme.colors.darkGray}
|
|
placeholder={props.placeholder || ""}
|
|
style={{padding: 0, paddingTop: 15, paddingBottom: 0, fontSize:18, borderColor: 'gray', borderBottomWidth: 1, color: props.textColor}}
|
|
/>
|
|
)}
|
|
</View>
|
|
<View style={{ flex: 0.5, marginTop: 12, marginBottom: 0, flexDirection: 'row', justifyContent: 'flex-end', alignItems: 'flex-end' }}>
|
|
<TouchableOpacity onPress={props.onCancel} style={{padding: 10, marginRight: 5}}>
|
|
<Text style={{color: Theme.colors.accent, fontWeight: 'bold'}}>CANCEL</Text>
|
|
</TouchableOpacity>
|
|
<TouchableOpacity onPress={() => props.onSubmit(value) } style={{padding: 10, marginLeft: 5}}>
|
|
<Text style={{color: Theme.colors.accent, fontWeight: 'bold'}}>ADD</Text>
|
|
</TouchableOpacity>
|
|
</View>
|
|
</View>
|
|
</View>
|
|
<TouchableOpacity onPress={props.onCancel} activeOpacity={1} style={{flex: 1, backgroundColor: '#00000060'}}></TouchableOpacity>
|
|
</View>
|
|
<TouchableOpacity onPress={props.onCancel} activeOpacity={1} style={{flex: 1, padding: 30, width: '100%', backgroundColor: '#00000060'}}></TouchableOpacity>
|
|
</View>
|
|
)
|
|
}
|
|
|
|
const confirmdialog = function(props){
|
|
if(!props.shown) return null;
|
|
let value = "";
|
|
return (
|
|
<View style={{flex: 1, width: '100%', height: '100%', position: 'absolute', zIndex: 1, backgroundColor: '#00000060'}}>
|
|
<TouchableOpacity onPress={props.onCancel} activeOpacity={1} style={{flex: 1, padding: 30, width: '100%', backgroundColor: '#00000060'}}></TouchableOpacity>
|
|
<View style={{flex: 1, flexDirection: 'row'}}>
|
|
<TouchableOpacity onPress={props.onCancel} activeOpacity={1} style={{flex: 1, backgroundColor: '#00000060'}}></TouchableOpacity>
|
|
<View style={{flex: 12, backgroundColor: props.isDarkMode ? props.modalBackgroundColor : '#fff'}}>
|
|
<View style={{flex: 1, width: '100%', backgroundColor: props.isDarkMode ? props.modalBackgroundColor : '#fff', padding: 15}}>
|
|
<View style={{padding: 10}}>
|
|
<Text style={{fontWeight: 'bold', fontFamily: 'Arial', fontSize: 19, color: props.isDarkMode ? props.textColor : Theme.colors.darkerGray}}>{props.title}</Text>
|
|
</View>
|
|
<View style={{flex: 0.5, marginTop: 5, padding: 10}}>
|
|
<Text style={{fontFamily: 'Arial', fontSize: 16, width: '90%', color: props.isDarkMode ? props.textColor : Theme.colors.darkGray}}>{props.message}</Text>
|
|
</View>
|
|
<View style={{flex: 0.5, marginTop: 12, marginBottom: 0, flexDirection: 'row', justifyContent: 'flex-end', alignItems: 'flex-end'}}>
|
|
<TouchableOpacity onPress={props.onCancel} style={{padding: 10, marginRight: 5}}>
|
|
<Text style={{color: Theme.colors.accent, fontWeight: 'bold'}}>CANCEL</Text>
|
|
</TouchableOpacity>
|
|
<TouchableOpacity onPress={() => props.onSubmit(value) } style={{padding: 10, marginLeft: 5}}>
|
|
<Text style={{color: Theme.colors.accent, fontWeight: 'bold'}}>{props.buttonConfirmText || "CONFIRM"}</Text>
|
|
</TouchableOpacity>
|
|
</View>
|
|
</View>
|
|
</View>
|
|
<TouchableOpacity onPress={props.onCancel} activeOpacity={1} style={{flex: 1, backgroundColor: '#00000060'}}></TouchableOpacity>
|
|
</View>
|
|
<TouchableOpacity onPress={props.onCancel} activeOpacity={1} style={{flex: 1, padding: 30, width: '100%', backgroundColor: '#00000060'}}></TouchableOpacity>
|
|
</View>
|
|
)
|
|
}
|
|
|
|
const infodialog = function(props){
|
|
if(!props.shown) return null;
|
|
let value = "";
|
|
return (
|
|
<View style={{flex: 1, width: '100%', height: '100%', position: 'absolute', zIndex: 1, backgroundColor: '#00000060'}}>
|
|
<TouchableOpacity onPress={props.onCancel} activeOpacity={1} style={{flex: 1, padding: 15, width: '100%', backgroundColor: '#00000060'}}></TouchableOpacity>
|
|
<View style={{flex: 1, flexDirection: 'row'}}>
|
|
<TouchableOpacity onPress={props.onCancel} activeOpacity={1} style={{flex: 1, backgroundColor: '#00000060'}}></TouchableOpacity>
|
|
<View style={{flex: 12, backgroundColor: '#fff'}}>
|
|
|
|
<View style={{width: '100%', backgroundColor: '#fff', padding: 15}}>
|
|
<View style={{padding: 10}}>
|
|
<Text style={{fontWeight: 'bold', fontFamily: 'Arial', fontSize: 19, color: Theme.colors.darkerGray}}>{props.title}</Text>
|
|
</View>
|
|
<View style={{marginTop: 5, width: '100%', padding: 5}}>
|
|
<Text style={{fontFamily: 'Arial', fontSize: 17, padding: 5, color: Theme.colors.darkGray}}>{props.message}</Text>
|
|
</View>
|
|
<View style={{ marginTop: 15, marginBottom: 0, flexDirection: 'row', justifyContent: 'flex-end', alignItems: 'flex-end'}}>
|
|
<TouchableOpacity onPress={() => props.onSubmit(value) } style={{padding: 10, marginLeft: 0}}>
|
|
<Text style={{color: Theme.colors.accent, fontWeight: 'bold'}}>{props.buttonConfirmText || "OK"}</Text>
|
|
</TouchableOpacity>
|
|
</View>
|
|
</View>
|
|
|
|
</View>
|
|
<TouchableOpacity onPress={props.onCancel} activeOpacity={1} style={{flex: 1, backgroundColor: '#00000060'}}></TouchableOpacity>
|
|
</View>
|
|
<TouchableOpacity onPress={props.onCancel} activeOpacity={1} style={{flex: 1, padding: 15, width: '100%', backgroundColor: '#00000060'}}></TouchableOpacity>
|
|
</View>
|
|
)
|
|
}
|
|
|
|
const datepicker = function(props){
|
|
if(!props.shown) return null;
|
|
|
|
console.log("Triggered", Platform.OS)
|
|
|
|
if(Platform.OS == 'ios'){
|
|
return <datepickerIOS props />
|
|
}
|
|
|
|
return (
|
|
<DateTimePicker
|
|
testID={props.id}
|
|
timeZoneOffsetInMinutes={0}
|
|
value={props.value != null ? new Date(props.value) : null || new Date("Jan 01 1990")}
|
|
mode={"date"}
|
|
is24Hour={true}
|
|
display="spinner"
|
|
style={{width:'100%'}}
|
|
onChange={(event, selectedDate) => props.onChange(selectedDate ? moment(selectedDate).format(props.returnFormat) : props.value != null ? props.value : null)}
|
|
/>
|
|
)
|
|
}
|
|
|
|
const datepickerIOS = function(props){
|
|
return (
|
|
<Modal
|
|
animationType="none"
|
|
transparent={true}
|
|
visible={props.shown}
|
|
>
|
|
<TouchableOpacity style={styles.centeredView}>
|
|
<TouchableOpacity activeOpacity={1} style={{...styles.modalView, width: '100%', ...props.style || {}}}>
|
|
<DateTimePicker
|
|
testID={props.id}
|
|
timeZoneOffsetInMinutes={0}
|
|
value={props.value != null ? new Date(props.value) : null || new Date("Jan 01 1990")}
|
|
mode={"date"}
|
|
is24Hour={true}
|
|
display="spinner"
|
|
style={{flex: 1}}
|
|
onChange={(event, selectedDate) => props.onChange(selectedDate ? moment(selectedDate).format(props.returnFormat) : props.value != null ? props.value : null)}
|
|
/>
|
|
</TouchableOpacity>
|
|
</TouchableOpacity>
|
|
</Modal>
|
|
)
|
|
}
|
|
|
|
const nointernet = function(props){
|
|
return (
|
|
<View style={{flex: 1, justifyContent: 'center', alignItems: 'center', top: Platform.OS == 'ios' ? 50 : 0}}>
|
|
<Text style={{padding: 10, fontSize: 16, textAlign: 'center', bottom: Platform.OS == 'ios' ? 50 : 0}}>{props.message}</Text>
|
|
<TouchableOpacity onPress={props.onPress} style={{backgroundColor: Theme.colors.primary, borderRadius: 10, padding: 14.5, paddingHorizontal: 35, bottom: Platform.OS == 'ios' ? 50 : 0}}>
|
|
<Text style={{color: "#fff", fontSize: 16}}>{props.buttonText}</Text>
|
|
</TouchableOpacity>
|
|
</View>)
|
|
}
|
|
|
|
const infomodaldialog = function(props){
|
|
return (
|
|
<Modal
|
|
animationType="none"
|
|
transparent={true}
|
|
visible={props.visible}
|
|
>
|
|
<TouchableOpacity onPress={props.onClose} style={styles.centeredView}>
|
|
<TouchableOpacity activeOpacity={1} style={{...styles.modalView, ...props.style || {}}}>
|
|
<Text style={styles.modalTitle}>{props.title}</Text>
|
|
<Text style={styles.modalText}>{props.message}</Text>
|
|
<View style={{flexDirection: 'row', marginTop: 30}}>
|
|
<View style={{flex: 3}}></View>
|
|
<TouchableOpacity style={{flex: 2, padding: 5}}>
|
|
<Text style={{textAlign: 'right', fontWeight: 'bold', color: Theme.colors.accent}}></Text>
|
|
</TouchableOpacity>
|
|
<TouchableOpacity onPress={props.onClose} style={{flex: 1, padding: 5}}>
|
|
<Text style={{textAlign: 'center', fontWeight: 'bold', color: Theme.colors.accent}}>OK</Text>
|
|
</TouchableOpacity>
|
|
</View>
|
|
</TouchableOpacity>
|
|
</TouchableOpacity>
|
|
</Modal>
|
|
)
|
|
}
|
|
|
|
const popup = function(props){
|
|
return props.visible ?
|
|
<View style={{position: 'absolute', zIndex: 100, width: '100%', padding: 15, bottom: 0, backgroundColor: Theme.colors.darkerGray}}>
|
|
<Text style={{padding: 0, color: "#fff"}}>{props.message}</Text>
|
|
</View> : null
|
|
}
|
|
|
|
const loader = function(props){
|
|
return null
|
|
return (
|
|
<Modal
|
|
ref={props.ref || null}
|
|
animationType="none"
|
|
transparent={true}
|
|
visible={props.visible}
|
|
>
|
|
<TouchableOpacity style={styles.centeredView}>
|
|
<TouchableOpacity activeOpacity={1} style={{...styles.modalView, width: '100%', ...props.style || {}}}>
|
|
<Text style={{...styles.modalTitle, fontSize: 20}}>Connecting</Text>
|
|
<View style={{flexDirection: 'row', marginTop: 5}}>
|
|
<View style={{flex: 1.3, justifyContent: 'center', alignItems: 'center'}}>
|
|
<ActivityIndicator size={50} color={Theme.colors.accent} />
|
|
</View>
|
|
<View style={{flex: 4}}>
|
|
<Text style={{...styles.modalText}}>{props.message || "Please wait, connecting to server..."}</Text>
|
|
</View>
|
|
</View>
|
|
</TouchableOpacity>
|
|
</TouchableOpacity>
|
|
</Modal>
|
|
)
|
|
}
|
|
|
|
const loaderView = function(props){
|
|
return (
|
|
<Modal
|
|
animationType="none"
|
|
transparent={true}
|
|
visible={props.visible}>
|
|
<TouchableOpacity activeOpacity={1} style={styles.centeredView}>
|
|
<TouchableOpacity activeOpacity={1} style={[{...styles.modalView, width: '100%', ...props.style || {}}, { backgroundColor: props.isDarkMode ? props.backgroundColor : Theme.colors.white }]}>
|
|
<Text style={{...styles.modalTitle, fontSize: 20, color: props.color}}>{props.title}</Text>
|
|
<View style={{flexDirection: 'row', marginTop: 5}}>
|
|
<View style={{flex: 1.3, justifyContent: 'center', alignItems: 'center'}}>
|
|
<ActivityIndicator size={50} color={props.color} />
|
|
</View>
|
|
<View style={{flex: 4}}>
|
|
<Text style={[{...styles.modalText}, { color: props.color}]}>{props.message || "Please wait, connecting to server..."}</Text>
|
|
</View>
|
|
</View>
|
|
</TouchableOpacity>
|
|
</TouchableOpacity>
|
|
</Modal>
|
|
)
|
|
}
|
|
|
|
const logoutdialog = function(props){
|
|
return (
|
|
<Modal
|
|
animationType="none"
|
|
transparent={true}
|
|
visible={props.visible}
|
|
>
|
|
<TouchableOpacity onPress={props.onClose} style={styles.centeredView}>
|
|
<TouchableOpacity activeOpacity={1} style={{...styles.modalView, ...props.style || {}}}>
|
|
<Text style={styles.modalTitle}>{props.title}</Text>
|
|
<Text style={styles.modalText}>{props.message}</Text>
|
|
<View style={{flexDirection: 'row', marginTop: 30}}>
|
|
<View style={{flex: 3}}></View>
|
|
<TouchableOpacity onPress={props.onClose} style={{flex: 2, padding: 5}}>
|
|
<Text style={{textAlign: 'right', fontWeight: 'bold', color: Theme.colors.accent}}>CANCEL</Text>
|
|
</TouchableOpacity>
|
|
<TouchableOpacity onPress={props.onSubmit} style={{flex: 1, padding: 5}}>
|
|
<Text style={{textAlign: 'center', fontWeight: 'bold', color: Theme.colors.accent}}>OK</Text>
|
|
</TouchableOpacity>
|
|
</View>
|
|
</TouchableOpacity>
|
|
</TouchableOpacity>
|
|
</Modal>
|
|
)
|
|
}
|
|
|
|
const nointernet2 = function(){
|
|
Alert.alert(
|
|
'Error',
|
|
'\nSlow or no internet connection. Please check your internet connection.\n',
|
|
[
|
|
{
|
|
text: 'OK'
|
|
},
|
|
],
|
|
{cancelable: true}
|
|
);
|
|
}
|
|
|
|
const customAlert = function(props) {
|
|
const dispatch = useDispatch();
|
|
|
|
const {
|
|
open,
|
|
yesCB,
|
|
noCB,
|
|
title,
|
|
body,
|
|
yesText,
|
|
noText,
|
|
yesButtonOnly,
|
|
noButtonOnly,
|
|
theme
|
|
} = props;
|
|
|
|
if(!open) return null;
|
|
|
|
const onPressNo = () => {
|
|
noCB?.();
|
|
dispatch(closeModal());
|
|
}
|
|
|
|
const onPressYes = () => {
|
|
yesCB?.();
|
|
dispatch(closeModal());
|
|
}
|
|
|
|
return (
|
|
<TouchableOpacity activeOpacity={1} onPress={onPressNo} style={{
|
|
position: 'absolute',
|
|
top: 0,
|
|
left: 0,
|
|
right: 0,
|
|
bottom: 0,
|
|
justifyContent: 'center',
|
|
backgroundColor: 'rgba(0,0,0,.5)',
|
|
paddingHorizontal: 25
|
|
}}>
|
|
<TouchableOpacity activeOpacity={1} onPress={null} style= {{
|
|
backgroundColor: theme?.theme.dark ? theme.theme.colors.border : 'white',
|
|
zIndex: 10,
|
|
borderRadius: 10,
|
|
alignItems: 'center'
|
|
}}>
|
|
<Text style={{color: theme?.theme.dark ? theme?.theme.colors.text : "black", textAlign: 'center', fontWeight: 'bold', fontSize: 18, marginTop: 18, marginBottom: 19}}>{title}</Text>
|
|
<Text style={{color: theme?.theme.dark ? theme?.theme.colors.text : "black", paddingHorizontal: 15, textAlign: 'center', fontSize: 18, marginBottom: 35}}>{body}</Text>
|
|
|
|
<View style={{flexDirection: 'row', paddingHorizontal: 31, marginBottom: 18}}>
|
|
{ !yesButtonOnly && <TouchableOpacity onPress={onPressNo} style={{flex: 1, borderWidth: 1, borderColor: Theme.colors.primary, alignItems: 'center', paddingVertical: 6, marginRight: 6, borderRadius: 5}}><Text style={{fontWeight: 'bold', color: Theme.colors.primary, fontSize: 17}}>{noText ? noText : "Cancel"}</Text></TouchableOpacity> }
|
|
{ !noButtonOnly && <TouchableOpacity onPress={onPressYes} style={{flex: 1, backgroundColor: Theme.colors.primary, alignItems: 'center', paddingVertical: 6, marginLeft: 6, borderRadius: 5}}><Text style={{fontWeight: 'bold', color: 'white', fontSize: 17}}>{yesText ? yesText : "Yes"}</Text></TouchableOpacity> }
|
|
</View>
|
|
</TouchableOpacity>
|
|
|
|
</TouchableOpacity>
|
|
)
|
|
}
|
|
|
|
const bottomselectmodal = function(props){
|
|
let color = Theme.colors.textPrimary
|
|
let items = props.items || []
|
|
const renderContent = () => {
|
|
return items.map((data, index) => {
|
|
return (
|
|
<TouchableOpacity onPress={data.onPress || null} key={index} style={{flexDirection: 'row', paddingBottom: index < items.length - 1 ? 30 : 0, bottom: Platform.OS == 'ios' ? 15 : 0,}}>
|
|
{data.icon ?
|
|
<Text style={{flex: 0.4}}>
|
|
<CustomIcon.MaterialCommunityIcons name={data.icon} size={25} color="#00000095" />
|
|
</Text> : null}
|
|
<Text style={{flex: 3, color: color, fontSize: 14, padding: 5}}>{data.label}</Text>
|
|
</TouchableOpacity>
|
|
)
|
|
})
|
|
}
|
|
|
|
return (
|
|
<Modal
|
|
animationType="none"
|
|
transparent={true}
|
|
visible={props.visible}
|
|
>
|
|
<TouchableOpacity onPress={props.onClose} style={styles.bottomView}>
|
|
<TouchableOpacity activeOpacity={1} style={{...styles.modalView, width: '100%', padding: 30, paddingHorizontal: 20, ...props.style || {}}}>
|
|
<View style={{flexDirection: 'column'}}>
|
|
{renderContent()}
|
|
</View>
|
|
</TouchableOpacity>
|
|
</TouchableOpacity>
|
|
</Modal>
|
|
)
|
|
}
|
|
|
|
const promoGPS = function(props){
|
|
return (
|
|
<Modal
|
|
animationType="none"
|
|
transparent={true}
|
|
visible={props.visible}>
|
|
<TouchableOpacity onPress={props.onDismiss} style={styles.centeredView}>
|
|
<TouchableOpacity activeOpacity={1} style={{...styles.modalView, ...props.style || {}, padding: 0}}>
|
|
<Image
|
|
source={props.image}
|
|
style={{width: Theme.screen.w - 60, height: Theme.screen.h / 3.5, resizeMode: "stretch"}}
|
|
/>
|
|
<View style={{padding: 20}}>
|
|
<Text style={{fontSize: 16, fontWeight: 'bold', fontFamily: 'arial', color: Theme.colors.accent}}>
|
|
{props.title}
|
|
</Text>
|
|
</View>
|
|
<View style={{flexDirection: 'row', padding: 20, paddingTop: 15}}>
|
|
<View style={{flex: 1}}></View>
|
|
<TouchableOpacity onPress={props.onDismiss} activeOpacity={1} style={{flex: 1}}>
|
|
<Text style={{color: Theme.colors.accent, fontWeight: 'normal', fontFamily: 'arial'}}>DISMISS</Text>
|
|
</TouchableOpacity>
|
|
<TouchableOpacity onPress={props.onOpen} activeOpacity={1} style={{flex: 1}}>
|
|
<Text style={{color: Theme.colors.accent, fontWeight: 'normal', fontFamily: 'arial'}}>SEE DETAILS</Text>
|
|
</TouchableOpacity>
|
|
</View>
|
|
</TouchableOpacity>
|
|
</TouchableOpacity>
|
|
</Modal>
|
|
)
|
|
}
|
|
|
|
const notification = function(props){
|
|
return (
|
|
<Modal
|
|
animationType="none"
|
|
transparent={true}
|
|
visible={props.visible}
|
|
onRequestClose={props.onDismiss}>
|
|
<TouchableOpacity activeOpacity={1} onPress={props.onDismiss} style={styles.centeredView}>
|
|
<TouchableOpacity activeOpacity={1} style={{
|
|
...styles.modalView,
|
|
...props.style || {},
|
|
padding: 0,
|
|
width: Theme.screen.w - 60,
|
|
borderRadius: 10
|
|
}}>
|
|
<View style={{padding: 20}}>
|
|
<Text style={{fontSize: 18, fontWeight: 'bold', textAlign: 'left', fontFamily: 'arial', color: Theme.colors.textPrimary}}>
|
|
{props.title}
|
|
</Text>
|
|
</View>
|
|
<View style={{padding: 20, marginBottom: 20 }}>
|
|
<Text style={{fontSize: 16, fontWeight: 'normal', textAlign: 'center', fontFamily: 'arial', color: Theme.colors.primary}}>
|
|
{props.message}
|
|
</Text>
|
|
</View>
|
|
<TouchableOpacity onPress={props.onClose} activeOpacity={0.5} style={{padding: 15, height: 50, alignItems: 'center', backgroundColor: Theme.colors.primary, borderBottomLeftRadius: 10, borderBottomRightRadius: 10}}>
|
|
<View style={{flex: 1, padding: 0}}>
|
|
<Text style={{color: "#fff", fontWeight: 'normal', fontFamily: 'arial'}}>CLOSE</Text>
|
|
</View>
|
|
</TouchableOpacity>
|
|
</TouchableOpacity>
|
|
</TouchableOpacity>
|
|
</Modal>
|
|
)
|
|
}
|
|
|
|
const CustomDatePicker = (props) => {
|
|
const [currentDate, setCurrentDate] = useState(props.date || new Date(1990, 1, 1));
|
|
let version = parseInt(Platform.Version, 10)
|
|
if(version >= 13) {
|
|
return (
|
|
<Modal
|
|
animationType="none"
|
|
transparent={true}
|
|
onRequestClose={() => { props.onCancel() }}
|
|
visible={props.visible}>
|
|
<TouchableOpacity activeOpacity={1} onPress={() => { props.onCancel() }} style={styles.centeredView}>
|
|
<View style={{
|
|
margin: 25,
|
|
backgroundColor: props?.isDarkMode ? props?.modalBackgroundColor : Theme.colors.white,
|
|
borderRadius: 15,
|
|
padding: 20,
|
|
alignItems: "center",
|
|
shadowColor: "#000",
|
|
shadowOffset: {
|
|
width: 0,
|
|
height: 2
|
|
},
|
|
shadowOpacity: 0.25,
|
|
shadowRadius: 4,
|
|
elevation: 5
|
|
}}>
|
|
<DatePicker
|
|
androidVariant='iosClone'
|
|
date={currentDate}
|
|
maximumDate={new Date()}
|
|
mode='date'
|
|
onDateChange={(date) => { setCurrentDate(date) }}
|
|
fadeToColor={Theme.colors.lightGray}
|
|
textColor={props?.isDarkMode ? props?.textColor : Theme.colors.black}
|
|
/>
|
|
<View style={{ flexDirection: 'row', alignSelf: 'flex-end' }}>
|
|
<TouchableOpacity
|
|
style={{ paddingHorizontal: 10, height: 30, alignItems: 'center', justifyContent: 'center', borderRadius: 5, margin: 5 }}
|
|
onPress={() => { props.onCancel() }}>
|
|
<Text style={{ color: props?.isDarkMode ? props?.textColor : Theme.colors.black, fontFamily: 'arial', fontSize: 18 }}>Cancel</Text>
|
|
</TouchableOpacity>
|
|
<TouchableOpacity
|
|
style={{ paddingHorizontal: 5, height: 30, alignItems: 'center', justifyContent: 'center', borderRadius: 5, margin: 5 }}
|
|
onPress={() => { props.onConfirm(currentDate) }}>
|
|
<Text style={{ color: props?.isDarkMode ? props?.textColor : Theme.colors.black, fontFamily: 'arial', fontSize: 18 }}>Ok</Text>
|
|
</TouchableOpacity>
|
|
</View>
|
|
</View>
|
|
</TouchableOpacity>
|
|
</Modal>
|
|
)
|
|
} else {
|
|
var pickerRef = useRef()
|
|
return <DateTimePickerModal
|
|
ref={(r) => pickerRef = r}
|
|
isVisible={props.visible}
|
|
mode="date"
|
|
headerTextIOS="Select Date"
|
|
date={props.date || new Date(1990, 1, 1)}
|
|
maximumDate={new Date()}
|
|
confirmTextIOS="Ok"
|
|
onConfirm={props.onConfirm}
|
|
onCancel={props.onCancel}
|
|
modalStyleIOS={{justifyContent: 'center'}}
|
|
pickerContainerStyleIOS={{borderRadius: 0}}
|
|
customHeaderIOS={() => null}
|
|
customConfirmButtonIOS={() => {
|
|
return (
|
|
<View style={{ padding: 15, marginBottom: 0, flexDirection: 'row', justifyContent: 'flex-end', alignItems: 'flex-end'}}>
|
|
<TouchableOpacity onPress={() => props.onCancel()} style={{padding: 10, marginRight: 5}}>
|
|
<Text style={{color: Theme.colors.accent, fontWeight: 'bold'}}>CANCEL</Text>
|
|
</TouchableOpacity>
|
|
<TouchableOpacity onPress={() => {
|
|
props.onConfirm(pickerRef.state.currentDate)
|
|
}} style={{padding: 10, marginLeft: 5}}>
|
|
<Text style={{color: Theme.colors.accent, fontWeight: 'bold'}}>OK</Text>
|
|
</TouchableOpacity>
|
|
</View>
|
|
)
|
|
}}
|
|
customCancelButtonIOS={() => null}
|
|
/>
|
|
}
|
|
}
|
|
|
|
const CustomMonthPicker = (props) => {
|
|
if(!props.visible) return null
|
|
return <MonthPicker
|
|
value={new Date()}
|
|
minimumDate={new Date()}
|
|
maximumDate={props.maxDate}
|
|
enableAutoDarkMode={true}
|
|
onChange={props.onChange}
|
|
okButton="Confirm"
|
|
/>
|
|
}
|
|
|
|
const ActionOption = (props) => {
|
|
return (
|
|
<Actionsheet isOpen={props.open} onClose={props.onClose}>
|
|
<Actionsheet.Content>
|
|
{props.buttons.map(item => (
|
|
<Actionsheet.Item onPress={item.onPress}>
|
|
<Text>{item.name}</Text>
|
|
</Actionsheet.Item>
|
|
))}
|
|
</Actionsheet.Content>
|
|
</Actionsheet>
|
|
)
|
|
}
|
|
|
|
export default {
|
|
product,
|
|
card,
|
|
button,
|
|
input,
|
|
ul,
|
|
loyaltycard,
|
|
icon,
|
|
transaction,
|
|
transactiontable,
|
|
custominput,
|
|
checkboxdialog,
|
|
inputdialog,
|
|
confirmdialog,
|
|
infodialog,
|
|
datepicker,
|
|
datepickerIOS,
|
|
nointernet,
|
|
infomodaldialog,
|
|
popup,
|
|
loader,
|
|
logoutdialog,
|
|
nointernet2,
|
|
bottomselectmodal,
|
|
promoGPS,
|
|
notification,
|
|
CustomDatePicker,
|
|
CustomMonthPicker,
|
|
ActionOption,
|
|
ModalDialogContainer,
|
|
loaderView,
|
|
customAlert,
|
|
shadowView,
|
|
}
|