@wordpress/block-library/build-module/media-text/media-container.js

Block library for the WordPress editor.

import _extends from "@babel/runtime/helpers/esm/extends";
import { createElement } from "@wordpress/element";

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

import { ResizableBox, Spinner } from '@wordpress/components';
import { BlockControls, BlockIcon, MediaPlaceholder, MediaReplaceFlow, store as blockEditorStore } from '@wordpress/block-editor';
import { __ } from '@wordpress/i18n';
import { useViewportMatch } from '@wordpress/compose';
import { useDispatch } from '@wordpress/data';
import { forwardRef } from '@wordpress/element';
import { isBlobURL } from '@wordpress/blob';
import { store as noticesStore } from '@wordpress/notices';
/**
 * Internal dependencies
 */

import icon from './media-container-icon';
/**
 * Constants
 */

const ALLOWED_MEDIA_TYPES = ['image', 'video'];

const noop = () => {};

export function imageFillStyles(url, focalPoint) {
  return url ? {
    backgroundImage: `url(${url})`,
    backgroundPosition: focalPoint ? `${Math.round(focalPoint.x * 100)}% ${Math.round(focalPoint.y * 100)}%` : `50% 50%`
  } : {};
}
const ResizableBoxContainer = forwardRef((_ref, ref) => {
  let {
    isSelected,
    isStackedOnMobile,
    ...props
  } = _ref;
  const isMobile = useViewportMatch('small', '<');
  return createElement(ResizableBox, _extends({
    ref: ref,
    showHandle: isSelected && (!isMobile || !isStackedOnMobile)
  }, props));
});

function ToolbarEditButton(_ref2) {
  let {
    mediaId,
    mediaUrl,
    onSelectMedia
  } = _ref2;
  return createElement(BlockControls, {
    group: "other"
  }, createElement(MediaReplaceFlow, {
    mediaId: mediaId,
    mediaURL: mediaUrl,
    allowedTypes: ALLOWED_MEDIA_TYPES,
    accept: "image/*,video/*",
    onSelect: onSelectMedia
  }));
}

function PlaceholderContainer(_ref3) {
  let {
    className,
    mediaUrl,
    onSelectMedia
  } = _ref3;
  const {
    createErrorNotice
  } = useDispatch(noticesStore);

  const onUploadError = message => {
    createErrorNotice(message, {
      type: 'snackbar'
    });
  };

  return createElement(MediaPlaceholder, {
    icon: createElement(BlockIcon, {
      icon: icon
    }),
    labels: {
      title: __('Media area')
    },
    className: className,
    onSelect: onSelectMedia,
    accept: "image/*,video/*",
    allowedTypes: ALLOWED_MEDIA_TYPES,
    onError: onUploadError,
    disableMediaButtons: mediaUrl
  });
}

function MediaContainer(props, ref) {
  const {
    className,
    commitWidthChange,
    focalPoint,
    imageFill,
    isSelected,
    isStackedOnMobile,
    mediaAlt,
    mediaId,
    mediaPosition,
    mediaType,
    mediaUrl,
    mediaWidth,
    onSelectMedia,
    onWidthChange,
    isContentLocked
  } = props;
  const isTemporaryMedia = !mediaId && isBlobURL(mediaUrl);
  const {
    toggleSelection
  } = useDispatch(blockEditorStore);

  if (mediaUrl) {
    const onResizeStart = () => {
      toggleSelection(false);
    };

    const onResize = (event, direction, elt) => {
      onWidthChange(parseInt(elt.style.width));
    };

    const onResizeStop = (event, direction, elt) => {
      toggleSelection(true);
      commitWidthChange(parseInt(elt.style.width));
    };

    const enablePositions = {
      right: !isContentLocked && mediaPosition === 'left',
      left: !isContentLocked && mediaPosition === 'right'
    };
    const backgroundStyles = mediaType === 'image' && imageFill ? imageFillStyles(mediaUrl, focalPoint) : {};
    const mediaTypeRenderers = {
      image: () => createElement("img", {
        src: mediaUrl,
        alt: mediaAlt
      }),
      video: () => createElement("video", {
        controls: true,
        src: mediaUrl
      })
    };
    return createElement(ResizableBoxContainer, {
      as: "figure",
      className: classnames(className, 'editor-media-container__resizer', {
        'is-transient': isTemporaryMedia
      }),
      style: backgroundStyles,
      size: {
        width: mediaWidth + '%'
      },
      minWidth: "10%",
      maxWidth: "100%",
      enable: enablePositions,
      onResizeStart: onResizeStart,
      onResize: onResize,
      onResizeStop: onResizeStop,
      axis: "x",
      isSelected: isSelected,
      isStackedOnMobile: isStackedOnMobile,
      ref: ref
    }, createElement(ToolbarEditButton, {
      onSelectMedia: onSelectMedia,
      mediaUrl: mediaUrl,
      mediaId: mediaId
    }), (mediaTypeRenderers[mediaType] || noop)(), isTemporaryMedia && createElement(Spinner, null), createElement(PlaceholderContainer, props));
  }

  return createElement(PlaceholderContainer, props);
}

export default forwardRef(MediaContainer);
//# sourceMappingURL=media-container.js.map