choerodon-ui/lib/tabs/index.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 _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

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

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

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

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

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

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

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

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

var _reactDom = require("react-dom");

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

var _icon = _interopRequireDefault(require("../icon"));

var _warning = _interopRequireDefault(require("../_util/warning"));

var _isFlexSupported = _interopRequireDefault(require("../_util/isFlexSupported"));

var _tabs = _interopRequireWildcard(require("../rc-components/tabs"));

var _ScrollableInkTabBar = _interopRequireDefault(require("../rc-components/tabs/ScrollableInkTabBar"));

var _utils = require("../rc-components/tabs/utils");

var _enum = require("../_util/enum");

var _enum2 = require("./enum");

var _configure = require("../configure");

function _createSuper(Derived) {
  function isNativeReflectConstruct() {
    if (typeof Reflect === "undefined" || !Reflect.construct) return false;
    if (Reflect.construct.sham) return false;
    if (typeof Proxy === "function") return true;

    try {
      Date.prototype.toString.call(Reflect.construct(Date, [], function () {}));
      return true;
    } catch (e) {
      return false;
    }
  }

  return function () {
    var Super = (0, _getPrototypeOf2["default"])(Derived),
        result;

    if (isNativeReflectConstruct()) {
      var NewTarget = (0, _getPrototypeOf2["default"])(this).constructor;
      result = Reflect.construct(Super, arguments, NewTarget);
    } else {
      result = Super.apply(this, arguments);
    }

    return (0, _possibleConstructorReturn2["default"])(this, result);
  };
}

