diff options
Diffstat (limited to 'packages/website/ts/components/inputs/expiration_input.tsx')
-rw-r--r-- | packages/website/ts/components/inputs/expiration_input.tsx | 168 |
1 files changed, 84 insertions, 84 deletions
diff --git a/packages/website/ts/components/inputs/expiration_input.tsx b/packages/website/ts/components/inputs/expiration_input.tsx index cb4ed7bd0..e473648d2 100644 --- a/packages/website/ts/components/inputs/expiration_input.tsx +++ b/packages/website/ts/components/inputs/expiration_input.tsx @@ -7,94 +7,94 @@ import * as React from 'react'; import { utils } from 'ts/utils/utils'; interface ExpirationInputProps { - orderExpiryTimestamp: BigNumber; - updateOrderExpiry: (unixTimestampSec: BigNumber) => void; + orderExpiryTimestamp: BigNumber; + updateOrderExpiry: (unixTimestampSec: BigNumber) => void; } interface ExpirationInputState { - dateMoment: moment.Moment; - timeMoment: moment.Moment; + dateMoment: moment.Moment; + timeMoment: moment.Moment; } export class ExpirationInput extends React.Component<ExpirationInputProps, ExpirationInputState> { - private _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() { - 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() { - this.setState({ - dateMoment: undefined, - timeMoment: undefined, - }); - const defaultDateTime = utils.initialOrderExpiryUnixTimestampSec(); - this.props.updateOrderExpiry(defaultDateTime); - } - private _onDateChanged(e: any, date: Date) { - const dateMoment = moment(date); - this.setState({ - dateMoment, - }); - const timestamp = utils.convertToUnixTimestampSeconds(dateMoment, this.state.timeMoment); - this.props.updateOrderExpiry(timestamp); - } - private _onTimeChanged(e: any, time: Date) { - 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); - } + private _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() { + 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() { + this.setState({ + dateMoment: undefined, + timeMoment: undefined, + }); + const defaultDateTime = utils.initialOrderExpiryUnixTimestampSec(); + this.props.updateOrderExpiry(defaultDateTime); + } + private _onDateChanged(e: any, date: Date) { + const dateMoment = moment(date); + this.setState({ + dateMoment, + }); + const timestamp = utils.convertToUnixTimestampSeconds(dateMoment, this.state.timeMoment); + this.props.updateOrderExpiry(timestamp); + } + private _onTimeChanged(e: any, time: Date) { + 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); + } } |