Skip to content

Commit 9b571b1

Browse files
author
Chris Johnson
committed
feat(animation components): Switch timeout values to be calculated by delay + duration
Switching the delay and duration props to be numbers. Now will only accept ms. Use these values to calculate a timeout for the transition. Timeout can still be overridden in cases where needed such as unmountOnExit BREAKING CHANGE: delay and duration props are now numbers. Strings are no longer valid and will cause errors
1 parent 157e23f commit 9b571b1

File tree

12 files changed

+135
-92
lines changed

12 files changed

+135
-92
lines changed

‎src/animations/FadeInOut/index.jsx‎

Lines changed: 9 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2,14 +2,18 @@ import React from 'react';
22
import { bool, node, number, string } from 'prop-types';
33
import { Transition } from 'react-transition-group';
44

5-
import { defaultAnimationProps, getInlineStyles } from 'utilities';
5+
import {
6+
defaultAnimationProps,
7+
getInlineStyles,
8+
getTimeoutValue,
9+
} from 'utilities';
610

711
const statusStyles = {
812
entered: {
913
opacity: 1,
1014
},
1115
entering: {
12-
opacity: 0,
16+
opacity: 1,
1317
},
1418
exited: {
1519
opacity: 0,
@@ -21,7 +25,7 @@ const statusStyles = {
2125

2226
const FadeInOut = props => {
2327
return (
24-
<Transition {...props}>
28+
<Transition timeout={getTimeoutValue(props)} {...props}>
2529
{status => (
2630
<div
2731
style={{
@@ -40,9 +44,8 @@ const FadeInOut = props => {
4044
FadeInOut.propTypes = {
4145
appear: bool,
4246
children: node.isRequired,
43-
delay: string,
44-
duration: string,
45-
timeout: number,
47+
delay: number,
48+
duration: number,
4649
timingFn: string,
4750
};
4851

‎src/animations/FadeTransform/FadeTransform.test.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -18,13 +18,13 @@ describe('FadeTranform', () => {
1818
});
1919

2020
test('sets transitionDelay with delay prop', () => {
21-
const component = renderer.create(<FadeTranform delay="1s" />);
21+
const component = renderer.create(<FadeTranform delay={1000} />);
2222
const tree = component.toJSON();
2323
expect(tree).toMatchSnapshot();
2424
});
2525

2626
test('sets transitionDuration with duration prop', () => {
27-
const component = renderer.create(<FadeTranform duration="1s" />);
27+
const component = renderer.create(<FadeTranform duration={1000} />);
2828
const tree = component.toJSON();
2929
expect(tree).toMatchSnapshot();
3030
});

‎src/animations/FadeTransform/__snapshots__/FadeTransform.test.js.snap‎

Lines changed: 32 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -5,10 +5,10 @@ exports[`FadeTranform can accept custom styles 1`] = `
55
style={
66
Object {
77
"background": "black",
8-
"opacity": 0,
8+
"transform": "none",
99
"transitionDelay": null,
1010
"transitionDuration": "500ms",
11-
"transitionProperty": "opacity",
11+
"transitionProperty": "transform",
1212
"transitionTimingFunction": "ease",
1313
}
1414
}
@@ -17,10 +17,10 @@ exports[`FadeTranform can accept custom styles 1`] = `
1717
style={
1818
Object {
1919
"background": "black",
20-
"transform": "none",
20+
"opacity": 0,
2121
"transitionDelay": null,
2222
"transitionDuration": "500ms",
23-
"transitionProperty": "transform",
23+
"transitionProperty": "opacity",
2424
"transitionTimingFunction": "ease",
2525
}
2626
}
@@ -32,21 +32,21 @@ exports[`FadeTranform renders 1`] = `
3232
<div
3333
style={
3434
Object {
35-
"opacity": 0,
35+
"transform": "none",
3636
"transitionDelay": null,
3737
"transitionDuration": "500ms",
38-
"transitionProperty": "opacity",
38+
"transitionProperty": "transform",
3939
"transitionTimingFunction": "ease",
4040
}
4141
}
4242
>
4343
<div
4444
style={
4545
Object {
46-
"transform": "none",
46+
"opacity": 0,
4747
"transitionDelay": null,
4848
"transitionDuration": "500ms",
49-
"transitionProperty": "transform",
49+
"transitionProperty": "opacity",
5050
"transitionTimingFunction": "ease",
5151
}
5252
}
@@ -58,21 +58,21 @@ exports[`FadeTranform sets finish 1`] = `
5858
<div
5959
style={
6060
Object {
61-
"opacity": 0,
61+
"transform": "none",
6262
"transitionDelay": null,
6363
"transitionDuration": "500ms",
64-
"transitionProperty": "opacity",
64+
"transitionProperty": "transform",
6565
"transitionTimingFunction": "ease",
6666
}
6767
}
6868
>
6969
<div
7070
style={
7171
Object {
72-
"transform": "none",
72+
"opacity": 0,
7373
"transitionDelay": null,
7474
"transitionDuration": "500ms",
75-
"transitionProperty": "transform",
75+
"transitionProperty": "opacity",
7676
"transitionTimingFunction": "ease",
7777
}
7878
}
@@ -84,21 +84,21 @@ exports[`FadeTranform sets start 1`] = `
8484
<div
8585
style={
8686
Object {
87-
"opacity": 0,
87+
"transform": "none",
8888
"transitionDelay": null,
8989
"transitionDuration": "500ms",
90-
"transitionProperty": "opacity",
90+
"transitionProperty": "transform",
9191
"transitionTimingFunction": "ease",
9292
}
9393
}
9494
>
9595
<div
9696
style={
9797
Object {
98-
"transform": "translateX(10em)",
98+
"opacity": 0,
9999
"transitionDelay": null,
100100
"transitionDuration": "500ms",
101-
"transitionProperty": "transform",
101+
"transitionProperty": "opacity",
102102
"transitionTimingFunction": "ease",
103103
}
104104
}
@@ -110,21 +110,21 @@ exports[`FadeTranform sets transitionDelay with delay prop 1`] = `
110110
<div
111111
style={
112112
Object {
113-
"opacity": 0,
114-
"transitionDelay": "1s",
113+
"transform": "none",
114+
"transitionDelay": "1000ms",
115115
"transitionDuration": "500ms",
116-
"transitionProperty": "opacity",
116+
"transitionProperty": "transform",
117117
"transitionTimingFunction": "ease",
118118
}
119119
}
120120
>
121121
<div
122122
style={
123123
Object {
124-
"transform": "none",
125-
"transitionDelay": "1s",
124+
"opacity": 0,
125+
"transitionDelay": "1000ms",
126126
"transitionDuration": "500ms",
127-
"transitionProperty": "transform",
127+
"transitionProperty": "opacity",
128128
"transitionTimingFunction": "ease",
129129
}
130130
}
@@ -136,21 +136,21 @@ exports[`FadeTranform sets transitionDuration with duration prop 1`] = `
136136
<div
137137
style={
138138
Object {
139-
"opacity": 0,
139+
"transform": "none",
140140
"transitionDelay": null,
141-
"transitionDuration": "1s",
142-
"transitionProperty": "opacity",
141+
"transitionDuration": "1000ms",
142+
"transitionProperty": "transform",
143143
"transitionTimingFunction": "ease",
144144
}
145145
}
146146
>
147147
<div
148148
style={
149149
Object {
150-
"transform": "none",
150+
"opacity": 0,
151151
"transitionDelay": null,
152-
"transitionDuration": "1s",
153-
"transitionProperty": "transform",
152+
"transitionDuration": "1000ms",
153+
"transitionProperty": "opacity",
154154
"transitionTimingFunction": "ease",
155155
}
156156
}
@@ -162,21 +162,21 @@ exports[`FadeTranform sets transitionTimingFunction with timingFn prop 1`] = `
162162
<div
163163
style={
164164
Object {
165-
"opacity": 0,
165+
"transform": "none",
166166
"transitionDelay": null,
167167
"transitionDuration": "500ms",
168-
"transitionProperty": "opacity",
168+
"transitionProperty": "transform",
169169
"transitionTimingFunction": "ease-in-out",
170170
}
171171
}
172172
>
173173
<div
174174
style={
175175
Object {
176-
"transform": "none",
176+
"opacity": 0,
177177
"transitionDelay": null,
178178
"transitionDuration": "500ms",
179-
"transitionProperty": "transform",
179+
"transitionProperty": "opacity",
180180
"transitionTimingFunction": "ease-in-out",
181181
}
182182
}

‎src/animations/FadeTransform/index.jsx‎

Lines changed: 23 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,44 @@
11
import React from 'react';
22
import { node, string } from 'prop-types';
3-
import { defaultAnimationProps, getInlineStyles } from 'utilities';
3+
import {
4+
defaultAnimationProps,
5+
getInlineStyles,
6+
getTimeoutValue,
7+
} from 'utilities';
48

59
import FadeInOut from '../FadeInOut';
610
import TweenTransform from '../TweenTransform';
711

812
const FadeTransform = ({ children, ...props }) => {
913
return (
10-
<FadeInOut {...props} style={getInlineStyles(props)}>
11-
<TweenTransform {...props} style={getInlineStyles(props)}>
14+
<TweenTransform
15+
timeout={getTimeoutValue(props)}
16+
{...props}
17+
style={getInlineStyles(props)}
18+
>
19+
<FadeInOut
20+
timeout={getTimeoutValue(props)}
21+
{...props}
22+
style={getInlineStyles(props)}
23+
>
1224
{children}
13-
</TweenTransform>
14-
</FadeInOut>
25+
</FadeInOut>
26+
</TweenTransform>
1527
);
1628
};
1729

1830
FadeTransform.propTypes = {
31+
appear: bool,
1932
children: node.isRequired,
20-
finish: string,
21-
start: string,
33+
delay: number,
34+
duration: number,
35+
exit: string,
36+
enter: string,
37+
timingFn: string,
2238
};
2339

2440
FadeTransform.defaultProps = {
2541
...defaultAnimationProps,
26-
timeout: 0,
2742
};
2843

2944
export default FadeTransform;

‎src/animations/TweenTransform/TweenTransform.test.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -18,13 +18,13 @@ describe('TweenTransform', () => {
1818
});
1919

2020
test('sets transitionDelay with delay prop', () => {
21-
const component = renderer.create(<TweenTransform delay="1s" />);
21+
const component = renderer.create(<TweenTransform delay={1000} />);
2222
const tree = component.toJSON();
2323
expect(tree).toMatchSnapshot();
2424
});
2525

2626
test('sets transitionDuration with duration prop', () => {
27-
const component = renderer.create(<TweenTransform duration="1s" />);
27+
const component = renderer.create(<TweenTransform duration={1000} />);
2828
const tree = component.toJSON();
2929
expect(tree).toMatchSnapshot();
3030
});

‎src/animations/TweenTransform/__snapshots__/TweenTransform.test.js.snap‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,7 @@ exports[`TweenTransform sets start 1`] = `
4747
<div
4848
style={
4949
Object {
50-
"transform": "translateX(10em)",
50+
"transform": "none",
5151
"transitionDelay": null,
5252
"transitionDuration": "500ms",
5353
"transitionProperty": "transform",
@@ -62,7 +62,7 @@ exports[`TweenTransform sets transitionDelay with delay prop 1`] = `
6262
style={
6363
Object {
6464
"transform": "none",
65-
"transitionDelay": "1s",
65+
"transitionDelay": "1000ms",
6666
"transitionDuration": "500ms",
6767
"transitionProperty": "transform",
6868
"transitionTimingFunction": "ease",
@@ -77,7 +77,7 @@ exports[`TweenTransform sets transitionDuration with duration prop 1`] = `
7777
Object {
7878
"transform": "none",
7979
"transitionDelay": null,
80-
"transitionDuration": "1s",
80+
"transitionDuration": "1000ms",
8181
"transitionProperty": "transform",
8282
"transitionTimingFunction": "ease",
8383
}

‎src/animations/TweenTransform/index.jsx‎

Lines changed: 19 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -2,18 +2,22 @@ import React from 'react';
22
import { node, object, string } from 'prop-types';
33
import { Transition } from 'react-transition-group';
44

5-
import { defaultAnimationProps, getInlineStyles } from 'utilities';
5+
import {
6+
defaultAnimationProps,
7+
getInlineStyles,
8+
getTimeoutValue,
9+
} from 'utilities';
610

7-
const TweenTransform = ({ children, start, finish, ...props }) => {
11+
const TweenTransform = ({ children, enter, exit, ...props }) => {
812
const pos = {
9-
entering: start,
10-
entered: finish,
11-
exiting: finish,
12-
exited: start,
13+
entering: enter,
14+
entered: enter,
15+
exiting: exit,
16+
exited: exit,
1317
};
1418

1519
return (
16-
<Transition {...props}>
20+
<Transition timeout={getTimeoutValue(props)} {...props}>
1721
{status => (
1822
<div
1923
style={{
@@ -30,16 +34,20 @@ const TweenTransform = ({ children, start, finish, ...props }) => {
3034
};
3135

3236
TweenTransform.propTypes = {
37+
appear: bool,
3338
children: node.isRequired,
34-
start: string,
39+
delay: number,
40+
duration: number,
41+
exit: string,
42+
enter: string,
3543
style: object,
36-
finish: string,
44+
timingFn: string,
3745
};
3846

3947
TweenTransform.defaultProps = {
4048
...defaultAnimationProps,
41-
start: 'none',
42-
finish: 'none',
49+
enter: 'none',
50+
exit: 'none',
4351
};
4452

4553
export default TweenTransform;

0 commit comments

Comments
 (0)