@wordpress/block-editor/build/components/inserter/media-tab/media-panel.js

Generic block editor.

"use strict";

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

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

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

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

var _dom = require("@wordpress/dom");

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

var _mediaList = _interopRequireDefault(require("./media-list"));

var _useDebouncedInput = _interopRequireDefault(require("../hooks/use-debounced-input"));

var _hooks = require("./hooks");

var _noResults = _interopRequireDefault(require("../no-results"));

/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */
const INITIAL_MEDIA_ITEMS_PER_PAGE = 10;

function MediaCategoryDialog({
  rootClientId,
  onInsert,
  category
}) {
  const container = (0, _element.useRef)();
  (0, _element.useEffect)(() => {
    const timeout = setTimeout(() => {
      const [firstTabbable] = _dom.focus.tabbable.find(container.current);

      firstTabbable?.focus();
    });
    return () => clearTimeout(timeout);
  }, [category]);
  return (0, _element.createElement)("div", {
    ref: container,
    className: "block-editor-inserter__media-dialog"
  }, (0, _element.createElement)(MediaCategoryPanel, {
    rootClientId: rootClientId,
    onInsert: onInsert,
    category: category
  }));
}

function MediaCategoryPanel({
  rootClientId,
  onInsert,
  category
}) {
  const [search, setSearch, debouncedSearch] = (0, _useDebouncedInput.default)();
  const {
    mediaList,
    isLoading
  } = (0, _hooks.useMediaResults)(category, {
    per_page: !!debouncedSearch ? 20 : INITIAL_MEDIA_ITEMS_PER_PAGE,
    search: debouncedSearch
  });
  const baseCssClass = 'block-editor-inserter__media-panel';
  const searchLabel = category.labels.search_items || (0, _i18n.__)('Search');
  return (0, _element.createElement)("div", {
    className: baseCssClass
  }, (0, _element.createElement)(_components.SearchControl, {
    className: `${baseCssClass}-search`,
    onChange: setSearch,
    value: search,
    label: searchLabel,
    placeholder: searchLabel
  }), isLoading && (0, _element.createElement)("div", {
    className: `${baseCssClass}-spinner`
  }, (0, _element.createElement)(_components.Spinner, null)), !isLoading && !mediaList?.length && (0, _element.createElement)(_noResults.default, null), !isLoading && !!mediaList?.length && (0, _element.createElement)(_mediaList.default, {
    rootClientId: rootClientId,
    onClick: onInsert,
    mediaList: mediaList,
    category: category
  }));
}
//# sourceMappingURL=media-panel.js.map