@vnmfify/core/tabs/tabs-header.js

```shell npm i @vnmfify/core -S ```

import _map from "lodash/map";
import _size from "lodash/size";
import _isEmpty from "lodash/isEmpty";
import _findIndex from "lodash/findIndex";
import { ScrollView, View } from "@vnxjs/components";
import { nextTick, offWindowResize, onWindowResize } from "@vnxjs/vnmf";
import classNames from "classnames";
import * as React from "react";
import { useCallback, useEffect, useMemo, useRef, useState } from "react";
import { prefixClassname } from "../styles";
import { HAIRLINE_BORDER_TOP_BOTTOM } from "../styles/hairline";
import { getRect, getRects } from "../utils/dom/rect";
import Tab from "./tab";
export default function TabsHeader(props) {
  var {
    value: activeValue,
    theme,
    ellipsis,
    bordered,
    tabObjects,
    onTabClick
  } = props;
  var themeLine = theme === "line";
  var themeCard = theme === "card";
  var navRef = useRef();
  var [navOffset, setNavOffset] = useState({});
  var [tabOffsets, setTabOffsets] = useState([]);
  var activeIndex = useMemo(() => _findIndex(tabObjects, tab => tab.value === activeValue), [tabObjects, activeValue]);
  var activeOffset = useMemo(() => {
    if (_isEmpty(tabOffsets) || activeIndex === -1 || activeIndex >= _size(tabOffsets)) {
      return {};
    }

    var {
      width
    } = tabOffsets[activeIndex];
    var left = tabOffsets.slice(0, activeIndex).reduce((prev, curr) => {
      var _curr$width;

      return prev + ((_curr$width = curr.width) !== null && _curr$width !== void 0 ? _curr$width : 0);
    }, 0);
    return {
      left,
      width
    };
  }, [tabOffsets, activeIndex]);
  var scrollLeft = useMemo(() => {
    if (navOffset) {
      var {
        width: navOffsetWidth = 0
      } = navOffset;
      var {
        left: offsetLeft = 0,
        width: offsetWidth = 0
      } = activeOffset;
      return offsetLeft - (navOffsetWidth - offsetWidth) / 2;
    }

    return 0;
  }, [navOffset, activeOffset]);
  var resize = useCallback(() => {
    Promise.all([getRect(navRef), getRects(navRef, " .".concat(prefixClassname("tabs__tab")))]).then(_ref => {
      var [navRect, tabRects] = _ref;
      setNavOffset(navRect);
      setTabOffsets(tabRects);
    });
  }, []);
  useEffect(() => nextTick(resize), [resize, tabObjects]);
  useEffect(() => {
    onWindowResize === null || onWindowResize === void 0 ? void 0 : onWindowResize(resize);
    return () => offWindowResize === null || offWindowResize === void 0 ? void 0 : offWindowResize(resize);
  }, [resize]);
  return /*#__PURE__*/React.createElement(View, {
    className: classNames(prefixClassname("tabs__wrap"), prefixClassname("tabs__wrap--scrollable"), {
      [HAIRLINE_BORDER_TOP_BOTTOM]: bordered && themeLine
    })
  }, /*#__PURE__*/React.createElement(ScrollView, {
    scrollX: true,
    scrollWithAnimation: true,
    scrollLeft: scrollLeft,
    className: classNames(prefixClassname("tabs__wrap__scroll"), {
      [prefixClassname("tabs__wrap__scroll--line")]: themeLine,
      [prefixClassname("tabs__wrap__scroll--card")]: themeCard
    })
  }, /*#__PURE__*/React.createElement(View, {
    ref: navRef,
    className: classNames(prefixClassname("tabs__nav"), {
      [prefixClassname("tabs__nav--line")]: themeLine,
      [prefixClassname("tabs__nav--card")]: themeCard
    })
  }, _map(tabObjects, tabObject => {
    var _tabObject$classNames;

    return /*#__PURE__*/React.createElement(Tab, {
      key: tabObject.key,
      flexBasis: themeLine && ellipsis ? "".concat(88 / 4, "%") : "",
      className: tabObject === null || tabObject === void 0 ? void 0 : (_tabObject$classNames = tabObject.classNames) === null || _tabObject$classNames === void 0 ? void 0 : _tabObject$classNames.title,
      dot: tabObject.dot,
      badge: tabObject.badge,
      active: activeValue === tabObject.value,
      disabled: tabObject.disabled,
      underline: themeLine,
      ellipsis: themeLine && ellipsis,
      children: tabObject.title,
      onClick: () => onTabClick === null || onTabClick === void 0 ? void 0 : onTabClick({
        value: tabObject.value,
        title: tabObject.title,
        disabled: tabObject.disabled
      })
    });
  }))));
}
//# sourceMappingURL=tabs-header.js.map