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

Block library for the WordPress editor.

"use strict";

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

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
exports.imageFillStyles = imageFillStyles;

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

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

var _classnames = _interopRequireDefault(require("classnames"));

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

var _blockEditor = require("@wordpress/block-editor");

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

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

var _data = require("@wordpress/data");

var _blob = require("@wordpress/blob");

var _notices = require("@wordpress/notices");

var _mediaContainerIcon = _interopRequireDefault(require("./media-container-icon"));

/**
 * External dependencies
 */

/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */

/**
 * Constants
 */
const ALLOWED_MEDIA_TYPES = ['image', 'video'];

const noop = () => {};

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 = (0, _element.forwardRef)((_ref, ref) => {
  let {
    isSelected,
    isStackedOnMobile,
    ...props
  } = _ref;
  const isMobile = (0, _compose.useViewportMatch)('small', '<');
  return (0, _element.createElement)(_components.ResizableBox, (0, _extends2.default)({
    ref: ref,
    showHandle: isSelected && (!isMobile || !isStackedOnMobile)
  }, props));
});

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

function PlaceholderContainer(_ref3) {
  let {
    className,
    mediaUrl,
    onSelectMedia
  } = _ref3;
  const {
    createErrorNotice
  } = (0, _data.useDispatch)(_notices.store);

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

  return (0, _element.createElement)(_blockEditor.MediaPlaceholder, {
    icon: (0, _element.createElement)(_blockEditor.BlockIcon, {
      icon: _mediaContainerIcon.default
    }),
    labels: {
      title: (0, _i18n.__)('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 && (0, _blob.isBlobURL)(mediaUrl);
  const {
    toggleSelection
  } = (0, _data.useDispatch)(_blockEditor.store);

  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: () => (0, _element.createElement)("img", {
        src: mediaUrl,
        alt: mediaAlt
      }),
      video: () => (0, _element.createElement)("video", {
        controls: true,
        src: mediaUrl
      })
    };
    return (0, _element.createElement)(ResizableBoxContainer, {
      as: "figure",
      className: (0, _classnames.default)(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
    }, (0, _element.createElement)(ToolbarEditButton, {
      onSelectMedia: onSelectMedia,
      mediaUrl: mediaUrl,
      mediaId: mediaId
    }), (mediaTypeRenderers[mediaType] || noop)(), isTemporaryMedia && (0, _element.createElement)(_components.Spinner, null), (0, _element.createElement)(PlaceholderContainer, props));
  }

  return (0, _element.createElement)(PlaceholderContainer, props);
}

var _default = (0, _element.forwardRef)(MediaContainer);

exports.default = _default;
//# sourceMappingURL=media-container.js.map