import React, { Component, PropTypes } from 'react';
import CssTransitionGroup from 'react-addons-css-transition-group';
import { ZoomIn, ZoomOut } from '../animations';
import time from '../utils/time.js';
import Hours from './ClockHours.js';
import Minutes from './ClockMinutes.js';
class Clock extends Component {
static propTypes = {
className: PropTypes.string,
display: PropTypes.oneOf(['hours', 'minutes']),
format: PropTypes.oneOf(['24hr', 'ampm']),
onChange: PropTypes.func,
onHandMoved: PropTypes.func,
theme: PropTypes.shape({
clock: PropTypes.string,
clockWrapper: PropTypes.string,
placeholder: PropTypes.string
}),
time: PropTypes.object
};
static defaultProps = {
className: '',
display: 'hours',
format: '24hr',
time: new Date()
};
state = {
center: {x: null, y: null},
radius: 0
};
componentDidMount () {
window.addEventListener('resize', this.handleCalculateShape);
setTimeout(() => {
this.handleCalculateShape();
});
}
componentWillUnmount () {
window.removeEventListener('resize', this.handleCalculateShape);
}
handleHourChange = (hours) => {
if (this.props.time.getHours() !== hours) {
this.props.onChange(time.setHours(this.props.time, this.adaptHourToFormat(hours)));
}
};
handleMinuteChange = (minutes) => {
if (this.props.time.getMinutes() !== minutes) {
this.props.onChange(time.setMinutes(this.props.time, minutes));
}
};
handleCalculateShape = () => {
const { top, left, width } = this.refs.placeholder.getBoundingClientRect();
this.setState({
center: { x: left + width / 2 - window.pageXOffset, y: top + width / 2 - window.pageXOffset },
radius: width / 2
});
};
adaptHourToFormat (hour) {
if (this.props.format === 'ampm') {
if (time.getTimeMode(this.props.time) === 'pm') {
return hour < 12 ? hour + 12 : hour;
} else {
return hour === 12 ? 0 : hour;
}
} else {
return hour;
}
}
renderHours () {
return (