vcc-ui/es/components/tab-nav/active-line-with-transition.js

VCC UI is a collection of React UI Components that can be used for developing front-end applications at Volvo Car Corporation.

function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _nonIterableRest(); }

function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance"); }

function _iterableToArrayLimit(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }

function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }

import React, { useContext, useEffect, useRef, useState } from "react";
import { Block } from "../block";
import { LineTransitionContext } from "./";
import { useFela } from "react-fela";

var ActiveLineWithTransition = function ActiveLineWithTransition() {
  var _useState = useState(false),
      _useState2 = _slicedToArray(_useState, 2),
      transitionFinished = _useState2[0],
      setTransitionFinished = _useState2[1];

  var _useContext = useContext(LineTransitionContext),
      activeIndex = _useContext.activeIndex,
      itemsDimensions = _useContext.itemsDimensions;

  var _useState3 = useState(activeIndex),
      _useState4 = _slicedToArray(_useState3, 2),
      lastActiveIndex = _useState4[0],
      setLastActiveIndex = _useState4[1];

  var activeIndicator = useRef();

  var _useFela = useFela(),
      _useFela$theme = _useFela.theme,
      colors = _useFela$theme.colors,
      direction = _useFela$theme.direction;

  var isRtl = direction === "rtl";
  var goingRight = activeIndex >= lastActiveIndex;

  var onTransitionEndEvent = function onTransitionEndEvent(e) {
    if (goingRight && e.propertyName === "width" || isRtl && !goingRight && e.propertyName === "width" || !goingRight && e.propertyName === "left") {
      setTransitionFinished(true);
    }
  };

  useEffect(function () {
    if (activeIndicator && activeIndicator.current) {
      activeIndicator.current.addEventListener(transitionEndEvent, onTransitionEndEvent);
      return function () {
        activeIndicator.current.removeEventListener(transitionEndEvent, onTransitionEndEvent);
      };
    }
  });
  useEffect(function () {
    if (transitionFinished) {
      setTransitionFinished(false);
      setLastActiveIndex(activeIndex);
    }
  });

  if (!itemsDimensions) {
    return null;
  }

  var activeItem = itemsDimensions[activeIndex];
  var prevItem = itemsDimensions[lastActiveIndex];

  var getWidth = function getWidth() {
    if (transitionFinished) {
      return activeItem.width;
    } else if (goingRight) {
      return activeItem.x - prevItem.x + activeItem.width;
    } else {
      return prevItem.x - activeItem.x + prevItem.width;
    }
  };

  var getX = function getX() {
    if (transitionFinished) {
      return activeItem.x;
    } else if (goingRight) {
      return prevItem.x;
    } else {
      return activeItem.x;
    }
  };

  var width = getWidth();
  var x = getX();
  return React.createElement(Block, {
    extend: styles({
      width: width,
      x: x,
      colors: colors,
      isRtl: isRtl
    }),
    innerRef: activeIndicator
  });
};

var transitionBezier = "ease-out";
var transitionTime = "200ms";

var styles = function styles(_ref) {
  var width = _ref.width,
      x = _ref.x,
      primary = _ref.colors.primary,
      isRtl = _ref.isRtl;
  return {
    position: "absolute",
    bottom: 0,
    zIndex: 10,
    transition: "width ".concat(transitionTime, " ").concat(transitionBezier, ", ").concat(isRtl ? "right" : "left", " ").concat(transitionTime, " ").concat(transitionBezier),
    left: x,
    width: width,
    height: 3,
    background: primary
  };
};

var createElement = function createElement(type) {
  return typeof document !== "undefined" && document.createElement(type);
};

var transitionEndEvent = function () {
  if (typeof document === "undefined") {
    return "";
  }

  var el = createElement("fakeelement");
  var transitions = {
    transition: "transitionend",
    OTransition: "oTransitionEnd",
    MozTransition: "transitionend",
    WebkitTransition: "webkitTransitionEnd"
  };

  for (var t in transitions) {
    if (String(el.style[t]) !== "undefined") {
      return transitions[t];
    }
  }

  return transitions.transition;
}();

export default ActiveLineWithTransition;