@wordpress/block-editor/build/components/media-replace-flow/index.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 _a11y = require("@wordpress/a11y");

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

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

var _keycodes = require("@wordpress/keycodes");

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

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

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

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

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

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

var _linkControl = _interopRequireDefault(require("../link-control"));

var _store = require("../../store");

/**
 * External dependencies
 */

/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */
const noop = () => {};

let uniqueId = 0;

const MediaReplaceFlow = ({
  mediaURL,
  mediaId,
  mediaIds,
  allowedTypes,
  accept,
  onError,
  onSelect,
  onSelectURL,
  onToggleFeaturedImage,
  useFeaturedImage,
  onFilesUpload = noop,
  name = (0, _i18n.__)('Replace'),
  createNotice,
  removeNotice,
  children,
  multiple = false,
  addToGallery,
  handleUpload = true,
  popoverProps = {
    variant: 'toolbar'
  }
}) => {
  const mediaUpload = (0, _data.useSelect)(select => {
    return select(_store.store).getSettings().mediaUpload;
  }, []);
  const canUpload = !!mediaUpload;
  const editMediaButtonRef = (0, _element.useRef)();
  const errorNoticeID = `block-editor/media-replace-flow/error-notice/${++uniqueId}`;

  const onUploadError = message => {
    const safeMessage = (0, _dom.__unstableStripHTML)(message);

    if (onError) {
      onError(safeMessage);
      return;
    } // We need to set a timeout for showing the notice
    // so that VoiceOver and possibly other screen readers
    // can announce the error afer the toolbar button
    // regains focus once the upload dialog closes.
    // Otherwise VO simply skips over the notice and announces
    // the focused element and the open menu.


    setTimeout(() => {
      createNotice('error', safeMessage, {
        speak: true,
        id: errorNoticeID,
        isDismissible: true
      });
    }, 1000);
  };

  const selectMedia = (media, closeMenu) => {
    if (useFeaturedImage && onToggleFeaturedImage) {
      onToggleFeaturedImage();
    }

    closeMenu(); // Calling `onSelect` after the state update since it might unmount the component.

    onSelect(media);
    (0, _a11y.speak)((0, _i18n.__)('The media file has been replaced'));
    removeNotice(errorNoticeID);
  };

  const uploadFiles = (event, closeMenu) => {
    const files = event.target.files;

    if (!handleUpload) {
      closeMenu();
      return onSelect(files);
    }

    onFilesUpload(files);
    mediaUpload({
      allowedTypes,
      filesList: files,
      onFileChange: ([media]) => {
        selectMedia(media, closeMenu);
      },
      onError: onUploadError
    });
  };

  const openOnArrowDown = event => {
    if (event.keyCode === _keycodes.DOWN) {
      event.preventDefault();
      event.target.click();
    }
  };

  const onlyAllowsImages = () => {
    if (!allowedTypes || allowedTypes.length === 0) {
      return false;
    }

    return allowedTypes.every(allowedType => allowedType === 'image' || allowedType.startsWith('image/'));
  };

  const gallery = multiple && onlyAllowsImages();
  return (0, _element.createElement)(_components.Dropdown, {
    popoverProps: popoverProps,
    contentClassName: "block-editor-media-replace-flow__options",
    renderToggle: ({
      isOpen,
      onToggle
    }) => (0, _element.createElement)(_components.ToolbarButton, {
      ref: editMediaButtonRef,
      "aria-expanded": isOpen,
      "aria-haspopup": "true",
      onClick: onToggle,
      onKeyDown: openOnArrowDown
    }, name),
    renderContent: ({
      onClose
    }) => (0, _element.createElement)(_element.Fragment, null, (0, _element.createElement)(_components.NavigableMenu, {
      className: "block-editor-media-replace-flow__media-upload-menu"
    }, (0, _element.createElement)(_check.default, null, (0, _element.createElement)(_mediaUpload.default, {
      gallery: gallery,
      addToGallery: addToGallery,
      multiple: multiple,
      value: multiple ? mediaIds : mediaId,
      onSelect: media => selectMedia(media, onClose),
      allowedTypes: allowedTypes,
      render: ({
        open
      }) => (0, _element.createElement)(_components.MenuItem, {
        icon: _icons.media,
        onClick: open
      }, (0, _i18n.__)('Open Media Library'))
    }), (0, _element.createElement)(_components.FormFileUpload, {
      onChange: event => {
        uploadFiles(event, onClose);
      },
      accept: accept,
      multiple: multiple,
      render: ({
        openFileDialog
      }) => {
        return (0, _element.createElement)(_components.MenuItem, {
          icon: _icons.upload,
          onClick: () => {
            openFileDialog();
          }
        }, (0, _i18n.__)('Upload'));
      }
    })), onToggleFeaturedImage && (0, _element.createElement)(_components.MenuItem, {
      icon: _icons.postFeaturedImage,
      onClick: onToggleFeaturedImage,
      isPressed: useFeaturedImage
    }, (0, _i18n.__)('Use featured image')), children), onSelectURL && // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
    (0, _element.createElement)("form", {
      className: (0, _classnames.default)('block-editor-media-flow__url-input', {
        'has-siblings': canUpload || onToggleFeaturedImage
      })
    }, (0, _element.createElement)("span", {
      className: "block-editor-media-replace-flow__image-url-label"
    }, (0, _i18n.__)('Current media URL:')), (0, _element.createElement)(_components.Tooltip, {
      text: mediaURL,
      position: "bottom"
    }, (0, _element.createElement)("div", null, (0, _element.createElement)(_linkControl.default, {
      value: {
        url: mediaURL
      },
      settings: [],
      showSuggestions: false,
      onChange: ({
        url
      }) => {
        onSelectURL(url);
        editMediaButtonRef.current.focus();
      }
    })))))
  });
};
/**
 * @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/media-replace-flow/README.md
 */


var _default = (0, _compose.compose)([(0, _data.withDispatch)(dispatch => {
  const {
    createNotice,
    removeNotice
  } = dispatch(_notices.store);
  return {
    createNotice,
    removeNotice
  };
}), (0, _components.withFilters)('editor.MediaReplaceFlow')])(MediaReplaceFlow);

exports.default = _default;
//# sourceMappingURL=index.js.map