@atlaskit/media-card 75.0.1 → 76.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +22 -0
- package/dist/cjs/card/card.js +1 -1
- package/dist/cjs/card/cardState.js +1 -1
- package/dist/cjs/card/cardView.js +102 -196
- package/dist/cjs/card/getCardStatus.js +2 -41
- package/dist/cjs/card/inlinePlayerWrapper.js +3 -3
- package/dist/cjs/card/inlinePlayerWrapperStyles.js +30 -0
- package/dist/cjs/card/media-card-analytics-error-boundary.js +1 -1
- package/dist/cjs/card/ui/actionsBar/actionsBar.js +1 -1
- package/dist/cjs/{utils → card/ui/actionsBar}/cardActions/cardActionsDropdownMenu.js +1 -1
- package/dist/cjs/{utils → card/ui/actionsBar}/cardActions/cardActionsView.js +2 -2
- package/dist/cjs/{utils → card/ui/actionsBar}/cardActions/styles.js +9 -6
- package/dist/cjs/card/ui/actionsBar/styles.js +1 -1
- package/dist/cjs/card/ui/blanket/styles.js +1 -1
- package/dist/cjs/card/ui/imageRenderer/imageRenderer.js +1 -1
- package/dist/cjs/card/ui/progressBar/styles.js +2 -2
- package/dist/cjs/card/ui/styles.js +16 -2
- package/dist/cjs/card/ui/tickBox/styles.js +1 -1
- package/dist/cjs/card/ui/titleBox/styles.js +3 -3
- package/dist/cjs/card/ui/wrapper/index.js +12 -0
- package/dist/cjs/card/ui/{newFileExperience → wrapper}/styles.js +7 -8
- package/dist/cjs/card/ui/{newFileExperience/newFileExperienceWrapper.js → wrapper/wrapper.js} +4 -4
- package/dist/cjs/classnames.js +1 -7
- package/dist/cjs/index.js +3 -9
- package/dist/cjs/inline/loader.js +15 -6
- package/dist/cjs/inline/mediaInlineAnalyticsErrorBoundary.js +1 -9
- package/dist/cjs/inline/mediaInlineCard.js +62 -12
- package/dist/cjs/inline/mediaInlineCardAnalytics.js +60 -0
- package/dist/cjs/utils/cardDimensions.js +1 -86
- package/dist/cjs/utils/index.js +1 -128
- package/dist/cjs/utils/lightCards/cardError.js +1 -1
- package/dist/cjs/utils/lightCards/cardLoading.js +3 -16
- package/dist/cjs/utils/lightCards/lightCardWrappers.js +2 -12
- package/dist/cjs/utils/lightCards/styles.js +4 -10
- package/dist/cjs/utils/ufoExperiences.js +1 -1
- package/dist/cjs/version.json +1 -1
- package/dist/es2019/card/card.js +1 -1
- package/dist/es2019/card/cardState.js +1 -1
- package/dist/es2019/card/cardView.js +54 -154
- package/dist/es2019/card/getCardStatus.js +1 -41
- package/dist/es2019/card/inlinePlayerWrapper.js +1 -1
- package/dist/es2019/card/inlinePlayerWrapperStyles.js +47 -0
- package/dist/es2019/card/media-card-analytics-error-boundary.js +1 -1
- package/dist/es2019/card/ui/actionsBar/actionsBar.js +1 -1
- package/dist/es2019/{utils → card/ui/actionsBar}/cardActions/cardActionsDropdownMenu.js +1 -1
- package/dist/es2019/{utils → card/ui/actionsBar}/cardActions/cardActionsView.js +2 -2
- package/dist/es2019/{utils → card/ui/actionsBar}/cardActions/styles.js +10 -2
- package/dist/es2019/card/ui/actionsBar/styles.js +1 -1
- package/dist/es2019/card/ui/blanket/styles.js +1 -1
- package/dist/es2019/card/ui/imageRenderer/imageRenderer.js +1 -1
- package/dist/es2019/card/ui/progressBar/styles.js +1 -1
- package/dist/es2019/card/ui/styles.js +10 -1
- package/dist/es2019/card/ui/tickBox/styles.js +1 -1
- package/dist/es2019/card/ui/titleBox/styles.js +1 -1
- package/dist/es2019/card/ui/wrapper/index.js +1 -0
- package/dist/es2019/card/ui/{newFileExperience → wrapper}/styles.js +3 -3
- package/dist/es2019/card/ui/{newFileExperience/newFileExperienceWrapper.js → wrapper/wrapper.js} +3 -3
- package/dist/es2019/classnames.js +1 -1
- package/dist/es2019/index.js +2 -2
- package/dist/es2019/inline/loader.js +15 -6
- package/dist/es2019/inline/mediaInlineAnalyticsErrorBoundary.js +1 -9
- package/dist/es2019/inline/mediaInlineCard.js +51 -8
- package/dist/es2019/inline/mediaInlineCardAnalytics.js +48 -0
- package/dist/es2019/utils/cardDimensions.js +0 -76
- package/dist/es2019/utils/index.js +1 -5
- package/dist/es2019/utils/lightCards/cardError.js +1 -1
- package/dist/es2019/utils/lightCards/cardLoading.js +4 -17
- package/dist/es2019/utils/lightCards/lightCardWrappers.js +1 -10
- package/dist/es2019/utils/lightCards/styles.js +1 -20
- package/dist/es2019/utils/ufoExperiences.js +1 -1
- package/dist/es2019/version.json +1 -1
- package/dist/esm/card/card.js +1 -1
- package/dist/esm/card/cardState.js +1 -1
- package/dist/esm/card/cardView.js +104 -198
- package/dist/esm/card/getCardStatus.js +2 -41
- package/dist/esm/card/inlinePlayerWrapper.js +1 -1
- package/dist/esm/card/inlinePlayerWrapperStyles.js +22 -0
- package/dist/esm/card/media-card-analytics-error-boundary.js +1 -1
- package/dist/esm/card/ui/actionsBar/actionsBar.js +1 -1
- package/dist/esm/{utils → card/ui/actionsBar}/cardActions/cardActionsDropdownMenu.js +1 -1
- package/dist/esm/{utils → card/ui/actionsBar}/cardActions/cardActionsView.js +2 -2
- package/dist/esm/{utils → card/ui/actionsBar}/cardActions/styles.js +8 -5
- package/dist/esm/card/ui/actionsBar/styles.js +1 -1
- package/dist/esm/card/ui/blanket/styles.js +1 -1
- package/dist/esm/card/ui/imageRenderer/imageRenderer.js +1 -1
- package/dist/esm/card/ui/progressBar/styles.js +1 -1
- package/dist/esm/card/ui/styles.js +13 -1
- package/dist/esm/card/ui/tickBox/styles.js +1 -1
- package/dist/esm/card/ui/titleBox/styles.js +1 -1
- package/dist/esm/card/ui/wrapper/index.js +1 -0
- package/dist/esm/card/ui/{newFileExperience → wrapper}/styles.js +3 -3
- package/dist/esm/card/ui/{newFileExperience/newFileExperienceWrapper.js → wrapper/wrapper.js} +3 -3
- package/dist/esm/classnames.js +1 -1
- package/dist/esm/index.js +2 -2
- package/dist/esm/inline/loader.js +15 -6
- package/dist/esm/inline/mediaInlineAnalyticsErrorBoundary.js +1 -9
- package/dist/esm/inline/mediaInlineCard.js +62 -12
- package/dist/esm/inline/mediaInlineCardAnalytics.js +50 -0
- package/dist/esm/utils/cardDimensions.js +0 -76
- package/dist/esm/utils/index.js +1 -5
- package/dist/esm/utils/lightCards/cardError.js +1 -1
- package/dist/esm/utils/lightCards/cardLoading.js +4 -17
- package/dist/esm/utils/lightCards/lightCardWrappers.js +1 -10
- package/dist/esm/utils/lightCards/styles.js +3 -7
- package/dist/esm/utils/ufoExperiences.js +1 -1
- package/dist/esm/version.json +1 -1
- package/dist/types/card/cardView.d.ts +3 -6
- package/dist/types/card/getCardStatus.d.ts +1 -2
- package/dist/{types-ts4.5/card/styles/styles.d.ts → types/card/inlinePlayerWrapperStyles.d.ts} +1 -5
- package/dist/types/card/types.d.ts +1 -12
- package/dist/{types-ts4.5/utils → types/card/ui/actionsBar}/cardActions/cardActionsDropdownMenu.d.ts +1 -1
- package/dist/{types-ts4.5/utils → types/card/ui/actionsBar}/cardActions/cardActionsView.d.ts +1 -1
- package/dist/types/card/ui/styles.d.ts +2 -0
- package/dist/types/card/ui/wrapper/index.d.ts +1 -0
- package/dist/types/card/ui/wrapper/styles.d.ts +5 -0
- package/dist/{types-ts4.5/card/ui/newFileExperience → types/card/ui/wrapper}/types.d.ts +1 -1
- package/dist/{types-ts4.5/card/cardImageView/cardViewWrapper.d.ts → types/card/ui/wrapper/wrapper.d.ts} +1 -1
- package/dist/types/classnames.d.ts +1 -1
- package/dist/types/index.d.ts +2 -2
- package/dist/types/inline/loader.d.ts +1 -1
- package/dist/types/inline/mediaInlineCardAnalytics.d.ts +6 -0
- package/dist/types/utils/analytics.d.ts +7 -1
- package/dist/types/utils/cardDimensions.d.ts +0 -35
- package/dist/types/utils/index.d.ts +1 -9
- package/dist/types/utils/lightCards/lightCardWrappers.d.ts +0 -1
- package/dist/types/utils/lightCards/styles.d.ts +0 -2
- package/dist/types-ts4.5/card/cardView.d.ts +3 -6
- package/dist/types-ts4.5/card/getCardStatus.d.ts +1 -2
- package/dist/{types/card/styles/styles.d.ts → types-ts4.5/card/inlinePlayerWrapperStyles.d.ts} +1 -5
- package/dist/types-ts4.5/card/types.d.ts +1 -12
- package/dist/{types/utils → types-ts4.5/card/ui/actionsBar}/cardActions/cardActionsDropdownMenu.d.ts +1 -1
- package/dist/{types/utils → types-ts4.5/card/ui/actionsBar}/cardActions/cardActionsView.d.ts +1 -1
- package/dist/types-ts4.5/card/ui/styles.d.ts +2 -0
- package/dist/types-ts4.5/card/ui/wrapper/index.d.ts +1 -0
- package/dist/types-ts4.5/card/ui/wrapper/styles.d.ts +5 -0
- package/dist/{types/card/ui/newFileExperience → types-ts4.5/card/ui/wrapper}/types.d.ts +1 -1
- package/dist/{types/card/cardImageView/cardViewWrapper.d.ts → types-ts4.5/card/ui/wrapper/wrapper.d.ts} +1 -1
- package/dist/types-ts4.5/classnames.d.ts +1 -1
- package/dist/types-ts4.5/index.d.ts +2 -2
- package/dist/types-ts4.5/inline/loader.d.ts +1 -1
- package/dist/types-ts4.5/inline/mediaInlineCardAnalytics.d.ts +6 -0
- package/dist/types-ts4.5/utils/analytics.d.ts +7 -1
- package/dist/types-ts4.5/utils/cardDimensions.d.ts +0 -35
- package/dist/types-ts4.5/utils/index.d.ts +1 -9
- package/dist/types-ts4.5/utils/lightCards/lightCardWrappers.d.ts +0 -1
- package/dist/types-ts4.5/utils/lightCards/styles.d.ts +0 -2
- package/package.json +5 -5
- package/report.api.md +2 -6
- package/dist/cjs/card/cardImageView/cardImageViewWrapper.js +0 -51
- package/dist/cjs/card/cardImageView/cardOverlay/cardOverlayComponents.js +0 -51
- package/dist/cjs/card/cardImageView/cardOverlay/index.js +0 -183
- package/dist/cjs/card/cardImageView/cardOverlay/styles.js +0 -63
- package/dist/cjs/card/cardImageView/cardViewWrapper.js +0 -32
- package/dist/cjs/card/cardImageView/fileCardImageView.js +0 -310
- package/dist/cjs/card/cardImageView/index.js +0 -12
- package/dist/cjs/card/cardImageView/styles.js +0 -48
- package/dist/cjs/card/styles/animations.js +0 -12
- package/dist/cjs/card/styles/config.js +0 -8
- package/dist/cjs/card/styles/easing.js +0 -10
- package/dist/cjs/card/styles/getSelectedBorderStyle.js +0 -17
- package/dist/cjs/card/styles/index.js +0 -121
- package/dist/cjs/card/styles/mixins.js +0 -45
- package/dist/cjs/card/styles/styles.js +0 -41
- package/dist/cjs/card/ui/loadingRateLimited/styles.js +0 -27
- package/dist/cjs/utils/breakpoint.js +0 -42
- package/dist/cjs/utils/fileIcon/index.js +0 -54
- package/dist/cjs/utils/fileIcon/styles.js +0 -13
- package/dist/cjs/utils/getErrorMessage.js +0 -14
- package/dist/cjs/utils/progressBar/index.js +0 -45
- package/dist/cjs/utils/progressBar/styles.js +0 -14
- package/dist/cjs/utils/shouldDisplayImageThumbnail.js +0 -17
- package/dist/es2019/card/cardImageView/cardImageViewWrapper.js +0 -43
- package/dist/es2019/card/cardImageView/cardOverlay/cardOverlayComponents.js +0 -41
- package/dist/es2019/card/cardImageView/cardOverlay/index.js +0 -158
- package/dist/es2019/card/cardImageView/cardOverlay/styles.js +0 -240
- package/dist/es2019/card/cardImageView/cardViewWrapper.js +0 -26
- package/dist/es2019/card/cardImageView/fileCardImageView.js +0 -291
- package/dist/es2019/card/cardImageView/index.js +0 -1
- package/dist/es2019/card/cardImageView/styles.js +0 -131
- package/dist/es2019/card/styles/animations.js +0 -4
- package/dist/es2019/card/styles/config.js +0 -1
- package/dist/es2019/card/styles/easing.js +0 -2
- package/dist/es2019/card/styles/getSelectedBorderStyle.js +0 -24
- package/dist/es2019/card/styles/index.js +0 -18
- package/dist/es2019/card/styles/mixins.js +0 -51
- package/dist/es2019/card/styles/styles.js +0 -42
- package/dist/es2019/card/ui/loadingRateLimited/styles.js +0 -41
- package/dist/es2019/utils/breakpoint.js +0 -83
- package/dist/es2019/utils/fileIcon/index.js +0 -31
- package/dist/es2019/utils/fileIcon/styles.js +0 -11
- package/dist/es2019/utils/getErrorMessage.js +0 -4
- package/dist/es2019/utils/progressBar/index.js +0 -21
- package/dist/es2019/utils/progressBar/styles.js +0 -15
- package/dist/es2019/utils/shouldDisplayImageThumbnail.js +0 -10
- package/dist/esm/card/cardImageView/cardImageViewWrapper.js +0 -41
- package/dist/esm/card/cardImageView/cardOverlay/cardOverlayComponents.js +0 -39
- package/dist/esm/card/cardImageView/cardOverlay/index.js +0 -176
- package/dist/esm/card/cardImageView/cardOverlay/styles.js +0 -42
- package/dist/esm/card/cardImageView/cardViewWrapper.js +0 -24
- package/dist/esm/card/cardImageView/fileCardImageView.js +0 -300
- package/dist/esm/card/cardImageView/index.js +0 -1
- package/dist/esm/card/cardImageView/styles.js +0 -33
- package/dist/esm/card/styles/animations.js +0 -4
- package/dist/esm/card/styles/config.js +0 -1
- package/dist/esm/card/styles/easing.js +0 -2
- package/dist/esm/card/styles/getSelectedBorderStyle.js +0 -11
- package/dist/esm/card/styles/index.js +0 -13
- package/dist/esm/card/styles/mixins.js +0 -27
- package/dist/esm/card/styles/styles.js +0 -31
- package/dist/esm/card/ui/loadingRateLimited/styles.js +0 -15
- package/dist/esm/utils/breakpoint.js +0 -33
- package/dist/esm/utils/fileIcon/index.js +0 -47
- package/dist/esm/utils/fileIcon/styles.js +0 -5
- package/dist/esm/utils/getErrorMessage.js +0 -6
- package/dist/esm/utils/progressBar/index.js +0 -38
- package/dist/esm/utils/progressBar/styles.js +0 -6
- package/dist/esm/utils/shouldDisplayImageThumbnail.js +0 -10
- package/dist/types/card/cardImageView/cardImageViewWrapper.d.ts +0 -6
- package/dist/types/card/cardImageView/cardOverlay/cardOverlayComponents.d.ts +0 -8
- package/dist/types/card/cardImageView/cardOverlay/index.d.ts +0 -39
- package/dist/types/card/cardImageView/cardOverlay/styles.d.ts +0 -26
- package/dist/types/card/cardImageView/fileCardImageView.d.ts +0 -49
- package/dist/types/card/cardImageView/index.d.ts +0 -2
- package/dist/types/card/cardImageView/styles.d.ts +0 -24
- package/dist/types/card/styles/animations.d.ts +0 -1
- package/dist/types/card/styles/config.d.ts +0 -1
- package/dist/types/card/styles/easing.d.ts +0 -2
- package/dist/types/card/styles/getSelectedBorderStyle.d.ts +0 -3
- package/dist/types/card/styles/index.d.ts +0 -8
- package/dist/types/card/styles/mixins.d.ts +0 -21
- package/dist/types/card/ui/loadingRateLimited/styles.d.ts +0 -13
- package/dist/types/card/ui/newFileExperience/newFileExperienceWrapper.d.ts +0 -4
- package/dist/types/card/ui/newFileExperience/styles.d.ts +0 -5
- package/dist/types/utils/breakpoint.d.ts +0 -11
- package/dist/types/utils/fileIcon/index.d.ts +0 -12
- package/dist/types/utils/fileIcon/styles.d.ts +0 -1
- package/dist/types/utils/getErrorMessage.d.ts +0 -2
- package/dist/types/utils/progressBar/index.d.ts +0 -9
- package/dist/types/utils/progressBar/styles.d.ts +0 -1
- package/dist/types/utils/shouldDisplayImageThumbnail.d.ts +0 -3
- package/dist/types-ts4.5/card/cardImageView/cardImageViewWrapper.d.ts +0 -6
- package/dist/types-ts4.5/card/cardImageView/cardOverlay/cardOverlayComponents.d.ts +0 -8
- package/dist/types-ts4.5/card/cardImageView/cardOverlay/index.d.ts +0 -39
- package/dist/types-ts4.5/card/cardImageView/cardOverlay/styles.d.ts +0 -26
- package/dist/types-ts4.5/card/cardImageView/fileCardImageView.d.ts +0 -49
- package/dist/types-ts4.5/card/cardImageView/index.d.ts +0 -2
- package/dist/types-ts4.5/card/cardImageView/styles.d.ts +0 -24
- package/dist/types-ts4.5/card/styles/animations.d.ts +0 -1
- package/dist/types-ts4.5/card/styles/config.d.ts +0 -1
- package/dist/types-ts4.5/card/styles/easing.d.ts +0 -2
- package/dist/types-ts4.5/card/styles/getSelectedBorderStyle.d.ts +0 -3
- package/dist/types-ts4.5/card/styles/index.d.ts +0 -8
- package/dist/types-ts4.5/card/styles/mixins.d.ts +0 -21
- package/dist/types-ts4.5/card/ui/loadingRateLimited/styles.d.ts +0 -13
- package/dist/types-ts4.5/card/ui/newFileExperience/newFileExperienceWrapper.d.ts +0 -4
- package/dist/types-ts4.5/card/ui/newFileExperience/styles.d.ts +0 -5
- package/dist/types-ts4.5/utils/breakpoint.d.ts +0 -11
- package/dist/types-ts4.5/utils/fileIcon/index.d.ts +0 -12
- package/dist/types-ts4.5/utils/fileIcon/styles.d.ts +0 -1
- package/dist/types-ts4.5/utils/getErrorMessage.d.ts +0 -2
- package/dist/types-ts4.5/utils/progressBar/index.d.ts +0 -9
- package/dist/types-ts4.5/utils/progressBar/styles.d.ts +0 -1
- package/dist/types-ts4.5/utils/shouldDisplayImageThumbnail.d.ts +0 -3
- /package/dist/cjs/card/{cardImageView/classnames.js → classnames.js} +0 -0
- /package/dist/cjs/{utils → card/ui/actionsBar}/cardActions/cardActionButton.js +0 -0
- /package/dist/cjs/{utils → card/ui/actionsBar}/cardActions/cardActionIconButton.js +0 -0
- /package/dist/cjs/{utils → card/ui/actionsBar}/cardActions/index.js +0 -0
- /package/dist/cjs/{utils → card/ui/imageRenderer}/resizeModeToMediaImageProps.js +0 -0
- /package/dist/cjs/card/ui/{newFileExperience → wrapper}/types.js +0 -0
- /package/dist/cjs/utils/{errorIcon → lightCards/errorIcon}/index.js +0 -0
- /package/dist/cjs/utils/{errorIcon → lightCards/errorIcon}/styles.js +0 -0
- /package/dist/es2019/card/{cardImageView/classnames.js → classnames.js} +0 -0
- /package/dist/es2019/{utils → card/ui/actionsBar}/cardActions/cardActionButton.js +0 -0
- /package/dist/es2019/{utils → card/ui/actionsBar}/cardActions/cardActionIconButton.js +0 -0
- /package/dist/es2019/{utils → card/ui/actionsBar}/cardActions/index.js +0 -0
- /package/dist/es2019/{utils → card/ui/imageRenderer}/resizeModeToMediaImageProps.js +0 -0
- /package/dist/es2019/card/ui/{newFileExperience → wrapper}/types.js +0 -0
- /package/dist/es2019/utils/{errorIcon → lightCards/errorIcon}/index.js +0 -0
- /package/dist/es2019/utils/{errorIcon → lightCards/errorIcon}/styles.js +0 -0
- /package/dist/esm/card/{cardImageView/classnames.js → classnames.js} +0 -0
- /package/dist/esm/{utils → card/ui/actionsBar}/cardActions/cardActionButton.js +0 -0
- /package/dist/esm/{utils → card/ui/actionsBar}/cardActions/cardActionIconButton.js +0 -0
- /package/dist/esm/{utils → card/ui/actionsBar}/cardActions/index.js +0 -0
- /package/dist/esm/{utils → card/ui/imageRenderer}/resizeModeToMediaImageProps.js +0 -0
- /package/dist/esm/card/ui/{newFileExperience → wrapper}/types.js +0 -0
- /package/dist/esm/utils/{errorIcon → lightCards/errorIcon}/index.js +0 -0
- /package/dist/esm/utils/{errorIcon → lightCards/errorIcon}/styles.js +0 -0
- /package/dist/types/card/{cardImageView/classnames.d.ts → classnames.d.ts} +0 -0
- /package/dist/types/{utils → card/ui/actionsBar}/cardActions/cardActionButton.d.ts +0 -0
- /package/dist/types/{utils → card/ui/actionsBar}/cardActions/cardActionIconButton.d.ts +0 -0
- /package/dist/types/{utils → card/ui/actionsBar}/cardActions/index.d.ts +0 -0
- /package/dist/types/{utils → card/ui/actionsBar}/cardActions/styles.d.ts +0 -0
- /package/dist/types/{utils → card/ui/imageRenderer}/resizeModeToMediaImageProps.d.ts +0 -0
- /package/dist/types/utils/{errorIcon → lightCards/errorIcon}/index.d.ts +0 -0
- /package/dist/types/utils/{errorIcon → lightCards/errorIcon}/styles.d.ts +0 -0
- /package/dist/types-ts4.5/card/{cardImageView/classnames.d.ts → classnames.d.ts} +0 -0
- /package/dist/types-ts4.5/{utils → card/ui/actionsBar}/cardActions/cardActionButton.d.ts +0 -0
- /package/dist/types-ts4.5/{utils → card/ui/actionsBar}/cardActions/cardActionIconButton.d.ts +0 -0
- /package/dist/types-ts4.5/{utils → card/ui/actionsBar}/cardActions/index.d.ts +0 -0
- /package/dist/types-ts4.5/{utils → card/ui/actionsBar}/cardActions/styles.d.ts +0 -0
- /package/dist/types-ts4.5/{utils → card/ui/imageRenderer}/resizeModeToMediaImageProps.d.ts +0 -0
- /package/dist/types-ts4.5/utils/{errorIcon → lightCards/errorIcon}/index.d.ts +0 -0
- /package/dist/types-ts4.5/utils/{errorIcon → lightCards/errorIcon}/styles.d.ts +0 -0
|
@@ -1,183 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
-
var _typeof = require("@babel/runtime/helpers/typeof");
|
|
5
|
-
Object.defineProperty(exports, "__esModule", {
|
|
6
|
-
value: true
|
|
7
|
-
});
|
|
8
|
-
exports.CardOverlay = void 0;
|
|
9
|
-
var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
|
|
10
|
-
var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
|
|
11
|
-
var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
|
|
12
|
-
var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
|
|
13
|
-
var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
|
|
14
|
-
var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
|
|
15
|
-
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
16
|
-
var _react = require("@emotion/react");
|
|
17
|
-
var _react2 = _interopRequireWildcard(require("react"));
|
|
18
|
-
var _classnames = _interopRequireDefault(require("classnames"));
|
|
19
|
-
var _check = _interopRequireDefault(require("@atlaskit/icon/glyph/check"));
|
|
20
|
-
var _mediaUi = require("@atlaskit/media-ui");
|
|
21
|
-
var _fileIcon = require("../../../utils/fileIcon");
|
|
22
|
-
var _errorIcon = require("../../../utils/errorIcon");
|
|
23
|
-
var _cardActions = _interopRequireDefault(require("../../../utils/cardActions"));
|
|
24
|
-
var _styles = require("./styles");
|
|
25
|
-
var _cardOverlayComponents = require("./cardOverlayComponents");
|
|
26
|
-
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); }
|
|
27
|
-
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; }
|
|
28
|
-
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); }; }
|
|
29
|
-
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; } } /**@jsx jsx */ // We dont require things directly from "utils" to avoid circular dependencies
|
|
30
|
-
var resolveTitleText = function resolveTitleText(cardStatus, mediaName, error, selected) {
|
|
31
|
-
// don't show title if error
|
|
32
|
-
// also when card is uploading + selected, title is already showing outside of the overlay
|
|
33
|
-
if (error || !mediaName || cardStatus === 'uploading' && !selected) {
|
|
34
|
-
return '';
|
|
35
|
-
}
|
|
36
|
-
return mediaName;
|
|
37
|
-
};
|
|
38
|
-
var CardOverlay = /*#__PURE__*/function (_Component) {
|
|
39
|
-
(0, _inherits2.default)(CardOverlay, _Component);
|
|
40
|
-
var _super = _createSuper(CardOverlay);
|
|
41
|
-
function CardOverlay(props) {
|
|
42
|
-
var _this;
|
|
43
|
-
(0, _classCallCheck2.default)(this, CardOverlay);
|
|
44
|
-
_this = _super.call(this, props);
|
|
45
|
-
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onMenuToggle", function (attrs) {
|
|
46
|
-
_this.setState({
|
|
47
|
-
isMenuExpanded: attrs.isOpen
|
|
48
|
-
});
|
|
49
|
-
});
|
|
50
|
-
_this.state = {
|
|
51
|
-
isMenuExpanded: false
|
|
52
|
-
};
|
|
53
|
-
return _this;
|
|
54
|
-
}
|
|
55
|
-
(0, _createClass2.default)(CardOverlay, [{
|
|
56
|
-
key: "wrapperClassNames",
|
|
57
|
-
get: function get() {
|
|
58
|
-
var _this$props = this.props,
|
|
59
|
-
error = _this$props.error,
|
|
60
|
-
noHover = _this$props.noHover,
|
|
61
|
-
selectable = _this$props.selectable,
|
|
62
|
-
selected = _this$props.selected,
|
|
63
|
-
mediaType = _this$props.mediaType,
|
|
64
|
-
persistent = _this$props.persistent;
|
|
65
|
-
var isMenuExpanded = this.state.isMenuExpanded;
|
|
66
|
-
return error ? (0, _classnames.default)('overlay', {
|
|
67
|
-
error: error,
|
|
68
|
-
active: isMenuExpanded
|
|
69
|
-
}) : (0, _classnames.default)('overlay', mediaType, {
|
|
70
|
-
active: isMenuExpanded,
|
|
71
|
-
selectable: selectable,
|
|
72
|
-
selected: selected,
|
|
73
|
-
// Yes, you right. We put "persistent" class when it is NOT persistent. 🤦
|
|
74
|
-
persistent: !persistent,
|
|
75
|
-
noHover: noHover
|
|
76
|
-
});
|
|
77
|
-
}
|
|
78
|
-
}, {
|
|
79
|
-
key: "render",
|
|
80
|
-
value: function render() {
|
|
81
|
-
var _this$props2 = this.props,
|
|
82
|
-
cardStatus = _this$props2.cardStatus,
|
|
83
|
-
error = _this$props2.error,
|
|
84
|
-
noHover = _this$props2.noHover,
|
|
85
|
-
mediaName = _this$props2.mediaName,
|
|
86
|
-
persistent = _this$props2.persistent,
|
|
87
|
-
selected = _this$props2.selected,
|
|
88
|
-
actions = _this$props2.actions;
|
|
89
|
-
var titleText = resolveTitleText(cardStatus, mediaName, error, selected);
|
|
90
|
-
var menuTriggerColor = !persistent ? "var(--ds-icon-inverse, white)" : undefined;
|
|
91
|
-
return (0, _react.jsx)(_cardOverlayComponents.Overlay, {
|
|
92
|
-
hasError: !!error,
|
|
93
|
-
noHover: noHover,
|
|
94
|
-
className: this.wrapperClassNames
|
|
95
|
-
}, (0, _react.jsx)("div", {
|
|
96
|
-
css: _styles.topRowStyles,
|
|
97
|
-
className: 'top-row'
|
|
98
|
-
}, this.errorLine(), (0, _react.jsx)(_cardOverlayComponents.TitleWrapper, null, titleText ? (0, _react.jsx)(_mediaUi.Ellipsify, {
|
|
99
|
-
testId: "media-card-file-name",
|
|
100
|
-
text: titleText,
|
|
101
|
-
lines: 2
|
|
102
|
-
}) : null), this.tickBox()), (0, _react.jsx)("div", {
|
|
103
|
-
css: _styles.bottomRowStyles,
|
|
104
|
-
className: 'bottom-row'
|
|
105
|
-
}, (0, _react.jsx)("div", {
|
|
106
|
-
css: _styles.leftColumnStyles
|
|
107
|
-
}, this.bottomLeftColumn()), (0, _react.jsx)("div", {
|
|
108
|
-
css: _styles.rightColumnStyles
|
|
109
|
-
}, actions ? (0, _react.jsx)(_cardActions.default, {
|
|
110
|
-
actions: actions,
|
|
111
|
-
onToggle: this.onMenuToggle,
|
|
112
|
-
triggerColor: menuTriggerColor
|
|
113
|
-
}) : null)));
|
|
114
|
-
}
|
|
115
|
-
}, {
|
|
116
|
-
key: "errorLine",
|
|
117
|
-
value: function errorLine() {
|
|
118
|
-
var _this$props3 = this.props,
|
|
119
|
-
error = _this$props3.error,
|
|
120
|
-
alt = _this$props3.alt;
|
|
121
|
-
return error && (0, _react.jsx)(_react2.default.Fragment, null, (0, _react.jsx)("div", {
|
|
122
|
-
css: _styles.errorLineStyles
|
|
123
|
-
}, (0, _react.jsx)(_errorIcon.ErrorIcon, null), (0, _react.jsx)(_cardOverlayComponents.ErrorMessage, null, error)), alt && (0, _react.jsx)("div", {
|
|
124
|
-
css: _styles.errorLineStyles
|
|
125
|
-
}, (0, _react.jsx)(_cardOverlayComponents.AltWrapper, null, alt)));
|
|
126
|
-
}
|
|
127
|
-
}, {
|
|
128
|
-
key: "tickBox",
|
|
129
|
-
value: function tickBox() {
|
|
130
|
-
var _this$props4 = this.props,
|
|
131
|
-
selected = _this$props4.selected,
|
|
132
|
-
selectable = _this$props4.selectable;
|
|
133
|
-
var tick = (0, _react.jsx)(_check.default, {
|
|
134
|
-
label: "tick"
|
|
135
|
-
});
|
|
136
|
-
var className = (0, _classnames.default)('tickbox', {
|
|
137
|
-
selected: selected
|
|
138
|
-
});
|
|
139
|
-
return selectable && (0, _react.jsx)("div", {
|
|
140
|
-
css: _styles.tickBoxStyles,
|
|
141
|
-
className: className
|
|
142
|
-
}, tick);
|
|
143
|
-
}
|
|
144
|
-
}, {
|
|
145
|
-
key: "bottomLeftColumn",
|
|
146
|
-
value: function bottomLeftColumn() {
|
|
147
|
-
var error = this.props.error;
|
|
148
|
-
if (!error) {
|
|
149
|
-
var _this$props5 = this.props,
|
|
150
|
-
mediaType = _this$props5.mediaType,
|
|
151
|
-
subtitle = _this$props5.subtitle,
|
|
152
|
-
icon = _this$props5.icon;
|
|
153
|
-
var classNames = (0, _classnames.default)('metadata');
|
|
154
|
-
var fileIcon = mediaType || icon ? (0, _react.jsx)(_fileIcon.FileIcon, {
|
|
155
|
-
mediaType: mediaType,
|
|
156
|
-
iconUrl: icon
|
|
157
|
-
}) : null;
|
|
158
|
-
var subtitleEl = subtitle ? (0, _react.jsx)("div", {
|
|
159
|
-
css: _styles.subtitleStyles,
|
|
160
|
-
className: "file-size"
|
|
161
|
-
}, subtitle) : null;
|
|
162
|
-
return (0, _react.jsx)("div", null, (0, _react.jsx)(_cardOverlayComponents.Metadata, {
|
|
163
|
-
className: classNames
|
|
164
|
-
}, fileIcon, subtitleEl));
|
|
165
|
-
}
|
|
166
|
-
}
|
|
167
|
-
}, {
|
|
168
|
-
key: "removeBtnClick",
|
|
169
|
-
value: function removeBtnClick(handler) {
|
|
170
|
-
return function (e) {
|
|
171
|
-
e.preventDefault();
|
|
172
|
-
e.stopPropagation();
|
|
173
|
-
handler();
|
|
174
|
-
};
|
|
175
|
-
}
|
|
176
|
-
}]);
|
|
177
|
-
return CardOverlay;
|
|
178
|
-
}(_react2.Component);
|
|
179
|
-
exports.CardOverlay = CardOverlay;
|
|
180
|
-
(0, _defineProperty2.default)(CardOverlay, "defaultProps", {
|
|
181
|
-
actions: [],
|
|
182
|
-
mediaName: ''
|
|
183
|
-
});
|
|
@@ -1,63 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
-
var _typeof = require("@babel/runtime/helpers/typeof");
|
|
5
|
-
Object.defineProperty(exports, "__esModule", {
|
|
6
|
-
value: true
|
|
7
|
-
});
|
|
8
|
-
exports.topRowStyles = exports.titleWrapperStyles = exports.tickBoxStyles = exports.subtitleStyles = exports.rightColumnStyles = exports.overlayStyles = exports.metadataStyles = exports.leftColumnStyles = exports.errorMessageStyles = exports.errorLineStyles = exports.bottomRowStyles = exports.altWrapperStyles = void 0;
|
|
9
|
-
var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
|
|
10
|
-
var _react = require("@emotion/react");
|
|
11
|
-
var _mediaUi = require("@atlaskit/media-ui");
|
|
12
|
-
var _components = require("@atlaskit/theme/components");
|
|
13
|
-
var colors = _interopRequireWildcard(require("@atlaskit/theme/colors"));
|
|
14
|
-
var _styles = require("../../styles");
|
|
15
|
-
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12;
|
|
16
|
-
/**
|
|
17
|
-
* Everything about this file change is just wrong.
|
|
18
|
-
* Mostly because we do bad things with classes.
|
|
19
|
-
* This is all wrong and hopefully will be removed from existence with card v3,
|
|
20
|
-
* so please don’t be too sad about all this!
|
|
21
|
-
*/
|
|
22
|
-
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); }
|
|
23
|
-
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; }
|
|
24
|
-
var tickBoxStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n ", "\n ", "\n background-color: ", ";\n position: absolute;\n top: 8px;\n right: 8px;\n border-radius: 20px;\n color: ", "; /* CLEANUP - TODO FIL-3884: Align color with new design */\n display: flex;\n opacity: 0;\n\n &.selected {\n opacity: 1;\n color: ", ";\n background-color: ", "; /* CLEANUP - TODO FIL-3884: Align with tickbox icons */\n }\n\n /* Enforce dimensions of \"tick\" icon */\n svg {\n position: absolute;\n width: 14px;\n }\n"])), (0, _mediaUi.size)(14), (0, _styles.transition)(), "var(--ds-surface-overlay, ".concat((0, _styles.rgba)('#ffffff', 0.5), ")"), "var(--ds-icon-subtle, #798599)", "var(--ds-icon-inverse, white)", "var(--ds-icon-selected, #0052cc)");
|
|
25
|
-
exports.tickBoxStyles = tickBoxStyles;
|
|
26
|
-
var getOverlayStyles = function getOverlayStyles(_ref) {
|
|
27
|
-
var hasError = _ref.hasError,
|
|
28
|
-
noHover = _ref.noHover;
|
|
29
|
-
if (hasError || noHover) {
|
|
30
|
-
return "\n cursor: default;\n\n &:hover {\n background: transparent;\n }\n ";
|
|
31
|
-
}
|
|
32
|
-
};
|
|
33
|
-
var overlayStyles = function overlayStyles(props) {
|
|
34
|
-
return (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n ", "\n ", "\n ", " display: flex;\n justify-content: space-between;\n flex-direction: column;\n background: transparent;\n transition: 0.3s background ", ", 0.3s border-color;\n padding: 16px;\n\n ", "\n &:not(.persistent):hover, &.active {\n .top-row {\n .title {\n color: ", ";\n }\n }\n }\n\n &.noHover:hover {\n .top-row {\n .title {\n color: ", ";\n }\n }\n }\n\n .file-type-icon {\n display: block;\n }\n\n &:not(.persistent) {\n &:not(.error, .noHover):hover {\n background-color: ", ";\n }\n\n &.selectable {\n &.selected {\n background-color: ", ";\n\n &:hover {\n /* CLEANUP - TODO FIL-3884 add new overlay with rgba(colors.N900, 0.16) */\n background-color: ", ";\n }\n\n .title,\n .bottom-row,\n .file-size {\n color: ", ";\n }\n }\n }\n }\n\n &.persistent {\n &:not(.active) {\n overflow: hidden;\n }\n\n .top-row {\n .title {\n transition: opacity 0.3s;\n opacity: 0;\n color: ", ";\n visibility: hidden;\n }\n }\n\n .bottom-row {\n opacity: 0;\n transition: transform 0.2s, opacity 0.5s;\n /* This is the height of the overlay footer, needs to be present now since the parent uses flex and 100% doesn't look right anymore */\n transform: translateY(35px);\n\n .file-type-icon {\n display: none;\n }\n\n .file-size {\n color: ", ";\n display: none;\n }\n }\n\n &:hover,\n &.active {\n background-color: ", ";\n\n .title {\n opacity: 1;\n visibility: visible;\n }\n\n .file-type-icon,\n .file-size {\n display: block;\n }\n\n .bottom-row {\n opacity: 1;\n transform: translateY(0);\n }\n }\n\n /* Selectable */\n &.selectable {\n &:hover {\n .tickbox {\n opacity: 1;\n }\n }\n\n &.selected {\n .tickbox {\n background-color: ", " !important;\n color: ", ";\n }\n }\n }\n }\n\n &.error {\n .top-row {\n overflow: visible;\n }\n &:hover,\n &.active {\n .top-row {\n .title {\n color: ", ";\n }\n }\n }\n }\n"])), (0, _mediaUi.size)(), (0, _mediaUi.absolute)(), _mediaUi.borderRadius, _styles.easeOutCubic, getOverlayStyles(props), "var(--ds-text-information, ".concat(colors.B400, ")"), "var(--ds-text, ".concat(colors.N800, ")"), "var(--ds-background-neutral-hovered, ".concat((0, _styles.rgba)(colors.N900, 0.06), ")"), "var(--ds-background-selected, ".concat(colors.B200, ")"), "var(--ds-background-selected-hovered, ".concat((0, _styles.rgba)(colors.N900, 0.16), ")"), "var(--ds-text, ".concat(colors.N900, ")"), "var(--ds-text, white)", "var(--ds-text, white)", "var(--ds-interaction-hovered, ".concat((0, _styles.rgba)(colors.N900, 0.5), ")"), "var(--ds-background-selected-bold, ".concat(colors.B200, ")"), "var(--ds-icon-inverse, white)", "var(--ds-text, ".concat(colors.N800, ")"));
|
|
35
|
-
};
|
|
36
|
-
exports.overlayStyles = overlayStyles;
|
|
37
|
-
var errorLineStyles = (0, _react.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n height: 24px;\n display: flex;\n align-items: center;\n"])));
|
|
38
|
-
exports.errorLineStyles = errorLineStyles;
|
|
39
|
-
var leftColumnStyles = (0, _react.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n width: 100%;\n position: relative;\n box-sizing: border-box;\n vertical-align: middle;\n"])));
|
|
40
|
-
exports.leftColumnStyles = leftColumnStyles;
|
|
41
|
-
var topRowStyles = (0, _react.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)([""])));
|
|
42
|
-
exports.topRowStyles = topRowStyles;
|
|
43
|
-
var bottomRowStyles = (0, _react.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n align-items: center;\n height: 16px;\n"])));
|
|
44
|
-
exports.bottomRowStyles = bottomRowStyles;
|
|
45
|
-
var rightColumnStyles = (0, _react.css)(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)([""])));
|
|
46
|
-
exports.rightColumnStyles = rightColumnStyles;
|
|
47
|
-
var errorMessageStyles = (0, _react.css)(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n ", " display: inline-block;\n vertical-align: middle;\n font-weight: bold;\n color: ", ";\n font-size: 12px;\n line-height: 15px;\n overflow: hidden;\n max-width: 'calc(100% - 24px)';\n text-overflow: ellipsis;\n white-space: nowrap;\n margin: auto 3px;\n"])), _styles.antialiased, "var(--ds-text-subtlest, ".concat(colors.N70, ")"));
|
|
48
|
-
exports.errorMessageStyles = errorMessageStyles;
|
|
49
|
-
var altWrapperStyles = (0, _react.css)(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n ", "\n font-weight: normal;\n"])), errorMessageStyles);
|
|
50
|
-
exports.altWrapperStyles = altWrapperStyles;
|
|
51
|
-
var titleWrapperStyles = function titleWrapperStyles(theme) {
|
|
52
|
-
return (0, _react.css)(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n box-sizing: border-box;\n word-wrap: break-word;\n color: ", ";\n font-size: 12px;\n line-height: 18px;\n"])), (0, _components.themed)({
|
|
53
|
-
light: "var(--ds-text, ".concat(colors.N800, ")"),
|
|
54
|
-
dark: "var(--ds-text, ".concat(colors.DN900, ")")
|
|
55
|
-
})({
|
|
56
|
-
theme: theme
|
|
57
|
-
}));
|
|
58
|
-
};
|
|
59
|
-
exports.titleWrapperStyles = titleWrapperStyles;
|
|
60
|
-
var subtitleStyles = (0, _react.css)(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2.default)(["\n ", " font-size: 12px;\n color: ", ";\n"])), (0, _mediaUi.ellipsis)('100px'), "var(--ds-text-subtlest, #5e6c84)");
|
|
61
|
-
exports.subtitleStyles = subtitleStyles;
|
|
62
|
-
var metadataStyles = (0, _react.css)(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n align-items: center;\n"])));
|
|
63
|
-
exports.metadataStyles = metadataStyles;
|
|
@@ -1,32 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
value: true
|
|
5
|
-
});
|
|
6
|
-
exports.Wrapper = void 0;
|
|
7
|
-
var _react = require("@emotion/react");
|
|
8
|
-
var _styles = require("../styles/styles");
|
|
9
|
-
/**@jsx jsx */
|
|
10
|
-
|
|
11
|
-
var Wrapper = function Wrapper(props) {
|
|
12
|
-
var testId = props.testId,
|
|
13
|
-
shouldUsePointerCursor = props.shouldUsePointerCursor,
|
|
14
|
-
breakpointSize = props.breakpointSize,
|
|
15
|
-
dimensions = props.dimensions,
|
|
16
|
-
onClick = props.onClick,
|
|
17
|
-
onMouseEnter = props.onMouseEnter,
|
|
18
|
-
innerRef = props.innerRef;
|
|
19
|
-
return (0, _react.jsx)("div", {
|
|
20
|
-
id: "cardViewWrapper",
|
|
21
|
-
"data-testid": testId,
|
|
22
|
-
css: (0, _styles.wrapperStyles)({
|
|
23
|
-
shouldUsePointerCursor: shouldUsePointerCursor,
|
|
24
|
-
breakpointSize: breakpointSize,
|
|
25
|
-
dimensions: dimensions
|
|
26
|
-
}),
|
|
27
|
-
onClick: onClick,
|
|
28
|
-
onMouseEnter: onMouseEnter,
|
|
29
|
-
ref: innerRef
|
|
30
|
-
}, props.children);
|
|
31
|
-
};
|
|
32
|
-
exports.Wrapper = Wrapper;
|
|
@@ -1,310 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
-
var _typeof = require("@babel/runtime/helpers/typeof");
|
|
5
|
-
Object.defineProperty(exports, "__esModule", {
|
|
6
|
-
value: true
|
|
7
|
-
});
|
|
8
|
-
exports.FileCardImageView = void 0;
|
|
9
|
-
var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
|
|
10
|
-
var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
|
|
11
|
-
var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
|
|
12
|
-
var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
|
|
13
|
-
var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
|
|
14
|
-
var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
|
|
15
|
-
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
16
|
-
var _react = require("@emotion/react");
|
|
17
|
-
var _react2 = _interopRequireWildcard(require("react"));
|
|
18
|
-
var _mediaUi = require("@atlaskit/media-ui");
|
|
19
|
-
var _vidPlay = _interopRequireDefault(require("@atlaskit/icon/glyph/vid-play"));
|
|
20
|
-
var _cardOverlay = require("./cardOverlay");
|
|
21
|
-
var _styles = require("./styles");
|
|
22
|
-
var _cardLoading = require("../../utils/lightCards/cardLoading");
|
|
23
|
-
var _shouldDisplayImageThumbnail = require("../../utils/shouldDisplayImageThumbnail");
|
|
24
|
-
var _progressBar = require("../../utils/progressBar");
|
|
25
|
-
var _cardActions = _interopRequireDefault(require("../../utils/cardActions"));
|
|
26
|
-
var _cardImageViewWrapper = require("./cardImageViewWrapper");
|
|
27
|
-
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); }
|
|
28
|
-
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; }
|
|
29
|
-
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); }; }
|
|
30
|
-
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; } } /**@jsx jsx */
|
|
31
|
-
var FileCardImageView = /*#__PURE__*/function (_Component) {
|
|
32
|
-
(0, _inherits2.default)(FileCardImageView, _Component);
|
|
33
|
-
var _super = _createSuper(FileCardImageView);
|
|
34
|
-
function FileCardImageView() {
|
|
35
|
-
var _this;
|
|
36
|
-
(0, _classCallCheck2.default)(this, FileCardImageView);
|
|
37
|
-
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
|
|
38
|
-
args[_key] = arguments[_key];
|
|
39
|
-
}
|
|
40
|
-
_this = _super.call.apply(_super, [this].concat(args));
|
|
41
|
-
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "wasThumbnailDisplayed", false);
|
|
42
|
-
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "renderCardContents", function () {
|
|
43
|
-
var _this$props = _this.props,
|
|
44
|
-
status = _this$props.status,
|
|
45
|
-
mediaType = _this$props.mediaType,
|
|
46
|
-
fileSize = _this$props.fileSize;
|
|
47
|
-
if (status === 'error') {
|
|
48
|
-
return _this.renderErrorContents();
|
|
49
|
-
} else if (status === 'failed-processing') {
|
|
50
|
-
return _this.renderFailedContents();
|
|
51
|
-
}
|
|
52
|
-
|
|
53
|
-
// If a video has no errors/failed processing, we want to be able to play it
|
|
54
|
-
// immediately, even if there's no image preview
|
|
55
|
-
var isZeroSize = fileSize === '' && ['processing', 'loading-preview'].includes(status);
|
|
56
|
-
if (mediaType !== 'video' && !_this.isFileCardImageReadyForDisplay && !isZeroSize) {
|
|
57
|
-
return _this.renderLoadingContents();
|
|
58
|
-
}
|
|
59
|
-
return _this.renderSuccessCardContents();
|
|
60
|
-
});
|
|
61
|
-
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "renderLoadingContents", function () {
|
|
62
|
-
return (0, _react.jsx)("div", {
|
|
63
|
-
className: "wrapper"
|
|
64
|
-
}, (0, _react.jsx)("div", {
|
|
65
|
-
className: "img-wrapper"
|
|
66
|
-
}, (0, _react.jsx)(_cardLoading.CardLoading, null)));
|
|
67
|
-
});
|
|
68
|
-
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "renderErrorContents", function () {
|
|
69
|
-
var _this$props2 = _this.props,
|
|
70
|
-
status = _this$props2.status,
|
|
71
|
-
error = _this$props2.error,
|
|
72
|
-
alt = _this$props2.alt,
|
|
73
|
-
mediaName = _this$props2.mediaName,
|
|
74
|
-
mediaType = _this$props2.mediaType,
|
|
75
|
-
actions = _this$props2.actions,
|
|
76
|
-
fileSize = _this$props2.fileSize;
|
|
77
|
-
return (0, _react.jsx)(_react2.default.Fragment, null, (0, _react.jsx)("div", {
|
|
78
|
-
className: "wrapper"
|
|
79
|
-
}), (0, _react.jsx)(_cardOverlay.CardOverlay, {
|
|
80
|
-
cardStatus: status,
|
|
81
|
-
error: error,
|
|
82
|
-
persistent: true,
|
|
83
|
-
mediaName: mediaName,
|
|
84
|
-
mediaType: mediaType,
|
|
85
|
-
alt: alt,
|
|
86
|
-
subtitle: fileSize,
|
|
87
|
-
actions: actions
|
|
88
|
-
}));
|
|
89
|
-
});
|
|
90
|
-
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "renderFailedContents", function () {
|
|
91
|
-
var _this$props3 = _this.props,
|
|
92
|
-
status = _this$props3.status,
|
|
93
|
-
mediaName = _this$props3.mediaName,
|
|
94
|
-
mediaType = _this$props3.mediaType,
|
|
95
|
-
actions = _this$props3.actions,
|
|
96
|
-
fileSize = _this$props3.fileSize;
|
|
97
|
-
return (0, _react.jsx)(_react2.default.Fragment, null, (0, _react.jsx)("div", {
|
|
98
|
-
className: "wrapper"
|
|
99
|
-
}), (0, _react.jsx)(_cardOverlay.CardOverlay, {
|
|
100
|
-
cardStatus: status,
|
|
101
|
-
noHover: true,
|
|
102
|
-
persistent: true,
|
|
103
|
-
mediaName: mediaName,
|
|
104
|
-
mediaType: mediaType,
|
|
105
|
-
subtitle: fileSize,
|
|
106
|
-
actions: actions
|
|
107
|
-
}));
|
|
108
|
-
});
|
|
109
|
-
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "renderUploadingCardOverlay", function () {
|
|
110
|
-
var _this$props4 = _this.props,
|
|
111
|
-
status = _this$props4.status,
|
|
112
|
-
mediaName = _this$props4.mediaName,
|
|
113
|
-
mediaType = _this$props4.mediaType,
|
|
114
|
-
dataURI = _this$props4.dataURI,
|
|
115
|
-
selectable = _this$props4.selectable,
|
|
116
|
-
selected = _this$props4.selected;
|
|
117
|
-
var isPersistent = mediaType === 'doc' || !dataURI;
|
|
118
|
-
return (0, _react.jsx)(_cardOverlay.CardOverlay, {
|
|
119
|
-
cardStatus: status,
|
|
120
|
-
persistent: isPersistent,
|
|
121
|
-
mediaName: mediaName,
|
|
122
|
-
selectable: selectable,
|
|
123
|
-
selected: selected
|
|
124
|
-
});
|
|
125
|
-
});
|
|
126
|
-
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "renderPlayButton", function () {
|
|
127
|
-
var _this$props5 = _this.props,
|
|
128
|
-
status = _this$props5.status,
|
|
129
|
-
mediaItemType = _this$props5.mediaItemType,
|
|
130
|
-
mediaType = _this$props5.mediaType,
|
|
131
|
-
mimeType = _this$props5.mimeType,
|
|
132
|
-
selectable = _this$props5.selectable,
|
|
133
|
-
dataURI = _this$props5.dataURI;
|
|
134
|
-
if (mediaType !== 'video') {
|
|
135
|
-
return null;
|
|
136
|
-
}
|
|
137
|
-
if (selectable && !(0, _shouldDisplayImageThumbnail.shouldDisplayImageThumbnail)(status, mediaItemType, dataURI, mediaType, mimeType)) {
|
|
138
|
-
return null;
|
|
139
|
-
}
|
|
140
|
-
return (0, _react.jsx)(_cardImageViewWrapper.PlayIconWrapper, null, (0, _react.jsx)("div", {
|
|
141
|
-
css: _styles.playIconBackgroundStyles
|
|
142
|
-
}, (0, _react.jsx)(_vidPlay.default, {
|
|
143
|
-
testId: "media-card-play-button",
|
|
144
|
-
label: "play",
|
|
145
|
-
size: "large"
|
|
146
|
-
})));
|
|
147
|
-
});
|
|
148
|
-
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onImageLoad", function () {
|
|
149
|
-
var _this$props6 = _this.props,
|
|
150
|
-
onImageLoad = _this$props6.onImageLoad,
|
|
151
|
-
cardPreview = _this$props6.cardPreview;
|
|
152
|
-
onImageLoad && onImageLoad(cardPreview);
|
|
153
|
-
});
|
|
154
|
-
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onImageError", function () {
|
|
155
|
-
var _this$props7 = _this.props,
|
|
156
|
-
onImageError = _this$props7.onImageError,
|
|
157
|
-
cardPreview = _this$props7.cardPreview;
|
|
158
|
-
onImageError && onImageError(cardPreview);
|
|
159
|
-
});
|
|
160
|
-
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "renderMediaImage", function () {
|
|
161
|
-
var _this$props8 = _this.props,
|
|
162
|
-
status = _this$props8.status,
|
|
163
|
-
mediaItemType = _this$props8.mediaItemType,
|
|
164
|
-
dataURI = _this$props8.dataURI,
|
|
165
|
-
mediaType = _this$props8.mediaType,
|
|
166
|
-
mimeType = _this$props8.mimeType,
|
|
167
|
-
previewOrientation = _this$props8.previewOrientation,
|
|
168
|
-
onDisplayImage = _this$props8.onDisplayImage,
|
|
169
|
-
alt = _this$props8.alt;
|
|
170
|
-
if (!(0, _shouldDisplayImageThumbnail.shouldDisplayImageThumbnail)(status, mediaItemType, dataURI, mediaType, mimeType)) {
|
|
171
|
-
return null;
|
|
172
|
-
}
|
|
173
|
-
if (!_this.wasThumbnailDisplayed && onDisplayImage && mediaType === 'image') {
|
|
174
|
-
onDisplayImage();
|
|
175
|
-
_this.wasThumbnailDisplayed = true;
|
|
176
|
-
}
|
|
177
|
-
return (0, _react.jsx)(_mediaUi.MediaImage, {
|
|
178
|
-
dataURI: dataURI,
|
|
179
|
-
alt: alt,
|
|
180
|
-
crop: _this.isCropped,
|
|
181
|
-
stretch: _this.isStretched,
|
|
182
|
-
previewOrientation: previewOrientation,
|
|
183
|
-
onImageLoad: _this.onImageLoad,
|
|
184
|
-
onImageError: _this.onImageError
|
|
185
|
-
});
|
|
186
|
-
});
|
|
187
|
-
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "renderProgressBar", function () {
|
|
188
|
-
var _this$props9 = _this.props,
|
|
189
|
-
mediaName = _this$props9.mediaName,
|
|
190
|
-
progress = _this$props9.progress,
|
|
191
|
-
actions = _this$props9.actions,
|
|
192
|
-
status = _this$props9.status;
|
|
193
|
-
if (status !== 'uploading') {
|
|
194
|
-
return null;
|
|
195
|
-
}
|
|
196
|
-
return (0, _react.jsx)(_cardImageViewWrapper.ProgressBarWrapper, null, (0, _react.jsx)("div", {
|
|
197
|
-
css: _styles.overlayStyles
|
|
198
|
-
}, (0, _react.jsx)("div", {
|
|
199
|
-
css: _styles.titleStyles
|
|
200
|
-
}, (0, _react.jsx)(_mediaUi.Ellipsify, {
|
|
201
|
-
testId: "media-card-file-name",
|
|
202
|
-
text: mediaName || '',
|
|
203
|
-
lines: 2
|
|
204
|
-
})), (0, _react.jsx)("div", {
|
|
205
|
-
css: _styles.bodyStyles
|
|
206
|
-
}, (0, _react.jsx)("div", {
|
|
207
|
-
css: _styles.progressWrapperStyles
|
|
208
|
-
}, (0, _react.jsx)(_progressBar.ProgressBar, {
|
|
209
|
-
progress: progress
|
|
210
|
-
})), (0, _react.jsx)("div", {
|
|
211
|
-
css: _styles.cardActionsWrapperStyles
|
|
212
|
-
}, actions ? (0, _react.jsx)(_cardActions.default, {
|
|
213
|
-
actions: actions,
|
|
214
|
-
triggerColor: "var(--ds-icon-inverse, white)"
|
|
215
|
-
}) : null))));
|
|
216
|
-
});
|
|
217
|
-
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "renderSuccessCardContents", function () {
|
|
218
|
-
var _this$props10 = _this.props,
|
|
219
|
-
disableOverlay = _this$props10.disableOverlay,
|
|
220
|
-
selectable = _this$props10.selectable,
|
|
221
|
-
status = _this$props10.status;
|
|
222
|
-
var overlay = null;
|
|
223
|
-
if (!disableOverlay) {
|
|
224
|
-
if (status === 'uploading') {
|
|
225
|
-
if (selectable) {
|
|
226
|
-
overlay = _this.renderUploadingCardOverlay();
|
|
227
|
-
}
|
|
228
|
-
} else {
|
|
229
|
-
overlay = _this.renderSuccessCardOverlay();
|
|
230
|
-
}
|
|
231
|
-
}
|
|
232
|
-
return (0, _react.jsx)("div", {
|
|
233
|
-
className: "wrapper"
|
|
234
|
-
}, (0, _react.jsx)("div", {
|
|
235
|
-
className: "img-wrapper"
|
|
236
|
-
}, _this.renderMediaImage(), _this.renderProgressBar(), _this.renderPlayButton()), overlay);
|
|
237
|
-
});
|
|
238
|
-
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "renderSuccessCardOverlay", function () {
|
|
239
|
-
var _this$props11 = _this.props,
|
|
240
|
-
status = _this$props11.status,
|
|
241
|
-
mediaName = _this$props11.mediaName,
|
|
242
|
-
mediaType = _this$props11.mediaType,
|
|
243
|
-
fileSize = _this$props11.fileSize,
|
|
244
|
-
dataURI = _this$props11.dataURI,
|
|
245
|
-
selectable = _this$props11.selectable,
|
|
246
|
-
selected = _this$props11.selected,
|
|
247
|
-
actions = _this$props11.actions;
|
|
248
|
-
var isPersistent = mediaType === 'doc' || !dataURI;
|
|
249
|
-
return (0, _react.jsx)(_cardOverlay.CardOverlay, {
|
|
250
|
-
cardStatus: status,
|
|
251
|
-
persistent: isPersistent,
|
|
252
|
-
mediaName: mediaName,
|
|
253
|
-
mediaType: mediaType,
|
|
254
|
-
selectable: selectable,
|
|
255
|
-
selected: selected,
|
|
256
|
-
subtitle: fileSize,
|
|
257
|
-
actions: actions
|
|
258
|
-
});
|
|
259
|
-
});
|
|
260
|
-
return _this;
|
|
261
|
-
}
|
|
262
|
-
(0, _createClass2.default)(FileCardImageView, [{
|
|
263
|
-
key: "render",
|
|
264
|
-
value: function render() {
|
|
265
|
-
var _this$props12 = this.props,
|
|
266
|
-
disableOverlay = _this$props12.disableOverlay,
|
|
267
|
-
selectable = _this$props12.selectable,
|
|
268
|
-
selected = _this$props12.selected,
|
|
269
|
-
mediaType = _this$props12.mediaType,
|
|
270
|
-
progress = _this$props12.progress,
|
|
271
|
-
status = _this$props12.status,
|
|
272
|
-
mediaName = _this$props12.mediaName;
|
|
273
|
-
return (0, _react.jsx)(_cardImageViewWrapper.CardImageViewWrapper, {
|
|
274
|
-
mediaName: mediaName,
|
|
275
|
-
status: status,
|
|
276
|
-
progress: progress,
|
|
277
|
-
disableOverlay: disableOverlay,
|
|
278
|
-
selectable: selectable,
|
|
279
|
-
selected: selected,
|
|
280
|
-
mediaType: mediaType
|
|
281
|
-
}, this.renderCardContents());
|
|
282
|
-
}
|
|
283
|
-
}, {
|
|
284
|
-
key: "isFileCardImageReadyForDisplay",
|
|
285
|
-
get: function get() {
|
|
286
|
-
var _this$props13 = this.props,
|
|
287
|
-
dataURI = _this$props13.dataURI,
|
|
288
|
-
status = _this$props13.status;
|
|
289
|
-
return !!dataURI || !['loading', 'processing', 'loading-preview'].includes(status);
|
|
290
|
-
}
|
|
291
|
-
}, {
|
|
292
|
-
key: "isCropped",
|
|
293
|
-
get: function get() {
|
|
294
|
-
var resizeMode = this.props.resizeMode;
|
|
295
|
-
return resizeMode === 'crop';
|
|
296
|
-
}
|
|
297
|
-
}, {
|
|
298
|
-
key: "isStretched",
|
|
299
|
-
get: function get() {
|
|
300
|
-
var resizeMode = this.props.resizeMode;
|
|
301
|
-
return resizeMode === 'stretchy-fit';
|
|
302
|
-
}
|
|
303
|
-
}]);
|
|
304
|
-
return FileCardImageView;
|
|
305
|
-
}(_react2.Component);
|
|
306
|
-
exports.FileCardImageView = FileCardImageView;
|
|
307
|
-
(0, _defineProperty2.default)(FileCardImageView, "defaultProps", {
|
|
308
|
-
resizeMode: 'crop',
|
|
309
|
-
disableOverlay: false
|
|
310
|
-
});
|
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
value: true
|
|
5
|
-
});
|
|
6
|
-
Object.defineProperty(exports, "FileCardImageView", {
|
|
7
|
-
enumerable: true,
|
|
8
|
-
get: function get() {
|
|
9
|
-
return _fileCardImageView.FileCardImageView;
|
|
10
|
-
}
|
|
11
|
-
});
|
|
12
|
-
var _fileCardImageView = require("./fileCardImageView");
|