@zohodesk/hooks/es/adaptiveRenderer/utils/getRenderableElements.js

Unified Component Library - Hooks

export default function getRenderableElements(_ref) {
  let {
    elementsData,
    startsFrom,
    remainingWidth,
    getChildWidth,
    moreElemWidth,
    minimumLeftVisible,
    minimumRightVisible
  } = _ref;
  let newRemainingWidth = remainingWidth;
  let remainingElementsLength = elementsData.remainingElements.length;
  let newLeftElements = [...elementsData.leftElements];
  let newRightElements = [...elementsData.rightElements];
  let newRemainingElements = [...elementsData.remainingElements];

  function getRenderableElementsInAvailableWidth(getIndex, width) {
    let count = 0;
    let availableWidth = width;

    for (let i = 0; i < remainingElementsLength; i++) {
      let currentChildWidth = getChildWidth(getIndex(i));

      if (availableWidth <= currentChildWidth) {
        break;
      }

      ;
      availableWidth -= currentChildWidth;
      count++;
    }

    return count;
  }

  function getRenderableElementsCount(getIndex) {
    let count = getRenderableElementsInAvailableWidth(getIndex, newRemainingWidth);

    if (count != remainingElementsLength) {
      count = getRenderableElementsInAvailableWidth(getIndex, newRemainingWidth - moreElemWidth);
    }

    return count;
  }

  if (startsFrom === 'left') {
    let renderableElementsCount = getRenderableElementsCount(i => minimumLeftVisible + i);
    let renderableElements = newRemainingElements.splice(0, renderableElementsCount);
    newLeftElements = [...newLeftElements, ...renderableElements];
  } else {
    let renderableElementsCount = getRenderableElementsCount(i => minimumRightVisible + remainingElementsLength - 1 - i);
    let renderableElements = newRemainingElements.splice(newRemainingElements.length - renderableElementsCount, renderableElementsCount);
    newRightElements = [...renderableElements, ...newRightElements];
  }

  return { ...elementsData,
    remainingElements: newRemainingElements,
    leftElements: newLeftElements,
    rightElements: newRightElements,
    isMoreVisible: newRemainingElements.length > 0
  };
}