react-elegant-ui/esm/components/TabsMenu/_view/TabsMenu_view_motion.js

Elegant UI components, made by BEM best practices for react

var __assign = this && this.__assign || function () {
  __assign = Object.assign || function (t) {
    for (var s, i = 1, n = arguments.length; i < n; i++) {
      s = arguments[i];
      for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
    }
    return t;
  };
  return __assign.apply(this, arguments);
};
var __rest = this && this.__rest || function (s, e) {
  var t = {};
  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
  }
  return t;
};
var __read = this && this.__read || function (o, n) {
  var m = typeof Symbol === "function" && o[Symbol.iterator];
  if (!m) return o;
  var i = m.call(o),
    r,
    ar = [],
    e;
  try {
    while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
  } catch (error) {
    e = {
      error: error
    };
  } finally {
    try {
      if (r && !r.done && (m = i["return"])) m.call(i);
    } finally {
      if (e) throw e.error;
    }
  }
  return ar;
};
import React, { useEffect, useMemo, useRef, useState } from 'react';
import { withHOCConstructor } from '../../../lib/compose';
import { mergeRefsAsCallback } from '../../../lib/mergeRefs';
import { runByReadyState } from '../../../lib/runByReadyState';
import { cnTabsMenu } from '../TabsMenu';
import './TabsMenu_view_motion.css';
/**
 * Modifier responsible for apperance of tabs
 */
export var withModTabsMenuViewMotion = withHOCConstructor({
  matchProps: {
    view: 'motion'
  },
  privateProps: ['view']
}, function (WrappedComponent) {
  return function (_a) {
    var view = _a.view,
      activeTab = _a.activeTab,
      activeTabRefExternal = _a.activeTabRef,
      addonAfter = _a.addonAfter,
      orientation = _a.orientation,
      className = _a.className,
      props = __rest(_a, ["view", "activeTab", "activeTabRef", "addonAfter", "orientation", "className"]);
    var _b = __read(useState({
        size: 0,
        offset: 0
      }), 2),
      cursor = _b[0],
      setCursor = _b[1];
    var activeTabRef = useRef(null);
    var activeTabRefCb = useMemo(function () {
      return mergeRefsAsCallback(activeTabRefExternal, activeTabRef);
    }, [activeTabRefExternal]);
    useEffect(function () {
      runByReadyState(function () {
        if (activeTabRef.current === null) return;
        if (orientation === 'horizontal') {
          setCursor({
            size: activeTabRef.current.offsetWidth,
            offset: activeTabRef.current.offsetLeft
          });
        } else {
          setCursor({
            size: activeTabRef.current.offsetHeight,
            offset: activeTabRef.current.offsetTop
          });
        }
      }, 'complete');
    }, [activeTab, orientation]);
    var cursorPosition = orientation === 'horizontal' ? {
      width: cursor.size + 'px',
      transform: "translateX(".concat(cursor.offset, "px)")
    } : {
      height: cursor.size + 'px',
      transform: "translateY(".concat(cursor.offset, "px)")
    };
    return /*#__PURE__*/React.createElement(WrappedComponent, __assign({}, props, {
      className: cnTabsMenu({
        view: view
      }, [className]),
      activeTab: activeTab,
      orientation: orientation,
      activeTabRef: activeTabRefCb,
      addonAfter: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
        className: cnTabsMenu('Cursor'),
        style: cursorPosition
      }), addonAfter)
    }));
  };
});