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

Generic block editor.

import { createElement, Fragment } from "@gechiui/element";

/**
 * External dependencies
 */
import { noop } from 'lodash';
import classnames from 'classnames';
/**
 * GeChiUI dependencies
 */

import { Button, FormFileUpload, Placeholder, DropZone, withFilters } from '@gechiui/components';
import { __ } from '@gechiui/i18n';
import { useState, useEffect } from '@gechiui/element';
import { useSelect } from '@gechiui/data';
import deprecated from '@gechiui/deprecated';
import { keyboardReturn } from '@gechiui/icons';
/**
 * Internal dependencies
 */

import MediaUpload from '../media-upload';
import MediaUploadCheck from '../media-upload/check';
import URLPopover from '../url-popover';
import { store as blockEditorStore } from '../../store';

const InsertFromURLPopover = _ref => {
  let {
    src,
    onChange,
    onSubmit,
    onClose
  } = _ref;
  return createElement(URLPopover, {
    onClose: onClose
  }, createElement("form", {
    className: "block-editor-media-placeholder__url-input-form",
    onSubmit: onSubmit
  }, createElement("input", {
    className: "block-editor-media-placeholder__url-input-field",
    type: "text",
    "aria-label": __('URL'),
    placeholder: __('粘贴或键入URL'),
    onChange: onChange,
    value: src
  }), createElement(Button, {
    className: "block-editor-media-placeholder__url-input-submit-button",
    icon: keyboardReturn,
    label: __('应用'),
    type: "submit"
  })));
};

export 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 = noop,
    onHTMLDrop = noop,
    children,
    mediaLibraryButton,
    placeholder,
    style
  } = _ref2;
  const mediaUpload = useSelect(select => {
    const {
      getSettings
    } = select(blockEditorStore);
    return getSettings().mediaUpload;
  }, []);
  const [src, setSrc] = useState('');
  const [isURLInputVisible, setIsURLInputVisible] = useState(false);
  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 = __('要编辑此区块，您需要有上传媒体的权限。');
    }

    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 = __('上传媒体文件，或从您的媒体库中选择。');

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

      if (title === undefined) {
        title = __('媒体');

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

    const placeholderClassName = classnames('block-editor-media-placeholder', className, {
      'is-appender': isAppender
    });
    return createElement(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 createElement(DropZone, {
      onFilesDrop: onFilesUpload,
      onHTMLDrop: onHTMLDrop
    });
  };

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

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

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

    const libraryButton = mediaLibraryButton !== null && mediaLibraryButton !== void 0 ? mediaLibraryButton : defaultButton;
    const uploadMediaLibraryButton = createElement(MediaUpload, {
      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 createElement(Fragment, null, renderDropZone(), createElement(FormFileUpload, {
        onChange: onUpload,
        accept: accept,
        multiple: multiple,
        render: _ref8 => {
          let {
            openFileDialog
          } = _ref8;
          const content = createElement(Fragment, null, createElement(Button, {
            variant: "primary",
            className: classnames('block-editor-media-placeholder__button', 'block-editor-media-placeholder__upload-button'),
            onClick: openFileDialog
          }, __('上传')), uploadMediaLibraryButton, renderUrlSelectionUI(), renderCancelLink());
          return renderPlaceholder(content);
        }
      }));
    }

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

    return renderPlaceholder(uploadMediaLibraryButton);
  };

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

    return createElement(MediaUploadCheck, null, renderDropZone());
  }

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

export default withFilters('editor.MediaPlaceholder')(MediaPlaceholder);
//# sourceMappingURL=index.js.map