@wordpress/components/build/tab-panel/index.js

UI components for WordPress.

"use strict";

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

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

var _element = require("@wordpress/element");

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

var _classnames = _interopRequireDefault(require("classnames"));

var _lodash = require("lodash");

var _compose = require("@wordpress/compose");

var _navigableContainer = require("../navigable-container");

var _button = _interopRequireDefault(require("../button"));

/**
 * External dependencies
 */

/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */
const TabButton = ({
  tabId,
  onClick,
  children,
  selected,
  ...rest
}) => (0, _element.createElement)(_button.default, (0, _extends2.default)({
  role: "tab",
  tabIndex: selected ? null : -1,
  "aria-selected": selected,
  id: tabId,
  onClick: onClick
}, rest), children);

function TabPanel({
  className,
  children,
  tabs,
  initialTabName,
  orientation = 'horizontal',
  activeClass = 'is-active',
  onSelect = _lodash.noop
}) {
  var _selectedTab$name;

  const instanceId = (0, _compose.useInstanceId)(TabPanel, 'tab-panel');
  const [selected, setSelected] = (0, _element.useState)(null);

  const handleClick = tabKey => {
    setSelected(tabKey);
    onSelect(tabKey);
  };

  const onNavigate = (childIndex, child) => {
    child.click();
  };

  const selectedTab = (0, _lodash.find)(tabs, {
    name: selected
  });
  const selectedId = `${instanceId}-${(_selectedTab$name = selectedTab === null || selectedTab === void 0 ? void 0 : selectedTab.name) !== null && _selectedTab$name !== void 0 ? _selectedTab$name : 'none'}`;
  (0, _element.useEffect)(() => {
    const newSelectedTab = (0, _lodash.find)(tabs, {
      name: selected
    });

    if (!newSelectedTab) {
      setSelected(initialTabName || (tabs.length > 0 ? tabs[0].name : null));
    }
  }, [tabs]);
  return (0, _element.createElement)("div", {
    className: className
  }, (0, _element.createElement)(_navigableContainer.NavigableMenu, {
    role: "tablist",
    orientation: orientation,
    onNavigate: onNavigate,
    className: "components-tab-panel__tabs"
  }, tabs.map(tab => (0, _element.createElement)(TabButton, {
    className: (0, _classnames.default)('components-tab-panel__tabs-item', tab.className, {
      [activeClass]: tab.name === selected
    }),
    tabId: `${instanceId}-${tab.name}`,
    "aria-controls": `${instanceId}-${tab.name}-view`,
    selected: tab.name === selected,
    key: tab.name,
    onClick: (0, _lodash.partial)(handleClick, tab.name)
  }, tab.title))), selectedTab && (0, _element.createElement)("div", {
    key: selectedId,
    "aria-labelledby": selectedId,
    role: "tabpanel",
    id: `${selectedId}-view`,
    className: "components-tab-panel__tab-content"
  }, children(selectedTab)));
}
//# sourceMappingURL=index.js.map