var Tabs =
/*#__PURE__*/
function (_Component) {
  (0, _inherits2["default"])(Tabs, _Component);

  var _super = _createSuper(Tabs);

  function Tabs() {
    var _this;

    (0, _classCallCheck2["default"])(this, Tabs);
    _this = _super.apply(this, arguments);

    _this.createNewTab = function (targetKey) {
      var onEdit = _this.props.onEdit;

      if (onEdit) {
        onEdit(targetKey, 'add');
      }
    };

    _this.removeTab = function (targetKey, e) {
      e.stopPropagation();

      if (!targetKey) {
        return;
      }

      var onEdit = _this.props.onEdit;

      if (onEdit) {
        onEdit(targetKey, 'remove');
      }
    };

    _this.handleChange = function (activeKey) {
      var onChange = _this.props.onChange;

      if (onChange) {
        onChange(activeKey);
      }
    };

    return _this;
  }

  (0, _createClass2["default"])(Tabs, [{
    key: "componentDidMount",
    value: function componentDidMount() {
      var NO_FLEX = ' no-flex';
      var tabNode = (0, _reactDom.findDOMNode)(this);

      if (tabNode && !(0, _isFlexSupported["default"])() && tabNode.className.indexOf(NO_FLEX) === -1) {
        tabNode.className += NO_FLEX;
      }
    }
  }, {
    key: "render",
    value: function render() {
      var _classNames,
          _this2 = this;

      var _this$props = this.props,
          customizePrefixCls = _this$props.prefixCls,
          _this$props$className = _this$props.className,
          className = _this$props$className === void 0 ? '' : _this$props$className,
          size = _this$props.size,
          _this$props$type = _this$props.type,
          type = _this$props$type === void 0 ? _enum2.TabsType.line : _this$props$type,
          tabPosition = _this$props.tabPosition,
          children = _this$props.children,
          tabBarStyle = _this$props.tabBarStyle,
          hideAdd = _this$props.hideAdd,
          onTabClick = _this$props.onTabClick,
          onPrevClick = _this$props.onPrevClick,
          onNextClick = _this$props.onNextClick,
          _this$props$animated = _this$props.animated,
          animated = _this$props$animated === void 0 ? true : _this$props$animated,
          tabBarGutter = _this$props.tabBarGutter;
      var tabBarExtraContent = this.props.tabBarExtraContent;
      var prefixCls = (0, _configure.getPrefixCls)('tabs', customizePrefixCls);
      var inkBarAnimated = (0, _typeof2["default"])(animated) === 'object' ? animated.inkBar : animated;
      var tabPaneAnimated = (0, _typeof2["default"])(animated) === 'object' ? animated.tabPane : animated; // card tabs should not have animation

      if (type !== _enum2.TabsType.line) {
        tabPaneAnimated = 'animated' in this.props ? tabPaneAnimated : false;
      }

      var isCard = type === _enum2.TabsType.card || type === _enum2.TabsType['editable-card'];
      (0, _warning["default"])(!(isCard && (size === _enum.Size.small || size === _enum.Size.large)), "Tabs[type=card|editable-card] doesn't have small or large size, it's by designed.");
      var cls = (0, _classnames["default"])(className, "".concat(prefixCls, "-").concat(type), (_classNames = {}, (0, _defineProperty2["default"])(_classNames, "".concat(prefixCls, "-vertical"), tabPosition === _enum2.TabsPosition.left || tabPosition === _enum2.TabsPosition.right), (0, _defineProperty2["default"])(_classNames, "".concat(prefixCls, "-").concat(size), !!size), (0, _defineProperty2["default"])(_classNames, "".concat(prefixCls, "-card"), isCard), (0, _defineProperty2["default"])(_classNames, "".concat(prefixCls, "-no-animation"), !tabPaneAnimated), _classNames)); // only card type tabs can be added and closed

      var childrenWithClose = [];

      if (type === _enum2.TabsType['editable-card']) {
        childrenWithClose = [];

        _react.Children.forEach(children, function (child, index) {
          var closable = child.props.closable;
          closable = typeof closable === 'undefined' ? true : closable;
          var closeIcon = closable ? _react["default"].createElement(_icon["default"], {
            type: "close",
            onClick: function onClick(e) {
              return _this2.removeTab(child.key, e);
            }
          }) : null;
          childrenWithClose.push((0, _react.cloneElement)(child, {
            tab: _react["default"].createElement("div", {
              className: closable ? undefined : "".concat(prefixCls, "-tab-unclosable")
            }, child.props.tab, closeIcon),
            key: (0, _utils.generateKey)(child.key, index)
          }));
        }); // Add new tab handler


        if (!hideAdd) {
          tabBarExtraContent = _react["default"].createElement("span", null, _react["default"].createElement(_icon["default"], {
            type: "plus",
            className: "".concat(prefixCls, "-new-tab"),
            onClick: this.createNewTab
          }), tabBarExtraContent);
        }
      }

      tabBarExtraContent = tabBarExtraContent ? _react["default"].createElement("div", {
        className: "".concat(prefixCls, "-extra-content")
      }, tabBarExtraContent) : null;

      var renderTabBar = function renderTabBar() {
        return _react["default"].createElement(_ScrollableInkTabBar["default"], {
          inkBarAnimated: inkBarAnimated,
          extraContent: tabBarExtraContent,
          onTabClick: onTabClick,
          onPrevClick: onPrevClick,
          onNextClick: onNextClick,
          style: tabBarStyle,
          tabBarGutter: tabBarGutter
        });
      };

      return _react["default"].createElement(_tabs["default"], (0, _extends2["default"])({}, this.props, {
        prefixCls: prefixCls,
        className: cls,
        tabBarPosition: tabPosition,
        renderTabBar: renderTabBar,
        renderTabContent: function renderTabContent() {
          return _react["default"].createElement(_tabs.TabContent, {
            animated: tabPaneAnimated,
            animatedWithMargin: true
          });
        },
        onChange: this.handleChange
      }), childrenWithClose.length > 0 ? childrenWithClose : children);
    }
  }]);
  return Tabs;
}(_react.Component);

exports["default"] = Tabs;
Tabs.displayName = 'Tabs';
Tabs.TabPane = _tabs.TabPane;
Tabs.defaultProps = {
  hideAdd: false
};
//# sourceMappingURL=index.js.map