vcc-ui/lib/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.

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

var _react = _interopRequireWildcard(require("react"));

var _block = require("../block");

var _ = require("./");

var _reactFela = require("react-fela");

function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } }

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; }

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

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

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

  var activeIndicator = (0, _react.useRef)();

  var _useFela = (0, _reactFela.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);
    }
  };

  (0, _react.useEffect)(function () {
    if (activeIndicator && activeIndicator.current) {
      activeIndicator.current.addEventListener(transitionEndEvent, onTransitionEndEvent);
      return function () {
        activeIndicator.current.removeEventListener(transitionEndEvent, onTransitionEndEvent);
      };
    }
  });
  (0, _react.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.default.createElement(_block.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;
}();

var _default = ActiveLineWithTransition;
exports.default = _default;