choerodon-ui/es/tabs/TabContent.js

An enterprise-class UI design language and React-based implementation

import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
import _objectSpread from "@babel/runtime/helpers/objectSpread2";
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
import React, { createElement, forwardRef, useContext, useLayoutEffect, useState } from 'react';
import classnames from 'classnames';
import { getActiveIndex, getMarginStyle, getTransformByIndex, getTransformPropValue } from './utils';
import TabsContext from './TabsContext';
var TabContent = forwardRef(function TabContent(props, ref) {
  var destroyInactiveTabPane = props.destroyInactiveTabPane,
      animated = props.animated,
      animatedWithMargin = props.animatedWithMargin,
      style = props.style;

  var _useContext = useContext(TabsContext),
      prefixCls = _useContext.prefixCls,
      totalPanelsMap = _useContext.totalPanelsMap,
      activeKey = _useContext.activeKey,
      tabBarPosition = _useContext.tabBarPosition;

  var _useState = useState(function () {
    return animated ? _objectSpread({}, style, {
      display: 'none'
    }) : style;
  }),
      _useState2 = _slicedToArray(_useState, 2),
      mergedStyle = _useState2[0],
      setMergedStyle = _useState2[1];

  var classes = classnames("".concat(prefixCls, "-content"), animated ? "".concat(prefixCls, "-content-animated") : "".concat(prefixCls, "-content-no-animated"));
  useLayoutEffect(function () {
    if (animated) {
      var activeIndex = getActiveIndex(totalPanelsMap, activeKey);

      if (activeIndex !== -1) {
        var animatedStyle = animatedWithMargin ? getMarginStyle(activeIndex, tabBarPosition) : getTransformPropValue(getTransformByIndex(activeIndex, tabBarPosition));
        setMergedStyle(_objectSpread({}, style, {}, animatedStyle));
      } else {
        setMergedStyle(_objectSpread({}, style, {
          display: 'none'
        }));
      }
    } else {
      setMergedStyle(style);
    }
  }, [animated, totalPanelsMap, activeKey, tabBarPosition, style]);

  var getTabPanes = function getTabPanes() {
    return _toConsumableArray(totalPanelsMap.entries()).map(function (_ref2) {
      var _ref3 = _slicedToArray(_ref2, 2),
          key = _ref3[0],
          _ref = _ref3[1];

      var type = _ref.type,
          child = _objectWithoutProperties(_ref, ["type"]);

      return createElement(type, _objectSpread({}, child, {
        key: key,
        active: activeKey === key,
        destroyInactiveTabPane: destroyInactiveTabPane,
        rootPrefixCls: prefixCls
      }));
    });
  };

  return React.createElement("div", {
    className: classes,
    style: mergedStyle,
    ref: ref
  }, getTabPanes());
});
TabContent.defaultProps = {
  animated: true
};
TabContent.displayName = 'TabContent';
export default TabContent;
//# sourceMappingURL=TabContent.js.map