@wordpress/block-editor/build/components/media-placeholder/index.native.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 _reactNative = require("react-native");

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

var _blockEditor = require("@wordpress/block-editor");

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

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

var _styles = _interopRequireDefault(require("./styles.scss"));

/**
 * External dependencies
 */

/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */
const isMediaEqual = (media1, media2) => media1.id === media2.id || media1.url === media2.url; // Remove duplicates after gallery append.


const dedupMedia = media => media.reduce((dedupedMedia, mediaItem) => dedupedMedia.some(item => isMediaEqual(item, mediaItem)) ? dedupedMedia : [...dedupedMedia, mediaItem], []);

function MediaPlaceholder(props) {
  const {
    addToGallery,
    allowedTypes = [],
    labels = {},
    icon,
    onSelect,
    onFocus,
    __experimentalOnlyMediaLibrary,
    isAppender,
    disableMediaButtons,
    getStylesFromColorScheme,
    multiple,
    value = [],
    children,
    height,
    backgroundColor,
    hideContent,
    autoOpenMediaUpload,
    onSelectURL
  } = props; // Use ref to keep media array current for callbacks during rerenders.

  const mediaRef = (0, _element.useRef)(value);
  mediaRef.current = value; // Append and deduplicate media array for gallery use case.

  const setMedia = multiple && addToGallery ? selected => onSelect(dedupMedia([...mediaRef.current, ...selected])) : onSelect;
  const isOneType = allowedTypes.length === 1;
  const isImage = isOneType && allowedTypes.includes(_blockEditor.MEDIA_TYPE_IMAGE);
  const isVideo = isOneType && allowedTypes.includes(_blockEditor.MEDIA_TYPE_VIDEO);
  const isAudio = isOneType && allowedTypes.includes(_blockEditor.MEDIA_TYPE_AUDIO);
  let placeholderTitle = labels.title;

  if (placeholderTitle === undefined) {
    placeholderTitle = (0, _i18n.__)('Media');

    if (isImage) {
      placeholderTitle = (0, _i18n.__)('Image');
    } else if (isVideo) {
      placeholderTitle = (0, _i18n.__)('Video');
    } else if (isAudio) {
      placeholderTitle = (0, _i18n.__)('Audio');
    }
  }

  let instructions = labels.instructions;

  if (instructions === undefined) {
    if (isImage) {
      instructions = (0, _i18n.__)('ADD IMAGE');
    } else if (isVideo) {
      instructions = (0, _i18n.__)('ADD VIDEO');
    } else if (isAudio) {
      instructions = (0, _i18n.__)('ADD AUDIO');
    } else {
      instructions = (0, _i18n.__)('ADD IMAGE OR VIDEO');
    }
  }

  let accessibilityHint = (0, _i18n.__)('Double tap to select');

  if (isImage) {
    accessibilityHint = (0, _i18n.__)('Double tap to select an image');
  } else if (isVideo) {
    accessibilityHint = (0, _i18n.__)('Double tap to select a video');
  } else if (isAudio) {
    accessibilityHint = (0, _i18n.__)('Double tap to select an audio file');
  }

  const emptyStateTitleStyle = getStylesFromColorScheme(_styles.default.emptyStateTitle, _styles.default.emptyStateTitleDark);
  const addMediaButtonStyle = getStylesFromColorScheme(_styles.default.addMediaButton, _styles.default.addMediaButtonDark);

  const renderContent = () => {
    if (isAppender === undefined || !isAppender) {
      return (0, _element.createElement)(_element.Fragment, null, (0, _element.createElement)(_reactNative.View, {
        style: _styles.default.modalIcon
      }, icon), (0, _element.createElement)(_reactNative.Text, {
        style: emptyStateTitleStyle
      }, placeholderTitle), children, (0, _element.createElement)(_reactNative.Text, {
        style: _styles.default.emptyStateDescription
      }, instructions));
    } else if (isAppender && !disableMediaButtons) {
      return (0, _element.createElement)(_reactNative.View, {
        testID: "media-placeholder-appender-icon"
      }, (0, _element.createElement)(_icons.Icon, {
        icon: _icons.plusCircleFilled,
        style: addMediaButtonStyle,
        color: addMediaButtonStyle.color,
        size: addMediaButtonStyle.size
      }));
    }
  };

  if (isAppender && disableMediaButtons) {
    return null;
  }

  const appenderStyle = getStylesFromColorScheme(_styles.default.appender, _styles.default.appenderDark);
  const emptyStateContainerStyle = getStylesFromColorScheme(_styles.default.emptyStateContainer, _styles.default.emptyStateContainerDark);
  return (0, _element.createElement)(_reactNative.View, {
    style: {
      flex: 1
    }
  }, (0, _element.createElement)(_blockEditor.MediaUpload, {
    allowedTypes: allowedTypes,
    onSelect: setMedia,
    onSelectURL: onSelectURL,
    __experimentalOnlyMediaLibrary: __experimentalOnlyMediaLibrary,
    multiple: multiple,
    isReplacingMedia: false,
    autoOpen: autoOpenMediaUpload,
    render: ({
      open,
      getMediaOptions
    }) => {
      return (0, _element.createElement)(_reactNative.TouchableWithoutFeedback, {
        accessibilityLabel: (0, _i18n.sprintf)(
        /* translators: accessibility text for the media block empty state. %s: media type */
        (0, _i18n.__)('%s block. Empty'), placeholderTitle),
        accessibilityRole: 'button',
        accessibilityHint: accessibilityHint,
        onPress: event => {
          onFocus?.(event);
          open();
        }
      }, (0, _element.createElement)(_reactNative.View, {
        style: [[emptyStateContainerStyle, height && {
          height
        }, backgroundColor && {
          backgroundColor
        }], isAppender && appenderStyle]
      }, getMediaOptions(), !hideContent && renderContent()));
    }
  }));
}

var _default = (0, _compose.withPreferredColorScheme)(MediaPlaceholder);

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