const React = window.React;
const css = require('./style');
const Hours = require('./hours');
const Minutes = require('./minutes');
const utils = require('../utils/date-time');
module.exports = React.createClass({
displayName: 'Clock',
propTypes: {
className: React.PropTypes.string,
display: React.PropTypes.oneOf(['hours', 'minutes']),
format: React.PropTypes.oneOf(['24hr', 'ampm']),
initialTime: React.PropTypes.object,
onChange: React.PropTypes.func
},
getDefaultProps () {
return {
className: '',
display: 'hours',
format: '24hr',
initialTime: new Date()
};
},
getInitialState () {
return {
center: {x: null, y: null},
radius: 0,
time: this.props.initialTime
};
},
componentDidMount () {
window.addEventListener('resize', this.handleResize);
this.setState({radius: this._getRadius()});
},
componentWillUpdate (props, state) {
let center = this._getCenter();
let { x: cx, y: cy } = center;
let { x: sx, y: sy } = this.state.center;
if (sx !== cx || sy !== cy) {
this.setState({center: center});
}
if (state.time.getTime() !== this.state.time.getTime() && this.props.onChange) {
this.props.onChange(state.time);
}
},
componentWillUnmount () {
window.removeEventListener('resize', this.handleResize);
},
onHourChange (hours) {
this.setState({time: utils.setHours(this.state.time, this._adaptHourToFormat(hours))});
},
onMinuteChange (minutes) {
this.setState({time: utils.setMinutes(this.state.time, minutes)});
},
_getRadius () {
return this.refs.wrapper.getDOMNode().getBoundingClientRect().width / 2;
},
_adaptHourToFormat (hour) {
if (this.props.format === 'ampm') {
if (utils.getTimeMode(this.state.time) === 'pm') {
return hour < 12 ? hour + 12 : hour;
} else {
return hour === 12 ? 0 : hour;
}
} else {
return hour;
}
},
handleResize () {
this.setState({
center: this._getCenter(),
radius: this._getRadius()
});
},
_getCenter () {
let { left, right, top, bottom } = this.getDOMNode().getBoundingClientRect();
return {
x: left + (right - left) / 2,
y: top + (bottom - top) / 2
};
},
toggleTimeMode () {
this.setState({time: utils.toggleTimeMode(this.state.time)});
},
renderHours () {
return (