vitalif
/
react-toolbox
1
0
Fork 0
Code Issues Pull Requests Releases 12 Wiki Activity

Merge pull request #1701 from Merbs/upgrade-react-transition-group 

Upgrade react-transition-group
old
Rubén Moya 2018-02-21 20:23:34 +01:00 committed by GitHub
parent 752cdd3854 c600247cf3
commit 0da9b72a7f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 33 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
components/date_picker/Calendar.js
View File

@ -1,6 +1,7 @@
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 CSSTransition from 'react-transition-group/CSSTransition';
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,25 +136,23 @@ 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} <CSSTransition classNames={animationModule} timeout={350}>
transitionEnterTimeout={350} <CalendarMonth
transitionLeaveTimeout={350} enabledDates={this.props.enabledDates}
> disabledDates={this.props.disabledDates}
<CalendarMonth key={this.state.viewDate.getMonth()}
enabledDates={this.props.enabledDates} locale={this.props.locale}
disabledDates={this.props.disabledDates} maxDate={this.props.maxDate}
key={this.state.viewDate.getMonth()} minDate={this.props.minDate}
locale={this.props.locale} onDayClick={this.handleDayClick}
maxDate={this.props.maxDate} selectedDate={this.props.selectedDate}
minDate={this.props.minDate} sundayFirstDayOfWeek={this.props.sundayFirstDayOfWeek}
onDayClick={this.handleDayClick} theme={this.props.theme}
selectedDate={this.props.selectedDate} viewDate={this.state.viewDate}
sundayFirstDayOfWeek={this.props.sundayFirstDayOfWeek} />
theme={this.props.theme} </CSSTransition>
viewDate={this.state.viewDate} </TransitionGroup>
/>
</CssTransitionGroup>
</div> </div>
); );
} }

29
components/time_picker/Clock.js
View File

@ -1,6 +1,7 @@
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 CSSTransition from 'react-transition-group/CSSTransition';
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,20 +117,18 @@ 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} <CSSTransition classNames={animationModule} timeout={500}>
transitionEnterTimeout={500} <div
transitionLeaveTimeout={500} key={this.props.display}
> className={theme.clockWrapper}
<div style={{ height: this.state.radius * 2 }}
key={this.props.display} >
className={theme.clockWrapper} {this.props.display === 'hours' ? this.renderHours() : null}
style={{ height: this.state.radius * 2 }} {this.props.display === 'minutes' ? this.renderMinutes() : null}
> </div>
{this.props.display === 'hours' ? this.renderHours() : null} </CSSTransition>
{this.props.display === 'minutes' ? this.renderMinutes() : null} </TransitionGroup>
</div>
</CssTransitionGroup>
</div> </div>
</div> </div>
); );