semantic-ui-react/dist/commonjs/modules/Tab/Tab.js

The official Semantic-UI-React integration.

"use strict";

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

exports.__esModule = true;
exports.default = void 0;

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

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

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

var _map2 = _interopRequireDefault(require("lodash/map"));

var _get2 = _interopRequireDefault(require("lodash/get"));

var _invoke2 = _interopRequireDefault(require("lodash/invoke"));

var _propTypes = _interopRequireDefault(require("prop-types"));

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

var _lib = require("../../lib");

var _Grid = _interopRequireDefault(require("../../collections/Grid/Grid"));

var _GridColumn = _interopRequireDefault(require("../../collections/Grid/GridColumn"));

var _Menu = _interopRequireDefault(require("../../collections/Menu/Menu"));

var _TabPane = _interopRequireDefault(require("./TabPane"));

/**
 * A Tab is a hidden section of content activated by a Menu.
 * @see Menu
 * @see Segment
 */
var Tab = /*#__PURE__*/function (_Component) {
  (0, _inheritsLoose2.default)(Tab, _Component);

  function Tab() {
    var _this;

    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }

    _this = _Component.call.apply(_Component, [this].concat(args)) || this;

    _this.handleItemClick = function (e, _ref) {
      var index = _ref.index;
      (0, _invoke2.default)(_this.props, 'onTabChange', e, (0, _extends2.default)({}, _this.props, {
        activeIndex: index
      }));

      _this.setState({
        activeIndex: index
      });
    };

    return _this;
  }

  var _proto = Tab.prototype;

  _proto.getInitialAutoControlledState = function getInitialAutoControlledState() {
    return {
      activeIndex: 0
    };
  };

  _proto.renderItems = function renderItems() {
    var _this$props = this.props,
        panes = _this$props.panes,
        renderActiveOnly = _this$props.renderActiveOnly;
    var activeIndex = this.state.activeIndex;
    if (renderActiveOnly) return (0, _invoke2.default)((0, _get2.default)(panes, "[" + activeIndex + "]"), 'render', this.props);
    return (0, _map2.default)(panes, function (_ref2, index) {
      var pane = _ref2.pane;
      return _TabPane.default.create(pane, {
        overrideProps: {
          active: index === activeIndex
        }
      });
    });
  };

  _proto.renderMenu = function renderMenu() {
    var _this$props2 = this.props,
        menu = _this$props2.menu,
        panes = _this$props2.panes,
        menuPosition = _this$props2.menuPosition;
    var activeIndex = this.state.activeIndex;

    if (menu.tabular === true && menuPosition === 'right') {
      menu.tabular = 'right';
    }

    return _Menu.default.create(menu, {
      autoGenerateKey: false,
      overrideProps: {
        items: (0, _map2.default)(panes, 'menuItem'),
        onItemClick: this.handleItemClick,
        activeIndex: activeIndex
      }
    });
  };

  _proto.renderVertical = function renderVertical(menu) {
    var _this$props3 = this.props,
        grid = _this$props3.grid,
        menuPosition = _this$props3.menuPosition;
    var paneWidth = grid.paneWidth,
        tabWidth = grid.tabWidth,
        gridProps = (0, _objectWithoutPropertiesLoose2.default)(grid, ["paneWidth", "tabWidth"]);
    var position = menuPosition || menu.props.tabular === 'right' && 'right' || 'left';
    return /*#__PURE__*/_react.default.createElement(_Grid.default, gridProps, position === 'left' && _GridColumn.default.create({
      width: tabWidth,
      children: menu
    }, {
      autoGenerateKey: false
    }), _GridColumn.default.create({
      width: paneWidth,
      children: this.renderItems(),
      stretched: true
    }, {
      autoGenerateKey: false
    }), position === 'right' && _GridColumn.default.create({
      width: tabWidth,
      children: menu
    }, {
      autoGenerateKey: false
    }));
  };

  _proto.render = function render() {
    var menu = this.renderMenu();
    var rest = (0, _lib.getUnhandledProps)(Tab, this.props);
    var ElementType = (0, _lib.getElementType)(Tab, this.props);

    if (menu.props.vertical) {
      return /*#__PURE__*/_react.default.createElement(ElementType, rest, this.renderVertical(menu));
    }

    return /*#__PURE__*/_react.default.createElement(ElementType, rest, menu.props.attached !== 'bottom' && menu, this.renderItems(), menu.props.attached === 'bottom' && menu);
  };

  return Tab;
}(_lib.ModernAutoControlledComponent);

Tab.handledProps = ["activeIndex", "as", "defaultActiveIndex", "grid", "menu", "menuPosition", "onTabChange", "panes", "renderActiveOnly"];
Tab.propTypes = process.env.NODE_ENV !== "production" ? {
  /** An element type to render as (string or function). */
  as: _propTypes.default.elementType,

  /** The initial activeIndex. */
  defaultActiveIndex: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),

  /** Index of the currently active tab. */
  activeIndex: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),

  /**
   * Shorthand props for the Menu.
   * tabular, if true, will derive final value from `menuPosition`, otherwise set 'left' or 'right' explicitly.
   */
  menu: _propTypes.default.object,

  /** Align vertical menu */
  menuPosition: _propTypes.default.oneOf(['left', 'right']),

  /** Shorthand props for the Grid. Only applicable to vertical menus. */
  grid: _propTypes.default.object,

  /**
   * Called on tab change.
   *
   * @param {SyntheticEvent} event - React's original SyntheticEvent.
   * @param {object} data - All props and proposed new activeIndex.
   * @param {object} data.activeIndex - The new proposed activeIndex.
   */
  onTabChange: _propTypes.default.func,

  /**
   * Array of objects describing each Menu.Item and Tab.Pane:
   * { menuItem: 'Home', render: () => <Tab.Pane /> }
   * or
   * { menuItem: 'Home', pane: 'Welcome' }
   */
  panes: _propTypes.default.arrayOf(_propTypes.default.shape({
    menuItem: _lib.customPropTypes.itemShorthand,
    pane: _lib.customPropTypes.itemShorthand,
    render: _propTypes.default.func
  })),

  /** A Tab can render only active pane. */
  renderActiveOnly: _propTypes.default.bool
} : {};
Tab.autoControlledProps = ['activeIndex'];
Tab.defaultProps = {
  grid: {
    paneWidth: 12,
    tabWidth: 4
  },
  menu: {
    attached: true,
    tabular: true
  },
  renderActiveOnly: true
};
Tab.Pane = _TabPane.default;
var _default = Tab;
exports.default = _default;