@atlaskit/media-card 77.2.3 → 77.4.0

package/dist/cjs/card/v2/externalImageCard.js

@@ -0,0 +1,299 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ExternalImageCard = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _mediaClient = require("@atlaskit/media-client");
+var _mediaCommon = require("@atlaskit/media-common");
+var _mediaViewer = require("@atlaskit/media-viewer");
+var _react = _interopRequireWildcard(require("react"));
+var _reactDom = _interopRequireDefault(require("react-dom"));
+var _errors = require("../../errors");
+var _document = _interopRequireDefault(require("../../utils/document"));
+var _generateUniqueId = require("../../utils/generateUniqueId");
+var _getMediaCardCursor = require("../../utils/getMediaCardCursor");
+var _ufoExperiences = require("../../utils/ufoExperiences");
+var _useCurrentValueRef = require("../../utils/useCurrentValueRef");
+var _usePrevious = require("../../utils/usePrevious");
+var _cardAnalytics = require("../cardAnalytics");
+var _cardViewV = require("./cardViewV2");
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var ExternalImageCard = exports.ExternalImageCard = function ExternalImageCard(_ref) {
+  var mediaClient = _ref.mediaClient,
+    _ref$appearance = _ref.appearance,
+    appearance = _ref$appearance === void 0 ? 'auto' : _ref$appearance,
+    _ref$resizeMode = _ref.resizeMode,
+    resizeMode = _ref$resizeMode === void 0 ? 'crop' : _ref$resizeMode,
+    _ref$disableOverlay = _ref.disableOverlay,
+    disableOverlay = _ref$disableOverlay === void 0 ? false : _ref$disableOverlay,
+    _ref$featureFlags = _ref.featureFlags,
+    featureFlags = _ref$featureFlags === void 0 ? {} : _ref$featureFlags,
+    identifier = _ref.identifier,
+    dimensions = _ref.dimensions,
+    contextId = _ref.contextId,
+    alt = _ref.alt,
+    actions = _ref.actions,
+    shouldOpenMediaViewer = _ref.shouldOpenMediaViewer,
+    selectable = _ref.selectable,
+    selected = _ref.selected,
+    testId = _ref.testId,
+    titleBoxBgColor = _ref.titleBoxBgColor,
+    titleBoxIcon = _ref.titleBoxIcon,
+    shouldHideTooltip = _ref.shouldHideTooltip,
+    mediaViewerItems = _ref.mediaViewerItems,
+    _onClick = _ref.onClick,
+    _onMouseEnter = _ref.onMouseEnter,
+    createAnalyticsEvent = _ref.createAnalyticsEvent;
+  var internalOccurrenceKey = (0, _react.useMemo)(function () {
+    return (0, _generateUniqueId.generateUniqueId)();
+  }, []);
+  var timeElapsedTillCommenced = (0, _react.useMemo)(function () {
+    return performance.now();
+  }, []);
+
+  // Generate unique traceId for file
+  var traceContext = (0, _react.useMemo)(function () {
+    return {
+      traceId: (0, _mediaCommon.getRandomHex)(8)
+    };
+  }, []);
+  var _useState = (0, _react.useState)(null),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    cardElement = _useState2[0],
+    setCardElement = _useState2[1];
+  var fileStateFlagsRef = (0, _react.useRef)({
+    wasStatusUploading: false,
+    wasStatusProcessing: false
+  });
+  var fireCommencedEventRef = (0, _useCurrentValueRef.useCurrentValueRef)(function () {
+    createAnalyticsEvent && (0, _cardAnalytics.fireCommencedEvent)(createAnalyticsEvent, fileAttributes, {
+      overall: {
+        durationSincePageStart: timeElapsedTillCommenced
+      }
+    }, traceContext);
+    (0, _ufoExperiences.startUfoExperience)(internalOccurrenceKey);
+  });
+  var _useState3 = (0, _react.useState)('loading-preview'),
+    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+    status = _useState4[0],
+    setStatus = _useState4[1];
+  (0, _react.useEffect)(function () {
+    fireCommencedEventRef.current();
+    setStatus('loading-preview');
+  }, [fireCommencedEventRef, identifier]);
+  var cardPreview = (0, _react.useMemo)(function () {
+    return {
+      dataURI: identifier.dataURI,
+      orientation: 1,
+      source: 'external'
+    };
+  }, [identifier.dataURI]);
+  var metadata = {
+    id: identifier.mediaItemType,
+    name: identifier.name || identifier.dataURI,
+    mediaType: 'image'
+  };
+  var fileAttributes = {
+    fileMediatype: 'image',
+    fileId: metadata.id
+  };
+
+  // for analytics
+  var ssrReliability = {
+    server: {
+      status: 'unknown'
+    },
+    client: {
+      status: 'unknown'
+    }
+  };
+  var _useState5 = (0, _react.useState)(false),
+    _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+    previewDidRender = _useState6[0],
+    setPreviewDidRender = _useState6[1];
+  var _useState7 = (0, _react.useState)(),
+    _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
+    error = _useState8[0],
+    setError = _useState8[1];
+  var _useState9 = (0, _react.useState)(null),
+    _useState10 = (0, _slicedToArray2.default)(_useState9, 2),
+    mediaViewerSelectedItem = _useState10[0],
+    setMediaViewerSelectedItem = _useState10[1];
+
+  //----------------------------------------------------------------//
+  //---------------------- Analytics  ------------------------------//
+  //----------------------------------------------------------------//
+
+  var fireOperationalEventRef = (0, _useCurrentValueRef.useCurrentValueRef)(function () {
+    var timeElapsedTillEvent = performance.now();
+    var durationSinceCommenced = timeElapsedTillEvent - timeElapsedTillCommenced;
+    var performanceAttributes = {
+      overall: {
+        durationSincePageStart: timeElapsedTillEvent,
+        durationSinceCommenced: durationSinceCommenced
+      }
+    };
+    createAnalyticsEvent && (0, _cardAnalytics.fireOperationalEvent)(createAnalyticsEvent, status, fileAttributes, performanceAttributes, ssrReliability, error, traceContext, undefined);
+    (0, _ufoExperiences.completeUfoExperience)(internalOccurrenceKey, status, fileAttributes, fileStateFlagsRef.current, ssrReliability, error);
+  });
+  var fireScreenEventRef = (0, _useCurrentValueRef.useCurrentValueRef)(function () {
+    createAnalyticsEvent && (0, _cardAnalytics.fireScreenEvent)(createAnalyticsEvent, fileAttributes);
+  });
+  var fireAbortedEventRef = (0, _useCurrentValueRef.useCurrentValueRef)(function () {
+    // UFO won't abort if it's already in a final state (succeeded, failed, aborted, etc)
+    (0, _ufoExperiences.abortUfoExperience)(internalOccurrenceKey, {
+      fileAttributes: fileAttributes,
+      fileStateFlags: fileStateFlagsRef === null || fileStateFlagsRef === void 0 ? void 0 : fileStateFlagsRef.current,
+      ssrReliability: ssrReliability
+    });
+  });
+
+  //----------------------------------------------------------------//
+  //------------------------ useEffects ----------------------------//
+  //----------------------------------------------------------------//
+
+  (0, _react.useEffect)(function () {
+    var _getDocument;
+    var fireCopiedCardEvent = function fireCopiedCardEvent() {
+      cardElement && createAnalyticsEvent && (0, _cardAnalytics.fireCopiedEvent)(createAnalyticsEvent, metadata.id, cardElement);
+    };
+
+    // we add a listener for each of the cards on the page
+    // and then check if the triggered listener is from the card
+    // that contains a div in current window.getSelection()
+    // won't work in IE11
+    (_getDocument = (0, _document.default)()) === null || _getDocument === void 0 || _getDocument.addEventListener('copy', fireCopiedCardEvent);
+    return function () {
+      var _getDocument2;
+      (_getDocument2 = (0, _document.default)()) === null || _getDocument2 === void 0 || _getDocument2.removeEventListener('copy', fireCopiedCardEvent);
+    };
+  }, [cardElement, createAnalyticsEvent, metadata.id]);
+  var prevStatus = (0, _usePrevious.usePrevious)(status);
+  (0, _react.useEffect)(function () {
+    if (prevStatus !== undefined && status !== prevStatus) {
+      fireOperationalEventRef.current();
+    }
+  }, [fireOperationalEventRef, prevStatus, status]);
+  (0, _react.useEffect)(function () {
+    if (previewDidRender && status === 'loading-preview') {
+      setStatus('complete');
+    }
+  }, [previewDidRender, status]);
+  (0, _react.useEffect)(function () {
+    if (prevStatus !== undefined && status !== prevStatus) {
+      if (status === 'complete') {
+        fireScreenEventRef.current();
+      }
+    }
+  }, [fireScreenEventRef, prevStatus, status]);
+  (0, _react.useEffect)(function () {
+    return function () {
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+      fireAbortedEventRef.current();
+    };
+  }, [fireAbortedEventRef]);
+
+  //----------------------------------------------------------------//
+  //---------------------- Render Functions ------------------------//
+  //----------------------------------------------------------------//
+
+  var renderMediaViewer = function renderMediaViewer() {
+    if (!mediaViewerSelectedItem) {
+      return;
+    }
+    return /*#__PURE__*/_reactDom.default.createPortal( /*#__PURE__*/_react.default.createElement(_mediaViewer.MediaViewer, {
+      collectionName: '',
+      items: mediaViewerItems || [],
+      mediaClientConfig: mediaClient.config,
+      selectedItem: mediaViewerSelectedItem,
+      onClose: function onClose() {
+        setMediaViewerSelectedItem(null);
+      },
+      contextId: contextId,
+      featureFlags: featureFlags
+    }), document.body);
+  };
+
+  //----------------------------------------------------------------//
+  //-------------------------- RENDER ------------------------------//
+  //----------------------------------------------------------------//
+
+  var mediaCardCursor = (0, _getMediaCardCursor.getMediaCardCursor)(false, !!shouldOpenMediaViewer, status === 'error', !!cardPreview, metadata.mediaType);
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_cardViewV.CardViewV2, {
+    status: status,
+    error: error,
+    mediaItemType: identifier.mediaItemType,
+    metadata: metadata,
+    cardPreview: cardPreview,
+    alt: alt,
+    appearance: appearance,
+    resizeMode: resizeMode,
+    dimensions: dimensions,
+    actions: actions,
+    selectable: selectable,
+    selected: selected,
+    onClick: function onClick(event, analyticsEvent) {
+      if (_onClick) {
+        var cardEvent = {
+          event: event,
+          mediaItemDetails: metadata
+        };
+        _onClick(cardEvent, analyticsEvent);
+      }
+      if (shouldOpenMediaViewer) {
+        setMediaViewerSelectedItem({
+          mediaItemType: 'external-image',
+          dataURI: identifier.dataURI,
+          name: identifier.name
+        });
+      }
+    },
+    onMouseEnter: function onMouseEnter(event) {
+      _onMouseEnter === null || _onMouseEnter === void 0 || _onMouseEnter({
+        event: event,
+        mediaItemDetails: metadata
+      });
+    },
+    disableOverlay: disableOverlay,
+    onDisplayImage: function onDisplayImage() {
+      var payloadPart = {
+        fileId: identifier.dataURI,
+        isUserCollection: false
+      };
+      _mediaClient.globalMediaEventEmitter.emit('media-viewed', _objectSpread({
+        viewingLevel: 'minimal'
+      }, payloadPart));
+    },
+    innerRef: setCardElement,
+    testId: testId,
+    featureFlags: featureFlags,
+    titleBoxBgColor: titleBoxBgColor,
+    titleBoxIcon: titleBoxIcon,
+    onImageError: function onImageError(newCardPreview) {
+      // If the dataURI has been replaced, we can dismiss this error
+      if ((newCardPreview === null || newCardPreview === void 0 ? void 0 : newCardPreview.dataURI) !== (cardPreview === null || cardPreview === void 0 ? void 0 : cardPreview.dataURI)) {
+        return;
+      }
+      var error = new _errors.ImageLoadError(newCardPreview === null || newCardPreview === void 0 ? void 0 : newCardPreview.source);
+      setStatus('error');
+      setError(error);
+    },
+    onImageLoad: function onImageLoad(newCardPreview) {
+      // If the dataURI has been replaced, we can dismiss this callback
+      if ((newCardPreview === null || newCardPreview === void 0 ? void 0 : newCardPreview.dataURI) !== (cardPreview === null || cardPreview === void 0 ? void 0 : cardPreview.dataURI)) {
+        return;
+      }
+      setPreviewDidRender(true);
+    },
+    mediaCardCursor: mediaCardCursor,
+    shouldHideTooltip: shouldHideTooltip
+  }), mediaViewerSelectedItem ? renderMediaViewer() : null);
+};