Update tests to use css-transition-group 2
parent
c510029923
commit
ab2e78967b
|
@ -1,6 +1,6 @@
|
||||||
import React, { Component } from 'react';
|
import React, { Component } from 'react';
|
||||||
import PropTypes from 'prop-types';
|
import PropTypes from 'prop-types';
|
||||||
import CssTransitionGroup from 'react-transition-group/CSSTransitionGroup';
|
import TransitionGroup from 'react-transition-group/TransitionGroup';
|
||||||
import { range, getAnimationModule } from '../utils/utils';
|
import { range, getAnimationModule } from '../utils/utils';
|
||||||
import time from '../utils/time';
|
import time from '../utils/time';
|
||||||
import CalendarMonth from './CalendarMonth';
|
import CalendarMonth from './CalendarMonth';
|
||||||
|
@ -135,10 +135,9 @@ const factory = (IconButton) => {
|
||||||
<div data-react-toolbox="calendar">
|
<div data-react-toolbox="calendar">
|
||||||
<IconButton id="left" className={theme.prev} icon="chevron_left" onClick={this.changeViewMonth} />
|
<IconButton id="left" className={theme.prev} icon="chevron_left" onClick={this.changeViewMonth} />
|
||||||
<IconButton id="right" className={theme.next} icon="chevron_right" onClick={this.changeViewMonth} />
|
<IconButton id="right" className={theme.next} icon="chevron_right" onClick={this.changeViewMonth} />
|
||||||
<CssTransitionGroup
|
<TransitionGroup
|
||||||
transitionName={animationModule}
|
classNames={animationModule}
|
||||||
transitionEnterTimeout={350}
|
timeout={{ exit: 350, enter: 350 }}
|
||||||
transitionLeaveTimeout={350}
|
|
||||||
>
|
>
|
||||||
<CalendarMonth
|
<CalendarMonth
|
||||||
enabledDates={this.props.enabledDates}
|
enabledDates={this.props.enabledDates}
|
||||||
|
@ -153,7 +152,7 @@ const factory = (IconButton) => {
|
||||||
theme={this.props.theme}
|
theme={this.props.theme}
|
||||||
viewDate={this.state.viewDate}
|
viewDate={this.state.viewDate}
|
||||||
/>
|
/>
|
||||||
</CssTransitionGroup>
|
</TransitionGroup>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
import React, { Component } from 'react';
|
import React, { Component } from 'react';
|
||||||
import PropTypes from 'prop-types';
|
import PropTypes from 'prop-types';
|
||||||
import CssTransitionGroup from 'react-transition-group/CSSTransitionGroup';
|
import TransitionGroup from 'react-transition-group/TransitionGroup';
|
||||||
import { getAnimationModule } from '../utils/utils';
|
import { getAnimationModule } from '../utils/utils';
|
||||||
import time from '../utils/time';
|
import time from '../utils/time';
|
||||||
import Hours from './ClockHours';
|
import Hours from './ClockHours';
|
||||||
|
@ -116,10 +116,9 @@ class Clock extends Component {
|
||||||
style={{ height: this.state.radius * 2 }}
|
style={{ height: this.state.radius * 2 }}
|
||||||
ref={(node) => { this.placeholderNode = node; }}
|
ref={(node) => { this.placeholderNode = node; }}
|
||||||
>
|
>
|
||||||
<CssTransitionGroup
|
<TransitionGroup
|
||||||
transitionName={animationModule}
|
classNames={animationModule}
|
||||||
transitionEnterTimeout={500}
|
timeout={{ exit: 500, enter: 500 }}
|
||||||
transitionLeaveTimeout={500}
|
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
key={this.props.display}
|
key={this.props.display}
|
||||||
|
@ -129,7 +128,7 @@ class Clock extends Component {
|
||||||
{this.props.display === 'hours' ? this.renderHours() : null}
|
{this.props.display === 'hours' ? this.renderHours() : null}
|
||||||
{this.props.display === 'minutes' ? this.renderMinutes() : null}
|
{this.props.display === 'minutes' ? this.renderMinutes() : null}
|
||||||
</div>
|
</div>
|
||||||
</CssTransitionGroup>
|
</TransitionGroup>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|
Loading…
Reference in New Issue