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

Generic block editor.

import { createElement, Fragment } from "@wordpress/element";

/**
 * External dependencies
 */
import classNames from 'classnames';
/**
 * WordPress dependencies
 */

import { __ } from '@wordpress/i18n';
import { useViewportMatch } from '@wordpress/compose';
import { __experimentalItemGroup as ItemGroup, __experimentalItem as Item, __experimentalHStack as HStack, FlexBlock, Button } from '@wordpress/components';
import { useCallback, useMemo } from '@wordpress/element';
import { Icon, chevronRight } from '@wordpress/icons';
/**
 * Internal dependencies
 */

import { MediaCategoryPanel } from './media-panel';
import MediaUploadCheck from '../../media-upload/check';
import MediaUpload from '../../media-upload';
import { useMediaCategories } from './hooks';
import { getBlockAndPreviewFromMedia } from './utils';
import MobileTabNavigation from '../mobile-tab-navigation';
const ALLOWED_MEDIA_TYPES = ['image', 'video', 'audio'];

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

    const [block] = getBlockAndPreviewFromMedia(media, media.type);
    onInsert(block);
  }, [onInsert]);
  const mobileMediaCategories = useMemo(() => mediaCategories.map(mediaCategory => ({ ...mediaCategory,
    label: mediaCategory.labels.name
  })), [mediaCategories]);
  return createElement(Fragment, null, !isMobile && createElement("div", {
    className: `${baseCssClass}-container`
  }, createElement("nav", {
    "aria-label": __('Media categories')
  }, createElement(ItemGroup, {
    role: "list",
    className: baseCssClass
  }, mediaCategories.map(mediaCategory => createElement(Item, {
    role: "listitem",
    key: mediaCategory.name,
    onClick: () => onSelectCategory(mediaCategory),
    className: classNames(`${baseCssClass}__media-category`, {
      'is-selected': selectedCategory === mediaCategory
    }),
    "aria-label": mediaCategory.labels.name,
    "aria-current": mediaCategory === selectedCategory ? 'true' : undefined
  }, createElement(HStack, null, createElement(FlexBlock, null, mediaCategory.labels.name), createElement(Icon, {
    icon: chevronRight
  })))), createElement("div", {
    role: "listitem"
  }, createElement(MediaUploadCheck, null, createElement(MediaUpload, {
    multiple: false,
    onSelect: onSelectMedia,
    allowedTypes: ALLOWED_MEDIA_TYPES,
    render: ({
      open
    }) => createElement(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"
    }, __('Open Media Library'))
  })))))), isMobile && createElement(MobileTabNavigation, {
    categories: mobileMediaCategories
  }, category => createElement(MediaCategoryPanel, {
    onInsert: onInsert,
    rootClientId: rootClientId,
    category: category
  })));
}

export default MediaTab;
//# sourceMappingURL=media-tab.js.map