diff --git a/src/time-picker/clock.jsx b/src/time-picker/clock.jsx index 42a69838ac759d..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; diff --git a/src/time-picker/time-picker.jsx b/src/time-picker/time-picker.jsx index a8fab683100d21..ed8618173b51d7 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._getControlledTime() : (this.props.defaultTime || emptyTime), dialogTime: new Date(), }; }, + componentWillReceiveProps(nextProps) { + if (this._isControlled()) { + let newTime = this._getControlledTime(nextProps); + if (!DateTime.isEqualTime(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)); }, /** @@ -150,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) { @@ -166,6 +185,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; 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);