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

Block library for the WordPress 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 _compose = require("@wordpress/compose");

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

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

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

var _gridicons = require("../../../components/src/mobile/gridicons");

/**
 * External dependencies
 */

/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */
const EmbedPlaceholder = _ref => {
  let {
    icon,
    isSelected,
    label,
    onPress,
    cannotEmbed,
    fallback,
    tryAgain,
    openEmbedLinkSettings
  } = _ref;
  const containerStyle = (0, _compose.usePreferredColorSchemeStyle)(_styles.default.embed__container, _styles.default['embed__container--dark']);
  const labelStyle = (0, _compose.usePreferredColorSchemeStyle)(_styles.default.embed__label, _styles.default['embed__label--dark']);
  const descriptionStyle = _styles.default.embed__description;
  const descriptionErrorStyle = _styles.default['embed__description--error'];
  const actionStyle = (0, _compose.usePreferredColorSchemeStyle)(_styles.default.embed__action, _styles.default['embed__action--dark']);
  const embedIconErrorStyle = _styles.default['embed__icon--error'];
  const cannotEmbedMenuPickerRef = (0, _element.useRef)();
  const errorPickerOptions = {
    retry: {
      id: 'retryOption',
      label: (0, _i18n.__)('Retry'),
      value: 'retryOption',
      onSelect: tryAgain
    },
    convertToLink: {
      id: 'convertToLinkOption',
      label: (0, _i18n.__)('Convert to link'),
      value: 'convertToLinkOption',
      onSelect: fallback
    },
    editLink: {
      id: 'editLinkOption',
      label: (0, _i18n.__)('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 (0, _element.createElement)(_element.Fragment, null, (0, _element.createElement)(_reactNative.TouchableWithoutFeedback, {
    accessibilityRole: 'button',
    accessibilityHint: cannotEmbed ? (0, _i18n.__)('Double tap to view embed options.') : (0, _i18n.__)('Double tap to add a link.'),
    onPress: resolveOnPressEvent,
    disabled: !isSelected
  }, (0, _element.createElement)(_reactNative.View, {
    style: containerStyle
  }, cannotEmbed ? (0, _element.createElement)(_element.Fragment, null, (0, _element.createElement)(_components.Icon, {
    icon: _gridicons.noticeOutline,
    fill: embedIconErrorStyle.fill,
    style: embedIconErrorStyle
  }), (0, _element.createElement)(_reactNative.Text, {
    style: [descriptionStyle, descriptionErrorStyle]
  }, (0, _i18n.__)('Unable to embed media')), (0, _element.createElement)(_reactNative.Text, {
    style: actionStyle
  }, (0, _i18n.__)('More options')), (0, _element.createElement)(_components.Picker, {
    title: (0, _i18n.__)('Embed options'),
    ref: cannotEmbedMenuPickerRef,
    options: options,
    onChange: onPickerSelect,
    hideCancelButton: true,
    leftAlign: true
  })) : (0, _element.createElement)(_element.Fragment, null, (0, _element.createElement)(_blockEditor.BlockIcon, {
    icon: icon
  }), (0, _element.createElement)(_reactNative.Text, {
    style: labelStyle
  }, label), (0, _element.createElement)(_reactNative.Text, {
    style: actionStyle
  }, (0, _i18n.__)('ADD LINK'))))));
};

var _default = EmbedPlaceholder;
exports.default = _default;
//# sourceMappingURL=embed-placeholder.native.js.map