preact-arco-design/es/Tabs/tab-header/tab-ink.js

Arco Design React UI Library.

import React, { useRef, useEffect } from "preact/compat";
import isEqualWith from 'lodash/isEqualWith';
import cs from "../../_util/classNames";
import { getRectDiff } from "../utils";
import throttleByRaf from "../../_util/throttleByRaf";

var getInkStyle = function getInkStyle(direction, curTitle, headerRef) {
  var style = {};

  if (curTitle) {
    var diffStyle = getRectDiff(curTitle, headerRef);

    if (direction === 'vertical') {
      style = {
        top: "".concat(diffStyle.top, "px"),
        height: "".concat(curTitle.offsetHeight, "px"),
        left: '',
        width: ''
      };
    } else {
      style = {
        left: "".concat(diffStyle.left, "px"),
        width: "".concat(curTitle.offsetWidth, "px"),
        top: '',
        height: ''
      };
    }
  }

  return style;
};

var TabInk = function TabInk(_a) {
  var _b;

  var prefixCls = _a.prefixCls,
      animation = _a.animation,
      disabled = _a.disabled,
      direction = _a.direction,
      getTitleRef = _a.getTitleRef,
      activeTab = _a.activeTab,
      getHeaderRef = _a.getHeaderRef;
  var inkRef = useRef();
  var inkStyleRef = useRef();
  useEffect(function () {
    var setInkStyle = throttleByRaf(function () {
      var newStyle = getInkStyle(direction, getTitleRef(activeTab), getHeaderRef('headerRef').current);

      if (newStyle && !isEqualWith(inkStyleRef.current, newStyle)) {
        inkStyleRef.current = newStyle;
        Object.keys(newStyle).forEach(function (key) {
          inkRef.current.style[key] = newStyle[key];
        });
      }
    });
    setInkStyle();
    return function () {
      setInkStyle.cancel && setInkStyle.cancel();
    };
  });
  return React.createElement("div", {
    className: cs("".concat(prefixCls, "-header-ink"), (_b = {}, _b["".concat(prefixCls, "-header-ink-no-animation")] = !animation, _b["".concat(prefixCls, "-header-ink-disabled")] = disabled, _b)),
    ref: inkRef
  });
};

export default TabInk;