coreui/lib/components/Tabs/Tabs.js

Platform Core UI

'use strict';

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

var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _Shared = require('../../Shared');

var _Shared2 = _interopRequireDefault(_Shared);

var _reactAriaTabpanel = require('coreui-deps/lib/react-aria-tabpanel');

var _reactAriaTabpanel2 = _interopRequireDefault(_reactAriaTabpanel);

var _uncontrollable = require('coreui-deps/lib/uncontrollable');

var _uncontrollable2 = _interopRequireDefault(_uncontrollable);

var _Tabs = require('../../theme/components/Tabs');

var _Tabs2 = _interopRequireDefault(_Tabs);

var _dedupe = require('classnames/dedupe');

var _dedupe2 = _interopRequireDefault(_dedupe);

var _mapProps = require('recompose/mapProps');

var _mapProps2 = _interopRequireDefault(_mapProps);

var _ramda = require('ramda');

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

function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }

var systemStyles = {};

var renderTabPanel = function renderTabPanel(activeTabId, sheet, theme, _ref) {
  var _ref$props = _ref.props,
      children = _ref$props.children,
      tabKey = _ref$props.tabKey;

  var active = tabKey === activeTabId;

  return _react2.default.createElement(
    _reactAriaTabpanel2.default.TabPanel,
    {
      active: active,
      className: (0, _dedupe2.default)(sheet.classes.tabPane, theme.classes.tabPane, { active: active }),
      style: theme.styles.tabPane,
      tabId: tabKey
    },
    children
  );
};

var renderTab = function renderTab(activeTabId, sheet, theme, _ref2) {
  var _ref2$props = _ref2.props,
      tabKey = _ref2$props.tabKey,
      text = _ref2$props.text;
  return _react2.default.createElement(
    'li',
    { className: 'nav-item' },
    _react2.default.createElement(
      _reactAriaTabpanel2.default.Tab,
      {
        className: (0, _dedupe2.default)(sheet.classes.tab, theme.classes.tab, { active: tabKey === activeTabId }),
        id: tabKey,
        style: theme.styles.tab,
        tag: 'span'
      },
      text
    )
  );
};

var TabsWrapper = function TabsWrapper(props) {
  var activeTabId = props.activeTabId,
      wrapperChildren = props.children,
      externalContent = props.externalContent,
      className = props.className,
      onChange = props.onChange,
      sheet = props.sheet,
      style = props.style,
      theme = props.theme;

  var systemClasses = sheet.classes;

  return _react2.default.createElement(
    _reactAriaTabpanel2.default.Wrapper,
    { activeTabId: activeTabId, className: className, onChange: onChange, style: style },
    _react2.default.createElement(
      _reactAriaTabpanel2.default.TabList,
      null,
      _react2.default.createElement(
        'ul',
        {
          className: (0, _dedupe2.default)(systemClasses.tabList, theme.classes.tabList),
          style: theme.styles.tabList
        },
        _react.Children.map(wrapperChildren, (0, _ramda.partial)(renderTab, [activeTabId, sheet, theme]))
      )
    ),
    !externalContent && _react2.default.createElement(
      'div',
      {
        className: (0, _dedupe2.default)(systemClasses.tabContent, theme.classes.tabContent),
        style: theme.styles.tabContent
      },
      _react.Children.map(wrapperChildren, (0, _ramda.partial)(renderTabPanel, [activeTabId, sheet, theme]))
    )
  );
};

TabsWrapper.defaultProps = { externalContent: false };

TabsWrapper.propTypes = {
  activeTabId: _react.PropTypes.string,
  children: _react.PropTypes.node,
  className: _react.PropTypes.string,
  externalContent: _react.PropTypes.bool,
  onChange: _react.PropTypes.func,
  sheet: _react.PropTypes.object,
  style: _react.PropTypes.object,
  theme: _react.PropTypes.oneOfType([_react.PropTypes.bool, _react.PropTypes.object])
};

var UncontrolledTabsWrapper = (0, _uncontrollable2.default)(TabsWrapper, { activeTabId: 'onChange' });

var TabPane = function TabPane() {
  return null;
};

var TabsContainer = (0, _mapProps2.default)(function (props) {
  var activeTabKey = props.activeTabKey,
      onChange = props.onChange,
      rest = _objectWithoutProperties(props, ['activeTabKey', 'onChange']);

  var isControlled = activeTabKey && onChange;
  var defaultActiveTabIdKVP = activeTabKey ? { defaultActiveTabId: activeTabKey } : {};
  var controllableProps = isControlled ? { activeTabId: activeTabKey, onChange: onChange } : defaultActiveTabIdKVP;

  return _extends({}, rest, controllableProps);
})(UncontrolledTabsWrapper);

var StyledTabs = _Shared2.default.injectSheet(systemStyles)(TabsContainer);

var Tabs = function Tabs(props) {
  return _react2.default.createElement(
    StyledTabs,
    props,
    props.children
  );
};

var classes = _Tabs2.default.classes;
var options = _Tabs2.default.options;
var styles = _Tabs2.default.styles;

Tabs.defaultProps = { theme: { classes: classes, options: options, styles: styles } };

Tabs.displayName = 'Tabs';

Tabs.propTypes = {
  activeTabKey: _react.PropTypes.string,

  children: _react.PropTypes.node,

  externalContent: _react.PropTypes.bool,

  onChange: _react.PropTypes.func,

  theme: _react.PropTypes.oneOfType([_react.PropTypes.bool, _react.PropTypes.object])
};

Tabs.TabPane = TabPane;

exports.TabPane = TabPane;


_Shared2.default.registerComponent('Tabs', Tabs);

exports.default = Tabs;