From f3b9fd598905ef4b7cba75d88672644f46780e23 Mon Sep 17 00:00:00 2001 From: Julius Volz Date: Sun, 17 Feb 2019 12:11:06 +0100 Subject: [PATCH] Generalize time input naming more Signed-off-by: Julius Volz --- src/App.css | 8 ++--- src/GraphControls.tsx | 7 ++++- src/Panel.tsx | 7 ++++- src/TimeInput.tsx | 73 +++++++++++++++++++++---------------------- 4 files changed, 52 insertions(+), 43 deletions(-) diff --git a/src/App.css b/src/App.css index bc41479a15..51658f4ab6 100644 --- a/src/App.css +++ b/src/App.css @@ -87,11 +87,11 @@ button.execute-btn { width: 50px; } -.graph-controls .endtime-input input { +.graph-controls .time-input input { border-right: none; } -div.endtime-input { +div.time-input { width: 240px !important; } @@ -103,11 +103,11 @@ div.endtime-input { width: 90px; } -.graph-controls .endtime-input, .graph-controls .resolution-input, .graph-controls .stacked-input { +.graph-controls .time-input, .graph-controls .resolution-input, .graph-controls .stacked-input { margin-left: 20px; } -.graph-controls .clear-endtime-btn { +.graph-controls .clear-time-btn { background: #fff; border-left: none; border-top: 1px solid #ced4da; diff --git a/src/GraphControls.tsx b/src/GraphControls.tsx index d1453872db..fb912b4418 100644 --- a/src/GraphControls.tsx +++ b/src/GraphControls.tsx @@ -116,7 +116,12 @@ class GraphControls extends Component { - + { {this.props.options.type === 'table' && <>
- +
diff --git a/src/TimeInput.tsx b/src/TimeInput.tsx index c2fcf4c477..245964a3cd 100644 --- a/src/TimeInput.tsx +++ b/src/TimeInput.tsx @@ -32,41 +32,42 @@ library.add( dom.watch(); interface TimeInputProps { - endTime: number | null; - range: number; + time: number | null; // Timestamp in milliseconds. + range: number; // Range in seconds. + placeholder: string; - onChangeEndTime: (endTime: number | null) => void; + onChangeTime: (time: number | null) => void; } class TimeInput extends Component { - private endTimeRef = React.createRef(); - private $endTime: any | null = null; + private timeInputRef = React.createRef(); + private $time: any | null = null; - getBaseEndTime = (): number => { - return this.props.endTime || moment().valueOf(); + getBaseTime = (): number => { + return this.props.time || moment().valueOf(); } - increaseEndTime = (): void => { - const endTime = this.getBaseEndTime() + this.props.range*1000/2; - this.props.onChangeEndTime(endTime); - this.$endTime.datetimepicker('date', moment(endTime)); + increaseTime = (): void => { + const time = this.getBaseTime() + this.props.range*1000/2; + this.props.onChangeTime(time); + this.$time.datetimepicker('date', moment(time)); } - decreaseEndTime = (): void => { - const endTime = this.getBaseEndTime() - this.props.range*1000/2; - this.props.onChangeEndTime(endTime); - this.$endTime.datetimepicker('date', moment(endTime)); + decreaseTime = (): void => { + const time = this.getBaseTime() - this.props.range*1000/2; + this.props.onChangeTime(time); + this.$time.datetimepicker('date', moment(time)); } - clearEndTime = (): void => { - this.props.onChangeEndTime(null); - this.$endTime.datetimepicker('date', null); + clearTime = (): void => { + this.props.onChangeTime(null); + this.$time.datetimepicker('date', null); } componentDidMount() { - this.$endTime = $(this.endTimeRef.current!); + this.$time = $(this.timeInputRef.current!); - this.$endTime.datetimepicker({ + this.$time.datetimepicker({ icons: { today: 'fas fa-calendar-check', }, @@ -79,49 +80,47 @@ class TimeInput extends Component { format: 'YYYY-MM-DD HH:mm', locale: 'en', timeZone: 'UTC', - defaultDate: this.props.endTime, + defaultDate: this.props.time, }); - this.$endTime.on('change.datetimepicker', (e: any) => { + this.$time.on('change.datetimepicker', (e: any) => { if (e.date) { - this.props.onChangeEndTime(e.date); + this.props.onChangeTime(e.date); } else { - this.$endTime.datetimepicker('date', e.target.value); + this.$time.datetimepicker('date', e.target.value); } }); } componentWillUnmount() { - this.$endTime.datetimepicker('destroy'); + this.$time.datetimepicker('destroy'); } render() { return ( - + - + this.$endTime.datetimepicker('show')} - onBlur={() => this.$endTime.datetimepicker('hide')} - onKeyDown={(e) => ['Escape', 'Enter'].includes(e.key) && this.$endTime.datetimepicker('hide')} + placeholder={this.props.placeholder} + innerRef={this.timeInputRef} + onFocus={() => this.$time.datetimepicker('show')} + onBlur={() => this.$time.datetimepicker('hide')} + onKeyDown={(e) => ['Escape', 'Enter'].includes(e.key) && this.$time.datetimepicker('hide')} /> {/* CAUTION: While the datetimepicker also has an option to show a 'clear' button, that functionality is broken, so we create an external solution instead. */} - {this.props.endTime && + {this.props.time && - + } - + );