choerodon-ui/lib/rc-components/tabs/SwipeableInkTabBar.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 _react = _interopRequireWildcard(require("react"));

var _createReactClass = _interopRequireDefault(require("create-react-class"));

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

var _InkTabBarMixin = _interopRequireDefault(require("./InkTabBarMixin"));

var _SwipeableTabBarMixin = _interopRequireDefault(require("./SwipeableTabBarMixin"));

var _TabBarMixin = _interopRequireDefault(require("./TabBarMixin"));

var _RefMixin = _interopRequireDefault(require("./RefMixin"));

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

var SwipeableInkTabBar = (0, _createReactClass["default"])({
  displayName: 'SwipeableInkTabBar',
  mixins: [_RefMixin["default"], _TabBarMixin["default"], _InkTabBarMixin["default"], _SwipeableTabBarMixin["default"]],
  getSwipeableTabs: function getSwipeableTabs() {
    var _this = this;

    var props = this.props;
    var children = props.panels;
    var activeKey = props.activeKey;
    var rst = [];
    var prefixCls = props.prefixCls;

    var _flexWidth = "".concat(1 / props.pageSize * 100, "%");

    var tabStyle = {
      WebkitFlexBasis: _flexWidth,
      flexBasis: _flexWidth
    };

    _react.Children.forEach(children, function (child, index) {
      var _classnames;

      if (!child) {
        return;
      }

      var key = (0, _utils.generateKey)(child.key, index);
      var cls = (0, _classnames2["default"])("".concat(prefixCls, "-tab"), (_classnames = {}, (0, _defineProperty2["default"])(_classnames, "".concat(prefixCls, "-tab-active"), activeKey === key), (0, _defineProperty2["default"])(_classnames, "".concat(prefixCls, "-tab-disabled"), child.props.disabled), _classnames));
      var events = {};

      if (!child.props.disabled) {
        events = {
          onClick: _this.onTabClick.bind(_this, key)
        };
      }

      var refProps = {};

      if (activeKey === key) {
        refProps.ref = _this.saveRef('activeTab');
      }

      rst.push(_react["default"].createElement("div", (0, _extends2["default"])({
        role: "tab",
        style: tabStyle,
        "aria-disabled": child.props.disabled ? 'true' : 'false',
        "aria-selected": activeKey === key ? 'true' : 'false'
      }, events, {
        className: cls,
        key: key
      }, refProps), child.props.tab));
    });

    return rst;
  },
  render: function render() {
    var inkBarNode = this.getInkBarNode();
    var tabs = this.getSwipeableTabs();
    var scrollbarNode = this.getSwipeBarNode([inkBarNode, tabs]);
    return this.getRootNode(scrollbarNode);
  }
});
var _default = SwipeableInkTabBar;
exports["default"] = _default;
//# sourceMappingURL=SwipeableInkTabBar.js.map