@wordpress/block-editor/build/components/inserter/mobile-tab-navigation.js

Generic block editor.

"use strict";

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

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

var _i18n = require("@wordpress/i18n");

var _components = require("@wordpress/components");

var _icons = require("@wordpress/icons");

/**
 * WordPress dependencies
 */
function ScreenHeader({
  title
}) {
  return (0, _element.createElement)(_components.__experimentalVStack, {
    spacing: 0
  }, (0, _element.createElement)(_components.__experimentalView, null, (0, _element.createElement)(_components.__experimentalSpacer, {
    marginBottom: 0,
    paddingX: 4,
    paddingY: 3
  }, (0, _element.createElement)(_components.__experimentalHStack, {
    spacing: 2
  }, (0, _element.createElement)(_components.__experimentalNavigatorBackButton, {
    style: // TODO: This style override is also used in ToolsPanelHeader.
    // It should be supported out-of-the-box by Button.
    {
      minWidth: 24,
      padding: 0
    },
    icon: (0, _i18n.isRTL)() ? _icons.chevronRight : _icons.chevronLeft,
    isSmall: true,
    "aria-label": (0, _i18n.__)('Navigate to the previous view')
  }), (0, _element.createElement)(_components.__experimentalSpacer, null, (0, _element.createElement)(_components.__experimentalHeading, {
    level: 5
  }, title))))));
}

function MobileTabNavigation({
  categories,
  children
}) {
  return (0, _element.createElement)(_components.__experimentalNavigatorProvider, {
    initialPath: "/",
    className: "block-editor-inserter__mobile-tab-navigation"
  }, (0, _element.createElement)(_components.__experimentalNavigatorScreen, {
    path: "/"
  }, (0, _element.createElement)(_components.__experimentalItemGroup, null, categories.map(category => (0, _element.createElement)(_components.__experimentalNavigatorButton, {
    key: category.name,
    path: `/category/${category.name}`,
    as: _components.__experimentalItem,
    isAction: true
  }, (0, _element.createElement)(_components.__experimentalHStack, null, (0, _element.createElement)(_components.FlexBlock, null, category.label), (0, _element.createElement)(_icons.Icon, {
    icon: (0, _i18n.isRTL)() ? _icons.chevronLeft : _icons.chevronRight
  })))))), categories.map(category => (0, _element.createElement)(_components.__experimentalNavigatorScreen, {
    key: category.name,
    path: `/category/${category.name}`
  }, (0, _element.createElement)(ScreenHeader, {
    title: (0, _i18n.__)('Back')
  }), children(category))));
}
//# sourceMappingURL=mobile-tab-navigation.js.map