1146 lines
49 KiB
JavaScript
1146 lines
49 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) => {
|
|
if (!items) return 0 + points;
|
|
|
|
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, backgroundColor: props.station == 'HO' ? Theme.colors.lightGray : Props.isDarkMode ? Props.cardBackgroundColor : Theme.colors.lightGray, borderWidth: 0.1, borderRadius: 14, borderColor: 'transparent', elevation: 5 }}>
|
|
<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>
|
|
{
|
|
props.station !== "APP" &&
|
|
<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>
|
|
{!Props.disabled && <View style={{ flex: 1, paddingTop: 5, paddingBottom: 5 }}>
|
|
<CustomIcon.Feather name="chevron-right" size={40} color={props.station == 'HO' ? 'gray' : Theme.colors.primary} />
|
|
</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 getDiscount = () => {
|
|
const discounted = items.filter(item => item.price.toString().includes("-"));
|
|
const discount = discounted.reduce((prev, current) => prev + parseFloat(current.price.toString().slice(1)), 0);
|
|
return discounted.length > 0 ? discount : 0
|
|
}
|
|
const renderItem = () => {
|
|
return items.filter(item => !item.price.toString().includes("-")).map((item, index) => {
|
|
if (item.item == 'EPURSE' || item.item == '') return null
|
|
return (
|
|
<View key={index} style={{ flex: 1, flexDirection: 'row', paddingTop: 10, alignItems: 'center' }}>
|
|
<Text style={{ flex: 4, fontFamily: 'Arial', textAlign: 'center', fontSize: 13, color: Props.textColor }}>{item.item}</Text>
|
|
<Text style={{ flex: 2, fontFamily: 'Arial', fontWeight: 'bold', textAlign: 'center', fontSize: 13, color: Props.textColor }}>{item.price.toString().includes("-") ? "" : Theme.formatter.CRNCY(item.quantity.toFixed(2))}</Text>
|
|
<Text style={{ flex: 2, fontFamily: 'Arial', fontWeight: 'bold', textAlign: 'center', fontSize: 13, color: Props.textColor }}>{`\u20B1 ${Theme.formatter.CRNCY(item.price)}`}</Text>
|
|
</View>)
|
|
})
|
|
}
|
|
|
|
const showDiscount = Props.showDiscount && getDiscount() !== 0;
|
|
|
|
return (<View style={{ width: '100%' }}>
|
|
{/* TABLE HEADER */}
|
|
<Divider />
|
|
<View style={{ flex: 1, flexDirection: 'row', paddingVertical: 20, alignItems: 'center' }}>
|
|
<Text style={{ flex: 4, height: 15, fontFamily: 'Arial', color: Props.textColor, fontSize: 11, textAlign: 'center' }}>Products</Text>
|
|
<Text style={{ flex: 2, height: 15, fontFamily: 'Arial', color: Props.textColor, fontSize: 11, textAlign: 'center' }}>Qty</Text>
|
|
<Text style={{ flex: 2, height: 15, fontFamily: 'Arial', color: Props.textColor, fontSize: 11, 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', paddingHorizontal: 15, paddingVertical: 5, paddingBottom: showDiscount ? 5 : 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>
|
|
{showDiscount &&
|
|
<View style={{ flex: 1, flexDirection: 'row', paddingHorizontal: 15, paddingVertical: 15, marginBottom: 5, alignItems: 'center' }}>
|
|
<Text style={{ flex: 4, height: 30, fontFamily: 'Arial', textAlign: 'left', fontSize: 16, color: Theme.colors.darkGray }}>Discount</Text>
|
|
<Text style={{ flex: 2, height: 30, fontFamily: 'Arial', textAlign: 'right', fontSize: 16, color: Props.isDarkMode ? Props.textColor : "#000" }}>{`- \u20B1 ${Theme.formatter.CRNCY(getDiscount())}`}</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={{
|
|
shadowColor: newShadowColor,
|
|
shadowOffset: newShadowOffset,
|
|
shadowOpacity: newShadowOpacity,
|
|
shadowRadius: newShadowRadius,
|
|
elevation: newElevation,
|
|
...props.style,
|
|
}}>
|
|
{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;
|
|
|
|
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 (
|
|
<Modal
|
|
ref={props.ref || null}
|
|
animationType="none"
|
|
transparent={true}
|
|
visible={props.visible}
|
|
>
|
|
<View style={styles.centeredView}>
|
|
<View style={{ ...styles.modalView, width: '100%', ...props.style || {} }}>
|
|
<Text style={{ ...styles.modalTitle, fontSize: 20 }}>{props.title || "Connecting"}</Text>
|
|
<View style={{ flexDirection: 'row', marginTop: 5 }}>
|
|
<View style={{ flex: 1.3, justifyContent: 'center', alignItems: 'center' }}>
|
|
<ActivityIndicator size={50} color={Theme.colors.primary} />
|
|
</View>
|
|
<View style={{ flex: 4 }}>
|
|
<Text style={{ ...styles.modalText }}>{props.message || "Please wait, connecting to server..."}</Text>
|
|
</View>
|
|
</View>
|
|
</View>
|
|
</View>
|
|
</Modal>
|
|
)
|
|
}
|
|
|
|
const loaderView = function (props) {
|
|
return (
|
|
<Modal
|
|
animationType="none"
|
|
transparent={true}
|
|
visible={props.visible}>
|
|
<View style={styles.centeredView}>
|
|
<View 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 || "Validating"}</Text>
|
|
<View style={{ flexDirection: 'row', marginTop: 5 }}>
|
|
<View style={{ flex: 1.3, justifyContent: 'center', alignItems: 'center' }}>
|
|
<ActivityIndicator size={50} color={Theme.colors.primary} />
|
|
</View>
|
|
<View style={{ flex: 4 }}>
|
|
<Text style={[{ ...styles.modalText }, { color: props.color }]}>{props.message || "Please wait..."}</Text>
|
|
</View>
|
|
</View>
|
|
</View>
|
|
</View>
|
|
</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 = (props, buttons) => {
|
|
Alert.alert("Information", "\nSlow or no internet connection. Please check your internet connection.", buttons)
|
|
}
|
|
|
|
const customAlert = function (props) {
|
|
const dispatch = useDispatch();
|
|
|
|
const {
|
|
open,
|
|
yesCB,
|
|
noCB,
|
|
title,
|
|
body,
|
|
yesText,
|
|
noText,
|
|
yesButtonOnly,
|
|
noButtonOnly,
|
|
theme,
|
|
children,
|
|
backdropCancellable
|
|
} = props;
|
|
|
|
if (!open) return null;
|
|
|
|
const onPressNo = () => {
|
|
noCB?.();
|
|
dispatch(closeModal());
|
|
}
|
|
|
|
const onPressYes = () => {
|
|
yesCB?.();
|
|
dispatch(closeModal());
|
|
}
|
|
|
|
return (
|
|
<TouchableOpacity
|
|
activeOpacity={1}
|
|
onPress={!backdropCancellable ? () => { } : 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: 20,
|
|
alignItems: 'center',
|
|
overflow: 'hidden',
|
|
height: 500
|
|
}}>
|
|
|
|
<View style={{ height: 250, width: '100%' }}>
|
|
<Image
|
|
source={Assets.bg.modal_bg}
|
|
style={{
|
|
height: '100%',
|
|
width: '100%',
|
|
resizeMode: 'cover',
|
|
}}
|
|
/>
|
|
</View>
|
|
|
|
<View style={{
|
|
height: 250,
|
|
justifyContent: 'space-around',
|
|
alignItems: 'center',
|
|
paddingHorizontal: 15,
|
|
width: '100%',
|
|
}}>
|
|
{
|
|
children ?
|
|
children :
|
|
<>
|
|
<Text
|
|
style={{
|
|
color: theme?.theme.dark ? theme?.theme.colors.text : "black",
|
|
fontWeight: 'bold',
|
|
fontSize: 18,
|
|
marginTop: 18,
|
|
marginBottom: 19
|
|
}}>
|
|
{title}
|
|
</Text>
|
|
<Text
|
|
style={{
|
|
color: theme?.theme.dark ? theme?.theme.colors.text : "black",
|
|
textAlign: 'center',
|
|
fontSize: 16,
|
|
marginBottom: 35,
|
|
marginHorizontal: 5,
|
|
}} numberOfLines={5}
|
|
adjustsFontSizeToFit>
|
|
|
|
{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: 20
|
|
}}>
|
|
<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: 20
|
|
}}>
|
|
<Text style={{ fontWeight: 'bold', color: 'white', fontSize: 17 }}>
|
|
{yesText ? yesText : "Yes"}
|
|
</Text>
|
|
</TouchableOpacity>
|
|
}
|
|
</View>
|
|
</>
|
|
}
|
|
</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 nowDate = new Date();
|
|
const newYear = nowDate.getFullYear() - 20;
|
|
|
|
const [currentDate, setCurrentDate] = useState(props.date || new Date(newYear, 0, 1));
|
|
|
|
let version = parseInt(Platform.Version, 10)
|
|
if (version >= 13) {
|
|
return (
|
|
<Modal
|
|
animationType="none"
|
|
transparent={true}
|
|
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='nativeAndroid'
|
|
date={props.showDate ? undefined : 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 ? Theme.colors.white : 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 ? Theme.colors.white : 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 key={item.key} 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,
|
|
}
|