2015-09-06 20:29:51 +03:00
|
|
|
const React = window.React;
|
|
|
|
const css = require('./style');
|
2015-09-06 23:01:26 +03:00
|
|
|
const time = require('../utils/time');
|
|
|
|
|
2015-09-06 20:29:51 +03:00
|
|
|
const Hours = require('./hours');
|
|
|
|
const Minutes = require('./minutes');
|
|
|
|
|
|
|
|
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: '',
|
2015-09-06 23:11:39 +03:00
|
|
|
display: 'hours',
|
2015-09-06 20:29:51 +03:00
|
|
|
format: '24hr',
|
|
|
|
initialTime: new Date()
|
|
|
|
};
|
|
|
|
},
|
|
|
|
|
|
|
|
getInitialState () {
|
|
|
|
return {
|
|
|
|
center: {x: null, y: null},
|
|
|
|
radius: 0,
|
|
|
|
time: this.props.initialTime
|
|
|
|
};
|
|
|
|
},
|
|
|
|
|
|
|
|
componentDidMount () {
|
2015-09-06 21:17:16 +03:00
|
|
|
window.addEventListener('resize', this.calculateShape);
|
|
|
|
this.calculateShape();
|
2015-09-06 20:29:51 +03:00
|
|
|
},
|
|
|
|
|
|
|
|
componentWillUnmount () {
|
2015-09-06 21:17:16 +03:00
|
|
|
window.removeEventListener('resize', this.calculateShape);
|
2015-09-06 20:29:51 +03:00
|
|
|
},
|
|
|
|
|
|
|
|
onHourChange (hours) {
|
2015-09-06 21:17:16 +03:00
|
|
|
if (this.state.time.getHours() !== hours) {
|
2015-09-07 03:25:39 +03:00
|
|
|
const newTime = time.setHours(this.state.time, this._adaptHourToFormat(hours));
|
|
|
|
this.setState({time: newTime});
|
|
|
|
if (this.props.onChange) this.props.onChange(newTime);
|
2015-09-06 21:17:16 +03:00
|
|
|
}
|
2015-09-06 20:29:51 +03:00
|
|
|
},
|
|
|
|
|
|
|
|
onMinuteChange (minutes) {
|
2015-09-06 21:17:16 +03:00
|
|
|
if (this.state.time.getMinutes() !== minutes) {
|
2015-09-07 03:25:39 +03:00
|
|
|
let newTime = time.setMinutes(this.state.time, minutes);
|
|
|
|
this.setState({time: newTime});
|
|
|
|
if (this.props.onChange) this.props.onChange(newTime);
|
2015-09-06 21:17:16 +03:00
|
|
|
}
|
2015-09-06 20:29:51 +03:00
|
|
|
},
|
|
|
|
|
|
|
|
_adaptHourToFormat (hour) {
|
|
|
|
if (this.props.format === 'ampm') {
|
2015-09-06 23:01:26 +03:00
|
|
|
if (time.getTimeMode(this.state.time) === 'pm') {
|
2015-09-06 20:29:51 +03:00
|
|
|
return hour < 12 ? hour + 12 : hour;
|
|
|
|
} else {
|
|
|
|
return hour === 12 ? 0 : hour;
|
|
|
|
}
|
|
|
|
} else {
|
|
|
|
return hour;
|
|
|
|
}
|
|
|
|
},
|
|
|
|
|
2015-09-06 21:17:16 +03:00
|
|
|
calculateShape () {
|
|
|
|
let { top, left, width } = this.refs.wrapper.getDOMNode().getBoundingClientRect();
|
2015-09-06 20:29:51 +03:00
|
|
|
this.setState({
|
2015-09-06 21:17:16 +03:00
|
|
|
center: { x: left + width / 2, y: top + width / 2 },
|
|
|
|
radius: width / 2
|
2015-09-06 20:29:51 +03:00
|
|
|
});
|
|
|
|
},
|
|
|
|
|
|
|
|
toggleTimeMode () {
|
2015-09-06 23:01:26 +03:00
|
|
|
this.setState({time: time.toggleTimeMode(this.state.time)});
|
2015-09-06 20:29:51 +03:00
|
|
|
},
|
|
|
|
|
|
|
|
renderHours () {
|
|
|
|
return (
|
|
|
|
<Hours
|
|
|
|
center={this.state.center}
|
|
|
|
format={this.props.format}
|
|
|
|
onChange={this.onHourChange}
|
|
|
|
radius={this.state.radius}
|
|
|
|
selected={this.state.time.getHours()}
|
|
|
|
spacing={this.state.radius * 0.16} />
|
|
|
|
);
|
|
|
|
},
|
|
|
|
|
|
|
|
renderMinutes () {
|
|
|
|
return (
|
|
|
|
<Minutes
|
|
|
|
center={this.state.center}
|
|
|
|
onChange={this.onMinuteChange}
|
|
|
|
radius={this.state.radius}
|
|
|
|
selected={this.state.time.getMinutes()}
|
|
|
|
spacing={this.state.radius * 0.16} />
|
|
|
|
);
|
|
|
|
},
|
|
|
|
|
|
|
|
render () {
|
|
|
|
return (
|
|
|
|
<div className={css.root}>
|
|
|
|
<div ref="wrapper" className={css.wrapper} style={{height: this.state.radius * 2}}>
|
|
|
|
{ this.props.display === 'hours' ? this.renderHours() : '' }
|
|
|
|
{ this.props.display === 'minutes' ? this.renderMinutes() : '' }
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
});
|