@atlaskit/media-card 75.0.1 → 76.0.0

package/dist/es2019/card/cardImageView/cardOverlay/index.js

@@ -1,158 +0,0 @@
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-/**@jsx jsx */
-import { jsx } from '@emotion/react';
-import React from 'react';
-import { Component } from 'react';
-import cx from 'classnames';
-import TickIcon from '@atlaskit/icon/glyph/check';
-import { Ellipsify } from '@atlaskit/media-ui';
-
-// We dont require things directly from "utils" to avoid circular dependencies
-import { FileIcon } from '../../../utils/fileIcon';
-import { ErrorIcon } from '../../../utils/errorIcon';
-import CardActions from '../../../utils/cardActions';
-import { tickBoxStyles, errorLineStyles, leftColumnStyles, topRowStyles, bottomRowStyles, rightColumnStyles, subtitleStyles } from './styles';
-import { Metadata, AltWrapper, ErrorMessage, TitleWrapper, Overlay } from './cardOverlayComponents';
-const resolveTitleText = (cardStatus, mediaName, error, selected) => {
-  // don't show title if error
-  // also when card is uploading + selected, title is already showing outside of the overlay
-  if (error || !mediaName || cardStatus === 'uploading' && !selected) {
-    return '';
-  }
-  return mediaName;
-};
-export class CardOverlay extends Component {
-  constructor(props) {
-    super(props);
-    _defineProperty(this, "onMenuToggle", attrs => {
-      this.setState({
-        isMenuExpanded: attrs.isOpen
-      });
-    });
-    this.state = {
-      isMenuExpanded: false
-    };
-  }
-  get wrapperClassNames() {
-    const {
-      error,
-      noHover,
-      selectable,
-      selected,
-      mediaType,
-      persistent
-    } = this.props;
-    const {
-      isMenuExpanded
-    } = this.state;
-    return error ? cx('overlay', {
-      error,
-      active: isMenuExpanded
-    }) : cx('overlay', mediaType, {
-      active: isMenuExpanded,
-      selectable,
-      selected,
-      // Yes, you right. We put "persistent" class when it is NOT persistent. 🤦
-      persistent: !persistent,
-      noHover
-    });
-  }
-  render() {
-    const {
-      cardStatus,
-      error,
-      noHover,
-      mediaName,
-      persistent,
-      selected,
-      actions
-    } = this.props;
-    const titleText = resolveTitleText(cardStatus, mediaName, error, selected);
-    const menuTriggerColor = !persistent ? "var(--ds-icon-inverse, white)" : undefined;
-    return jsx(Overlay, {
-      hasError: !!error,
-      noHover: noHover,
-      className: this.wrapperClassNames
-    }, jsx("div", {
-      css: topRowStyles,
-      className: 'top-row'
-    }, this.errorLine(), jsx(TitleWrapper, null, titleText ? jsx(Ellipsify, {
-      testId: "media-card-file-name",
-      text: titleText,
-      lines: 2
-    }) : null), this.tickBox()), jsx("div", {
-      css: bottomRowStyles,
-      className: 'bottom-row'
-    }, jsx("div", {
-      css: leftColumnStyles
-    }, this.bottomLeftColumn()), jsx("div", {
-      css: rightColumnStyles
-    }, actions ? jsx(CardActions, {
-      actions: actions,
-      onToggle: this.onMenuToggle,
-      triggerColor: menuTriggerColor
-    }) : null)));
-  }
-  errorLine() {
-    const {
-      error,
-      alt
-    } = this.props;
-    return error && jsx(React.Fragment, null, jsx("div", {
-      css: errorLineStyles
-    }, jsx(ErrorIcon, null), jsx(ErrorMessage, null, error)), alt && jsx("div", {
-      css: errorLineStyles
-    }, jsx(AltWrapper, null, alt)));
-  }
-  tickBox() {
-    const {
-      selected,
-      selectable
-    } = this.props;
-    const tick = jsx(TickIcon, {
-      label: "tick"
-    });
-    const className = cx('tickbox', {
-      selected
-    });
-    return selectable && jsx("div", {
-      css: tickBoxStyles,
-      className: className
-    }, tick);
-  }
-  bottomLeftColumn() {
-    const {
-      error
-    } = this.props;
-    if (!error) {
-      const {
-        mediaType,
-        subtitle,
-        icon
-      } = this.props;
-      const classNames = cx('metadata');
-      const fileIcon = mediaType || icon ? jsx(FileIcon, {
-        mediaType: mediaType,
-        iconUrl: icon
-      }) : null;
-      const subtitleEl = subtitle ? jsx("div", {
-        css: subtitleStyles,
-        className: "file-size"
-      }, subtitle) : null;
-      return jsx("div", null, jsx(Metadata, {
-        className: classNames
-      }, fileIcon, subtitleEl));
-    }
-  }
-  removeBtnClick(handler) {
-    return e => {
-      e.preventDefault();
-      e.stopPropagation();
-      handler();
-    };
-  }
-}
-_defineProperty(CardOverlay, "defaultProps", {
-  actions: [],
-  mediaName: ''
-});

