Skip to content

Commit 68c42ba

Browse files
aleclarsonaleclarson
committed
chore: update demos for #809
pmndrs/react-spring#809
1 parent 6cda8b5 commit 68c42ba

File tree

14 files changed

+139
-123
lines changed

14 files changed

+139
-123
lines changed

‎components/examples-tests.js‎

Lines changed: 32 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -6,43 +6,43 @@ export default [
66
tags: ['useChain', 'useTransition'],
77
},
88
{
9-
name: 'tests/remove_multiple_items',
10-
title: 'Remove multiple items',
9+
name: 'tests/issue-461',
10+
title: 'Issue #461 - Remove multiple items',
1111
tags: ['useTransition'],
1212
},
1313
{
14-
name: 'tests/issue-436',
15-
title: 'useTransition with "reset" prop',
16-
tags: ['useTransition'],
17-
},
18-
{
19-
name: 'tests/issue-631',
20-
title: '',
21-
tags: ['useChain'],
22-
},
23-
{
24-
name: 'tests/issue-634',
25-
title: '',
26-
tags: ['useChain'],
27-
},
28-
{
29-
name: 'tests/issue-639',
30-
title: '',
31-
tags: ['useTransition'],
32-
},
33-
{
34-
name: 'tests/issue-645',
35-
title: '',
36-
tags: ['useSprings', 'useGesture'],
14+
name: 'tests/issue-657',
15+
title: 'Issue #657',
16+
tags: ['useSprings'],
3717
},
3818
{
39-
name: 'tests/issue-650',
40-
title: '',
19+
name: 'tests/issue-436',
20+
title: 'Issue #436 - useTransition with "reset" prop',
4121
tags: ['useTransition'],
4222
},
43-
{
44-
name: 'tests/issue-657',
45-
title: '',
46-
tags: ['useSprings'],
47-
},
23+
// {
24+
// name: 'tests/issue-631',
25+
// title: 'Issue #631',
26+
// tags: ['useChain'],
27+
// },
28+
// {
29+
// name: 'tests/issue-634',
30+
// title: 'Issue #634',
31+
// tags: ['useChain'],
32+
// },
33+
// {
34+
// name: 'tests/issue-639',
35+
// title: 'Issue #639',
36+
// tags: ['useTransition'],
37+
// },
38+
// {
39+
// name: 'tests/issue-645',
40+
// title: 'Issue #645',
41+
// tags: ['useSprings', 'useGesture'],
42+
// },
43+
// {
44+
// name: 'tests/issue-650',
45+
// title: 'Issue #650',
46+
// tags: ['useTransition'],
47+
// },
4848
]

