choerodon-ui/lib/tabs/TabContent.js

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

"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 _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 _excluded = ["type"];

var TabContent = function TabContent(props) {
  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"])((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"])((0, _objectSpread2["default"])({}, style), animatedStyle));
      } else {
        setMergedStyle((0, _objectSpread2["default"])((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, _excluded);
      ret.push( /*#__PURE__*/(0, _react.createElement)(type, (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, child), {}, {
        key: key,
        eventKey: key,
        active: activeKey === key,
        destroyInactiveTabPane: destroyInactiveTabPane,
        rootPrefixCls: prefixCls
      })));
    });
    return ret;
  };

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

TabContent.defaultProps = {
  animated: true
};
TabContent.displayName = 'TabContent';
var _default = TabContent;
exports["default"] = _default;
//# sourceMappingURL=TabContent.js.map