package/dist/es2019/card/cardImageView/cardOverlay/styles.js

@@ -1,240 +0,0 @@
-/**
- * Everything about this file change is just wrong.
- * Mostly because we do bad things with classes.
- * This is all wrong and hopefully will be removed from existence with card v3,
- * so please don’t be too sad about all this!
- */
-
-import { css } from '@emotion/react';
-import { borderRadius, size, ellipsis, absolute } from '@atlaskit/media-ui';
-import { themed } from '@atlaskit/theme/components';
-import * as colors from '@atlaskit/theme/colors';
-import { rgba, easeOutCubic, transition, antialiased } from '../../styles';
-export const tickBoxStyles = css`
-  ${size(14)}
-  ${transition()}
-  background-color: ${`var(--ds-surface-overlay, ${rgba('#ffffff', 0.5)})`};
-  position: absolute;
-  top: 8px;
-  right: 8px;
-  border-radius: 20px;
-  color: ${"var(--ds-icon-subtle, #798599)"}; /* CLEANUP - TODO FIL-3884: Align color with new design */
-  display: flex;
-  opacity: 0;
-
-  &.selected {
-    opacity: 1;
-    color: ${"var(--ds-icon-inverse, white)"};
-    background-color: ${"var(--ds-icon-selected, #0052cc)"}; /* CLEANUP - TODO FIL-3884: Align with tickbox icons */
-  }
-
-  /* Enforce dimensions of "tick" icon */
-  svg {
-    position: absolute;
-    width: 14px;
-  }
-`;
-const getOverlayStyles = ({
-  hasError,
-  noHover
-}) => {
-  if (hasError || noHover) {
-    return `
-        cursor: default;
-
-        &:hover {
-          background: transparent;
-        }
-      `;
-  }
-};
-export const overlayStyles = props => css`
-  ${size()}
-  ${absolute()}
-  ${borderRadius} display: flex;
-  justify-content: space-between;
-  flex-direction: column;
-  background: transparent;
-  transition: 0.3s background ${easeOutCubic}, 0.3s border-color;
-  padding: 16px;
-
-  ${getOverlayStyles(props)}
-  &:not(.persistent):hover, &.active {
-    .top-row {
-      .title {
-        color: ${`var(--ds-text-information, ${colors.B400})`};
-      }
-    }
-  }
-
-  &.noHover:hover {
-    .top-row {
-      .title {
-        color: ${`var(--ds-text, ${colors.N800})`};
-      }
-    }
-  }
-
-  .file-type-icon {
-    display: block;
-  }
-
-  &:not(.persistent) {
-    &:not(.error, .noHover):hover {
-      background-color: ${`var(--ds-background-neutral-hovered, ${rgba(colors.N900, 0.06)})`};
-    }
-
-    &.selectable {
-      &.selected {
-        background-color: ${`var(--ds-background-selected, ${colors.B200})`};
-
-        &:hover {
-          /* CLEANUP - TODO FIL-3884 add new overlay with rgba(colors.N900, 0.16) */
-          background-color: ${`var(--ds-background-selected-hovered, ${rgba(colors.N900, 0.16)})`};
-        }
-
-        .title,
-        .bottom-row,
-        .file-size {
-          color: ${`var(--ds-text, ${colors.N900})`};
-        }
-      }
-    }
-  }
-
-  &.persistent {
-    &:not(.active) {
-      overflow: hidden;
-    }
-
-    .top-row {
-      .title {
-        transition: opacity 0.3s;
-        opacity: 0;
-        color: ${"var(--ds-text, white)"};
-        visibility: hidden;
-      }
-    }
-
-    .bottom-row {
-      opacity: 0;
-      transition: transform 0.2s, opacity 0.5s;
-      /* 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 */
-      transform: translateY(35px);
-
-      .file-type-icon {
-        display: none;
-      }
-
-      .file-size {
-        color: ${"var(--ds-text, white)"};
-        display: none;
-      }
-    }
-
-    &:hover,
-    &.active {
-      background-color: ${`var(--ds-interaction-hovered, ${rgba(colors.N900, 0.5)})`};
-
-      .title {
-        opacity: 1;
-        visibility: visible;
-      }
-
-      .file-type-icon,
-      .file-size {
-        display: block;
-      }
-
-      .bottom-row {
-        opacity: 1;
-        transform: translateY(0);
-      }
-    }
-
-    /* Selectable */
-    &.selectable {
-      &:hover {
-        .tickbox {
-          opacity: 1;
-        }
-      }
-
-      &.selected {
-        .tickbox {
-          background-color: ${`var(--ds-background-selected-bold, ${colors.B200})`} !important;
-          color: ${"var(--ds-icon-inverse, white)"};
-        }
-      }
-    }
-  }
-
-  &.error {
-    .top-row {
-      overflow: visible;
-    }
-    &:hover,
-    &.active {
-      .top-row {
-        .title {
-          color: ${`var(--ds-text, ${colors.N800})`};
-        }
-      }
-    }
-  }
-`;
-export const errorLineStyles = css`
-  height: 24px;
-  display: flex;
-  align-items: center;
-`;
-export const leftColumnStyles = css`
-  width: 100%;
-  position: relative;
-  box-sizing: border-box;
-  vertical-align: middle;
-`;
-export const topRowStyles = css``;
-export const bottomRowStyles = css`
-  display: flex;
-  align-items: center;
-  height: 16px;
-`;
-export const rightColumnStyles = css``;
-export const errorMessageStyles = css`
-  ${antialiased} display: inline-block;
-  vertical-align: middle;
-  font-weight: bold;
-  color: ${`var(--ds-text-subtlest, ${colors.N70})`};
-  font-size: 12px;
-  line-height: 15px;
-  overflow: hidden;
-  max-width: 'calc(100% - 24px)';
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  margin: auto 3px;
-`;
-export const altWrapperStyles = css`
-  ${errorMessageStyles}
-  font-weight: normal;
-`;
-export const titleWrapperStyles = theme => css`
-  box-sizing: border-box;
-  word-wrap: break-word;
-  color: ${themed({
-  light: `var(--ds-text, ${colors.N800})`,
-  dark: `var(--ds-text, ${colors.DN900})`
-})({
-  theme
-})};
-  font-size: 12px;
-  line-height: 18px;
-`;
-export const subtitleStyles = css`
-  ${ellipsis('100px')} font-size: 12px;
-  color: ${"var(--ds-text-subtlest, #5e6c84)"};
-`;
-export const metadataStyles = css`
-  display: flex;
-  align-items: center;
-`;

