@gechiui/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("@gechiui/element");

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

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

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

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

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

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

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

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

/**
 * External dependencies
 */

/**
 * GeChiUI dependencies
 */

/**
 * Internal dependencies
 */
function LinkPreview(_ref) {
  var _value$url;

  let {
    value,
    onEditClick,
    hasRichPreviews = false,
    hasUnlinkControl = false,
    onRemove
  } = _ref;
  // Avoid fetching if rich previews are not desired.
  const showRichPreviews = hasRichPreviews ? value === null || value === void 0 ? void 0 : 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 === null || richData === void 0 ? void 0 : richData.title) || (value === null || value === void 0 ? void 0 : value.title) || displayURL; // url can be undefined if the href attribute is unset

  const isEmptyURL = !(value !== null && value !== void 0 && (_value$url = value.url) !== null && _value$url !== void 0 && _value$url.length);
  let icon;

  if (richData !== null && richData !== void 0 && richData.icon) {
    icon = (0, _element.createElement)("img", {
      src: richData === null || richData === void 0 ? void 0 : 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.__)('当前选择'),
    "aria-selected": "true",
    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 === null || richData === void 0 ? void 0 : 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 === null || value === void 0 ? void 0 : 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"
  }, "Link is empty"))), (0, _element.createElement)(_components.Button, {
    icon: _icons.edit,
    label: (0, _i18n.__)('编辑'),
    className: "block-editor-link-control__search-item-action",
    onClick: onEditClick,
    iconSize: 24
  }), hasUnlinkControl && (0, _element.createElement)(_components.Button, {
    icon: _icons.linkOff,
    label: (0, _i18n.__)('移除链接'),
    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 === null || richData === void 0 ? void 0 : richData.image) || (richData === null || richData === void 0 ? void 0 : richData.description)) || isFetching) && (0, _element.createElement)("div", {
    className: "block-editor-link-control__search-item-bottom"
  }, ((richData === null || richData === void 0 ? void 0 : richData.image) || isFetching) && (0, _element.createElement)("div", {
    "aria-hidden": !(richData !== null && richData !== void 0 && richData.image),
    className: (0, _classnames.default)('block-editor-link-control__search-item-image', {
      'is-placeholder': !(richData !== null && richData !== void 0 && richData.image)
    })
  }, (richData === null || richData === void 0 ? void 0 : richData.image) && (0, _element.createElement)("img", {
    src: richData === null || richData === void 0 ? void 0 : richData.image,
    alt: ""
  })), ((richData === null || richData === void 0 ? void 0 : richData.description) || isFetching) && (0, _element.createElement)("div", {
    "aria-hidden": !(richData !== null && richData !== void 0 && richData.description),
    className: (0, _classnames.default)('block-editor-link-control__search-item-description', {
      'is-placeholder': !(richData !== null && richData !== void 0 && richData.description)
    })
  }, (richData === null || richData === void 0 ? void 0 : richData.description) && (0, _element.createElement)(_components.__experimentalText, {
    truncate: true,
    numberOfLines: "2"
  }, richData.description))));
}
//# sourceMappingURL=link-preview.js.map