‎demos/hooks/blackflag/index.js‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,6 @@ export default function App() {
1515
}
1616
},
1717
from: { radians: 0 },
18-
reset: true,
1918
config: { duration: 3500 },
2019
})
2120
return (

‎demos/hooks/clamp-bounce/index.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ export default function ClampBounce() {
77
const { y } = useSpring({
88
y: toggle ? 250 : -250,
99
config: { tension: 120, friction: 12, clamp: 2 },
10+
onAnimate: console.log,
1011
})
1112

1213
return (

‎demos/hooks/goo/index.js‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,9 +8,13 @@ const trans = (x, y) => `translate3d(${x}px,${y}px,0) translate3d(-50%,-50%,0)`
88

99
export default function Goo() {
1010
const ref = useRef(null)
11-
const [trail, set] = useTrail(3, () => ({
11+
const [trail, set] = useTrail(3, i => ({
1212
xy: [0, 0],
13-
config: i => (i === 0 ? fast : slow),
13+
// Make "x" fast and "y" slow
14+
config: i => (i == 0 ? fast : slow),
15+
immediate: i == 0,
16+
onStart: () => console.log('onStart:', i),
17+
onRest: () => console.log('onRest:', i),
1418
}))
1519

1620
return (

‎demos/hooks/image-fade/index.js‎

Lines changed: 11 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -30,8 +30,15 @@ export default function App() {
3030

3131
const transition = useTransition(slides[index], {
3232
from: { opacity: 0 },
33-
enter: { opacity: 1 },
34-
leave: { opacity: 0 },
33+
enter: [
34+
{ zIndex: 1, immediate: true, onChange: console.log },
35+
{ opacity: 1, onStart: () => console.log('onEnter(%O)', index) },
36+
],
37+
leave: [
38+
{ zIndex: 0, immediate: true, onChange: console.log },
39+
{ opacity: 0, onStart: () => console.log('onLeave(%O)', index) },
40+
],
41+
expires: Infinity,
3542
config: config.molasses,
3643
})
3744

@@ -40,10 +47,10 @@ export default function App() {
4047
return () => clearInterval(id)
4148
}, [])
4249

43-
return transition((props, item) => (
50+
return transition((props, { url }) => (
4451
<animated.div
4552
className="fade-bg"
46-
style={{ ...props, backgroundImage: `url(${item.url})` }}
53+
style={{ ...props, backgroundImage: `url(${url})` }}
4754
/>
4855
))
4956
}

‎demos/hooks/inertia/index.js‎

Lines changed: 41 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -3,51 +3,59 @@ import { useSpring, animated } from 'react-spring'
33
import { useDrag } from 'react-use-gesture'
44
import './styles.css'
55

6+
const modes = {
7+
pong: 0, // The min/max values deflect the decay animation
8+
bounce: 0, // The animation bounces instead of overshooting. Try both directions
9+
skipFinish: 0, // This demonstrates "from !== to" when truthy, else "from === to" (it should work either way)
10+
}
11+
612
const [min, max] = [-250, 250]
13+
const clamp = value => Math.max(min, Math.min(max, value))
714

815
export default function Inertia() {
9-
const [{ y }, set] = useSpring(() => ({ y: 0 }))
16+
const { y } = useSpring({ y: 0 })
1017

1118
const bind = useDrag(
12-
({ down, movement: [, dy], vxvy: [, vy], memo = y.getValue() }) => {
13-
if (down) set({ y: dy + memo, onFrame: () => {}, immediate: true })
19+
({ down, movement: [, dy], vxvy: [, vy], memo = y.get() }) => {
20+
if (down) y.set(clamp(dy + memo))
1421
else inertia(dy + memo + 1, vy)
1522
return memo
1623
}
1724
)
1825

19-
const springBounce = React.useCallback(
20-
velocity => {
21-
set({
22-
y: velocity > 0 ? max : min,
23-
onFrame: () => {}, // <-- this is annoying :)
24-
config: { velocity: velocity * 3 },
25-
})
26-
},
27-
[set]
28-
)
26+
const springBounce = velocity =>
27+
y.animate({
28+
to: velocity > 0 ? max : min,
29+
config: {
30+
velocity: velocity,
31+
tension: 30,
32+
friction: 2,
33+
clamp: modes.bounce ? 0.7 : false,
34+
precision: 0.005,
35+
},
36+
onRest: () => console.log('BOUNCE END'),
37+
})
2938

30-
const inertia = React.useCallback(
31-
(position, velocity) => {
32-
set({
33-
to: async (next, stop) => {
34-
await next({
35-
y: position,
36-
onFrame: async v => {
37-
const vel = y.lastVelocity
39+
const inertia = (position, velocity) =>
40+
y.animate({
41+
y: position,
42+
onChange: async val => {
43+
const vel = y.node.lastVelocity
44+
if ((val > max && vel > 0) || (val < min && vel < 0)) {
45+
if (modes.pong) {
46+
inertia(y.get(), -vel)
47+
} else {
48+
if (!modes.skipFinish) {
49+
y.finish(vel > 0 ? max : min)
50+
}
51+
springBounce(vel)
52+
}
53+
}
54+
},
55+
config: { decay: true, velocity },
56+
onRest: () => console.log('INERTIA END'),
57+
})
3858

39-
if ((v.y > max && vel > 0) || (v.y < min && vel < 0)) {
40-
stop()
41-
springBounce(vel)
42-
}
43-
},
44-
config: { decay: true, velocity },
45-
})
46-
},
47-
})
48-
},
49-
[y, set, springBounce]
50-
)
5159
// Now we're just mapping the animated values to our view, that's it. Btw, this component only renders once. :-)
5260
return (
5361
<div className="inertia">

‎demos/hooks/multistage-transitions/index.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ export default function MultiStageTransition() {
1515
color: '#8fa5b6',
1616
},
1717
enter: [
18-
{ opacity: 1, height: 50, innerHeight: 50 },
18+
{ opacity: 1, height: 50, innerHeight: 50, reset: true },
1919
{ rotateX: 180, color: '#28d79f' },
2020
{ rotateX: 0 },
2121
],

‎demos/tests/freshtilledsoil/index.js‎

Lines changed: 17 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -56,8 +56,8 @@ export default function Container() {
5656

5757
const TransitionGrid = ({ visible, items, removeItem }) => {
5858
const containerRef = useRef()
59-
const containerTransition = useTransition(visible, null, {
60-
config: { ...config.stiff, precision: 0.01 },
59+
const containerTransition = useTransition(visible, {
60+
config: config.stiff,
6161
from: { opacity: 0, x: -500 },
6262
enter: { opacity: 1, x: 0 },
6363
leave: { opacity: 0, x: 500 },
@@ -67,7 +67,7 @@ const TransitionGrid = ({ visible, items, removeItem }) => {
6767
})
6868

6969
const itemsRef = useRef()
70-
const itemsTransition = useTransition(visible ? items : [], null, {
70+
const itemsTransition = useTransition(visible ? items : [], {
7171
config: { ...config.stiff, precision: 0.01 },
7272
from: { opacity: 0, scale: 0 },
7373
enter: { opacity: 1, scale: 1 },
@@ -88,11 +88,10 @@ const TransitionGrid = ({ visible, items, removeItem }) => {
8888

8989
return (
9090
<div>
91-
{containerTransition.map(
92-
({ item, key, props: { x, opacity } }) =>
91+
{containerTransition(
92+
({ x, opacity }, item) =>
9393
item && (
9494
<animated.div
95-
key={key}
9695
style={{
9796
position: 'absolute',
9897
height: 200,
@@ -101,21 +100,18 @@ const TransitionGrid = ({ visible, items, removeItem }) => {
101100
transform: x.interpolate(x => `translateX(${x}px)`),
102101
}}
103102
className="fts-grid fts-animated-grid">
104-
{itemsTransition.map(
105-
({ item, key, props: { scale, opacity } }) => (
106-
<animated.div
107-
className="fts-card"
108-
key={key}
109-
style={{
110-
opacity,
111-
transform: scale.interpolate(s => `scale(${s})`),
112-
}}
113-
onClick={() => removeItem(item)}>
114-
<div className="fts-close-card">&#x2715;</div>
115-
<div>{item}</div>
116-
</animated.div>
117-
)
118-
)}
103+
{itemsTransition(({ scale, opacity }, item) => (
104+
<animated.div
105+
className="fts-card"
106+
style={{
107+
opacity,
108+
transform: scale.interpolate(s => `scale(${s})`),
109+
}}
110+
onClick={() => removeItem(item)}>
111+
<div className="fts-close-card">&#x2715;</div>
112+
<div>{item}</div>
113+
</animated.div>
114+
))}
119115
</animated.div>
120116
)
121117
)}

‎demos/tests/issue-436/index.js‎

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -12,24 +12,22 @@ import { useTransition, animated as a } from 'react-spring'
1212
export default function App() {
1313
const [reset, setReset] = useState(false)
1414
const [item, setItem] = useState(0)
15-
const t = useTransition(item, null, {
16-
keys: i => i,
15+
const t = useTransition(item, {
1716
initial: null,
1817
reset,
1918
from: { transform: 'translate(-100%)' },
2019
enter: { transform: 'translate(0%)' },
2120
leave: { transform: 'translate(100%)' },
2221
})
23-
const items = t.map(({ item, key, props }) => (
22+
const items = t((style, item) => (
2423
<a.div
25-
key={key}
2624
style={{
2725
display: 'flex',
2826
position: 'absolute',
2927
width: '100%',
3028
top: 50,
3129
justifyContent: 'center',
32-
...props,
30+
...style,
3331
}}
3432
onClick={() => {
3533
setItem(i => i + 1)

demos/tests/remove_multiple_items/index.js renamed to demos/tests/issue-461/index.js

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ export default function Container() {
99

1010
const addItems = useCallback(() => setItems(range(10)))
1111

12-
const transitions = useTransition(items, null, {
12+
const transition = useTransition(items, {
1313
from: { transform: 'translate3d(0,40px,0)', opacity: 0 },
1414
enter: { transform: 'translate3d(0,0px,0)', opacity: 1 },
1515
leave: { transform: 'translate3d(0,40px,0)', opacity: 0 },
@@ -24,10 +24,8 @@ export default function Container() {
2424
Add
2525
</button>
2626
<div style={{ display: 'flex' }}>
27-
{transitions.map(({ item, key, props }) => (
28-
<animated.div key={key} style={props}>
29-
{item}
30-
</animated.div>
27+
{transition((style, item) => (
28+
<animated.div style={style}>{item}</animated.div>
3129
))}
3230
</div>
3331
</div>

0 commit comments

Comments
 (0)