choerodon-ui/es/tabs/index.js

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

import _extends from "@babel/runtime/helpers/extends";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
import _typeof from "@babel/runtime/helpers/typeof";
import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
import _createClass from "@babel/runtime/helpers/createClass";
import _inherits from "@babel/runtime/helpers/inherits";
import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";

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 = _getPrototypeOf(Derived),
        result;

    if (isNativeReflectConstruct()) {
      var NewTarget = _getPrototypeOf(this).constructor;

      result = Reflect.construct(Super, arguments, NewTarget);
    } else {
      result = Super.apply(this, arguments);
    }

    return _possibleConstructorReturn(this, result);
  };
}

import React, { Children, cloneElement, Component } from 'react';
import { findDOMNode } from 'react-dom';
import classNames from 'classnames';
import Icon from '../icon';
import warning from '../_util/warning';
import isFlexSupported from '../_util/isFlexSupported';
import RcTabs, { TabContent, TabPane } from '../rc-components/tabs';
import ScrollableInkTabBar from '../rc-components/tabs/ScrollableInkTabBar';
import { generateKey } from '../rc-components/tabs/utils';
import { Size } from '../_util/enum';
import { TabsPosition, TabsType } from './enum';
import { getPrefixCls } from '../configure';

var Tabs =
/*#__PURE__*/
function (_Component) {
  _inherits(Tabs, _Component);

  var _super = _createSuper(Tabs);

  function Tabs() {
    var _this;

    _classCallCheck(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;
  }

  _createClass(Tabs, [{
    key: "componentDidMount",
    value: function componentDidMount() {
      var NO_FLEX = ' no-flex';
      var tabNode = findDOMNode(this);

      if (tabNode && !isFlexSupported() && 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 ? 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 = getPrefixCls('tabs', customizePrefixCls);
      var inkBarAnimated = _typeof(animated) === 'object' ? animated.inkBar : animated;
      var tabPaneAnimated = _typeof(animated) === 'object' ? animated.tabPane : animated; // card tabs should not have animation

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

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

      var childrenWithClose = [];

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

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

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

      var renderTabBar = function renderTabBar() {
        return React.createElement(ScrollableInkTabBar, {
          inkBarAnimated: inkBarAnimated,
          extraContent: tabBarExtraContent,
          onTabClick: onTabClick,
          onPrevClick: onPrevClick,
          onNextClick: onNextClick,
          style: tabBarStyle,
          tabBarGutter: tabBarGutter
        });
      };

      return React.createElement(RcTabs, _extends({}, this.props, {
        prefixCls: prefixCls,
        className: cls,
        tabBarPosition: tabPosition,
        renderTabBar: renderTabBar,
        renderTabContent: function renderTabContent() {
          return React.createElement(TabContent, {
            animated: tabPaneAnimated,
            animatedWithMargin: true
          });
        },
        onChange: this.handleChange
      }), childrenWithClose.length > 0 ? childrenWithClose : children);
    }
  }]);

  return Tabs;
}(Component);

export { Tabs as default };
Tabs.displayName = 'Tabs';
Tabs.TabPane = TabPane;
Tabs.defaultProps = {
  hideAdd: false
};
//# sourceMappingURL=index.js.map