@wordpress/block-editor/build/components/link-control/link-preview.js

Generic block editor.

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = LinkPreview;

var _element = require("@wordpress/element");

var _classnames = _interopRequireDefault(require("classnames"));

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

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

var _url = require("@wordpress/url");

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

var _dom = require("@wordpress/dom");

var _viewerSlot = require("./viewer-slot");

var _useRichUrlData = _interopRequireDefault(require("./use-rich-url-data"));

/**
 * External dependencies
 */

/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */
function LinkPreview({
  value,
  onEditClick,
  hasRichPreviews = false,
  hasUnlinkControl = false,
  onRemove
}) {
  // Avoid fetching if rich previews are not desired.
  const showRichPreviews = hasRichPreviews ? value?.url : null;
  const {
    richData,
    isFetching
  } = (0, _useRichUrlData.default)(showRichPreviews); // Rich data may be an empty object so test for that.

  const hasRichData = richData && Object.keys(richData).length;
  const displayURL = value && (0, _url.filterURLForDisplay)((0, _url.safeDecodeURI)(value.url), 16) || '';
  const displayTitle = richData?.title || value?.title || displayURL; // url can be undefined if the href attribute is unset

  const isEmptyURL = !value?.url?.length;
  let icon;

  if (richData?.icon) {
    icon = (0, _element.createElement)("img", {
      src: richData?.icon,
      alt: ""
    });
  } else if (isEmptyURL) {
    icon = (0, _element.createElement)(_icons.Icon, {
      icon: _icons.info,
      size: 32
    });
  } else {
    icon = (0, _element.createElement)(_icons.Icon, {
      icon: _icons.globe
    });
  }

  return (0, _element.createElement)("div", {
    "aria-label": (0, _i18n.__)('Currently selected'),
    className: (0, _classnames.default)('block-editor-link-control__search-item', {
      'is-current': true,
      'is-rich': hasRichData,
      'is-fetching': !!isFetching,
      'is-preview': true,
      'is-error': isEmptyURL
    })
  }, (0, _element.createElement)("div", {
    className: "block-editor-link-control__search-item-top"
  }, (0, _element.createElement)("span", {
    className: "block-editor-link-control__search-item-header"
  }, (0, _element.createElement)("span", {
    className: (0, _classnames.default)('block-editor-link-control__search-item-icon', {
      'is-image': richData?.icon
    })
  }, icon), (0, _element.createElement)("span", {
    className: "block-editor-link-control__search-item-details"
  }, !isEmptyURL ? (0, _element.createElement)(_element.Fragment, null, (0, _element.createElement)(_components.ExternalLink, {
    className: "block-editor-link-control__search-item-title",
    href: value.url
  }, (0, _dom.__unstableStripHTML)(displayTitle)), value?.url && (0, _element.createElement)("span", {
    className: "block-editor-link-control__search-item-info"
  }, displayURL)) : (0, _element.createElement)("span", {
    className: "block-editor-link-control__search-item-error-notice"
  }, (0, _i18n.__)('Link is empty')))), (0, _element.createElement)(_components.Button, {
    icon: _icons.edit,
    label: (0, _i18n.__)('Edit'),
    className: "block-editor-link-control__search-item-action",
    onClick: onEditClick,
    iconSize: 24
  }), hasUnlinkControl && (0, _element.createElement)(_components.Button, {
    icon: _icons.linkOff,
    label: (0, _i18n.__)('Unlink'),
    className: "block-editor-link-control__search-item-action block-editor-link-control__unlink",
    onClick: onRemove,
    iconSize: 24
  }), (0, _element.createElement)(_viewerSlot.ViewerSlot, {
    fillProps: value
  })), !!(hasRichData && (richData?.image || richData?.description) || isFetching) && (0, _element.createElement)("div", {
    className: "block-editor-link-control__search-item-bottom"
  }, (richData?.image || isFetching) && (0, _element.createElement)("div", {
    "aria-hidden": !richData?.image,
    className: (0, _classnames.default)('block-editor-link-control__search-item-image', {
      'is-placeholder': !richData?.image
    })
  }, richData?.image && (0, _element.createElement)("img", {
    src: richData?.image,
    alt: ""
  })), (richData?.description || isFetching) && (0, _element.createElement)("div", {
    "aria-hidden": !richData?.description,
    className: (0, _classnames.default)('block-editor-link-control__search-item-description', {
      'is-placeholder': !richData?.description
    })
  }, richData?.description && (0, _element.createElement)(_components.__experimentalText, {
    truncate: true,
    numberOfLines: "2"
  }, richData.description))));
}
//# sourceMappingURL=link-preview.js.map