@gechiui/block-editor/build/components/media-placeholder/index.js

Generic block editor.

"use strict";

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

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

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

var _lodash = require("lodash");

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

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

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

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

var _deprecated = _interopRequireDefault(require("@gechiui/deprecated"));

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

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

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

var _urlPopover = _interopRequireDefault(require("../url-popover"));

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

/**
 * External dependencies
 */

/**
 * GeChiUI dependencies
 */

/**
 * Internal dependencies
 */
const InsertFromURLPopover = _ref => {
  let {
    src,
    onChange,
    onSubmit,
    onClose
  } = _ref;
  return (0, _element.createElement)(_urlPopover.default, {
    onClose: onClose
  }, (0, _element.createElement)("form", {
    className: "block-editor-media-placeholder__url-input-form",
    onSubmit: onSubmit
  }, (0, _element.createElement)("input", {
    className: "block-editor-media-placeholder__url-input-field",
    type: "text",
    "aria-label": (0, _i18n.__)('URL'),
    placeholder: (0, _i18n.__)('粘贴或键入URL'),
    onChange: onChange,
    value: src
  }), (0, _element.createElement)(_components.Button, {
    className: "block-editor-media-placeholder__url-input-submit-button",
    icon: _icons.keyboardReturn,
    label: (0, _i18n.__)('应用'),
    type: "submit"
  })));
};

