2016-05-31 11:23:05 +03:00
|
|
|
import React, { Component, PropTypes } from 'react';
|
2015-12-12 13:35:31 +03:00
|
|
|
import CssTransitionGroup from 'react-addons-css-transition-group';
|
|
|
|
import { ZoomIn, ZoomOut } from '../animations';
|
2016-05-31 11:23:05 +03:00
|
|
|
import time from '../utils/time.js';
|
|
|
|
import Hours from './ClockHours.js';
|
|
|
|
import Minutes from './ClockMinutes.js';
|
2015-11-22 23:41:28 +03:00
|
|
|
|
2016-05-31 11:23:05 +03:00
|
|
|
class Clock extends Component {
|
2015-11-22 23:41:28 +03:00
|
|
|
static propTypes = {
|
2016-05-31 11:23:05 +03:00
|
|
|
className: PropTypes.string,
|
|
|
|
display: PropTypes.oneOf(['hours', 'minutes']),
|
|
|
|
format: PropTypes.oneOf(['24hr', 'ampm']),
|
|
|
|
onChange: PropTypes.func,
|
|
|
|
onHandMoved: PropTypes.func,
|
|
|
|
theme: PropTypes.shape({
|
2016-06-04 00:44:33 +03:00
|
|
|
clock: PropTypes.string,
|
|
|
|
clockWrapper: PropTypes.string,
|
|
|
|
placeholder: PropTypes.string
|
2016-05-22 14:26:30 +03:00
|
|
|
}),
|
2016-05-31 11:23:05 +03:00
|
|
|
time: PropTypes.object
|
2015-11-22 23:41:28 +03:00
|
|
|
};
|
|
|
|
|
|
|
|
static defaultProps = {
|
|
|
|
className: '',
|
|
|
|
display: 'hours',
|
|
|
|
format: '24hr',
|
|
|
|
time: new Date()
|
|
|
|
};
|
|
|
|
|
|
|
|
state = {
|
|
|
|
center: {x: null, y: null},
|
|
|
|
radius: 0
|
|
|
|
};
|
|
|
|
|
|
|
|
componentDidMount () {
|
|
|
|
window.addEventListener('resize', this.handleCalculateShape);
|
2016-02-19 16:43:29 +03:00
|
|
|
setTimeout(() => {
|
|
|
|
this.handleCalculateShape();
|
|
|
|
});
|
2015-11-22 23:41:28 +03:00
|
|
|
}
|
|
|
|
|
|
|
|
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 = () => {
|
2015-12-12 13:35:31 +03:00
|
|
|
const { top, left, width } = this.refs.placeholder.getBoundingClientRect();
|
2015-11-22 23:41:28 +03:00
|
|
|
this.setState({
|
2016-08-02 20:40:31 +03:00
|
|
|
center: { x: left + width / 2 - window.pageXOffset, y: top + width / 2 - window.pageXOffset },
|
2015-11-22 23:41:28 +03:00
|
|
|
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 (
|
|
|
|
<Hours
|
|
|
|
center={this.state.center}
|
|
|
|
format={this.props.format}
|
|
|
|
onChange={this.handleHourChange}
|
|
|
|
radius={this.state.radius}
|
|
|
|
selected={this.props.time.getHours()}
|
|
|
|
spacing={this.state.radius * 0.18}
|
2015-12-12 13:35:31 +03:00
|
|
|
onHandMoved={this.props.onHandMoved}
|
2016-05-22 14:26:30 +03:00
|
|
|
theme={this.props.theme}
|
2015-11-22 23:41:28 +03:00
|
|
|
/>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
|
|
|
renderMinutes () {
|
|
|
|
return (
|
|
|
|
<Minutes
|
|
|
|
center={this.state.center}
|
|
|
|
onChange={this.handleMinuteChange}
|
|
|
|
radius={this.state.radius}
|
|
|
|
selected={this.props.time.getMinutes()}
|
|
|
|
spacing={this.state.radius * 0.18}
|
2015-12-12 13:35:31 +03:00
|
|
|
onHandMoved={this.props.onHandMoved}
|
2016-05-22 14:26:30 +03:00
|
|
|
theme={this.props.theme}
|
2015-11-22 23:41:28 +03:00
|
|
|
/>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
|
|
|
render () {
|
2016-05-22 14:26:30 +03:00
|
|
|
const { theme } = this.props;
|
2015-12-12 13:35:31 +03:00
|
|
|
const animation = this.props.display === 'hours' ? ZoomOut : ZoomIn;
|
2015-11-22 23:41:28 +03:00
|
|
|
return (
|
2016-05-22 14:26:30 +03:00
|
|
|
<div data-react-toolbox='clock' className={theme.clock}>
|
|
|
|
<div ref='placeholder' className={theme.placeholder} style={{height: this.state.radius * 2}}>
|
2015-12-12 13:35:31 +03:00
|
|
|
<CssTransitionGroup transitionName={animation} transitionEnterTimeout={500} transitionLeaveTimeout={500}>
|
2016-05-22 14:26:30 +03:00
|
|
|
<div key={this.props.display} className={theme.clockWrapper} style={{height: this.state.radius * 2}}>
|
2015-12-12 13:35:31 +03:00
|
|
|
{this.props.display === 'hours' ? this.renderHours() : null}
|
|
|
|
{this.props.display === 'minutes' ? this.renderMinutes() : null}
|
|
|
|
</div>
|
|
|
|
</CssTransitionGroup>
|
2015-11-22 23:41:28 +03:00
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
export default Clock;
|