1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
|
import { BigNumber } from '@0x/utils';
import * as _ from 'lodash';
import DatePicker from 'material-ui/DatePicker';
import TimePicker from 'material-ui/TimePicker';
import * as moment from 'moment';
import * as React from 'react';
import { utils } from 'ts/utils/utils';
interface ExpirationInputProps {
orderExpiryTimestamp: BigNumber;
updateOrderExpiry: (unixTimestampSec: BigNumber) => void;
}
interface ExpirationInputState {
dateMoment: moment.Moment;
timeMoment: moment.Moment;
}
export class ExpirationInput extends React.Component<ExpirationInputProps, ExpirationInputState> {
private readonly _earliestPickableMoment: moment.Moment;
constructor(props: ExpirationInputProps) {
super(props);
// Set the earliest pickable date to today at 00:00, so users can only pick the current or later dates
this._earliestPickableMoment = moment().startOf('day');
const expirationMoment = utils.convertToMomentFromUnixTimestamp(props.orderExpiryTimestamp);
const initialOrderExpiryTimestamp = utils.initialOrderExpiryUnixTimestampSec();
const didUserSetExpiry = !initialOrderExpiryTimestamp.eq(props.orderExpiryTimestamp);
this.state = {
dateMoment: didUserSetExpiry ? expirationMoment : undefined,
timeMoment: didUserSetExpiry ? expirationMoment : undefined,
};
}
public render(): React.ReactNode {
const date = this.state.dateMoment ? this.state.dateMoment.toDate() : undefined;
const time = this.state.timeMoment ? this.state.timeMoment.toDate() : undefined;
return (
<div className="clearfix">
<div className="col col-6 overflow-hidden pr3 flex relative">
<DatePicker
className="overflow-hidden"
hintText="Date"
mode="landscape"
autoOk={true}
value={date}
onChange={this._onDateChanged.bind(this)}
shouldDisableDate={this._shouldDisableDate.bind(this)}
/>
<div className="absolute" style={{ fontSize: 20, right: 40, top: 13, pointerEvents: 'none' }}>
<i className="zmdi zmdi-calendar" />
</div>
</div>
<div className="col col-5 overflow-hidden flex relative">
<TimePicker
className="overflow-hidden"
hintText="Time"
autoOk={true}
value={time}
onChange={this._onTimeChanged.bind(this)}
/>
<div className="absolute" style={{ fontSize: 20, right: 9, top: 13, pointerEvents: 'none' }}>
<i className="zmdi zmdi-time" />
</div>
</div>
<div onClick={this._clearDates.bind(this)} className="col col-1 pt2" style={{ textAlign: 'right' }}>
<i style={{ fontSize: 16, cursor: 'pointer' }} className="zmdi zmdi-close" />
</div>
</div>
);
}
private _shouldDisableDate(date: Date): boolean {
return moment(date)
.startOf('day')
.isBefore(this._earliestPickableMoment);
}
private _clearDates(): void {
this.setState({
dateMoment: undefined,
timeMoment: undefined,
});
const defaultDateTime = utils.initialOrderExpiryUnixTimestampSec();
this.props.updateOrderExpiry(defaultDateTime);
}
private _onDateChanged(_event: any, date: Date): void {
const dateMoment = moment(date);
this.setState({
dateMoment,
});
const timestamp = utils.convertToUnixTimestampSeconds(dateMoment, this.state.timeMoment);
this.props.updateOrderExpiry(timestamp);
}
private _onTimeChanged(_event: any, time: Date): void {
const timeMoment = moment(time);
this.setState({
timeMoment,
});
const dateMoment = _.isUndefined(this.state.dateMoment) ? moment() : this.state.dateMoment;
const timestamp = utils.convertToUnixTimestampSeconds(dateMoment, timeMoment);
this.props.updateOrderExpiry(timestamp);
}
}
|
