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

🌈 🚀lm组件库。🚀

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _react = _interopRequireWildcard(require("react"));
var _ahooks = require("ahooks");
var _lodash = require("lodash");
var _classnames = _interopRequireDefault(require("classnames"));
var _useRefs = _interopRequireDefault(require("./hooks/useRefs"));
var _useOffsets = _interopRequireDefault(require("./hooks/useOffsets"));
function LmCustomTabs(props) {
  const {
    items = [],
    activeKey,
    onChange
  } = props;
  const omitKeys = ['value', 'onChange'].filter(item => [undefined, null].includes(props[item === 'value' ? 'activeKey' : item]));
  const [active, setActiveKey] = (0, _ahooks.useControllableValue)((0, _lodash.omit)({
    value: activeKey,
    defaultValue: items[0]?.key,
    onChange
  }, omitKeys));
  const [getBtnRef] = (0, _useRefs.default)();
  const tabSizesRef = (0, _react.useRef)(new Map());
  const tabOffsets = (0, _useOffsets.default)(items, tabSizesRef.current, 0);
  const updateTabSizes = () => {
    const newSizes = new Map();
    items.forEach(({
      key
    }) => {
      const btnNode = getBtnRef(key).current;
      if (btnNode) {
        newSizes.set(key, {
          width: btnNode.offsetWidth,
          height: btnNode.offsetHeight,
          left: btnNode.offsetLeft,
          top: btnNode.offsetTop
        });
      }
    });
    tabSizesRef.current = newSizes;
  };
  (0, _react.useEffect)(() => {
    updateTabSizes();
  }, [items.map(tab => tab.key).join('_')]);
  const childNode = (0, _react.useMemo)(() => {
    const activeChildren = items.find(item => item.key === active);
    return activeChildren?.children ? /*#__PURE__*/_react.default.createElement("div", {
      className: (0, _classnames.default)('lm_custom_tabs_content')
    }, activeChildren?.children) : null;
  }, [active]);
  return /*#__PURE__*/_react.default.createElement("div", {
    className: (0, _classnames.default)('lm_custom_tabs')
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: (0, _classnames.default)('lm_custom_tabs_header')
  }, /*#__PURE__*/_react.default.createElement("span", {
    className: "tabs",
    style: {
      width: tabOffsets.get(active)?.width,
      transform: `translate3d(${tabOffsets.get(active)?.left}px, 0px, 0px)`
    }
  }), items.map(item => {
    return /*#__PURE__*/_react.default.createElement("div", {
      className: (0, _classnames.default)('item', item.key === active && 'active'),
      onClick: () => setActiveKey(item.key),
      ref: getBtnRef(item.key),
      key: item.key
    }, item.name);
  })), childNode);
}
var _default = LmCustomTabs;
exports.default = _default;