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

Revert "Update components to use css-transition-group 2" 

This reverts commit ab2e78967b.
old
rubenmoya 2018-02-21 20:17:47 +01:00
parent 6357bedb52
commit 752cdd3854
3 changed files with 13 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
components/date_picker/Calendar.js
View File

@ -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 TransitionGroup from 'react-transition-group/TransitionGroup'; import CssTransitionGroup from 'react-transition-group/CSSTransitionGroup';
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,9 +135,10 @@ 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} />
<TransitionGroup <CssTransitionGroup
classNames={animationModule} transitionName={animationModule}
timeout={{ exit: 350, enter: 350 }} transitionEnterTimeout={350}
transitionLeaveTimeout={350}
> >
<CalendarMonth <CalendarMonth
enabledDates={this.props.enabledDates} enabledDates={this.props.enabledDates}
@ -152,7 +153,7 @@ const factory = (IconButton) => {
theme={this.props.theme} theme={this.props.theme}
viewDate={this.state.viewDate} viewDate={this.state.viewDate}
/> />
</TransitionGroup> </CssTransitionGroup>
</div> </div>
); );
} }

11
components/time_picker/Clock.js
View File

@ -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 TransitionGroup from 'react-transition-group/TransitionGroup'; import CssTransitionGroup from 'react-transition-group/CSSTransitionGroup';
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,9 +116,10 @@ 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; }}
> >
<TransitionGroup <CssTransitionGroup
classNames={animationModule} transitionName={animationModule}
timeout={{ exit: 500, enter: 500 }} transitionEnterTimeout={500}
transitionLeaveTimeout={500}
> >
<div <div
key={this.props.display} key={this.props.display}
@ -128,7 +129,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>
</TransitionGroup> </CssTransitionGroup>
</div> </div>
</div> </div>
); );

2
package.json
View File

@ -147,7 +147,7 @@
"prop-types": "^15.6.0", "prop-types": "^15.6.0",
"react": "^15.5.0 || ^16.0.0", "react": "^15.5.0 || ^16.0.0",
"react-dom": "^15.5.0 || ^16.0.0", "react-dom": "^15.5.0 || ^16.0.0",
"react-transition-group": "^2.2.1" "react-transition-group": "^2.2.0"
}, },
"pre-commit": "lint:staged" "pre-commit": "lint:staged"
} }