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

Generic block editor.

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

/**
 * External dependencies
 */
import { View, Text, TouchableWithoutFeedback } from 'react-native';
/**
 * WordPress dependencies
 */

import { __, sprintf } from '@wordpress/i18n';
import { MediaUpload, MEDIA_TYPE_IMAGE, MEDIA_TYPE_VIDEO, MEDIA_TYPE_AUDIO } from '@wordpress/block-editor';
import { withPreferredColorScheme } from '@wordpress/compose';
import { useRef } from '@wordpress/element';
import { Icon, plusCircleFilled } from '@wordpress/icons';
/**
 * Internal dependencies
 */

import styles from './styles.scss';

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 = 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(MEDIA_TYPE_IMAGE);
  const isVideo = isOneType && allowedTypes.includes(MEDIA_TYPE_VIDEO);
  const isAudio = isOneType && allowedTypes.includes(MEDIA_TYPE_AUDIO);
  let placeholderTitle = labels.title;

  if (placeholderTitle === undefined) {
    placeholderTitle = __('Media');

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

  let instructions = labels.instructions;

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

  let accessibilityHint = __('Double tap to select');

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

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

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

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

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

export default withPreferredColorScheme(MediaPlaceholder);
//# sourceMappingURL=index.native.js.map