@wordpress/block-editor/build/components/inserter/block-patterns-tab/index.js

Generic block editor.

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _element = require("@wordpress/element");
var _compose = require("@wordpress/compose");
var _components = require("@wordpress/components");
var _i18n = require("@wordpress/i18n");
var _blockPatternsExplorer = _interopRequireDefault(require("../block-patterns-explorer"));
var _mobileTabNavigation = _interopRequireDefault(require("../mobile-tab-navigation"));
var _patternCategoryPreviews = require("./pattern-category-previews");
var _usePatternCategories = require("./use-pattern-categories");
var _categoryTabs = _interopRequireDefault(require("../category-tabs"));
var _noResults = _interopRequireDefault(require("../no-results"));
var _jsxRuntime = require("react/jsx-runtime");
/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */

function BlockPatternsTab({
  onSelectCategory,
  selectedCategory,
  onInsert,
  rootClientId,
  children
}) {
  const [showPatternsExplorer, setShowPatternsExplorer] = (0, _element.useState)(false);
  const categories = (0, _usePatternCategories.usePatternCategories)(rootClientId);
  const isMobile = (0, _compose.useViewportMatch)('medium', '<');
  if (!categories.length) {
    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_noResults.default, {});
  }
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
    children: [!isMobile && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
      className: "block-editor-inserter__block-patterns-tabs-container",
      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_categoryTabs.default, {
        categories: categories,
        selectedCategory: selectedCategory,
        onSelectCategory: onSelectCategory,
        children: children
      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Button, {
        __next40pxDefaultSize: true,
        className: "block-editor-inserter__patterns-explore-button",
        onClick: () => setShowPatternsExplorer(true),
        variant: "secondary",
        children: (0, _i18n.__)('Explore all patterns')
      })]
    }), isMobile && /*#__PURE__*/(0, _jsxRuntime.jsx)(_mobileTabNavigation.default, {
      categories: categories,
      children: category => /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
        className: "block-editor-inserter__category-panel",
        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_patternCategoryPreviews.PatternCategoryPreviews, {
          onInsert: onInsert,
          rootClientId: rootClientId,
          category: category
        }, category.name)
      })
    }), showPatternsExplorer && /*#__PURE__*/(0, _jsxRuntime.jsx)(_blockPatternsExplorer.default, {
      initialCategory: selectedCategory || categories[0],
      patternCategories: categories,
      onModalClose: () => setShowPatternsExplorer(false),
      rootClientId: rootClientId
    })]
  });
}
var _default = exports.default = BlockPatternsTab;
//# sourceMappingURL=index.js.map