@wordpress/block-editor/build/components/inserter/media-tab/media-tab.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 _classnames = _interopRequireDefault(require("classnames"));

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

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

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

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

var _mediaPanel = require("./media-panel");

var _check = _interopRequireDefault(require("../../media-upload/check"));

var _mediaUpload = _interopRequireDefault(require("../../media-upload"));

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

var _utils = require("./utils");

var _mobileTabNavigation = _interopRequireDefault(require("../mobile-tab-navigation"));

/**
 * External dependencies
 */

/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */
const ALLOWED_MEDIA_TYPES = ['image', 'video', 'audio'];

function MediaTab({
  rootClientId,
  selectedCategory,
  onSelectCategory,
  onInsert
}) {
  const mediaCategories = (0, _hooks.useMediaCategories)(rootClientId);
  const isMobile = (0, _compose.useViewportMatch)('medium', '<');
  const baseCssClass = 'block-editor-inserter__media-tabs';
  const onSelectMedia = (0, _element.useCallback)(media => {
    if (!media?.url) {
      return;
    }

    const [block] = (0, _utils.getBlockAndPreviewFromMedia)(media, media.type);
    onInsert(block);
  }, [onInsert]);
  const mobileMediaCategories = (0, _element.useMemo)(() => mediaCategories.map(mediaCategory => ({ ...mediaCategory,
    label: mediaCategory.labels.name
  })), [mediaCategories]);
  return (0, _element.createElement)(_element.Fragment, null, !isMobile && (0, _element.createElement)("div", {
    className: `${baseCssClass}-container`
  }, (0, _element.createElement)("nav", {
    "aria-label": (0, _i18n.__)('Media categories')
  }, (0, _element.createElement)(_components.__experimentalItemGroup, {
    role: "list",
    className: baseCssClass
  }, mediaCategories.map(mediaCategory => (0, _element.createElement)(_components.__experimentalItem, {
    role: "listitem",
    key: mediaCategory.name,
    onClick: () => onSelectCategory(mediaCategory),
    className: (0, _classnames.default)(`${baseCssClass}__media-category`, {
      'is-selected': selectedCategory === mediaCategory
    }),
    "aria-label": mediaCategory.labels.name,
    "aria-current": mediaCategory === selectedCategory ? 'true' : undefined
  }, (0, _element.createElement)(_components.__experimentalHStack, null, (0, _element.createElement)(_components.FlexBlock, null, mediaCategory.labels.name), (0, _element.createElement)(_icons.Icon, {
    icon: _icons.chevronRight
  })))), (0, _element.createElement)("div", {
    role: "listitem"
  }, (0, _element.createElement)(_check.default, null, (0, _element.createElement)(_mediaUpload.default, {
    multiple: false,
    onSelect: onSelectMedia,
    allowedTypes: ALLOWED_MEDIA_TYPES,
    render: ({
      open
    }) => (0, _element.createElement)(_components.Button, {
      onClick: event => {
        // Safari doesn't emit a focus event on button elements when
        // clicked and we need to manually focus the button here.
        // The reason is that core's Media Library modal explicitly triggers a
        // focus event and therefore a `blur` event is triggered on a different
        // element, which doesn't contain the `data-unstable-ignore-focus-outside-for-relatedtarget`
        // attribute making the Inserter dialog to close.
        event.target.focus();
        open();
      },
      className: "block-editor-inserter__media-library-button",
      variant: "secondary",
      "data-unstable-ignore-focus-outside-for-relatedtarget": ".media-modal"
    }, (0, _i18n.__)('Open Media Library'))
  })))))), isMobile && (0, _element.createElement)(_mobileTabNavigation.default, {
    categories: mobileMediaCategories
  }, category => (0, _element.createElement)(_mediaPanel.MediaCategoryPanel, {
    onInsert: onInsert,
    rootClientId: rootClientId,
    category: category
  })));
}

var _default = MediaTab;
exports.default = _default;
//# sourceMappingURL=media-tab.js.map