@gechiui/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("@gechiui/element");

var _lodash = require("lodash");

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

var _a11y = require("@gechiui/a11y");

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

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

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

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

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

var _notices = require("@gechiui/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
 */

/**
 * GeChiUI dependencies
 */

/**
 * Internal dependencies
 */
const MediaReplaceFlow = _ref => {
  let {
    mediaURL,
    mediaId,
    allowedTypes,
    accept,
    onSelect,
    onSelectURL,
    onFilesUpload = _lodash.noop,
    name = (0, _i18n.__)('替换'),
    createNotice,
    removeNotice,
    children
  } = _ref;
  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 => {
    setMediaURLValue(media.url); // Calling `onSelect` after the state update since it might unmount the component.

    onSelect(media);
    (0, _a11y.speak)((0, _i18n.__)('此媒体文件已被替换'));
    removeNotice(errorNoticeID);
  };

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

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

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

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

  const openOnArrowDown = event => {
    if (event.keyCode === _keycodes.DOWN) {
      event.preventDefault();
      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: _ref3 => {
      let {
        isOpen,
        onToggle
      } = _ref3;
      return (0, _element.createElement)(_components.ToolbarButton, {
        ref: editMediaButtonRef,
        "aria-expanded": isOpen,
        "aria-haspopup": "true",
        onClick: onToggle,
        onKeyDown: openOnArrowDown
      }, name);
    },
    renderContent: _ref4 => {
      let {
        onClose
      } = _ref4;
      return (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: _ref5 => {
          let {
            open
          } = _ref5;
          return (0, _element.createElement)(_components.MenuItem, {
            icon: _icons.media,
            onClick: open
          }, (0, _i18n.__)('打开媒体库'));
        }
      }), (0, _element.createElement)(_check.default, null, (0, _element.createElement)(_components.FormFileUpload, {
        onChange: event => {
          uploadFiles(event, onClose);
        },
        accept: accept,
        render: _ref6 => {
          let {
            openFileDialog
          } = _ref6;
          return (0, _element.createElement)(_components.MenuItem, {
            icon: _icons.upload,
            onClick: () => {
              openFileDialog();
            }
          }, (0, _i18n.__)('上传'));
        }
      })), children), onSelectURL && // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
      (0, _element.createElement)("form", {
        className: "block-editor-media-flow__url-input"
      }, (0, _element.createElement)("span", {
        className: "block-editor-media-replace-flow__image-url-label"
      }, (0, _i18n.__)('当前媒体网址：')), (0, _element.createElement)(_linkControl.default, {
        value: {
          url: mediaURLValue
        },
        settings: [],
        showSuggestions: false,
        onChange: _ref7 => {
          let {
            url
          } = _ref7;
          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