@atlaskit/media-card 74.5.1 → 74.6.0

package/dist/cjs/card/cardView.js

@@ -1,116 +1,66 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.CardViewBase = exports.CardView = void 0;
-
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-
 var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
-
 var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
-
 var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
-
 var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
-
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
 var _react = require("@emotion/react");
-
 var _react2 = _interopRequireDefault(require("react"));
-
 var _analyticsNext = require("@atlaskit/analytics-next");
-
 var _mediaCommon = require("@atlaskit/media-common");
-
 var _mimeTypeIcon = require("@atlaskit/media-ui/mime-type-icon");
-
 var _spinner = _interopRequireDefault(require("@atlaskit/spinner"));
-
 var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
-
 var _mediaUi = require("@atlaskit/media-ui");
-
 var _mediaClient = require("@atlaskit/media-client");
-
 var _cardImageView = require("./cardImageView");
-
 var _breakpoint = require("../utils/breakpoint");
-
 var _cardDimensions = require("../utils/cardDimensions");
-
 var _isValidPercentageUnit = require("../utils/isValidPercentageUnit");
-
 var _getCSSUnitValue = require("../utils/getCSSUnitValue");
-
 var _getElementDimension = require("../utils/getElementDimension");
-
 var _analytics = require("../utils/analytics");
-
 var _actions = require("./actions");
-
 var _getErrorMessage = require("../utils/getErrorMessage");
-
 var _styles = require("./ui/styles");
-
 var _imageRenderer = require("./ui/imageRenderer/imageRenderer");
-
 var _titleBox = require("./ui/titleBox/titleBox");
-
 var _failedTitleBox = require("./ui/titleBox/failedTitleBox");
-
 var _progressBar = require("./ui/progressBar/progressBar");
-
 var _playButton = require("./ui/playButton/playButton");
-
 var _tickBox = require("./ui/tickBox/tickBox");
-
 var _blanket = require("./ui/blanket/blanket");
-
 var _actionsBar = require("./ui/actionsBar/actionsBar");
-
 var _iconWrapper = require("./ui/iconWrapper/iconWrapper");
-
 var _iconMessage = require("./ui/iconMessage");
-
 var _errors = require("../errors");
-
 var _newFileExperienceWrapper = require("./ui/newFileExperience/newFileExperienceWrapper");
-
 var _cardViewWrapper = require("./cardImageView/cardViewWrapper");
