Skip to content
This repository was archived by the owner on Oct 23, 2024. It is now read-only.

Commit 7af2d2b

Browse files
GeorgiSTodorovGeorgiSTodorov
authored
Merge pull request #515 from mesosphere/dima/update-react-transition-group
Update react transition group
2 parents 755c716 + 812d80b commit 7af2d2b

File tree

12 files changed

+144
-212
lines changed

12 files changed

+144
-212
lines changed

Diff for: ‎package-lock.json

+82-95
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

Diff for: ‎package.json

+2-2
Original file line numberDiff line numberDiff line change
@@ -70,7 +70,7 @@
7070
"react": "^16.8.1",
7171
"react-dom": "^16.8.1",
7272
"react-gemini-scrollbar": "2.3.x",
73-
"react-transition-group": "1.2.x",
73+
"react-transition-group": "2.5.0",
7474
"semantic-release": "^15.13.3",
7575
"source-map-loader": "0.1.5",
7676
"stylelint": "7.10.1",
@@ -84,7 +84,7 @@
8484
"cnvs": "1.1.14",
8585
"react": ">= 16.8.0",
8686
"react-dom": ">= 16.8.0",
87-
"react-transition-group": "1.2.x",
87+
"react-transition-group": ">= 2.5.0",
8888
"react-gemini-scrollbar": "^2.1.5 || ^2.3.0"
8989
},
9090
"scripts": {

Diff for: ‎src/Dropdown/Dropdown.js

+19-26
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import classNames from "classnames";
22
import GeminiScrollbar from "react-gemini-scrollbar";
33
import React from "react";
44
import PropTypes from "prop-types";
5-
import { CSSTransitionGroup } from "react-transition-group";
5+
import { CSSTransition } from "react-transition-group";
66
import ReactDOM from "react-dom";
77

88
import BindMixin from "../Mixin/BindMixin";
@@ -20,9 +20,7 @@ class Dropdown extends Util.mixin(BindMixin) {
2020
"handleExternalClick",
2121
"handleKeyDown",
2222
"handleMenuRender",
23-
"handleWrapperBlur",
24-
"setDropdownMenuRef",
25-
"setDropdownWrapperRef"
23+
"handleWrapperBlur"
2624
];
2725
}
2826

@@ -38,6 +36,8 @@ class Dropdown extends Util.mixin(BindMixin) {
3836
renderHidden: false,
3937
selectedID: null
4038
};
39+
this.dropdownMenuRef = React.createRef();
40+
this.dropdownWrapperRef = React.createRef();
4141
}
4242

