From e3920ac8d6b84b85490e2baa684c7c24e7fb0cb1 Mon Sep 17 00:00:00 2001 From: Cameron Fletcher Date: Sun, 1 Nov 2015 00:14:17 +1000 Subject: [PATCH 1/5] Added keys to timepicker buttons, fixed #1964 --- src/time-picker/clock.jsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/time-picker/clock.jsx b/src/time-picker/clock.jsx index 42a69838ac759d..8936f115dc1132 100644 --- a/src/time-picker/clock.jsx +++ b/src/time-picker/clock.jsx @@ -80,8 +80,8 @@ const Clock = React.createClass({ if (this.props.format === 'ampm'){ buttons = [ - {"AM"}, - {"PM"}, + {"AM"}, + {"PM"}, ]; } return buttons; From b13fe11e6fb72cc5858f53d325b837ed16227d8c Mon Sep 17 00:00:00 2001 From: Cameron Fletcher Date: Sun, 1 Nov 2015 00:24:16 +1000 Subject: [PATCH 2/5] changed timepicker button keys to AM/PM --- src/time-picker/clock.jsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/time-picker/clock.jsx b/src/time-picker/clock.jsx index 8936f115dc1132..a6979a5396ef41 100644 --- a/src/time-picker/clock.jsx +++ b/src/time-picker/clock.jsx @@ -80,8 +80,8 @@ const Clock = React.createClass({ if (this.props.format === 'ampm'){ buttons = [ - {"AM"}, - {"PM"}, + {"AM"}, + {"PM"}, ]; } return buttons; From 7831cefbe6d411f898f043481c0d4114c72938e6 Mon Sep 17 00:00:00 2001 From: Cameron Fletcher Date: Sun, 1 Nov 2015 01:41:50 +1000 Subject: [PATCH 3/5] timepicker as a controlled input --- src/time-picker/time-picker.jsx | 33 +++++++++++++++++++++++++++++++-- 1 file changed, 31 insertions(+), 2 deletions(-) diff --git a/src/time-picker/time-picker.jsx b/src/time-picker/time-picker.jsx index a8fab683100d21..0dec928836394d 100644 --- a/src/time-picker/time-picker.jsx +++ b/src/time-picker/time-picker.jsx @@ -3,6 +3,7 @@ const StylePropable = require('../mixins/style-propable'); const WindowListenable = require('../mixins/window-listenable'); const TimePickerDialog = require('./time-picker-dialog'); const TextField = require('../text-field'); +const DateTime = require('../utils/date-time'); let emptyTime = new Date(); @@ -48,11 +49,22 @@ const TimePicker = React.createClass({ getInitialState() { return { - time: this.props.defaultTime || emptyTime, + time: this._isControlled() ? this._getControlledDate() : (this.props.defaultTime || emptyTime), dialogTime: new Date(), }; }, + componentWillReceiveProps(nextProps) { + if (this._isControlled()) { + let newTime = this._getControlledTime(nextProps); + if (!DateTime.isEqualDate(this.state.time, newTime)) { + this.setState({ + time: newTime, + }); + } + } + }, + formatTime(date) { let hours = date.getHours(); let mins = date.getMinutes().toString(); @@ -93,6 +105,7 @@ const TimePicker = React.createClass({ onDismiss, style, textFieldStyle, + valueLink, ...other, } = this.props; @@ -108,6 +121,7 @@ const TimePicker = React.createClass({ {...other} style={textFieldStyle} ref="input" + value={this.state.time ? this.formatTime(this.state.time) : undefined} defaultValue={defaultInputValue} onFocus={this._handleInputFocus} onTouchTap={this._handleInputTouchTap} /> @@ -128,10 +142,12 @@ const TimePicker = React.createClass({ }, setTime(t) { + if (process.env.NODE_ENV !== 'production' && this._isControlled()) { + console.error('Cannot call TimePicker.setTime when value or valueLink is defined as a property.'); + } this.setState({ time: t, }); - this.refs.input.setValue(this.formatTime(t)); }, /** @@ -166,6 +182,19 @@ const TimePicker = React.createClass({ if (this.props.onTouchTap) this.props.onTouchTap(e); }, + + _isControlled() { + return this.props.hasOwnProperty('value') || + this.props.hasOwnProperty('valueLink'); + }, + + _getControlledTime(props = this.props) { + if (DateTime.isDateObject(props.value)) { + return props.value; + } else if (props.valueLink && DateTime.isDateObject(props.valueLink.value)) { + return props.valueLink.value; + } + }, }); module.exports = TimePicker; From ed9868021cc0979ed5ca98f1c6e46c4dfbc8ced7 Mon Sep 17 00:00:00 2001 From: Cameron Fletcher Date: Sun, 1 Nov 2015 02:19:34 +1000 Subject: [PATCH 4/5] fixed reference --- src/time-picker/time-picker.jsx | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/src/time-picker/time-picker.jsx b/src/time-picker/time-picker.jsx index 0dec928836394d..a8f7c1f901bab9 100644 --- a/src/time-picker/time-picker.jsx +++ b/src/time-picker/time-picker.jsx @@ -49,7 +49,7 @@ const TimePicker = React.createClass({ getInitialState() { return { - time: this._isControlled() ? this._getControlledDate() : (this.props.defaultTime || emptyTime), + time: this._isControlled() ? this._getControlledTime() : (this.props.defaultTime || emptyTime), dialogTime: new Date(), }; }, @@ -166,8 +166,11 @@ const TimePicker = React.createClass({ }, _handleDialogAccept(t) { - this.setTime(t); + if (!this._isControlled()) { + this.setTime(t) + } if (this.props.onChange) this.props.onChange(null, t); + if (this.props.valueLink) this.props.valueLink.requestChange(t); }, _handleInputFocus(e) { From 375b88eca9e4065ae3156f2a41ec768de468275f Mon Sep 17 00:00:00 2001 From: Cameron Fletcher Date: Sun, 1 Nov 2015 03:06:08 +1000 Subject: [PATCH 5/5] added isEqualTime to DateTime util, and use it for updating TimePicker's state --- src/time-picker/time-picker.jsx | 2 +- src/utils/date-time.js | 6 ++++++ 2 files changed, 7 insertions(+), 1 deletion(-) diff --git a/src/time-picker/time-picker.jsx b/src/time-picker/time-picker.jsx index a8f7c1f901bab9..ed8618173b51d7 100644 --- a/src/time-picker/time-picker.jsx +++ b/src/time-picker/time-picker.jsx @@ -57,7 +57,7 @@ const TimePicker = React.createClass({ componentWillReceiveProps(nextProps) { if (this._isControlled()) { let newTime = this._getControlledTime(nextProps); - if (!DateTime.isEqualDate(this.state.time, newTime)) { + if (!DateTime.isEqualTime(this.state.time, newTime)) { this.setState({ time: newTime, }); diff --git a/src/utils/date-time.js b/src/utils/date-time.js index 6359e6e7518cd1..bfeb9c2abd3c5d 100644 --- a/src/utils/date-time.js +++ b/src/utils/date-time.js @@ -120,6 +120,12 @@ module.exports = { (d1.getDate() === d2.getDate()); }, + isEqualTime(t1, t2) { + return t1 && t2 && + (t1.getHours() === t2.getHours()) && + (t1.getMinutes() === t2.getMinutes()); + }, + isBeforeDate(d1, d2) { const date1 = this.cloneAsDate(d1); const date2 = this.cloneAsDate(d2);