@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 _lodash = require("lodash");

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 _compose = require("@wordpress/compose");

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

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 MediaReplaceFlow = ({
  mediaURL,
  mediaId,
  allowedTypes,
  accept,
  onSelect,
  onSelectURL,
  onFilesUpload = _lodash.noop,
  name = (0, _i18n.__)('Replace'),
  createNotice,
  removeNotice
}) => {
  const [mediaURLValue, setMediaURLValue] = (0, _element.useState)(mediaURL);
  const mediaUpload = (0, _data.useSelect)(select => {
    return select(_store.store).getSettings().mediaUpload;
  }, []);
  const editMediaButtonRef = (0, _element.createRef)();
  const errorNoticeID = (0, _lodash.uniqueId)('block-editor/media-replace-flow/error-notice/');

  const onError = message => {
    const errorElement = document.createElement('div');
    errorElement.innerHTML = (0, _element.renderToString)(message); // The default error contains some HTML that,
    // for example, makes the filename bold.
    // The notice, by default, accepts strings only and so
    // we need to remove the html from the error.

    const renderMsg = errorElement.textContent || errorElement.innerText || ''; // 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', renderMsg, {
        speak: true,
        id: errorNoticeID,
        isDismissible: true
      });
    }, 1000);
  };

  const selectMedia = media => {
    onSelect(media);
    setMediaURLValue(media.url);
    (0, _a11y.speak)((0, _i18n.__)('The media file has been replaced'));
    removeNotice(errorNoticeID);
  };

  const selectURL = newURL => {
    onSelectURL(newURL);
  };

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

    const setMedia = ([media]) => {
      selectMedia(media);
    };

    mediaUpload({
      allowedTypes,
      filesList: files,
      onFileChange: setMedia,
      onError
    });
  };

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

  const POPOVER_PROPS = {
    isAlternate: true
  };
  return (0, _element.createElement)(_components.Dropdown, {
    popoverProps: POPOVER_PROPS,
    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)(_mediaUpload.default, {
      value: mediaId,
      onSelect: media => selectMedia(media),
      allowedTypes: allowedTypes,
      render: ({
        open
      }) => (0, _element.createElement)(_components.MenuItem, {
        icon: _icons.media,
        onClick: open
      }, (0, _i18n.__)('Open Media Library'))
    }), (0, _element.createElement)(_check.default, null, (0, _element.createElement)(_components.FormFileUpload, {
      onChange: event => {
        uploadFiles(event, onClose);
      },
      accept: accept,
      render: ({
        openFileDialog
      }) => {
        return (0, _element.createElement)(_components.MenuItem, {
          icon: _icons.upload,
          onClick: () => {
            openFileDialog();
          }
        }, (0, _i18n.__)('Upload'));
      }
    }))), onSelectURL && // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
    (0, _element.createElement)("form", {
      className: "block-editor-media-flow__url-input",
      onKeyDown: event => {
        if (![_keycodes.TAB, _keycodes.ESCAPE].includes(event.keyCode)) {
          event.stopPropagation();
        }
      },
      onKeyPress: event => {
        if (![_keycodes.TAB, _keycodes.ESCAPE].includes(event.keyCode)) {
          event.stopPropagation();
        }
      }
    }, (0, _element.createElement)("span", {
      className: "block-editor-media-replace-flow__image-url-label"
    }, (0, _i18n.__)('Current media URL:')), (0, _element.createElement)(_linkControl.default, {
      value: {
        url: mediaURLValue
      },
      settings: [],
      showSuggestions: false,
      onChange: ({
        url
      }) => {
        setMediaURLValue(url);
        selectURL(url);
        editMediaButtonRef.current.focus();
      }
    })))
  });
};

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