backpack-ui/dist/components/tabs/tabs.js

Lonely Planet's Components

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});

var _getPrototypeOf = require("babel-runtime/core-js/object/get-prototype-of");

var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf);

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

var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);

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

var _createClass3 = _interopRequireDefault(_createClass2);

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

var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);

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

var _inherits3 = _interopRequireDefault(_inherits2);

var _react = require("react");

var _react2 = _interopRequireDefault(_react);

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

var _propTypes2 = _interopRequireDefault(_propTypes);

var _radium = require("radium");

var _radium2 = _interopRequireDefault(_radium);

var _navigation = require("../navigation");

var _tab = require("./tab");

var _tab2 = _interopRequireDefault(_tab);

var _tabPanel = require("./tabPanel");

var _tabPanel2 = _interopRequireDefault(_tabPanel);

var _propTypes3 = require("../../utils/propTypes");

var _propTypes4 = _interopRequireDefault(_propTypes3);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

var Tabs = function (_Component) {
  (0, _inherits3.default)(Tabs, _Component);

  function Tabs(props) {
    (0, _classCallCheck3.default)(this, Tabs);

    var _this = (0, _possibleConstructorReturn3.default)(this, (Tabs.__proto__ || (0, _getPrototypeOf2.default)(Tabs)).call(this, props));

    _this.state = {
      selectedIndex: _this.findSelectedTab()
    };

    _this.setSelectedIndex = _this.setSelectedIndex.bind(_this);
    _this.findSelectedTab = _this.findSelectedTab.bind(_this);
    _this.getTabs = _this.getTabs.bind(_this);
    return _this;
  }

  (0, _createClass3.default)(Tabs, [{
    key: "setSelectedIndex",
    value: function setSelectedIndex(index) {
      this.setState({
        selectedIndex: index
      });
    }
  }, {
    key: "getTabs",
    value: function getTabs() {
      var tabs = [];

      _react.Children.forEach(this.props.children, function (tab) {
        if ((0, _react.isValidElement)(tab)) {
          tabs.push(tab);
        }
      });

      return tabs;
    }
  }, {
    key: "findSelectedTab",
    value: function findSelectedTab() {
      var selectedIndex = 0;

      if (!this.props.children) {
        return null;
      }

      _react.Children.forEach(this.props.children, function (child, index) {
        if (child && child.props.active) {
          selectedIndex = index;
        }
      });

      return selectedIndex;
    }
  }, {
    key: "render",
    value: function render() {
      var _this2 = this;

      var _props = this.props,
          id = _props.id,
          navigationHeight = _props.navigationHeight,
          navigationSticky = _props.navigationSticky,
          style = _props.style;
      var selectedIndex = this.state.selectedIndex;

      var tabContent = [];

      var tabs = this.getTabs().map(function (tab, index) {
        tabContent.push(tab.props.children ? (0, _react.createElement)(_tabPanel2.default, {
          key: index,
          id: id + "-content-" + (index + 1),
          "aria-labelledby": id + "-tab-" + (index + 1),
          "aria-hidden": !(index === selectedIndex),
          style: {
            display: index === selectedIndex ? "block" : "none"
          }
        }, tab.props.children) : null);

        return (0, _react.cloneElement)(tab, {
          key: index,
          id: id + "-tab-" + (index + 1),
          role: "tab",
          "aria-controls": id + "-content-" + (index + 1),
          "aria-expanded": selectedIndex === index,
          "aria-selected": selectedIndex === index,
          active: selectedIndex === index,
          onClick: function onClick() {
            _this2.setSelectedIndex(index);
          }
        });
      });

      return _react2.default.createElement(
        "div",
        {
          className: "Tabs",
          id: id,
          role: "tablist",
          style: style
        },
        _react2.default.createElement(
          _navigation.Navigation,
          {
            height: navigationHeight,
            sticky: navigationSticky
          },
          tabs
        ),
        _react2.default.createElement(
          "div",
          null,
          tabContent
        )
      );
    }
  }]);
  return Tabs;
}(_react.Component);

Tabs.propTypes = {
  id: _propTypes2.default.string.isRequired,
  children: function children(props, propName, componentName) {
    var prop = props[propName];
    var error = null;

    _react.Children.forEach(prop, function (child) {
      if (child.type !== _tab2.default) {
        error = new Error(componentName + " children should be of type \"Tab\".");
      }
    });

    return error;
  },
  navigationHeight: _propTypes2.default.number,
  navigationSticky: _propTypes2.default.bool,
  style: _propTypes4.default.style
};

exports.default = (0, _radium2.default)(Tabs);