JSFiddle - React, Tailwind, and code Playground

by cmruser

JavaScript

function calculateTranslateY(elements, fromId, toId) {
  const fromIndex = elements.findIndex(element => element.id === fromId);
  const toIndex = elements.findIndex(element => element.id === toId);

  if (fromIndex === -1 || toIndex === -1) {
    console.error("Invalid element id(s).");
    return;
  }

  const translateY = elements[fromIndex].height;

  const newElements = elements.map((element, index) => {
    if (element.id === fromId) {
      element["translate-y"] = translateY + translateY / 2;
    } else if (element.id === toId) {
      element["translate-y"] = -translateY;
    } else if (index > fromIndex && index <= toIndex) {
      element["translate-y"] = -translateY;
    } else if (index < fromIndex && index >= toIndex) {
      element["translate-y"] = translateY;
    } else {
      element["translate-y"] = 0;
    }
    return element;
  });

  return newElements;
}

const elements = [
  { id: 1, height: 88 },
  { id: 2, height: 70 },
  { id: 3, height: 52 },
  { id: 3, height: 52 }
];

const newElements = calculateTranslateY(elements, 1,3);
console.log(newElements);