190 lines
4.6 KiB
JavaScript
190 lines
4.6 KiB
JavaScript
|
import React, { Component } from "react";
|
||
|
import Text from "react-native-text";
|
||
|
import { StyleSheet, View } from "react-native";
|
||
|
import { observable, transaction } from "mobx";
|
||
|
import { scale, verticalScale, moderateScale } from "react-native-size-matters";
|
||
|
import { observer, inject } from "mobx-react/native";
|
||
|
import Size from "../../config/size";
|
||
|
import theme from "../../config/colors";
|
||
|
import { Fonts } from "../../config/fonts";
|
||
|
const size = new Size();
|
||
|
@inject(["menuStore"])
|
||
|
@observer
|
||
|
export default class TopMessageText extends Component {
|
||
|
orderClose = false;
|
||
|
constructor(props) {
|
||
|
super(props);
|
||
|
this.store = this.props.menuStore;
|
||
|
this.state = {
|
||
|
time: this.timeInit(),
|
||
|
amPm: "am",
|
||
|
countDownTime: ""
|
||
|
};
|
||
|
this.getTime = this.getTime.bind(this);
|
||
|
}
|
||
|
|
||
|
getInitialState() {
|
||
|
return {
|
||
|
time: "00:00:00",
|
||
|
amPm: "am"
|
||
|
};
|
||
|
}
|
||
|
|
||
|
secToCountDownTimer() {
|
||
|
var time1 = this.props.date.getTime();
|
||
|
var time2 = new Date().getTime();
|
||
|
var diff = Math.abs(time1 - time2);
|
||
|
addZero = n => (n < 10 ? "0" + n : n);
|
||
|
var min = addZero(Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60)));
|
||
|
var second = addZero(Math.floor((diff % (1000 * 60)) / 1000));
|
||
|
this.setState({ countDownTime: `${min}:${second}` });
|
||
|
}
|
||
|
|
||
|
countDownTimer() {
|
||
|
if (
|
||
|
this.props.date.getDate() == new Date().getDate() &&
|
||
|
this.props.date.getMonth() == new Date().getMonth() &&
|
||
|
this.props.date.getHours() - new Date().getHours() == 1
|
||
|
) {
|
||
|
return (
|
||
|
<View
|
||
|
style={{
|
||
|
width: "50%",
|
||
|
justifyContent: "center",
|
||
|
alignItems: "flex-end",
|
||
|
|
||
|
}}
|
||
|
>
|
||
|
<Text
|
||
|
style={{ color: "white", fontSize: 12, ontFamily: Fonts.century }}
|
||
|
>
|
||
|
{this.state.countDownTime + " remain"}
|
||
|
</Text>
|
||
|
</View>
|
||
|
);
|
||
|
} else {
|
||
|
return <View />;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
timeInit() {
|
||
|
const takeTwelve = n => (n > 12 ? n - 12 : n),
|
||
|
addZero = n => (n < 10 ? "0" + n : n);
|
||
|
|
||
|
let d, h, m, s, t, amPm;
|
||
|
|
||
|
d = this.props.date;
|
||
|
h = addZero(takeTwelve(d.getHours()));
|
||
|
m = addZero(d.getMinutes());
|
||
|
s = addZero(d.getSeconds());
|
||
|
amPm = d.getHours() >= 12 ? "p.m" : "a.m";
|
||
|
t = `${h}:${m}${amPm}`;
|
||
|
|
||
|
return t;
|
||
|
}
|
||
|
|
||
|
componentDidMount() {
|
||
|
this.loadInterval = setInterval(this.getTime, 1000);
|
||
|
}
|
||
|
|
||
|
getTime() {
|
||
|
|
||
|
this.secToCountDownTimer();
|
||
|
|
||
|
}
|
||
|
|
||
|
componentWillMount() {
|
||
|
this.secToCountDownTimer();
|
||
|
this.setState({ time: this.timeInit() });
|
||
|
}
|
||
|
message() {
|
||
|
var month = new Array(12);
|
||
|
month[0] = "January";
|
||
|
month[1] = "February";
|
||
|
month[2] = "March";
|
||
|
month[3] = "April";
|
||
|
month[4] = "May";
|
||
|
month[5] = "June";
|
||
|
month[6] = "July";
|
||
|
month[7] = "August";
|
||
|
month[8] = "September";
|
||
|
month[9] = "October";
|
||
|
month[10] = "November";
|
||
|
month[11] = "December";
|
||
|
var date = this.props.date;
|
||
|
|
||
|
return (
|
||
|
"Menu For " +
|
||
|
date.getUTCDate() +
|
||
|
"-" +
|
||
|
month[date.getMonth()] +
|
||
|
"-" +
|
||
|
date.getFullYear()
|
||
|
);
|
||
|
}
|
||
|
|
||
|
cutoffDateHandle() {
|
||
|
this.props.date;
|
||
|
}
|
||
|
|
||
|
render() {
|
||
|
const countDown = this.store.date;
|
||
|
if (this.orderClose == false) {
|
||
|
return (
|
||
|
<View
|
||
|
style={{
|
||
|
flex: 1,
|
||
|
alignItems: "center",
|
||
|
paddingLeft: 30,
|
||
|
paddingRight: 30
|
||
|
}}
|
||
|
>
|
||
|
<View style={{ width: "100%", marginTop: verticalScale(8) }}>
|
||
|
<Text
|
||
|
style={{
|
||
|
color: "white",
|
||
|
fontSize: 17,
|
||
|
fontFamily: Fonts.century,
|
||
|
fontWeight: "bold",
|
||
|
textDecorationLine: "underline"
|
||
|
}}
|
||
|
>
|
||
|
{this.message()}
|
||
|
</Text>
|
||
|
</View>
|
||
|
<View style={{ flexDirection: "row", width: "100%", marginTop:2 }}>
|
||
|
<View
|
||
|
style={{
|
||
|
width: "50%",
|
||
|
justifyContent: "center",
|
||
|
alignItems: "flex-start",
|
||
|
|
||
|
}}
|
||
|
>
|
||
|
<Text
|
||
|
style={{
|
||
|
color: "white",
|
||
|
fontSize: 12,
|
||
|
ontFamily: Fonts.century
|
||
|
}}
|
||
|
>
|
||
|
{"Orders Close at " + this.timeInit()}
|
||
|
</Text>
|
||
|
</View>
|
||
|
{this.countDownTimer()}
|
||
|
</View>
|
||
|
{/* <View
|
||
|
style={{
|
||
|
width: "33%",
|
||
|
justifyContent: "center",
|
||
|
alignItems: "center"
|
||
|
}}
|
||
|
>
|
||
|
<Text style={{ color: "white" }}>{this.store.timestamp.getHours()}</Text>
|
||
|
</View> */}
|
||
|
</View>
|
||
|
);
|
||
|
}
|
||
|
}
|
||
|
}
|