@flatbiz/antd/dist/tabs-RgWLRNpM.js

/*! @flatjs/forge MIT @flatbiz/antd */

import { a as _slicedToArray, b as _objectSpread2 } from './_rollupPluginBabelHelpers-BYm17lo8.js';
import { useState, useRef, useEffect, useMemo } from 'react';
import { useSize } from 'ahooks';
import { Affix, Tabs } from 'antd';
import { jsx, jsxs } from 'react/jsx-runtime';

/**
 * Tabs吸顶组件
 * ```
 * 1. 组件根节点设置了 height: 100%、overflow: auto；所以外部包裹元素必须要有高度
 * ```
 */
var TabsSticky = function TabsSticky(props) {
  var tabsProps = props.tabsProps;
  var _useState = useState(tabsProps.defaultActiveKey),
    _useState2 = _slicedToArray(_useState, 2),
    activeKey = _useState2[0],
    setActiveKey = _useState2[1];
  var headerRef = useRef(null);
  var affixRef = useRef(null);
  var affixedFlagRef = useRef();
  var headerSize = useSize(headerRef);
  var scollNodeRef = useRef(null);
  var scollNodeSize = useSize(scollNodeRef);
  var affixRefSize = useSize(affixRef);
  useEffect(function () {
    if (tabsProps.activeKey) {
      setActiveKey(tabsProps.activeKey);
    }
  }, [tabsProps.activeKey]);
  var onChange = function onChange(activeKey) {
    var _tabsProps$onChange;
    if (!tabsProps.activeKey) {
      setActiveKey(activeKey);
    }
    (_tabsProps$onChange = tabsProps.onChange) === null || _tabsProps$onChange === void 0 || _tabsProps$onChange.call(tabsProps, activeKey);
    var top = (headerSize === null || headerSize === void 0 ? void 0 : headerSize.height) || 0;
    if (affixedFlagRef.current) {
      var _scollNodeRef$current;
      (_scollNodeRef$current = scollNodeRef.current) === null || _scollNodeRef$current === void 0 || _scollNodeRef$current.scrollTo({
        top: top
      });
    } else {
      if (props.clickTabToTop !== false) {
        var _scollNodeRef$current2;
        (_scollNodeRef$current2 = scollNodeRef.current) === null || _scollNodeRef$current2 === void 0 || _scollNodeRef$current2.scrollTo({
          top: top
        });
      }
    }
  };
  var minHeight = ((scollNodeSize === null || scollNodeSize === void 0 ? void 0 : scollNodeSize.height) || 0) - ((affixRefSize === null || affixRefSize === void 0 ? void 0 : affixRefSize.height) || 0);
  var stickyTabItems = useMemo(function () {
    var _tabsProps$items;
    return (_tabsProps$items = tabsProps.items) === null || _tabsProps$items === void 0 ? void 0 : _tabsProps$items.map(function (item) {
      return _objectSpread2(_objectSpread2({}, item), {}, {
        children: null
      });
    });
  }, [tabsProps.items]);
  var contentTabItems = useMemo(function () {
    var _tabsProps$items2;
    return (_tabsProps$items2 = tabsProps.items) === null || _tabsProps$items2 === void 0 ? void 0 : _tabsProps$items2.map(function (item) {
      var _props$tabItemContent;
      var wrapperStyle = (_props$tabItemContent = props.tabItemContentWrapperStyle) === null || _props$tabItemContent === void 0 ? void 0 : _props$tabItemContent.call(props, item.key);
      return _objectSpread2(_objectSpread2({}, item), {}, {
        children: /*#__PURE__*/jsx("div", {
          className: "tabs-sticky-contents-item",
          style: _objectSpread2({
            minHeight: minHeight
          }, wrapperStyle),
          children: item.children
        })
      });
    });
  }, [tabsProps.items, minHeight, props.tabItemContentWrapperStyle]);
  return /*#__PURE__*/jsxs("div", {
    ref: scollNodeRef,
    style: {
      height: '100%',
      overflowY: 'auto'
    },
    children: [/*#__PURE__*/jsx("div", {
      ref: headerRef,
      children: props.headerRender
    }), /*#__PURE__*/jsx(Affix, {
      offsetTop: 0,
      target: function target() {
        return scollNodeRef.current;
      },
      onChange: function onChange(affixed) {
        affixedFlagRef.current = affixed;
      },
      children: /*#__PURE__*/jsx("div", {
        ref: affixRef,
        children: /*#__PURE__*/jsx(Tabs, _objectSpread2(_objectSpread2({}, tabsProps), {}, {
          activeKey: activeKey,
          items: stickyTabItems,
          tabBarStyle: _objectSpread2(_objectSpread2({}, tabsProps.tabBarStyle), {}, {
            margin: 0
          }),
          style: _objectSpread2({
            backgroundColor: 'var(--block-bg-color)'
          }, tabsProps.style),
          onChange: onChange
        }))
      })
    }), /*#__PURE__*/jsx(Tabs, {
      activeKey: activeKey,
      className: "tabs-sticky-contents",
      items: contentTabItems
    })]
  });
};

export { TabsSticky as T };
//# sourceMappingURL=tabs-RgWLRNpM.js.map