xmj/element-call
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Move spring add/remove animation to animate function

Browse source
This commit is contained in:
Robert Long 2021-08-16 13:47:32 -07:00
parent ce8b6ae2c9
commit 88eab794d0
1 changed files with 31 additions and 53 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

84
src/GridDemo.jsx
View file

@ -169,9 +169,11 @@ export function GridDemo() {
setTimeout(() => { setTimeout(() => {
setTileState(({ tiles }) => { setTileState(({ tiles }) => {
const newTiles = tiles.filter((t) => t.key !== tileKey); const newTiles = tiles.filter((tile) => tile.key !== tileKey);
const tilePositions = getTilePositions(newTiles, gridBounds); return {
return { tiles: newTiles, tilePositions }; tiles: newTiles,
tilePositions: getTilePositions(newTiles, gridBounds),
};
}); });
}, 250); }, 250);
}, },
@ -188,10 +190,11 @@ export function GridDemo() {
const animate = useCallback( const animate = useCallback(
(order) => (index) => { (order) => (index) => {
const tileIndex = order[index]; const tileIndex = order[index];
const tile = tiles[tileIndex];
const tilePosition = tilePositions[tileIndex]; const tilePosition = tilePositions[tileIndex];
const draggingTile = draggingTileRef.current; const draggingTile = draggingTileRef.current;
const dragging = const dragging = draggingTile && tile.key === draggingTile.key;
draggingTileRef.current && tileIndex === draggingTileRef.current.index; const remove = tile.remove;
if (dragging) { if (dragging) {
return { return {
@ -200,35 +203,47 @@ export function GridDemo() {
x: tilePosition.x + draggingTile.x, x: tilePosition.x + draggingTile.x,
y: tilePosition.y + draggingTile.y, y: tilePosition.y + draggingTile.y,
scale: 1.1, scale: 1.1,
opacity: 1,
zIndex: 1, zIndex: 1,
shadow: 15, shadow: 15,
immediate: (key) => key === "zIndex" || key === "x" || key === "y", immediate: (key) => key === "zIndex" || key === "x" || key === "y",
from: {
scale: 0,
opacity: 0,
},
reset: false,
}; };
} else { } else {
return { return {
...tilePosition, ...tilePosition,
scale: 1, scale: remove ? 0 : 1,
opacity: remove ? 0 : 1,
zIndex: 0, zIndex: 0,
shadow: 1, shadow: 1,
immediate: false, immediate: false,
from: {
scale: 0,
opacity: 0,
},
reset: false,
}; };
} }
}, },
[tilePositions] [tiles, tilePositions]
); );
const [springs, api] = useSprings( const [springs, api] = useSprings(
tiles.length, tiles.length,
animate(tileOrderRef.current), animate(tileOrderRef.current),
[tilePositions] [tilePositions, tiles]
); );
const bind = useDrag(({ args: [index], active, movement }) => { const bind = useDrag(({ args: [index], active, movement }) => {
let order = tileOrderRef.current; let order = tileOrderRef.current;
let dragIndex = index;
// const tileIndex = tileOrderRef.current[index]; const tileIndex = tileOrderRef.current[index];
// const tilePosition = tilePositions[tileIndex]; const tilePosition = tilePositions[tileIndex];
const tile = tiles[tileIndex];
// for (let i = 0; i < tileOrderRef.current.length; i++) { // for (let i = 0; i < tileOrderRef.current.length; i++) {
// if (i === index) { // if (i === index) {
@ -239,23 +254,20 @@ export function GridDemo() {
// const hoverTilePosition = tilePositions[hoverTileIndex]; // const hoverTilePosition = tilePositions[hoverTileIndex];
// if (isInside(movement, tilePosition, hoverTilePosition)) { // if (isInside(movement, tilePosition, hoverTilePosition)) {
// order = [...tileOrderRef.current]; // // const [toBeMoved] = order.splice(i, 1);
// const [toBeMoved] = order.splice(i, 1); // // order.splice(index, 0, toBeMoved);
// order.splice(index, 0, toBeMoved);
// dragIndex = i;
// break; // break;
// } // }
// } // }
if (active) { if (active) {
draggingTileRef.current = { draggingTileRef.current = {
index: dragIndex, key: tile.key,
x: movement[0], x: movement[0],
y: movement[1], y: movement[1],
}; };
} else { } else {
draggingTileRef.current = null; draggingTileRef.current = null;
//tileOrderRef.current = order;
} }
api.start(animate(order)); api.start(animate(order));
@ -298,14 +310,7 @@ export function GridDemo() {
); );
} }
function ParticipantTile({ function ParticipantTile({ style, stream, remove, tileKey, ...rest }) {
style,
stream,
remove,
finishRemovingTile,
tileKey,
...rest
}) {
const videoRef = useRef(); const videoRef = useRef();
useEffect(() => { useEffect(() => {
@ -317,35 +322,8 @@ function ParticipantTile({
} }
}, [stream]); }, [stream]);
const [springStyles, api] = useSpring(() => ({
from: {
scale: 0,
opacity: 0,
},
to: {
scale: 1,
opacity: 1,
},
}));
useEffect(() => {
if (remove) {
api.start({
scale: 0,
opacity: 0,
});
}
}, [remove]);
return ( return (
<animated.div <animated.div className={styles.participantTile} style={style} {...rest}>
className={styles.participantTile}
style={{
...style,
...springStyles,
}}
{...rest}
>
<video ref={videoRef} playsInline /> <video ref={videoRef} playsInline />
</animated.div> </animated.div>
); );