@wordpress/block-library/build/embed/embed-preview.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 _lodash = require("lodash");

var _dedupe = _interopRequireDefault(require("classnames/dedupe"));

var _primitives = require("@wordpress/primitives");

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

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

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

var _data = require("@wordpress/data");

var _util = require("./util");

var _embedNoPreview = _interopRequireDefault(require("./embed-no-preview"));

var _wpEmbedPreview = _interopRequireDefault(require("./wp-embed-preview"));

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

/**
 * External dependencies
 */

/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */
const EmbedPreview = _ref => {
  let {
    align,
    className,
    clientId,
    icon,
    insertBlocksAfter,
    isSelected,
    label,
    onFocus,
    preview,
    previewable,
    isProviderPreviewable,
    type,
    url,
    isDefaultEmbedInfo
  } = _ref;
  const [isCaptionSelected, setIsCaptionSelected] = (0, _element.useState)(false);
  const {
    locale
  } = (0, _data.useSelect)(_blockEditor.store).getSettings();
  const wrapperStyle = _styles.default['embed-preview__wrapper'];
  const wrapperAlignStyle = _styles.default[`embed-preview__wrapper--align-${align}`];
  const sandboxAlignStyle = _styles.default[`embed-preview__sandbox--align-${align}`];

  function accessibilityLabelCreator(caption) {
    return (0, _lodash.isEmpty)(caption) ?
    /* translators: accessibility text. Empty Embed caption. */
    (0, _i18n.__)('Embed caption. Empty') : (0, _i18n.sprintf)(
    /* translators: accessibility text. %s: Embed caption. */
    (0, _i18n.__)('Embed caption. %s'), caption);
  }

  function onEmbedPreviewPress() {
    setIsCaptionSelected(false);
  }

  function onFocusCaption() {
    if (onFocus) {
      onFocus();
    }

    if (!isCaptionSelected) {
      setIsCaptionSelected(true);
    }
  }

  const {
    provider_url: providerUrl
  } = preview;
  const html = 'photo' === type ? (0, _util.getPhotoHtml)(preview) : preview.html;
  const parsedHost = new URL(url).host.split('.');
  const parsedHostBaseUrl = parsedHost.splice(parsedHost.length - 2, parsedHost.length - 1).join('.');
  const iframeTitle = (0, _i18n.sprintf)( // translators: %s: host providing embed content e.g: www.youtube.com
  (0, _i18n.__)('Embedded content from %s'), parsedHostBaseUrl);
  const sandboxClassnames = (0, _dedupe.default)(type, className, 'wp-block-embed__wrapper');
  const PreviewContent = 'wp-embed' === type ? _wpEmbedPreview.default : _components.SandBox;
  const embedWrapper = (0, _element.createElement)(_element.Fragment, null, (0, _element.createElement)(_reactNative.TouchableWithoutFeedback, {
    onPress: () => {
      if (onFocus) {
        onFocus();
      }

      if (isCaptionSelected) {
        setIsCaptionSelected(false);
      }
    }
  }, (0, _element.createElement)(_primitives.View, {
    pointerEvents: "box-only",
    style: [wrapperStyle, wrapperAlignStyle]
  }, (0, _element.createElement)(PreviewContent, {
    html: html,
    lang: locale,
    title: iframeTitle,
    type: sandboxClassnames,
    providerUrl: providerUrl,
    url: url,
    containerStyle: sandboxAlignStyle
  }))));
  return (0, _element.createElement)(_reactNative.TouchableWithoutFeedback, {
    accessible: !isSelected,
    onPress: onEmbedPreviewPress,
    disabled: !isSelected
  }, (0, _element.createElement)(_primitives.View, null, isProviderPreviewable && previewable ? embedWrapper : (0, _element.createElement)(_embedNoPreview.default, {
    label: label,
    icon: icon,
    isSelected: isSelected,
    onPress: () => setIsCaptionSelected(false),
    previewable: previewable,
    isDefaultEmbedInfo: isDefaultEmbedInfo
  }), (0, _element.createElement)(_blockEditor.BlockCaption, {
    accessibilityLabelCreator: accessibilityLabelCreator,
    accessible: true,
    clientId: clientId,
    insertBlocksAfter: insertBlocksAfter,
    isSelected: isCaptionSelected,
    onFocus: onFocusCaption
  })));
};

var _default = (0, _element.memo)(EmbedPreview);

exports.default = _default;
//# sourceMappingURL=embed-preview.native.js.map