@xgovformbuilder/govuk-react-jsx/govuk/components/tabs/index.js

> This package is no longer maintained and will not receive updates bringing it beyond govuk-frontend 4.0.1. If you are using this in your project the simplest way forward is to copy and paste the components from here into your project allowing you to kee

import _extends from "@babel/runtime/helpers/extends";
import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
var _excluded = ["className", "id", "idPrefix", "items", "title"],
    _excluded2 = ["id", "label", "panel"],
    _excluded3 = ["id", "panel", "label"];
import _regeneratorRuntime from "@babel/runtime/regenerator";
import React, { useEffect, useRef } from 'react';

function Tabs(props) {
  var className = props.className,
      id = props.id,
      idPrefix = props.idPrefix,
      items = props.items,
      title = props.title,
      attributes = _objectWithoutProperties(props, _excluded);

  var tabsRef = useRef();
  useEffect(function () {
    _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
      var _yield$import, TabsJS;

      return _regeneratorRuntime.wrap(function _callee$(_context) {
        while (1) {
          switch (_context.prev = _context.next) {
            case 0:
              if (!(typeof document !== 'undefined')) {
                _context.next = 6;
                break;
              }

              _context.next = 3;
              return import(
              /* webpackChunkName: "govuk-frontend-tabs" */

              /* webpackMode: "lazy" */

              /* webpackPrefetch: true */
              'govuk-frontend/govuk/components/tabs/tabs');

            case 3:
              _yield$import = _context.sent;
              TabsJS = _yield$import["default"];

              if (tabsRef.current) {
                new TabsJS(tabsRef.current).init();
              }

            case 6:
            case "end":
              return _context.stop();
          }
        }
      }, _callee);
    }))();
  }, [tabsRef]);
  var filteredItems = items ? items.filter(function (item) {
    return item;
  }) : [];
  var tabContent = filteredItems.map(function (item, index) {
    // eslint-disable-next-line no-unused-vars
    var itemId = item.id,
        label = item.label,
        panel = item.panel,
        itemAttributes = _objectWithoutProperties(item, _excluded2);

    var tabId = "".concat(itemId || "".concat(idPrefix, "-").concat(index + 1));
    return /*#__PURE__*/React.createElement("li", {
      key: tabId,
      className: "govuk-tabs__list-item".concat(index === 0 ? ' govuk-tabs__list-item--selected' : '')
    }, /*#__PURE__*/React.createElement("a", _extends({
      className: "govuk-tabs__tab",
      href: "#".concat(tabId)
    }, itemAttributes), label));
  });
  var tabs = filteredItems.length > 0 ? /*#__PURE__*/React.createElement("ul", {
    className: "govuk-tabs__list"
  }, tabContent) : null;
  var panels = filteredItems.map(function (item, index) {
    // eslint-disable-next-line no-unused-vars
    var itemId = item.id,
        panel = item.panel,
        label = item.label,
        itemAttributes = _objectWithoutProperties(item, _excluded3);

    var panelId = "".concat(itemId || "".concat(idPrefix, "-").concat(index + 1));
    return /*#__PURE__*/React.createElement("div", _extends({
      key: panelId,
      className: "govuk-tabs__panel".concat(index > 0 ? ' govuk-tabs__panel--hidden' : ''),
      id: panelId
    }, panel));
  });
  return /*#__PURE__*/React.createElement("div", _extends({
    id: id,
    className: "govuk-tabs ".concat(className || '')
  }, attributes, {
    "data-module": "govuk-tabs",
    ref: tabsRef
  }), /*#__PURE__*/React.createElement("h2", {
    className: "govuk-tabs__title"
  }, title), tabs, panels);
}

Tabs.defaultProps = {
  title: 'Contents',
  idPrefix: ''
};
export { Tabs };