linkmore-design/es/lm-tabs/index.js

🌈 🚀lm组件库。🚀

import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import React, { useEffect, useRef, useMemo } from 'react';
import { useControllableValue } from 'ahooks';
import { omit } from 'lodash';
import cls from 'classnames';
import useRefs from "./hooks/useRefs";
import useOffsets from "./hooks/useOffsets";
function LmCustomTabs(props) {
  var _items$, _tabOffsets$get, _tabOffsets$get2;
  var _props$items = props.items,
    items = _props$items === void 0 ? [] : _props$items,
    activeKey = props.activeKey,
    onChange = props.onChange;
  var omitKeys = ['value', 'onChange'].filter(function (item) {
    return [undefined, null].includes(props[item === 'value' ? 'activeKey' : item]);
  });
  var _useControllableValue = useControllableValue(omit({
      value: activeKey,
      defaultValue: (_items$ = items[0]) === null || _items$ === void 0 ? void 0 : _items$.key,
      onChange: onChange
    }, omitKeys)),
    _useControllableValue2 = _slicedToArray(_useControllableValue, 2),
    active = _useControllableValue2[0],
    setActiveKey = _useControllableValue2[1];
  var _useRefs = useRefs(),
    _useRefs2 = _slicedToArray(_useRefs, 1),
    getBtnRef = _useRefs2[0];
  var tabSizesRef = useRef(new Map());
  var tabOffsets = useOffsets(items, tabSizesRef.current, 0);
  var updateTabSizes = function updateTabSizes() {
    var newSizes = new Map();
    items.forEach(function (_ref) {
      var key = _ref.key;
      var btnNode = getBtnRef(key).current;
      if (btnNode) {
        newSizes.set(key, {
          width: btnNode.offsetWidth,
          height: btnNode.offsetHeight,
          left: btnNode.offsetLeft,
          top: btnNode.offsetTop
        });
      }
    });
    tabSizesRef.current = newSizes;
  };
  useEffect(function () {
    updateTabSizes();
  }, [items.map(function (tab) {
    return tab.key;
  }).join('_')]);
  var childNode = useMemo(function () {
    var activeChildren = items.find(function (item) {
      return item.key === active;
    });
    return activeChildren !== null && activeChildren !== void 0 && activeChildren.children ? /*#__PURE__*/React.createElement("div", {
      className: cls('lm_custom_tabs_content')
    }, activeChildren === null || activeChildren === void 0 ? void 0 : activeChildren.children) : null;
  }, [active]);
  return /*#__PURE__*/React.createElement("div", {
    className: cls('lm_custom_tabs')
  }, /*#__PURE__*/React.createElement("div", {
    className: cls('lm_custom_tabs_header')
  }, /*#__PURE__*/React.createElement("span", {
    className: "tabs",
    style: {
      width: (_tabOffsets$get = tabOffsets.get(active)) === null || _tabOffsets$get === void 0 ? void 0 : _tabOffsets$get.width,
      transform: "translate3d(".concat((_tabOffsets$get2 = tabOffsets.get(active)) === null || _tabOffsets$get2 === void 0 ? void 0 : _tabOffsets$get2.left, "px, 0px, 0px)")
    }
  }), items.map(function (item) {
    return /*#__PURE__*/React.createElement("div", {
      className: cls('item', item.key === active && 'active'),
      onClick: function onClick() {
        return setActiveKey(item.key);
      },
      ref: getBtnRef(item.key),
      key: item.key
    }, item.name);
  })), childNode);
}
export default LmCustomTabs;