Want a button to trigger the drag animation (translateX) for cards example

Question

It is regarding the following example:

https://codesandbox.io/s/cards-forked-4bcix?file=/src/index.js

I want a tinder like functionality where I can trigger the same transition as drag.

I am trying to add like and dislike button functionality like tinder, but since the buttons are not part of the useSprings props loop, it is hard to align which card I should transform. I want the like or dislike button to communicate with useDrag to trigger a drag, I have tried toggling by useState and passing as an argument of useDrag, and onClick handler on button which set(x:1000, y:0) but that removes all of the cards.

Spent a whole day figuring it out, and I need to deliver things very soon, help will be great please! Below is the code, and I am using Next.js

import React, { useState, useRef } from "react";
import { useSprings, animated } from "react-spring";
import { useDrag } from "react-use-gesture";

const Try: React.SFC = () => {
  const cards = [
    "https://upload.wikimedia.org/wikipedia/en/5/53/RWS_Tarot_16_Tower.jpg",
    "https://upload.wikimedia.org/wikipedia/en/9/9b/RWS_Tarot_07_Chariot.jpg",
    "https://upload.wikimedia.org/wikipedia/en/d/db/RWS_Tarot_06_Lovers.jpg",
    // "https://upload.wikimedia.org/wikipedia/en/thumb/8/88/RWS_Tarot_02_High_Priestess.jpg/690px-RWS_Tarot_02_High_Priestess.jpg",
    "https://upload.wikimedia.org/wikipedia/en/d/de/RWS_Tarot_01_Magician.jpg",
  ];
  const [hasLiked, setHasLiked] = useState(false);

  const [props, set] = useSprings(cards.length, (i) => ({
    x: 0,
    y: 0,
  }));
  const [gone, setGone] = useState(() => new Set()); // The set flags all the cards that are flicked out
  const itemsRef = useRef([]);

  const bind = useDrag(
    ({
      args: [index, hasLiked],
      down,
      movement: [mx],
      distance,
      direction: [xDir],
      velocity,
    }) => {
      const trigger = velocity > 0.2;
      const dir = xDir < 0 ? -1 : 1;
      if (!down && trigger) gone.add(index); // If button/finger's up and trigger velocity is reached, we flag the card ready to fly out
      set((i) => {
        if (index !== i) return; // We're only interested in changing spring-data for the current spring
        const isGone = gone.has(index);
        const x = isGone ? (200 + window.innerWidth) * dir : down ? mx : 0; // When a card is gone it flys out left or right, otherwise goes back to zero
        const rot = mx / 100 + (isGone ? dir * 10 * velocity : 0); // How much the card tilts, flicking it harder makes it rotate faster
        const scale = down ? 1.1 : 1; // Active cards lift up a bit
        return {
          x,
          rot,
          scale,
          delay: undefined,
          config: { friction: 50, tension: down ? 800 : isGone ? 200 : 500 },
        };
      });
      if (!down && gone.size === cards.length)
        setTimeout(() => gone.clear(), 600);
    }
  );
  console.log(gone);
  function handleLikeButtonClick(e) {
    gone.add(1);
  }

  function handleDisLikeButtonClick(e) {
    set({ x: -1000, y: 0 });
  }

  return (
    <>
      <div id="deckContainer">
        {props.map(({ x, y }, i) => (
          <animated.div
            {...bind(i, hasLiked)}
            key={i}
            style={{
              x,
              y,
            }}
            ref={(el) => (itemsRef.current[i] = el)}
          >
            <img src={`${cards[i]}`} />
          </animated.div>
        ))}
      </div>
      <div className="buttonsContainer">
        <button onClick={(e) => handleLikeButtonClick(e)}>Like</button>
        <button onClick={(e) => handleDisLikeButtonClick(e)}>Dislike</button>
      </div>
      <style jsx>{`
        .buttonsContainer {
          background-color: tomato;
        }
        #deckContainer {
          display: flex;
          flex-direction: column;
          align-items: center;
          width: 100vw;
          height: 100vh;
          position: relative;
        }
      `}</style>
    </>
  );
};

export default Try;

score 0 · Answer 1 · answered Aug 12 '20 at 16:12

done needed to be smart with js:

  function handleLikeButtonClick(e) {
    let untransformedCards = [];
    
    //loop through all cards and add ones who still have not been transformed
    [].forEach.call(itemsRef.current, (p) => {
      if (p.style.transform == "none") {
        untransformedCards.push(p);
      }
    });
   // add transform property to the latest card
    untransformedCards[untransformedCards.length - 1].style.transform =
      "translate3d(1000px, 0 ,0)";
  }

  function handleDisLikeButtonClick(e) {
    let untransformedCards = [];

    [].forEach.call(itemsRef.current, (p) => {
      if (p.style.transform == "none") {
        untransformedCards.push(p);
      }
    });
    untransformedCards[untransformedCards.length - 1].style.transform =
      "translate3d(-1000px, 0 ,0)";
  }

Want a button to trigger the drag animation (translateX) for cards example

1 Answers1