@wordpress/block-library/build-module/embed/embed-placeholder.native.js

Block library for the WordPress editor.

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

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

import { __ } from '@wordpress/i18n';
import { usePreferredColorSchemeStyle } from '@wordpress/compose';
import { Icon, Picker } from '@wordpress/components';
import { BlockIcon } from '@wordpress/block-editor';
import { useRef } from '@wordpress/element';
/**
 * Internal dependencies
 */

import styles from './styles.scss';
import { noticeOutline } from '../../../components/src/mobile/gridicons';

const EmbedPlaceholder = _ref => {
  let {
    icon,
    isSelected,
    label,
    onPress,
    cannotEmbed,
    fallback,
    tryAgain,
    openEmbedLinkSettings
  } = _ref;
  const containerStyle = usePreferredColorSchemeStyle(styles.embed__container, styles['embed__container--dark']);
  const labelStyle = usePreferredColorSchemeStyle(styles.embed__label, styles['embed__label--dark']);
  const descriptionStyle = styles.embed__description;
  const descriptionErrorStyle = styles['embed__description--error'];
  const actionStyle = usePreferredColorSchemeStyle(styles.embed__action, styles['embed__action--dark']);
  const embedIconErrorStyle = styles['embed__icon--error'];
  const cannotEmbedMenuPickerRef = useRef();
  const errorPickerOptions = {
    retry: {
      id: 'retryOption',
      label: __('Retry'),
      value: 'retryOption',
      onSelect: tryAgain
    },
    convertToLink: {
      id: 'convertToLinkOption',
      label: __('Convert to link'),
      value: 'convertToLinkOption',
      onSelect: fallback
    },
    editLink: {
      id: 'editLinkOption',
      label: __('Edit link'),
      value: 'editLinkOption',
      onSelect: openEmbedLinkSettings
    }
  };
  const options = [cannotEmbed && errorPickerOptions.retry, cannotEmbed && errorPickerOptions.convertToLink, cannotEmbed && errorPickerOptions.editLink].filter(Boolean);

  function onPickerSelect(value) {
    const selectedItem = options.find(item => item.value === value);
    selectedItem.onSelect();
  } // When the content cannot be embedded the onPress should trigger the Picker instead of the onPress prop.


  function resolveOnPressEvent() {
    if (cannotEmbed) {
      var _cannotEmbedMenuPicke;

      (_cannotEmbedMenuPicke = cannotEmbedMenuPickerRef.current) === null || _cannotEmbedMenuPicke === void 0 ? void 0 : _cannotEmbedMenuPicke.presentPicker();
    } else {
      onPress();
    }
  }

  return createElement(Fragment, null, createElement(TouchableWithoutFeedback, {
    accessibilityRole: 'button',
    accessibilityHint: cannotEmbed ? __('Double tap to view embed options.') : __('Double tap to add a link.'),
    onPress: resolveOnPressEvent,
    disabled: !isSelected
  }, createElement(View, {
    style: containerStyle
  }, cannotEmbed ? createElement(Fragment, null, createElement(Icon, {
    icon: noticeOutline,
    fill: embedIconErrorStyle.fill,
    style: embedIconErrorStyle
  }), createElement(Text, {
    style: [descriptionStyle, descriptionErrorStyle]
  }, __('Unable to embed media')), createElement(Text, {
    style: actionStyle
  }, __('More options')), createElement(Picker, {
    title: __('Embed options'),
    ref: cannotEmbedMenuPickerRef,
    options: options,
    onChange: onPickerSelect,
    hideCancelButton: true,
    leftAlign: true
  })) : createElement(Fragment, null, createElement(BlockIcon, {
    icon: icon
  }), createElement(Text, {
    style: labelStyle
  }, label), createElement(Text, {
    style: actionStyle
  }, __('ADD LINK'))))));
};

export default EmbedPlaceholder;
//# sourceMappingURL=embed-placeholder.native.js.map