function MediaPlaceholder(_ref2) {
  let {
    value = {},
    allowedTypes,
    className,
    icon,
    labels = {},
    mediaPreview,
    notices,
    isAppender,
    accept,
    addToGallery,
    multiple = false,
    handleUpload = true,
    dropZoneUIOnly,
    disableDropZone,
    disableMediaButtons,
    onError,
    onSelect,
    onCancel,
    onSelectURL,
    onDoubleClick,
    onFilesPreUpload = _lodash.noop,
    onHTMLDrop = _lodash.noop,
    children,
    mediaLibraryButton,
    placeholder,
    style
  } = _ref2;
  const mediaUpload = (0, _data.useSelect)(select => {
    const {
      getSettings
    } = select(_store.store);
    return getSettings().mediaUpload;
  }, []);
  const [src, setSrc] = (0, _element.useState)('');
  const [isURLInputVisible, setIsURLInputVisible] = (0, _element.useState)(false);
  (0, _element.useEffect)(() => {
    var _value$src;

    setSrc((_value$src = value === null || value === void 0 ? void 0 : value.src) !== null && _value$src !== void 0 ? _value$src : '');
  }, [value === null || value === void 0 ? void 0 : value.src]);

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

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

  const onChangeSrc = event => {
    setSrc(event.target.value);
  };

  const openURLInput = () => {
    setIsURLInputVisible(true);
  };

  const closeURLInput = () => {
    setIsURLInputVisible(false);
  };

  const onSubmitSrc = event => {
    event.preventDefault();

    if (src && onSelectURL) {
      onSelectURL(src);
      closeURLInput();
    }
  };

  const onFilesUpload = files => {
    if (!handleUpload) {
      return onSelect(files);
    }

    onFilesPreUpload(files);
    let setMedia;

    if (multiple) {
      if (addToGallery) {
        // Since the setMedia function runs multiple times per upload group
        // and is passed newMedia containing every item in its group each time, we must
        // filter out whatever this upload group had previously returned to the
        // gallery before adding and returning the image array with replacement newMedia
        // values.
        // Define an array to store urls from newMedia between subsequent function calls.
        let lastMediaPassed = [];

        setMedia = newMedia => {
          // Remove any images this upload group is responsible for (lastMediaPassed).
          // Their replacements are contained in newMedia.
          const filteredMedia = (value !== null && value !== void 0 ? value : []).filter(item => {
            // If Item has id, only remove it if lastMediaPassed has an item with that id.
            if (item.id) {
              return !lastMediaPassed.some( // Be sure to convert to number for comparison.
              _ref3 => {
                let {
                  id
                } = _ref3;
                return Number(id) === Number(item.id);
              });
            } // Compare transient images via .includes since gallery may append extra info onto the url.


            return !lastMediaPassed.some(_ref4 => {
              let {
                urlSlug
              } = _ref4;
              return item.url.includes(urlSlug);
            });
          }); // Return the filtered media array along with newMedia.

          onSelect(filteredMedia.concat(newMedia)); // Reset lastMediaPassed and set it with ids and urls from newMedia.

          lastMediaPassed = newMedia.map(media => {
            // Add everything up to '.fileType' to compare via .includes.
            const cutOffIndex = media.url.lastIndexOf('.');
            const urlSlug = media.url.slice(0, cutOffIndex);
            return {
              id: media.id,
              urlSlug
            };
          });
        };
      } else {
        setMedia = onSelect;
      }
    } else {
      setMedia = _ref5 => {
        let [media] = _ref5;
        return onSelect(media);
      };
    }

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

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

  const defaultRenderPlaceholder = content => {
    let {
      instructions,
      title
    } = labels;

    if (!mediaUpload && !onSelectURL) {
      instructions = (0, _i18n.__)('要编辑此区块，您需要有上传媒体的权限。');
    }

    if (instructions === undefined || title === undefined) {
      const typesAllowed = allowedTypes !== null && allowedTypes !== void 0 ? allowedTypes : [];
      const [firstAllowedType] = typesAllowed;
      const isOneType = 1 === typesAllowed.length;
      const isAudio = isOneType && 'audio' === firstAllowedType;
      const isImage = isOneType && 'image' === firstAllowedType;
      const isVideo = isOneType && 'video' === firstAllowedType;

      if (instructions === undefined && mediaUpload) {
        instructions = (0, _i18n.__)('上传媒体文件，或从您的媒体库中选择。');

        if (isAudio) {
          instructions = (0, _i18n.__)('上传音频文件，从您的媒体库中选择，或通过URL添加。');
        } else if (isImage) {
          instructions = (0, _i18n.__)('上传图片，或从您的媒体库中选择，或通过URL添加。');
        } else if (isVideo) {
          instructions = (0, _i18n.__)('上传视频文件，从您的媒体库中选择，或通过URL添加。');
        }
      }

      if (title === undefined) {
        title = (0, _i18n.__)('媒体');

        if (isAudio) {
          title = (0, _i18n.__)('音频');
        } else if (isImage) {
          title = (0, _i18n.__)('图片');
        } else if (isVideo) {
          title = (0, _i18n.__)('视频');
        }
      }
    }

    const placeholderClassName = (0, _classnames.default)('block-editor-media-placeholder', className, {
      'is-appender': isAppender
    });
    return (0, _element.createElement)(_components.Placeholder, {
      icon: icon,
      label: title,
      instructions: instructions,
      className: placeholderClassName,
      notices: notices,
      onDoubleClick: onDoubleClick,
      preview: mediaPreview,
      style: style
    }, content, children);
  };

  const renderPlaceholder = placeholder !== null && placeholder !== void 0 ? placeholder : defaultRenderPlaceholder;

  const renderDropZone = () => {
    if (disableDropZone) {
      return null;
    }

    return (0, _element.createElement)(_components.DropZone, {
      onFilesDrop: onFilesUpload,
      onHTMLDrop: onHTMLDrop
    });
  };

  const renderCancelLink = () => {
    return onCancel && (0, _element.createElement)(_components.Button, {
      className: "block-editor-media-placeholder__cancel-button",
      title: (0, _i18n.__)('取消'),
      variant: "link",
      onClick: onCancel
    }, (0, _i18n.__)('取消'));
  };

  const renderUrlSelectionUI = () => {
    return onSelectURL && (0, _element.createElement)("div", {
      className: "block-editor-media-placeholder__url-input-container"
    }, (0, _element.createElement)(_components.Button, {
      className: "block-editor-media-placeholder__button",
      onClick: openURLInput,
      isPressed: isURLInputVisible,
      variant: "tertiary"
    }, (0, _i18n.__)('从URL插入')), isURLInputVisible && (0, _element.createElement)(InsertFromURLPopover, {
      src: src,
      onChange: onChangeSrc,
      onSubmit: onSubmitSrc,
      onClose: closeURLInput
    }));
  };

  const renderMediaUploadChecked = () => {
    const defaultButton = _ref6 => {
      let {
        open
      } = _ref6;
      return (0, _element.createElement)(_components.Button, {
        variant: "tertiary",
        onClick: () => {
          open();
        }
      }, (0, _i18n.__)('媒体库'));
    };

    const libraryButton = mediaLibraryButton !== null && mediaLibraryButton !== void 0 ? mediaLibraryButton : defaultButton;
    const uploadMediaLibraryButton = (0, _element.createElement)(_mediaUpload.default, {
      addToGallery: addToGallery,
      gallery: multiple && onlyAllowsImages(),
      multiple: multiple,
      onSelect: onSelect,
      allowedTypes: allowedTypes,
      value: Array.isArray(value) ? value.map(_ref7 => {
        let {
          id
        } = _ref7;
        return id;
      }) : value.id,
      render: libraryButton
    });

    if (mediaUpload && isAppender) {
      return (0, _element.createElement)(_element.Fragment, null, renderDropZone(), (0, _element.createElement)(_components.FormFileUpload, {
        onChange: onUpload,
        accept: accept,
        multiple: multiple,
        render: _ref8 => {
          let {
            openFileDialog
          } = _ref8;
          const content = (0, _element.createElement)(_element.Fragment, null, (0, _element.createElement)(_components.Button, {
            variant: "primary",
            className: (0, _classnames.default)('block-editor-media-placeholder__button', 'block-editor-media-placeholder__upload-button'),
            onClick: openFileDialog
          }, (0, _i18n.__)('上传')), uploadMediaLibraryButton, renderUrlSelectionUI(), renderCancelLink());
          return renderPlaceholder(content);
        }
      }));
    }

    if (mediaUpload) {
      const content = (0, _element.createElement)(_element.Fragment, null, renderDropZone(), (0, _element.createElement)(_components.FormFileUpload, {
        variant: "primary",
        className: (0, _classnames.default)('block-editor-media-placeholder__button', 'block-editor-media-placeholder__upload-button'),
        onChange: onUpload,
        accept: accept,
        multiple: multiple
      }, (0, _i18n.__)('上传')), uploadMediaLibraryButton, renderUrlSelectionUI(), renderCancelLink());
      return renderPlaceholder(content);
    }

    return renderPlaceholder(uploadMediaLibraryButton);
  };

  if (dropZoneUIOnly || disableMediaButtons) {
    if (dropZoneUIOnly) {
      (0, _deprecated.default)('gc.blockEditor.MediaPlaceholder dropZoneUIOnly prop', {
        since: '5.4',
        alternative: 'disableMediaButtons'
      });
    }

    return (0, _element.createElement)(_check.default, null, renderDropZone());
  }

  return (0, _element.createElement)(_check.default, {
    fallback: renderPlaceholder(renderUrlSelectionUI())
  }, renderMediaUploadChecked());
}
/**
 * @see https://github.com/GeChiUI/gutenberg/blob/HEAD/packages/block-editor/src/components/media-placeholder/README.md
 */


var _default = (0, _components.withFilters)('editor.MediaPlaceholder')(MediaPlaceholder);

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