4343
componentWillMount() {
@@ -161,7 +161,7 @@ class Dropdown extends Util.mixin(BindMixin) {
161161
let menuDirection = this.state.menuDirection;
162162
const menuPositionStyle = {};
163163
const spaceAroundDropdownButton = DOMUtil.getNodeClearance(
164-
this.dropdownWrapperRef
164+
this.dropdownWrapperRef.current
165165
);
166166
const dropdownChildHeight =
167167
this.dropdownMenuRef && this.dropdownMenuRef.current
@@ -174,7 +174,6 @@ class Dropdown extends Util.mixin(BindMixin) {
174174
const isMenuShorterThanTop = !isMenuTallerThanTop;
175175
const isTopTallerThanBottom =
176176
spaceAroundDropdownButton.top > spaceAroundDropdownButton.bottom;
177-
178177
// If the menu height is larger than the space available on the bottom and
179178
// less than the space available on top, then render it up. If the height
180179
// of the menu exceeds the space below and above, but there is more space
@@ -317,14 +316,6 @@ class Dropdown extends Util.mixin(BindMixin) {
317316
);
318317
}
319318

320-
setDropdownMenuRef(element) {
321-
this.dropdownMenuRef = element;
322-
}
323-
324-
setDropdownWrapperRef(element) {
325-
this.dropdownWrapperRef = element;
326-
}
327-
328319
render() {
329320
// Set a key based on the menu height so that React knows to keep the
330321
// the DOM element around while we are measuring it.
@@ -383,9 +374,10 @@ class Dropdown extends Util.mixin(BindMixin) {
383374

384375
dropdownMenu = (
385376
<span
377+
key="dropdown-menu-key"
386378
className={dropdownMenuClassSet}
387379
role="menu"
388-
ref={this.setDropdownMenuRef}
380+
ref={this.dropdownMenuRef}
389381
style={state.menuPositionStyle}
390382
>
391383
<div className={props.dropdownMenuListClassName}>
@@ -401,17 +393,18 @@ class Dropdown extends Util.mixin(BindMixin) {
401393
{dropdownMenu}
402394
</div>
403395
);
404-
}
405-
406-
if (props.transition) {
396+
} else if (props.transition) {
407397
dropdownMenu = (
408-
<CSSTransitionGroup
409-
transitionName={transitionName}
410-
transitionEnterTimeout={props.transitionEnterTimeout}
411-
transitionLeaveTimeout={props.transitionLeaveTimeout}
398+
<CSSTransition
399+
in={state.isOpen}
400+
classNames={transitionName}
401+
timeout={{
402+
enter: props.transitionEnterTimeout,
403+
exit: props.transitionExitTimeout
404+
}}
412405
>
413406
{dropdownMenu}
414-
</CSSTransitionGroup>
407+
</CSSTransition>
415408
);
416409
}
417410

@@ -420,7 +413,7 @@ class Dropdown extends Util.mixin(BindMixin) {
420413
className={wrapperClassSet}
421414
tabIndex="1"
422415
onBlur={this.handleWrapperBlur}
423-
ref={this.setDropdownWrapperRef}
416+
ref={this.dropdownWrapperRef}
424417
>
425418
{React.cloneElement(trigger, {
426419
selectedItem: this.getSelectedItem(this.getSelectedID(), items),
@@ -442,7 +435,7 @@ Dropdown.defaultProps = {
442435
transition: false,
443436
transitionName: "dropdown-menu",
444437
transitionEnterTimeout: 250,
445-
transitionLeaveTimeout: 250,
438+
transitionExitTimeout: 250,
446439
onItemSelection: () => {},
447440
useGemini: true,
448441
trigger: <DropdownListTrigger />,
@@ -491,7 +484,7 @@ Dropdown.propTypes = {
491484
transitionName: PropTypes.string,
492485
// Transition lengths
493486
transitionEnterTimeout: PropTypes.number,
494-
transitionLeaveTimeout: PropTypes.number,
487+
transitionExitTimeout: PropTypes.number,
495488
trigger: PropTypes.element,
496489
// Option to use Gemini scrollbar. Defaults to true.
497490
useGemini: PropTypes.bool,

Diff for: ‎src/Dropdown/styles.less

+6-6
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99
}
1010
}
1111

12-
@keyframes dropdown-down-leave {
12+
@keyframes dropdown-down-exit {
1313

1414
0% {
1515
transform: translateY(0);
@@ -31,7 +31,7 @@
3131
}
3232
}
3333

34-
@keyframes dropdown-up-leave {
34+
@keyframes dropdown-up-exit {
3535

3636
0% {
3737
transform: translateY(0);
@@ -153,17 +153,17 @@
153153
animation: dropdown-fade-in 250ms both, dropdown-down-enter 250ms both;
154154
}
155155

156-
.dropdown-menu-down-leave {
157-
animation: dropdown-fade-out 250ms both, dropdown-down-leave 250ms both;
156+
.dropdown-menu-down-exit {
157+
animation: dropdown-fade-out 250ms both, dropdown-down-exit 250ms both;
158158
z-index: 3;
159159
}
160160

161161
.dropdown-menu-up-enter {
162162
animation: dropdown-fade-in 250ms both, dropdown-up-enter 250ms both;
163163
}
164164

165-
.dropdown-menu-up-leave {
166-
animation: dropdown-fade-out 250ms both, dropdown-up-leave 250ms both;
165+
.dropdown-menu-up-exit {
166+
animation: dropdown-fade-out 250ms both, dropdown-up-exit 250ms both;
167167
z-index: 3;
168168
}
169169

Diff for: ‎src/List/List.js

+4-43
Original file line numberDiff line numberDiff line change
@@ -1,35 +1,20 @@
11
import React from "react";
22
import PropTypes from "prop-types";
3-
import { CSSTransitionGroup } from "react-transition-group";
43

54
import ListItem from "./ListItem";
65
import Util from "../Util/Util";
76

87
class List extends React.Component {
98
getListItems(list, childIndex = 0) {
10-
const { props } = this;
119
const items = list.map((item, parentIndex) => {
1210
const key = `${parentIndex}.${childIndex}`;
1311
childIndex++;
1412

15-
const htmlAttributes = Util.exclude(item, [
16-
"content",
17-
"transitionName",
18-
"transitionEnterTimeout",
19-
"transitionLeaveTimeout"
20-
]);
13+
const htmlAttributes = Util.exclude(item, ["content"]);
2114

2215
if (Util.isArrayLike(item.content)) {
2316
return (
24-
<ListItem
25-
{...htmlAttributes}
26-
key={key}
27-
tag={item.tag}
28-
transition={true}
29-
transitionName={props.transitionName}
30-
transitionEnterTimeout={props.transitionEnterTimeout}
31-
transitionLeaveTimeout={props.transitionLeaveTimeout}
32-
>
17+
<ListItem key={key} tag={item.tag} {...htmlAttributes}>
3318
{this.getListItems(item.content, childIndex)}
3419
</ListItem>
3520
);
@@ -52,21 +37,6 @@ class List extends React.Component {
5237
// Uses all passed properties as attributes, excluding propTypes
5338
const htmlAttributes = Util.exclude(props, Object.keys(List.propTypes));
5439

55-
if (props.transition) {
56-
return (
57-
<CSSTransitionGroup
58-
{...htmlAttributes}
59-
className={props.className}
60-
component={Tag}
61-
transitionName={props.transitionName}
62-
transitionEnterTimeout={props.transitionEnterTimeout}
63-
transitionLeaveTimeout={props.transitionLeaveTimeout}
64-
>
65-
{this.getListItems(props.content)}
66-
</CSSTransitionGroup>
67-
);
68-
}
69-
7040
return (
7141
<Tag {...htmlAttributes} className={props.className}>
7242
{this.getListItems(props.content)}
@@ -77,11 +47,7 @@ class List extends React.Component {
7747

7848
List.defaultProps = {
7949
className: "list",
80-
tag: "ul",
81-
transition: true,
82-
transitionName: "list-item",
83-
transitionEnterTimeout: 500,
84-
transitionLeaveTimeout: 500
50+
tag: "ul"
8551
};
8652

8753
List.propTypes = {
@@ -104,12 +70,7 @@ List.propTypes = {
10470
PropTypes.string
10571
]).isRequired,
10672
// Optional tag for the container of the list
107-
tag: PropTypes.string,
108-
transition: PropTypes.bool,
109-
transitionName: PropTypes.string,
110-
// Transition lengths
111-
transitionEnterTimeout: PropTypes.number,
112-
transitionLeaveTimeout: PropTypes.number
73+
tag: PropTypes.string
11374
};
11475

11576
module.exports = List;

Diff for: ‎src/List/ListItem.js

+1-15
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
import React from "react";
22
import PropTypes from "prop-types";
3-
import { CSSTransitionGroup } from "react-transition-group";
43

54
import Util from "../Util/Util";
65

@@ -12,18 +11,6 @@ class ListItem extends React.Component {
1211
// Uses all passed properties as attributes, excluding propTypes
1312
const htmlAttributes = Util.exclude(props, Object.keys(ListItem.propTypes));
1413

15-
if (props.transition) {
16-
return (
17-
<CSSTransitionGroup
18-
{...htmlAttributes}
19-
className={props.className}
20-
component={props.tag}
21-
>
22-
{props.children}
23-
</CSSTransitionGroup>
24-
);
25-
}
26-
2714
return (
2815
<Tag {...htmlAttributes} className={props.className}>
2916
{props.children}
@@ -40,8 +27,7 @@ ListItem.defaultProps = {
4027
ListItem.propTypes = {
4128
children: PropTypes.node,
4229
className: PropTypes.string,
43-
tag: PropTypes.string,
44-
transition: PropTypes.bool
30+
tag: PropTypes.string
4531
};
4632

4733
module.exports = ListItem;

Diff for: ‎src/List/styles.less

+1-1
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,6 @@
2828
animation: list-fade-in-left 500ms;
2929
}
3030

31-
.list-item-leave {
31+
.list-item-exit {
3232
animation: list-fade-out-right 500ms;
3333
}

Diff for: ‎src/Modal/ModalContents.js

+20-17
Original file line numberDiff line numberDiff line change
@@ -6,11 +6,12 @@ import React from "react";
66
import PropTypes from "prop-types";
77
/**
88
* Lifecycle of a Modal:
9-
* initial page load -> empty ReactCSSTransitionGroup
9+
* initial page load -> empty TransitionGroup
1010
* interaction changes open to true -> render modal content without scrollbars
1111
* get height of content -> rerender modal content and cap the height
1212
*/
13-
import { CSSTransitionGroup } from "react-transition-group";
13+
14+
import { CSSTransition } from "react-transition-group";
1415

1516
import BindMixin from "../Mixin/BindMixin";
1617
import DOMUtil from "../Util/DOMUtil";
@@ -380,18 +381,20 @@ class ModalContents extends Util.mixin(BindMixin) {
380381
}
381382

382383
return (
383-
<CSSTransitionGroup
384-
transitionAppear={props.transitionAppear}
385-
transitionEnter={props.transitionEnter}
386-
transitionLeave={props.transitionLeave}
387-
transitionName={props.transitionNameModal}
388-
transitionAppearTimeout={props.transitionAppearTimeoutModal}
389-
transitionEnterTimeout={props.transitionEnterTimeoutModal}
390-
transitionLeaveTimeout={props.transitionLeaveTimeoutModal}
391-
component="div"
384+
<CSSTransition
385+
in={props.open}
386+
appear={props.transitionAppear}
387+
enter={props.transitionEnter}
388+
exit={props.transitionExit}
389+
classNames={props.transitionNameModal}
390+
timeout={{
391+
enter: props.transitionEnterTimeout,
392+
exit: props.transitionExitTimeout,
393+
appear: props.transitionAppearTimeoutModal
394+
}}
392395
>
393-
{modalContent}
394-
</CSSTransitionGroup>
396+
<div>{modalContent}</div>
397+
</CSSTransition>
395398
);
396399
}
397400
}
@@ -409,10 +412,10 @@ ModalContents.defaultProps = {
409412
transitionNameModal: "modal",
410413
transitionAppearTimeoutModal: 300,
411414
transitionEnterTimeoutModal: 300,
412-
transitionLeaveTimeoutModal: 300,
415+
transitionExitTimeoutModal: 300,
413416
transitionAppear: true,
414417
transitionEnter: true,
415-
transitionLeave: true,
418+
transitionExit: true,
416419
useGemini: true,
417420

418421
// Default classes.
@@ -455,11 +458,11 @@ ModalContents.propTypes = {
455458
// Transition lengths, must be non-zero
456459
transitionAppearTimeoutModal: PropTypes.number,
457460
transitionEnterTimeoutModal: PropTypes.number,
458-
transitionLeaveTimeoutModal: PropTypes.number,
461+
transitionExitTimeoutModal: PropTypes.number,
459462
// Optionally disable transitions
460463
transitionAppear: PropTypes.bool,
461464
transitionEnter: PropTypes.bool,
462-
transitionLeave: PropTypes.bool,
465+
transitionExit: PropTypes.bool,
463466
// Option to use Gemini scrollbar. Defaults to true.
464467
useGemini: PropTypes.bool,
465468

0 commit comments

Comments
 (0)