choerodon-ui/es/tabs/TabContent.js

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

import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
import _objectSpread from "@babel/runtime/helpers/objectSpread2";
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
var _excluded = ["type"];
import React, { createElement, useContext, useLayoutEffect, useState } from 'react';
import classnames from 'classnames';
import { getActiveIndex, getMarginStyle, getTransformByIndex, getTransformPropValue } from './utils';
import TabsContext from './TabsContext';

var TabContent = function TabContent(props) {
  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(_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(_objectSpread({}, style), animatedStyle));
      } else {
        setMergedStyle(_objectSpread(_objectSpread({}, style), {}, {
          display: 'none'
        }));
      }
    } else {
      setMergedStyle(style);
    }
  }, [animated, totalPanelsMap, activeKey, tabBarPosition, style]);

  var getTabPanes = function getTabPanes() {
    var ret = [];
    totalPanelsMap.forEach(function (_ref, key) {
      var type = _ref.type,
          child = _objectWithoutProperties(_ref, _excluded);

      ret.push( /*#__PURE__*/createElement(type, _objectSpread(_objectSpread({}, child), {}, {
        key: key,
        eventKey: key,
        active: activeKey === key,
        destroyInactiveTabPane: destroyInactiveTabPane,
        rootPrefixCls: prefixCls
      })));
    });
    return ret;
  };

  return /*#__PURE__*/React.createElement("div", {
    className: classes,
    style: mergedStyle
  }, getTabPanes());
};

TabContent.defaultProps = {
  animated: true
};
TabContent.displayName = 'TabContent';
export default TabContent;
//# sourceMappingURL=TabContent.js.map