choerodon-ui/lib/tabs/TabContent.js

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

"use strict";

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = void 0;

var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));

var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));

var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));

var _react = _interopRequireWildcard(require("react"));

var _classnames = _interopRequireDefault(require("classnames"));

var _utils = require("./utils");

var _TabsContext = _interopRequireDefault(require("./TabsContext"));

var TabContent = (0, _react.forwardRef)(function TabContent(props, ref) {
  var destroyInactiveTabPane = props.destroyInactiveTabPane,
      animated = props.animated,
      animatedWithMargin = props.animatedWithMargin,
      style = props.style;

  var _useContext = (0, _react.useContext)(_TabsContext["default"]),
      prefixCls = _useContext.prefixCls,
      totalPanelsMap = _useContext.totalPanelsMap,
      activeKey = _useContext.activeKey,
      tabBarPosition = _useContext.tabBarPosition;

  var _useState = (0, _react.useState)(function () {
    return animated ? (0, _objectSpread2["default"])({}, style, {
      display: 'none'
    }) : style;
  }),
      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
      mergedStyle = _useState2[0],
      setMergedStyle = _useState2[1];

  var classes = (0, _classnames["default"])("".concat(prefixCls, "-content"), animated ? "".concat(prefixCls, "-content-animated") : "".concat(prefixCls, "-content-no-animated"));
  (0, _react.useLayoutEffect)(function () {
    if (animated) {
      var activeIndex = (0, _utils.getActiveIndex)(totalPanelsMap, activeKey);

      if (activeIndex !== -1) {
        var animatedStyle = animatedWithMargin ? (0, _utils.getMarginStyle)(activeIndex, tabBarPosition) : (0, _utils.getTransformPropValue)((0, _utils.getTransformByIndex)(activeIndex, tabBarPosition));
        setMergedStyle((0, _objectSpread2["default"])({}, style, {}, animatedStyle));
      } else {
        setMergedStyle((0, _objectSpread2["default"])({}, 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 = (0, _objectWithoutProperties2["default"])(_ref, ["type"]);
      ret.push((0, _react.createElement)(type, (0, _objectSpread2["default"])({}, child, {
        key: key,
        active: activeKey === key,
        destroyInactiveTabPane: destroyInactiveTabPane,
        rootPrefixCls: prefixCls
      })));
    });
    return ret;
  };

  return _react["default"].createElement("div", {
    className: classes,
    style: mergedStyle,
    ref: ref
  }, getTabPanes());
});
TabContent.defaultProps = {
  animated: true
};
TabContent.displayName = 'TabContent';
var _default = TabContent;
exports["default"] = _default;
//# sourceMappingURL=TabContent.js.map