Add Clock and ClockHours to TimePicker migration
parent
6f2d17d5d2
commit
a2cc04cff4
|
@ -1,7 +1,6 @@
|
|||
import React from 'react';
|
||||
import CssTransitionGroup from 'react-addons-css-transition-group';
|
||||
import { ZoomIn, ZoomOut } from '../animations';
|
||||
import style from './style.clock';
|
||||
import time from '../utils/time';
|
||||
import Hours from './ClockHours';
|
||||
import Minutes from './ClockMinutes';
|
||||
|
@ -13,6 +12,11 @@ class Clock extends React.Component {
|
|||
format: React.PropTypes.oneOf(['24hr', 'ampm']),
|
||||
onChange: React.PropTypes.func,
|
||||
onHandMoved: React.PropTypes.func,
|
||||
theme: React.PropTypes.shape({
|
||||
clock: React.PropTypes.string.isRequired,
|
||||
clockWrapper: React.PropTypes.string.isRequired,
|
||||
placeholder: React.PropTypes.string.isRequired
|
||||
}),
|
||||
time: React.PropTypes.object
|
||||
};
|
||||
|
||||
|
@ -81,6 +85,7 @@ class Clock extends React.Component {
|
|||
selected={this.props.time.getHours()}
|
||||
spacing={this.state.radius * 0.18}
|
||||
onHandMoved={this.props.onHandMoved}
|
||||
theme={this.props.theme}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
@ -94,17 +99,19 @@ class Clock extends React.Component {
|
|||
selected={this.props.time.getMinutes()}
|
||||
spacing={this.state.radius * 0.18}
|
||||
onHandMoved={this.props.onHandMoved}
|
||||
theme={this.props.theme}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
render () {
|
||||
const { theme } = this.props;
|
||||
const animation = this.props.display === 'hours' ? ZoomOut : ZoomIn;
|
||||
return (
|
||||
<div data-react-toolbox='clock' className={style.root}>
|
||||
<div ref='placeholder' className={style.placeholder} style={{height: this.state.radius * 2}}>
|
||||
<div data-react-toolbox='clock' className={theme.clock}>
|
||||
<div ref='placeholder' className={theme.placeholder} style={{height: this.state.radius * 2}}>
|
||||
<CssTransitionGroup transitionName={animation} transitionEnterTimeout={500} transitionLeaveTimeout={500}>
|
||||
<div key={this.props.display} className={style.wrapper} style={{height: this.state.radius * 2}}>
|
||||
<div key={this.props.display} className={theme.clockWrapper} style={{height: this.state.radius * 2}}>
|
||||
{this.props.display === 'hours' ? this.renderHours() : null}
|
||||
{this.props.display === 'minutes' ? this.renderMinutes() : null}
|
||||
</div>
|
||||
|
|
|
@ -16,7 +16,8 @@ class Hours extends React.Component {
|
|||
onHandMoved: React.PropTypes.func,
|
||||
radius: React.PropTypes.number,
|
||||
selected: React.PropTypes.number,
|
||||
spacing: React.PropTypes.number
|
||||
spacing: React.PropTypes.number,
|
||||
theme: React.PropTypes.object
|
||||
};
|
||||
|
||||
state = {
|
||||
|
@ -59,6 +60,7 @@ class Hours extends React.Component {
|
|||
numbers={innerNumbers}
|
||||
spacing={this.props.spacing}
|
||||
radius={innerRadius}
|
||||
theme={this.props.theme}
|
||||
active={this.props.selected}
|
||||
/>
|
||||
);
|
||||
|
@ -79,12 +81,14 @@ class Hours extends React.Component {
|
|||
radius={radius}
|
||||
twoDigits={is24hr}
|
||||
active={is24hr ? selected : (selected % 12 || 12)}
|
||||
theme={this.props.theme}
|
||||
/>
|
||||
{this.renderInnerFace(radius - spacing * innerSpacing)}
|
||||
<Hand ref='hand'
|
||||
angle={selected * step}
|
||||
length={(this.state.inner ? radius - spacing * innerSpacing : radius) - spacing}
|
||||
onMove={this.handleHandMove}
|
||||
theme={this.props.theme}
|
||||
onMoved={onHandMoved}
|
||||
origin={center}
|
||||
step={step}
|
||||
|
|
Loading…
Reference in New Issue