ffr-components/es/tabs/TabGroup.js

Fiori styled UI components

import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
import _extends from "@babel/runtime/helpers/esm/extends";
import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
import _createClass from "@babel/runtime/helpers/esm/createClass";
import _possibleConstructorReturn from "@babel/runtime/helpers/esm/possibleConstructorReturn";
import _getPrototypeOf from "@babel/runtime/helpers/esm/getPrototypeOf";
import _inherits from "@babel/runtime/helpers/esm/inherits";
import classnames from 'classnames';
import { TabContent } from './_TabContent';
import React, { Component } from 'react';

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

  function TabGroup(props) {
    var _this;

    _classCallCheck(this, TabGroup);

    _this = _possibleConstructorReturn(this, _getPrototypeOf(TabGroup).call(this, props));

    _this.handleTabSelection = function (event, index) {
      event.preventDefault();

      _this.setState({
        selectedIndex: index
      });

      _this.props.onTabClick(event, index);
    };

    _this.cloneElement = function (child, index) {
      return React.cloneElement(child, {
        onClick: _this.handleTabSelection,
        selected: _this.state.selectedIndex === index,
        index: index
      });
    };

    _this.renderTabs = function () {
      return React.Children.toArray(_this.props.children).map(function (child, index) {
        return _this.cloneElement(child, index);
      });
    };

    _this.renderContent = function () {
      return React.Children.toArray(_this.props.children).map(function (child, index) {
        return React.createElement(TabContent, _extends({}, child.props.tabContentProps, {
          key: index,
          selected: _this.state.selectedIndex === index
        }), child.props.children);
      });
    };

    _this.state = {
      selectedIndex: props.selectedIndex
    };
    return _this;
  }

  _createClass(TabGroup, [{
    key: "render",
    value: function render() {
      var _this$props = this.props,
          children = _this$props.children,
          className = _this$props.className,
          selectedIndex = _this$props.selectedIndex,
          tabGroupProps = _this$props.tabGroupProps,
          onTabClick = _this$props.onTabClick,
          rest = _objectWithoutProperties(_this$props, ["children", "className", "selectedIndex", "tabGroupProps", "onTabClick"]); // css classes to use for tab group


      var tabGroupClasses = classnames('fd-tabs', className);
      return React.createElement(React.Fragment, null, React.createElement("ul", _extends({}, rest, {
        className: tabGroupClasses
      }), this.renderTabs(children)), this.renderContent(children));
    }
  }], [{
    key: "getDerivedStateFromProps",
    value: function getDerivedStateFromProps(props, state) {
      var prevProps = state.prevProps || {}; // Compare the incoming prop to previous prop

      var selectedIndex = prevProps.selectedIndex !== props.selectedIndex ? props.selectedIndex : state.selectedIndex;
      return {
        // Store the previous props in state
        prevProps: props,
        selectedIndex: selectedIndex
      };
    } // set selected tab

  }]);

  return TabGroup;
}(Component);

TabGroup.defaultProps = {
  selectedIndex: 0,
  onTabClick: function onTabClick() {}
};
export default TabGroup;