-
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
-
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
-
 /**
  * This is classic vanilla CardView class. To create an instance of class one would need to supply
  * `createAnalyticsEvent` prop to satisfy it's Analytics Events needs.
  */
 var CardViewBase = /*#__PURE__*/function (_React$Component) {
   (0, _inherits2.default)(CardViewBase, _React$Component);
-
   var _super = _createSuper(CardViewBase);
-
   function CardViewBase() {
     var _this;
-
     (0, _classCallCheck2.default)(this, CardViewBase);
-
     for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
       args[_key] = arguments[_key];
     }
-
     _this = _super.call.apply(_super, [this].concat(args));
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "state", {
       didImageRender: false
@@ -118,12 +68,12 @@ var CardViewBase = /*#__PURE__*/function (_React$Component) {
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "divRef", /*#__PURE__*/_react2.default.createRef());
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onImageLoad", function (prevCardPreview) {
       var _this$props = _this.props,
-          onImageLoad = _this$props.onImageLoad,
-          cardPreview = _this$props.cardPreview;
-
+        onImageLoad = _this$props.onImageLoad,
+        cardPreview = _this$props.cardPreview;
       if (prevCardPreview.dataURI !== (cardPreview === null || cardPreview === void 0 ? void 0 : cardPreview.dataURI)) {
         return;
-      } // We render the icon & icon message always, even if there is cardPreview available.
+      }
+      // We render the icon & icon message always, even if there is cardPreview available.
       // If the image fails to load/render, the icon will remain, i.e. the user won't see a change until
       // the root card decides to chage status to error.
       // If the image renders successfully, we switch this variable to hide the icon & icon message
@@ -131,35 +81,26 @@ var CardViewBase = /*#__PURE__*/function (_React$Component) {
       // It is less likely that root component replaces a suceeded cardPreview for a failed one
       // than the opposite case. Therefore we prefer to hide the icon instead show when the image fails,
       // for a smoother transition
-
-
       _this.setState({
         didImageRender: true
       });
-
       onImageLoad && onImageLoad(cardPreview);
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onImageError", function (cardPreview) {
       var onImageError = _this.props.onImageError;
-
       _this.setState({
         didImageRender: false
       });
-
       onImageError && onImageError(cardPreview);
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "saveElementWidth", function () {
       var dimensions = _this.props.dimensions;
-
       if (!dimensions) {
         return;
       }
-
       var width = dimensions.width;
-
       if (width && (0, _isValidPercentageUnit.isValidPercentageUnit)(width) && !!_this.divRef.current) {
         var elementWidth = (0, _getElementDimension.getElementDimension)(_this.divRef.current, 'width');
-
         _this.setState({
           elementWidth: elementWidth
         });
@@ -167,26 +108,24 @@ var CardViewBase = /*#__PURE__*/function (_React$Component) {
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "renderFileNewExperience", function () {
       var _this$props2 = _this.props,
-          dimensions = _this$props2.dimensions,
-          appearance = _this$props2.appearance,
-          onClick = _this$props2.onClick,
-          onMouseEnter = _this$props2.onMouseEnter,
-          testId = _this$props2.testId,
-          metadata = _this$props2.metadata,
-          status = _this$props2.status,
-          selected = _this$props2.selected,
-          selectable = _this$props2.selectable,
-          disableOverlay = _this$props2.disableOverlay,
-          cardPreview = _this$props2.cardPreview,
-          mediaCardCursor = _this$props2.mediaCardCursor;
-
+        dimensions = _this$props2.dimensions,
+        appearance = _this$props2.appearance,
+        onClick = _this$props2.onClick,
+        onMouseEnter = _this$props2.onMouseEnter,
+        testId = _this$props2.testId,
+        metadata = _this$props2.metadata,
+        status = _this$props2.status,
+        selected = _this$props2.selected,
+        selectable = _this$props2.selectable,
+        disableOverlay = _this$props2.disableOverlay,
+        cardPreview = _this$props2.cardPreview,
+        mediaCardCursor = _this$props2.mediaCardCursor;
       var _ref = metadata || {},
-          name = _ref.name;
-
+        name = _ref.name;
       var shouldDisplayBackground = !cardPreview || !disableOverlay || status === 'error' || status === 'failed-processing';
       var isPlayButtonClickable = !!(_this.shouldRenderPlayButton() && disableOverlay);
-      var isTickBoxSelectable = !disableOverlay && !!selectable && !selected; // Disable tooltip for Media Single
-
+      var isTickBoxSelectable = !disableOverlay && !!selectable && !selected;
+      // Disable tooltip for Media Single
       var shouldDisplayTooltip = !disableOverlay;
       return (0, _react.jsx)(_newFileExperienceWrapper.NewFileExperienceWrapper, {
         testId: testId || 'media-card-view',
@@ -211,30 +150,27 @@ var CardViewBase = /*#__PURE__*/function (_React$Component) {
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "renderFile", function () {
       var _this$props3 = _this.props,
-          cardPreview = _this$props3.cardPreview,
-          status = _this$props3.status,
-          mediaItemType = _this$props3.mediaItemType,
-          metadata = _this$props3.metadata,
-          progress = _this$props3.progress,
-          resizeMode = _this$props3.resizeMode,
-          dimensions = _this$props3.dimensions,
-          selectable = _this$props3.selectable,
-          selected = _this$props3.selected,
-          disableOverlay = _this$props3.disableOverlay,
-          alt = _this$props3.alt,
-          onDisplayImage = _this$props3.onDisplayImage,
-          actions = _this$props3.actions;
-
+        cardPreview = _this$props3.cardPreview,
+        status = _this$props3.status,
+        mediaItemType = _this$props3.mediaItemType,
+        metadata = _this$props3.metadata,
+        progress = _this$props3.progress,
+        resizeMode = _this$props3.resizeMode,
+        dimensions = _this$props3.dimensions,
+        selectable = _this$props3.selectable,
+        selected = _this$props3.selected,
+        disableOverlay = _this$props3.disableOverlay,
+        alt = _this$props3.alt,
+        onDisplayImage = _this$props3.onDisplayImage,
+        actions = _this$props3.actions;
       var _ref2 = cardPreview || {},
-          dataURI = _ref2.dataURI,
-          orientation = _ref2.orientation;
-
+        dataURI = _ref2.dataURI,
+        orientation = _ref2.orientation;
       var _ref3 = metadata || {},
-          name = _ref3.name,
-          mediaType = _ref3.mediaType,
-          mimeType = _ref3.mimeType,
-          size = _ref3.size;
-
+        name = _ref3.name,
+        mediaType = _ref3.mediaType,
+        mimeType = _ref3.mimeType,
+        size = _ref3.size;
       var actionsWithDetails = metadata && actions ? (0, _actions.attachDetailsToActions)(actions, metadata) : [];
       var errorMessage = (0, _getErrorMessage.getErrorMessage)(status);
       var fileSize = !size ? '' : (0, _mediaUi.toHumanReadableMediaSize)(size);
@@ -264,18 +200,16 @@ var CardViewBase = /*#__PURE__*/function (_React$Component) {
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "getRenderConfigByStatus", function () {
       var _this$props4 = _this.props,
-          cardPreview = _this$props4.cardPreview,
-          status = _this$props4.status,
-          metadata = _this$props4.metadata,
-          disableOverlay = _this$props4.disableOverlay,
-          error = _this$props4.error,
-          selectable = _this$props4.selectable,
-          disableAnimation = _this$props4.disableAnimation;
-
+        cardPreview = _this$props4.cardPreview,
+        status = _this$props4.status,
+        metadata = _this$props4.metadata,
+        disableOverlay = _this$props4.disableOverlay,
+        error = _this$props4.error,
+        selectable = _this$props4.selectable,
+        disableAnimation = _this$props4.disableAnimation;
       var _ref4 = metadata || {},
-          name = _ref4.name,
-          mediaType = _ref4.mediaType;
-
+        name = _ref4.name,
+        mediaType = _ref4.mediaType;
       var didImageRender = _this.state.didImageRender;
       var isZeroSize = !!(metadata && metadata.size === 0);
       var defaultConfig = {
@@ -286,7 +220,6 @@ var CardViewBase = /*#__PURE__*/function (_React$Component) {
         renderTitleBox: !disableOverlay && !!name,
         renderTickBox: !disableOverlay && !!selectable
       };
-
       switch (status) {
         case 'uploading':
           return _objectSpread(_objectSpread({}, defaultConfig), {}, {
@@ -294,17 +227,14 @@ var CardViewBase = /*#__PURE__*/function (_React$Component) {
             isFixedBlanket: true,
             renderProgressBar: true
           });
-
         case 'processing':
           return _objectSpread(_objectSpread({}, defaultConfig), {}, {
             iconMessage: !didImageRender && !isZeroSize ? (0, _react.jsx)(_iconMessage.CreatingPreview, {
               disableAnimation: disableAnimation
             }) : undefined
           });
-
         case 'complete':
           return defaultConfig;
-
         case 'error':
         case 'failed-processing':
           var baseErrorConfig = _objectSpread(_objectSpread({}, defaultConfig), {}, {
@@ -313,13 +243,10 @@ var CardViewBase = /*#__PURE__*/function (_React$Component) {
             renderTitleBox: false,
             renderPlayButton: false
           });
-
           var iconMessage;
           var customTitleMessage;
-
           var _ref5 = error || {},
-              secondaryError = _ref5.secondaryError;
-
+            secondaryError = _ref5.secondaryError;
           if ((0, _mediaClient.isRateLimitedError)(secondaryError) || (0, _mediaClient.isPollingError)(secondaryError)) {
             iconMessage = (0, _react.jsx)(_iconMessage.PreviewCurrentlyUnavailable, null);
           } else if ((0, _errors.isUploadError)(error)) {
@@ -330,7 +257,6 @@ var CardViewBase = /*#__PURE__*/function (_React$Component) {
           } else {
             iconMessage = (0, _react.jsx)(_iconMessage.PreviewUnavailable, null);
           }
-
           if (!disableOverlay) {
             var renderFailedTitleBox = !name || !!customTitleMessage;
             return _objectSpread(_objectSpread({}, baseErrorConfig), {}, {
@@ -340,11 +266,9 @@ var CardViewBase = /*#__PURE__*/function (_React$Component) {
               customTitleMessage: customTitleMessage
             });
           }
-
           return _objectSpread(_objectSpread({}, baseErrorConfig), {}, {
             iconMessage: iconMessage
           });
-
         case 'loading-preview':
         case 'loading':
         default:
@@ -357,28 +281,25 @@ var CardViewBase = /*#__PURE__*/function (_React$Component) {
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "renderNewExperienceCard", function () {
       var _this$getRenderConfig = _this.getRenderConfigByStatus(),
-          renderTypeIcon = _this$getRenderConfig.renderTypeIcon,
-          iconMessage = _this$getRenderConfig.iconMessage,
-          renderImageRenderer = _this$getRenderConfig.renderImageRenderer,
-          renderSpinner = _this$getRenderConfig.renderSpinner,
-          renderPlayButton = _this$getRenderConfig.renderPlayButton,
-          renderBlanket = _this$getRenderConfig.renderBlanket,
-          renderProgressBar = _this$getRenderConfig.renderProgressBar,
-          renderTitleBox = _this$getRenderConfig.renderTitleBox,
-          renderFailedTitleBox = _this$getRenderConfig.renderFailedTitleBox,
-          renderTickBox = _this$getRenderConfig.renderTickBox,
-          isFixedBlanket = _this$getRenderConfig.isFixedBlanket,
-          customTitleMessage = _this$getRenderConfig.customTitleMessage;
-
+        renderTypeIcon = _this$getRenderConfig.renderTypeIcon,
+        iconMessage = _this$getRenderConfig.iconMessage,
+        renderImageRenderer = _this$getRenderConfig.renderImageRenderer,
+        renderSpinner = _this$getRenderConfig.renderSpinner,
+        renderPlayButton = _this$getRenderConfig.renderPlayButton,
+        renderBlanket = _this$getRenderConfig.renderBlanket,
+        renderProgressBar = _this$getRenderConfig.renderProgressBar,
+        renderTitleBox = _this$getRenderConfig.renderTitleBox,
+        renderFailedTitleBox = _this$getRenderConfig.renderFailedTitleBox,
+        renderTickBox = _this$getRenderConfig.renderTickBox,
+        isFixedBlanket = _this$getRenderConfig.isFixedBlanket,
+        customTitleMessage = _this$getRenderConfig.customTitleMessage;
       var _this$props5 = _this.props,
-          progress = _this$props5.progress,
-          selected = _this$props5.selected,
-          status = _this$props5.status,
-          metadata = _this$props5.metadata;
-
+        progress = _this$props5.progress,
+        selected = _this$props5.selected,
+        status = _this$props5.status,
+        metadata = _this$props5.metadata;
       var _ref6 = metadata || {},
-          name = _ref6.name;
-
+        name = _ref6.name;
       var hasTitleBox = !!renderTitleBox || !!renderFailedTitleBox;
       return (0, _react.jsx)(_react2.default.Fragment, null, (0, _react.jsx)("div", {
         css: _styles.cardImageContainerStyles,
@@ -392,7 +313,6 @@ var CardViewBase = /*#__PURE__*/function (_React$Component) {
     });
     return _this;
   }
-
   (0, _createClass2.default)(CardViewBase, [{
     key: "componentDidMount",
     value: function componentDidMount() {
@@ -404,35 +324,32 @@ var CardViewBase = /*#__PURE__*/function (_React$Component) {
     key: "componentDidUpdate",
     value: function componentDidUpdate(_ref7) {
       var prevCardPreview = _ref7.cardPreview;
-      var cardPreview = this.props.cardPreview; // We should only switch didImageRender to false
+      var cardPreview = this.props.cardPreview;
+      // We should only switch didImageRender to false
       // when cardPreview goes undefined, not when it is updated.
       // as this method could be triggered after onImageLoad callback,
       // falling on a race condition
-
       !!prevCardPreview && !cardPreview && this.setState({
         didImageRender: false
       });
     }
   }, {
     key: "width",
-    get: // This width is only used to calculate breakpoints, dimensions are passed down as
+    get:
+    // This width is only used to calculate breakpoints, dimensions are passed down as
     // integrator pass it to the root component
     function get() {
       var elementWidth = this.state.elementWidth;
-
       if (elementWidth) {
         return elementWidth;
       }
-
       var _ref8 = this.props.dimensions || {
-        width: undefined
-      },
-          width = _ref8.width;
-
+          width: undefined
+        },
+        width = _ref8.width;
       if (!width) {
         return _cardDimensions.defaultImageCardDimensions.width;
       }
-
       return (0, _getCSSUnitValue.getCSSUnitValue)(width);
     }
   }, {
@@ -440,24 +357,23 @@ var CardViewBase = /*#__PURE__*/function (_React$Component) {
     get: function get() {
       var width = this.state.elementWidth || (this.props.dimensions ? this.props.dimensions.width : '') || _cardDimensions.defaultImageCardDimensions.width;
       return (0, _styles.calcBreakpointSize)(parseInt("".concat(width), 10));
-    } // If the dimensions.width is a percentage, we need to transform it
-    // into a pixel value in order to get the right breakpoints applied.
+    }
 
+    // If the dimensions.width is a percentage, we need to transform it
+    // into a pixel value in order to get the right breakpoints applied.
   }, {
     key: "render",
     value: function render() {
       var featureFlags = this.props.featureFlags;
-
       if ((0, _mediaCommon.getMediaFeatureFlag)('newCardExperience', featureFlags)) {
         return this.renderFileNewExperience();
       }
-
       var _this$props6 = this.props,
-          dimensions = _this$props6.dimensions,
-          appearance = _this$props6.appearance,
-          onClick = _this$props6.onClick,
-          onMouseEnter = _this$props6.onMouseEnter,
-          testId = _this$props6.testId;
+        dimensions = _this$props6.dimensions,
+        appearance = _this$props6.appearance,
+        onClick = _this$props6.onClick,
+        onMouseEnter = _this$props6.onMouseEnter,
+        testId = _this$props6.testId;
       var wrapperDimensions = dimensions ? dimensions : (0, _cardDimensions.getDefaultCardDimensions)(appearance);
       return (0, _react.jsx)(_cardViewWrapper.Wrapper, {
         testId: testId || 'media-card-view',
@@ -481,16 +397,13 @@ var CardViewBase = /*#__PURE__*/function (_React$Component) {
     key: "shouldRenderPlayButton",
     value: function shouldRenderPlayButton() {
       var _this$props7 = this.props,
-          metadata = _this$props7.metadata,
-          cardPreview = _this$props7.cardPreview;
-
+        metadata = _this$props7.metadata,
+        cardPreview = _this$props7.cardPreview;
       var _ref9 = metadata || {},
-          mediaType = _ref9.mediaType;
-
+        mediaType = _ref9.mediaType;
       if (mediaType !== 'video' || !cardPreview) {
         return false;
       }
-
       return true;
     }
   }, {
@@ -500,9 +413,10 @@ var CardViewBase = /*#__PURE__*/function (_React$Component) {
         breakpoint: this.breakpoint,
         hasTitleBox: hasTitleBox
       }, (0, _react.jsx)(_playButton.PlayButton, null));
-    } //This Blanket will provide a shadow backround for uploading status by
-    //setting isFixed.
+    }
 
+    //This Blanket will provide a shadow backround for uploading status by
+    //setting isFixed.
   }, {
     key: "renderBlanket",
     value: function renderBlanket(isFixed) {
@@ -514,14 +428,12 @@ var CardViewBase = /*#__PURE__*/function (_React$Component) {
     key: "renderTitleBox",
     value: function renderTitleBox() {
       var _this$props8 = this.props,
-          metadata = _this$props8.metadata,
-          titleBoxBgColor = _this$props8.titleBoxBgColor,
-          titleBoxIcon = _this$props8.titleBoxIcon;
-
+        metadata = _this$props8.metadata,
+        titleBoxBgColor = _this$props8.titleBoxBgColor,
+        titleBoxIcon = _this$props8.titleBoxIcon;
       var _ref10 = metadata || {},
-          name = _ref10.name,
-          createdAt = _ref10.createdAt;
-
+        name = _ref10.name,
+        createdAt = _ref10.createdAt;
       return !!name && (0, _react.jsx)(_titleBox.TitleBox, {
         name: name,
         createdAt: createdAt,
@@ -552,16 +464,16 @@ var CardViewBase = /*#__PURE__*/function (_React$Component) {
     key: "renderImageRenderer",
     value: function renderImageRenderer() {
       var _this$props9 = this.props,
-          cardPreview = _this$props9.cardPreview,
-          _this$props9$metadata = _this$props9.metadata;
+        cardPreview = _this$props9.cardPreview,
+        _this$props9$metadata = _this$props9.metadata;
       _this$props9$metadata = _this$props9$metadata === void 0 ? {} : _this$props9$metadata;
       var _this$props9$metadata2 = _this$props9$metadata.mediaType,
-          mediaType = _this$props9$metadata2 === void 0 ? 'unknown' : _this$props9$metadata2,
-          alt = _this$props9.alt,
-          resizeMode = _this$props9.resizeMode,
-          onDisplayImage = _this$props9.onDisplayImage,
-          nativeLazyLoad = _this$props9.nativeLazyLoad,
-          forceSyncDisplay = _this$props9.forceSyncDisplay;
+        mediaType = _this$props9$metadata2 === void 0 ? 'unknown' : _this$props9$metadata2,
+        alt = _this$props9.alt,
+        resizeMode = _this$props9.resizeMode,
+        onDisplayImage = _this$props9.onDisplayImage,
+        nativeLazyLoad = _this$props9.nativeLazyLoad,
+        forceSyncDisplay = _this$props9.forceSyncDisplay;
       return !!cardPreview && (0, _react.jsx)(_imageRenderer.ImageRenderer, {
         cardPreview: cardPreview,
         mediaType: mediaType,
@@ -586,12 +498,10 @@ var CardViewBase = /*#__PURE__*/function (_React$Component) {
     key: "renderMediaTypeIcon",
     value: function renderMediaTypeIcon(hasTitleBox, iconMessage) {
       var metadata = this.props.metadata;
-
       var _ref11 = metadata || {},
-          mediaType = _ref11.mediaType,
-          mimeType = _ref11.mimeType,
-          name = _ref11.name;
-
+        mediaType = _ref11.mediaType,
+        mimeType = _ref11.mimeType,
+        name = _ref11.name;
       return (0, _react.jsx)(_iconWrapper.IconWrapper, {
         breakpoint: this.breakpoint,
         hasTitleBox: hasTitleBox
@@ -606,15 +516,13 @@ var CardViewBase = /*#__PURE__*/function (_React$Component) {
     key: "renderActionsBar",
     value: function renderActionsBar() {
       var _this$props10 = this.props,
-          disableOverlay = _this$props10.disableOverlay,
-          actions = _this$props10.actions,
-          metadata = _this$props10.metadata;
+        disableOverlay = _this$props10.disableOverlay,
+        actions = _this$props10.actions,
+        metadata = _this$props10.metadata;
       var actionsWithDetails = metadata && actions ? (0, _actions.attachDetailsToActions)(actions, metadata) : [];
-
       if (disableOverlay || !actions || actions.length === 0) {
         return null;
       }
-
       return (0, _react.jsx)(_actionsBar.ActionsBar, {
         actions: actionsWithDetails
       });
@@ -622,7 +530,6 @@ var CardViewBase = /*#__PURE__*/function (_React$Component) {
   }]);
   return CardViewBase;
 }(_react2.default.Component);
-
 exports.CardViewBase = CardViewBase;
 (0, _defineProperty2.default)(CardViewBase, "defaultProps", {
   appearance: 'auto'

package/dist/cjs/card/getCardPreview/cache.js

@@ -1,29 +1,21 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.getCacheKey = exports.default = exports.CardPreviewCacheImpl = void 0;
-
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
 var _objectURLCache = require("../../utils/objectURLCache");
-
 var getCacheKey = function getCacheKey(id, mode) {
   var resizeMode = mode || 'crop';
   return [id, resizeMode].join('-');
 };
-
 exports.getCacheKey = getCacheKey;
 var CardPreviewCacheImpl = /*#__PURE__*/(0, _createClass2.default)(function CardPreviewCacheImpl(previewCache) {
   var _this = this;
-
   (0, _classCallCheck2.default)(this, CardPreviewCacheImpl);
   (0, _defineProperty2.default)(this, "get", function (id, mode) {
     var cacheKey = getCacheKey(id, mode);
@@ -31,18 +23,14 @@ var CardPreviewCacheImpl = /*#__PURE__*/(0, _createClass2.default)(function Card
   });
   (0, _defineProperty2.default)(this, "set", function (id, mode, cardPreview) {
     var cacheKey = getCacheKey(id, mode);
-
     _this.previewCache.set(cacheKey, cardPreview);
   });
   (0, _defineProperty2.default)(this, "remove", function (id, mode) {
     var cacheKey = getCacheKey(id, mode);
-
     _this.previewCache.remove(cacheKey);
   });
   this.previewCache = previewCache;
 });
 exports.CardPreviewCacheImpl = CardPreviewCacheImpl;
-
 var _default = new CardPreviewCacheImpl((0, _objectURLCache.createObjectURLCache)());
-
 exports.default = _default;