package/dist/es2019/card/cardImageView/cardViewWrapper.js

@@ -1,26 +0,0 @@
-/**@jsx jsx */
-import { jsx } from '@emotion/react';
-import { wrapperStyles } from '../styles/styles';
-export const Wrapper = props => {
-  const {
-    testId,
-    shouldUsePointerCursor,
-    breakpointSize,
-    dimensions,
-    onClick,
-    onMouseEnter,
-    innerRef
-  } = props;
-  return jsx("div", {
-    id: "cardViewWrapper",
-    "data-testid": testId,
-    css: wrapperStyles({
-      shouldUsePointerCursor,
-      breakpointSize,
-      dimensions
-    }),
-    onClick: onClick,
-    onMouseEnter: onMouseEnter,
-    ref: innerRef
-  }, props.children);
-};

package/dist/es2019/card/cardImageView/fileCardImageView.js

@@ -1,291 +0,0 @@
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-/**@jsx jsx */
-import { jsx } from '@emotion/react';
-import React, { Component } from 'react';
-import { Ellipsify, MediaImage } from '@atlaskit/media-ui';
-import VidPlayIcon from '@atlaskit/icon/glyph/vid-play';
-import { CardOverlay } from './cardOverlay';
-import { bodyStyles, cardActionsWrapperStyles, overlayStyles, progressWrapperStyles, titleStyles, playIconBackgroundStyles } from './styles';
-import { CardLoading } from '../../utils/lightCards/cardLoading';
-import { shouldDisplayImageThumbnail } from '../../utils/shouldDisplayImageThumbnail';
-import { ProgressBar } from '../../utils/progressBar';
-import CardActions from '../../utils/cardActions';
-import { CardImageViewWrapper, PlayIconWrapper, ProgressBarWrapper } from './cardImageViewWrapper';
-export class FileCardImageView extends Component {
-  constructor(...args) {
-    super(...args);
-    _defineProperty(this, "wasThumbnailDisplayed", false);
-    _defineProperty(this, "renderCardContents", () => {
-      const {
-        status,
-        mediaType,
-        fileSize
-      } = this.props;
-      if (status === 'error') {
-        return this.renderErrorContents();
-      } else if (status === 'failed-processing') {
-        return this.renderFailedContents();
-      }
-
-      // If a video has no errors/failed processing, we want to be able to play it
-      // immediately, even if there's no image preview
-      const isZeroSize = fileSize === '' && ['processing', 'loading-preview'].includes(status);
-      if (mediaType !== 'video' && !this.isFileCardImageReadyForDisplay && !isZeroSize) {
-        return this.renderLoadingContents();
-      }
-      return this.renderSuccessCardContents();
-    });
-    _defineProperty(this, "renderLoadingContents", () => {
-      return jsx("div", {
-        className: "wrapper"
-      }, jsx("div", {
-        className: "img-wrapper"
-      }, jsx(CardLoading, null)));
-    });
-    _defineProperty(this, "renderErrorContents", () => {
-      const {
-        status,
-        error,
-        alt,
-        mediaName,
-        mediaType,
-        actions,
-        fileSize
-      } = this.props;
-      return jsx(React.Fragment, null, jsx("div", {
-        className: "wrapper"
-      }), jsx(CardOverlay, {
-        cardStatus: status,
-        error: error,
-        persistent: true,
-        mediaName: mediaName,
-        mediaType: mediaType,
-        alt: alt,
-        subtitle: fileSize,
-        actions: actions
-      }));
-    });
-    _defineProperty(this, "renderFailedContents", () => {
-      const {
-        status,
-        mediaName,
-        mediaType,
-        actions,
-        fileSize
-      } = this.props;
-      return jsx(React.Fragment, null, jsx("div", {
-        className: "wrapper"
-      }), jsx(CardOverlay, {
-        cardStatus: status,
-        noHover: true,
-        persistent: true,
-        mediaName: mediaName,
-        mediaType: mediaType,
-        subtitle: fileSize,
-        actions: actions
-      }));
-    });
-    _defineProperty(this, "renderUploadingCardOverlay", () => {
-      const {
-        status,
-        mediaName,
-        mediaType,
-        dataURI,
-        selectable,
-        selected
-      } = this.props;
-      const isPersistent = mediaType === 'doc' || !dataURI;
-      return jsx(CardOverlay, {
-        cardStatus: status,
-        persistent: isPersistent,
-        mediaName: mediaName,
-        selectable: selectable,
-        selected: selected
-      });
-    });
-    _defineProperty(this, "renderPlayButton", () => {
-      const {
-        status,
-        mediaItemType,
-        mediaType,
-        mimeType,
-        selectable,
-        dataURI
-      } = this.props;
-      if (mediaType !== 'video') {
-        return null;
-      }
-      if (selectable && !shouldDisplayImageThumbnail(status, mediaItemType, dataURI, mediaType, mimeType)) {
-        return null;
-      }
-      return jsx(PlayIconWrapper, null, jsx("div", {
-        css: playIconBackgroundStyles
-      }, jsx(VidPlayIcon, {
-        testId: "media-card-play-button",
-        label: "play",
-        size: "large"
-      })));
-    });
-    _defineProperty(this, "onImageLoad", () => {
-      const {
-        onImageLoad,
-        cardPreview
-      } = this.props;
-      onImageLoad && onImageLoad(cardPreview);
-    });
-    _defineProperty(this, "onImageError", () => {
-      const {
-        onImageError,
-        cardPreview
-      } = this.props;
-      onImageError && onImageError(cardPreview);
-    });
-    _defineProperty(this, "renderMediaImage", () => {
-      const {
-        status,
-        mediaItemType,
-        dataURI,
-        mediaType,
-        mimeType,
-        previewOrientation,
-        onDisplayImage,
-        alt
-      } = this.props;
-      if (!shouldDisplayImageThumbnail(status, mediaItemType, dataURI, mediaType, mimeType)) {
-        return null;
-      }
-      if (!this.wasThumbnailDisplayed && onDisplayImage && mediaType === 'image') {
-        onDisplayImage();
-        this.wasThumbnailDisplayed = true;
-      }
-      return jsx(MediaImage, {
-        dataURI: dataURI,
-        alt: alt,
-        crop: this.isCropped,
-        stretch: this.isStretched,
-        previewOrientation: previewOrientation,
-        onImageLoad: this.onImageLoad,
-        onImageError: this.onImageError
-      });
-    });
-    _defineProperty(this, "renderProgressBar", () => {
-      const {
-        mediaName,
-        progress,
-        actions,
-        status
-      } = this.props;
-      if (status !== 'uploading') {
-        return null;
-      }
-      return jsx(ProgressBarWrapper, null, jsx("div", {
-        css: overlayStyles
-      }, jsx("div", {
-        css: titleStyles
-      }, jsx(Ellipsify, {
-        testId: "media-card-file-name",
-        text: mediaName || '',
-        lines: 2
-      })), jsx("div", {
-        css: bodyStyles
-      }, jsx("div", {
-        css: progressWrapperStyles
-      }, jsx(ProgressBar, {
-        progress: progress
-      })), jsx("div", {
-        css: cardActionsWrapperStyles
-      }, actions ? jsx(CardActions, {
-        actions: actions,
-        triggerColor: "var(--ds-icon-inverse, white)"
-      }) : null))));
-    });
-    _defineProperty(this, "renderSuccessCardContents", () => {
-      const {
-        disableOverlay,
-        selectable,
-        status
-      } = this.props;
-      let overlay = null;
-      if (!disableOverlay) {
-        if (status === 'uploading') {
-          if (selectable) {
-            overlay = this.renderUploadingCardOverlay();
-          }
-        } else {
-          overlay = this.renderSuccessCardOverlay();
-        }
-      }
-      return jsx("div", {
-        className: "wrapper"
-      }, jsx("div", {
-        className: "img-wrapper"
-      }, this.renderMediaImage(), this.renderProgressBar(), this.renderPlayButton()), overlay);
-    });
-    _defineProperty(this, "renderSuccessCardOverlay", () => {
-      const {
-        status,
-        mediaName,
-        mediaType,
-        fileSize,
-        dataURI,
-        selectable,
-        selected,
-        actions
-      } = this.props;
-      const isPersistent = mediaType === 'doc' || !dataURI;
-      return jsx(CardOverlay, {
-        cardStatus: status,
-        persistent: isPersistent,
-        mediaName: mediaName,
-        mediaType: mediaType,
-        selectable: selectable,
-        selected: selected,
-        subtitle: fileSize,
-        actions: actions
-      });
-    });
-  }
-  render() {
-    const {
-      disableOverlay,
-      selectable,
-      selected,
-      mediaType,
-      progress,
-      status,
-      mediaName
-    } = this.props;
-    return jsx(CardImageViewWrapper, {
-      mediaName: mediaName,
-      status: status,
-      progress: progress,
-      disableOverlay: disableOverlay,
-      selectable: selectable,
-      selected: selected,
-      mediaType: mediaType
-    }, this.renderCardContents());
-  }
-  get isFileCardImageReadyForDisplay() {
-    const {
-      dataURI,
-      status
-    } = this.props;
-    return !!dataURI || !['loading', 'processing', 'loading-preview'].includes(status);
-  }
-  get isCropped() {
-    const {
-      resizeMode
-    } = this.props;
-    return resizeMode === 'crop';
-  }
-  get isStretched() {
-    const {
-      resizeMode
-    } = this.props;
-    return resizeMode === 'stretchy-fit';
-  }
-}
-_defineProperty(FileCardImageView, "defaultProps", {
-  resizeMode: 'crop',
-  disableOverlay: false
-});

package/dist/es2019/card/cardImageView/index.js

@@ -1 +0,0 @@
-export { FileCardImageView } from './fileCardImageView';