@ntbjs/react-components 2.0.0-rc.13 → 2.0.0-rc.27

package/esm/components/widgets/AssetGallery/AssetGalleryBase/AssetGalleryCompactCard/AssetGalleryCompactCard.js

@@ -1,401 +0,0 @@
-import { extends as _extends, objectWithoutProperties as _objectWithoutProperties } from '../../../../../_virtual/_rollupPluginBabelHelpers.js';
-import { get, isFunction, mapKeys, omit } from 'lodash';
-import PropTypes from '../../../../../node_modules/prop-types/index.js';
-import React from '../../../../../node_modules/react/index.js';
-import { trackWindowScroll, LazyLoadComponent, LazyLoadImage } from 'react-lazy-load-image-component';
-import '../../../../../node_modules/react-lazy-load-image-component/src/effects/opacity.css.js';
-import { ReactComponent as SvgCheckRectangleFilled } from '../../../../../icons/check-rectangle-filled.svg.js';
-import { ReactComponent as SvgHeadset } from '../../../../../icons/headset.svg.js';
-import { ReactComponent as SvgLayers } from '../../../../../icons/layers.svg.js';
-import { ReactComponent as SvgPlay } from '../../../../../icons/play.svg.js';
-import { ReactComponent as SvgWarningCircle } from '../../../../../icons/warning-circle.svg.js';
-import { convertMsToHMS } from '../../../../../utils/dateTime.js';
-import { assetShapeWithLayout } from '../../asset.propType.js';
-import { AssetGalleryWrapper, AssetGalleryCompactCard as AssetGalleryCompactCard$2, Reference, Overlay, OverlayBackdrop, OverlayInfoTopActions, OverlayInfo, OverlayInfoTop, OverlayInfoTopLeft, OverlayInfoTopWarning, OverlayInfoBottom, OverlayInfoBottomSelectButton, OverlayInfoBottomMediaIcon, OverlayCompleted, OverlayHasError, OverlaySelected, StyledFloatingArrow, ConsumerDefinedOverlay, Figure, FigureOverlayBackdrop } from './AssetGalleryCompactCard.styled.js';
-import { useFloating, autoUpdate, offset, flip, shift, arrow, useTransitionStyles, useHover, useDismiss, useInteractions, useMergeRefs } from '@floating-ui/react';
-import Badge from '../../../../data/Badge/Badge.js';
-import SummaryCard from '../../../SummaryCard/SummaryCard.js';
-import AssetActionsBase from '../../../AssetActionsBase/AssetActionsBase.js';
-import { r as react } from '../../../../../_virtual/index.js';
-
-const _excluded = ["component", "asset"];
-const ComputedRootComponent = _ref => {
-  let {
-      component,
-      asset
-    } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded);
-  const newProps = mapKeys(omit(props, ['theme', 'extendedSelectMode']), (_, key) => key === 'innerRef' ? 'ref' : key);
-  if (component) {
-    if (!isFunction(component)) throw Error('Expected a function in component-prop');
-    if (React.isValidElement(component(asset, newProps.children))) {
-      return React.cloneElement(component(asset, newProps.children), omit(newProps, ['children']));
-    }
-  }
-  return React.createElement(AssetGalleryCompactCard$2, _extends({
-    ref: newProps.ref
-  }, newProps));
-};
-const AssetGalleryCompactCard = props => {
-  var _asset$note, _asset$note2;
-  const {
-    asset,
-    activeSummaryCard,
-    displayIcon,
-    selectable,
-    hasHeightAndWidth,
-    selected,
-    customSelectedBorder,
-    extendedSelectMode,
-    onAssetSelected,
-    onAssetUnselected,
-    softSelected,
-    component,
-    scrollPosition,
-    collapseExtraInfo
-  } = props;
-  const ARROW_WIDTH = 30;
-  const ARROW_HEIGHT = 15;
-  const GAP = 8;
-  const arrowRef = react.exports.useRef(null);
-  const [isOpen, setIsOpen] = react.exports.useState(false);
-  const [placement] = react.exports.useState('bottom');
-  const [isOverlayHovered, setIsOverlayHovered] = react.exports.useState(false);
-  const [openedSubActions, updateOpenedSubActions] = react.exports.useState([]);
-  const {
-    refs,
-    floatingStyles,
-    context
-  } = useFloating({
-    placement,
-    open: isOpen,
-    onOpenChange: setIsOpen,
-    whileElementsMounted: autoUpdate,
-    middleware: [offset(ARROW_HEIGHT + GAP), flip({
-      padding: 5
-    }), shift({
-      padding: 5
-    }), arrow({
-      element: arrowRef
-    })]
-  });
-  const {
-    isMounted,
-    styles
-  } = useTransitionStyles(context, {
-    initial: {
-      transform: 'translateY(-8px)',
-      opacity: 0
-    },
-    duration: {
-      open: 200,
-      close: 100
-    }
-  });
-  const hover = useHover(context, {
-    restMs: 100
-  });
-  const dismiss = useDismiss(context, {
-    referencePress: true,
-    ancestorScroll: true,
-    windowScroll: true,
-    windowBlur: true
-  });
-  const {
-    getReferenceProps,
-    getFloatingProps
-  } = useInteractions([dismiss, hover]);
-  react.exports.useEffect(() => {
-    var _asset$actions;
-    const newOpenedSubActions = ((_asset$actions = asset === null || asset === void 0 ? void 0 : asset.actions) !== null && _asset$actions !== void 0 ? _asset$actions : []).map(() => false);
-    updateOpenedSubActions(newOpenedSubActions);
-  }, [asset]);
-  react.exports.useEffect(() => {
-    if (!isOverlayHovered && openedSubActions !== null && openedSubActions !== void 0 && openedSubActions.length) {
-      updateOpenedSubActions(openedSubActions.map(() => false));
-    }
-  }, [isOverlayHovered]);
-  const mouseHasEnteredOverlay = react.exports.useCallback(() => {
-    setIsOverlayHovered(true);
-  }, []);
-  const mouseHasLeftOverlay = react.exports.useCallback(() => {
-    setIsOverlayHovered(false);
-  }, []);
-  const isAnySubActionsOpened = react.exports.useMemo(() => {
-    return openedSubActions.some(isOpened => isOpened);
-  }, [openedSubActions]);
-  function onClick(event) {
-    if (extendedSelectMode) {
-      return onSelectClick(event);
-    }
-    if (isFunction(asset.onClick)) {
-      asset.onClick(event, asset);
-    }
-  }
-  function onSelectClick(event) {
-    event.preventDefault();
-    event.stopPropagation();
-    if (selected) {
-      return onAssetUnselected(asset.key);
-    }
-    if (selectable) {
-      return onAssetSelected(asset.key);
-    }
-  }
-  function onContextMenu(event) {
-    event.preventDefault();
-    asset.onContextMenu(event);
-  }
-  react.exports.useEffect(() => {
-    if (isFunction(asset.onContextMenu)) {
-      if (cardRef.current) {
-        cardRef.current.addEventListener('contextmenu', onContextMenu);
-      }
-      return () => {
-        if (cardRef.current) {
-          cardRef.current.removeEventListener('contextmenu', onContextMenu);
-        }
-      };
-    }
-  }, []);
-  function onDragstart(event) {
-    asset.onDragstart(event);
-  }
-  react.exports.useEffect(() => {
-    if (isFunction(asset.onDragstart)) {
-      if (dragRef.current) {
-        dragRef.current.addEventListener('dragstart', onDragstart);
-      }
-      return () => {
-        if (dragRef.current) {
-          dragRef.current.removeEventListener('dragstart', onDragstart);
-        }
-      };
-    }
-  }, []);
-  const videoPlayerRef = react.exports.useRef();
-  const cardRef = react.exports.useRef();
-  const dragRef = react.exports.useRef(null);
-  const overlayCompactRef = useMergeRefs([cardRef, refs.setReference]);
-  function onMouseEnter(event) {
-    if (videoPlayerRef.current) {
-      const playPromise = videoPlayerRef.current.play();
-      if (playPromise !== undefined) {
-        playPromise.then(() => {}).catch(() => {});
-      }
-    }
-    if (isFunction(asset.onMouseEnter)) {
-      asset.onMouseEnter(event, asset);
-    }
-  }
-  function onMouseLeave() {
-    if (videoPlayerRef.current) {
-      videoPlayerRef.current.pause();
-    }
-  }
-  const renderPreview = asset => {
-    var _asset$fileType, _asset$fileType2;
-    let previewContent = null;
-    if ((asset === null || asset === void 0 || (_asset$fileType = asset.fileType) === null || _asset$fileType === void 0 ? void 0 : _asset$fileType.toLowerCase()) === 'video') {
-      previewContent = React.createElement(LazyLoadComponent, {
-        scrollPosition: scrollPosition
-      }, React.createElement("video", {
-        ref: videoPlayerRef,
-        loop: true,
-        muted: true
-      }, React.createElement("source", {
-        src: asset.previewUrl,
-        type: "video/mp4"
-      })));
-    } else if ((asset === null || asset === void 0 || (_asset$fileType2 = asset.fileType) === null || _asset$fileType2 === void 0 ? void 0 : _asset$fileType2.toLowerCase()) === 'audio') {
-      previewContent = React.createElement(LazyLoadComponent, {
-        scrollPosition: scrollPosition
-      }, React.createElement("div", {
-        className: "audio"
-      }, React.createElement(SvgHeadset, null)));
-    } else {
-      previewContent = React.createElement(LazyLoadImage, {
-        alt: asset === null || asset === void 0 ? void 0 : asset.title,
-        src: asset === null || asset === void 0 ? void 0 : asset.previewUrl,
-        height: "100%",
-        width: "100%",
-        delayMethod: "debounce",
-        delayTime: 0,
-        threshold: 1500,
-        scrollPosition: scrollPosition
-      });
-    }
-    return React.createElement(Figure, {
-      hasHeightAndWidth: hasHeightAndWidth
-    }, previewContent, React.createElement(FigureOverlayBackdrop, {
-      selected: selected
-    }));
-  };
-  react.exports.useEffect(() => {
-    if (softSelected) {
-      cardRef.current.scrollIntoView({
-        behavior: 'smooth',
-        block: 'nearest'
-      });
-    }
-  }, [softSelected]);
-  const renderVersionsBadge = react.exports.useCallback(() => {
-    if (!(asset !== null && asset !== void 0 && asset.versions)) return null;
-    return React.createElement(Badge, {
-      badgeIcon: React.createElement(SvgLayers, null),
-      badgeContent: asset.versions,
-      backgroundColors: ['black', 'black'],
-      colors: ['#f7f8f9', '#f7f8f9'],
-      fontSize: 12,
-      fontWeight: 500,
-      lineHeight: 16,
-      verticalPadding: 4,
-      horizontalPadding: 8
-    });
-  }, [asset]);
-  const renderVerificationBadge = react.exports.useCallback(() => {
-    if (!(asset !== null && asset !== void 0 && asset.verifications)) return null;
-    return asset === null || asset === void 0 ? void 0 : asset.verifications;
-  }, [asset]);
-  const renderdynamicBadge = react.exports.useCallback(() => {
-    if (asset !== null && asset !== void 0 && asset.verifications) return renderVerificationBadge();
-    if (asset !== null && asset !== void 0 && asset.versions) return renderVersionsBadge();
-    return null;
-  });
-  const renderBadge = () => {
-    switch (displayIcon) {
-      case 'versions':
-        return renderVersionsBadge();
-      case 'verifications':
-        return renderVerificationBadge();
-      case 'dynamic':
-        return renderdynamicBadge();
-      default:
-        return null;
-    }
-  };
-  const renderMediaBadge = react.exports.useCallback(() => {
-    let badgeIcon = null;
-    let badgeContent = null;
-    if ((asset === null || asset === void 0 ? void 0 : asset.fileType) === 'video') {
-      badgeIcon = React.createElement(SvgPlay, null);
-    }
-    if (asset !== null && asset !== void 0 && asset.duration) {
-      badgeContent = convertMsToHMS(asset.duration);
-    }
-    if (!badgeIcon && !badgeContent) return null;
-    return React.createElement(Badge, {
-      badgeIcon: badgeIcon,
-      badgeContent: badgeContent,
-      backgroundColors: ['black', 'black'],
-      colors: ['#f7f8f9', '#f7f8f9'],
-      fontSize: 12,
-      fontWeight: 500,
-      lineHeight: 16,
-      verticalPadding: 4,
-      horizontalPadding: 8,
-      minWidth: 32,
-      height: 24
-    });
-  }, [asset]);
-  const renderSummaryCardHeaderLeft = react.exports.useCallback(() => {
-    return React.createElement(React.Fragment, null, renderVersionsBadge(), renderMediaBadge());
-  }, [asset]);
-  const renderPopoverContent = react.exports.useCallback(() => {
-    var _asset$summary, _asset$summary2, _asset$summary3, _asset$summary4;
-    return React.createElement(SummaryCard, {
-      activeSummaryCard: activeSummaryCard,
-      title: (asset === null || asset === void 0 ? void 0 : asset.title) || '',
-      description: (asset === null || asset === void 0 ? void 0 : asset.description) || '',
-      instructions: (asset === null || asset === void 0 ? void 0 : asset.imageRights) || '',
-      instructionsType: 'warning',
-      headerRight: (asset === null || asset === void 0 || (_asset$summary = asset.summary) === null || _asset$summary === void 0 ? void 0 : _asset$summary.headerRight) || '',
-      headerLeft: React.createElement(React.Fragment, null, renderSummaryCardHeaderLeft(), (asset === null || asset === void 0 || (_asset$summary2 = asset.summary) === null || _asset$summary2 === void 0 ? void 0 : _asset$summary2.headerLeft) || ''),
-      footerLeft: (asset === null || asset === void 0 || (_asset$summary3 = asset.summary) === null || _asset$summary3 === void 0 ? void 0 : _asset$summary3.footerLeft) || '',
-      footerRight: (asset === null || asset === void 0 || (_asset$summary4 = asset.summary) === null || _asset$summary4 === void 0 ? void 0 : _asset$summary4.footerRight) || '',
-      width: 375,
-      view: 'compact'
-    });
-  }, [asset]);
-  return React.createElement(AssetGalleryWrapper, {
-    disabled: asset.disabled
-  }, React.createElement(AssetGalleryCompactCard$2, _extends({
-    as: ComputedRootComponent,
-    component: component,
-    disabled: asset.disabled,
-    asset: asset,
-    onClick: onClick,
-    extendedSelectMode: extendedSelectMode,
-    onMouseEnter: onMouseEnter,
-    onMouseLeave: onMouseLeave,
-    draggable: asset.draggable,
-    innerRef: dragRef,
-    selected: selected
-  }, getReferenceProps()), React.createElement(Reference, {
-    ref: refs.setReference
-  }, asset.previewUrl && renderPreview(asset)), React.createElement(Overlay, _extends({
-    ref: overlayCompactRef,
-    onMouseEnter: mouseHasEnteredOverlay,
-    onMouseLeave: mouseHasLeftOverlay,
-    style: {
-      height: '100%'
-    }
-  }, getReferenceProps()), React.createElement(OverlayBackdrop, {
-    softSelected: softSelected,
-    selected: selected
-  }), (asset === null || asset === void 0 ? void 0 : asset.actions) && React.createElement(OverlayInfoTopActions, {
-    $isOverlayHovered: isOverlayHovered
-  }, React.createElement(AssetActionsBase, {
-    actions: asset.actions,
-    asset: asset
-  })), React.createElement(OverlayInfo, null, isOverlayHovered && React.createElement("span", null, asset.title), React.createElement(OverlayInfoTop, null, React.createElement(OverlayInfoTopLeft, {
-    collapseExtraInfo: collapseExtraInfo
-  }, renderBadge()), (asset === null || asset === void 0 || (_asset$note = asset.note) === null || _asset$note === void 0 ? void 0 : _asset$note.title) && React.createElement(OverlayInfoTopWarning, {
-    type: asset === null || asset === void 0 || (_asset$note2 = asset.note) === null || _asset$note2 === void 0 ? void 0 : _asset$note2.type
-  }, React.createElement(SvgWarningCircle, null))), React.createElement(OverlayInfoBottom, null, selectable && React.createElement(OverlayInfoBottomSelectButton, {
-    selected: selected
-  }, React.createElement(SvgCheckRectangleFilled, {
-    onClick: onSelectClick
-  })), React.createElement(OverlayInfoBottomMediaIcon, null, renderMediaBadge()))), asset.completed && React.createElement(OverlayCompleted, {
-    softSelected: softSelected
-  }), asset.hasError && React.createElement(OverlayHasError, {
-    softSelected: softSelected
-  }), selectable && React.createElement(OverlaySelected, {
-    selected: selected,
-    softSelected: softSelected,
-    customSelectedBorder: customSelectedBorder
-  }), isOpen && isOverlayHovered && isMounted && activeSummaryCard && !isAnySubActionsOpened && React.createElement("div", _extends({
-    ref: refs.setFloating,
-    style: floatingStyles
-  }, getFloatingProps()), React.createElement("div", {
-    style: styles,
-    className: "floating"
-  }, renderPopoverContent(), React.createElement(StyledFloatingArrow, {
-    ref: arrowRef,
-    context: context,
-    width: ARROW_WIDTH,
-    height: ARROW_HEIGHT
-  })))), asset.overlay && React.createElement(ConsumerDefinedOverlay, null, asset.overlay)));
-};
-AssetGalleryCompactCard.propTypes = process.env.NODE_ENV !== "production" ? {
-  asset: PropTypes.shape(assetShapeWithLayout).isRequired,
-  hasHeightAndWidth: PropTypes.bool,
-  selectable: PropTypes.bool,
-  selected: PropTypes.bool,
-  customSelectedBorder: PropTypes.arrayOf(PropTypes.string),
-  extendedSelectMode: PropTypes.bool,
-  onAssetSelected: PropTypes.func.isRequired,
-  onAssetUnselected: PropTypes.func.isRequired,
-  softSelected: PropTypes.bool.isRequired,
-  component: PropTypes.func,
-  scrollPosition: PropTypes.number,
-  collapseExtraInfo: PropTypes.bool,
-  activeSummaryCard: PropTypes.bool,
-  displayIcon: PropTypes.oneOf(['dynamic', 'versions', 'verifications', ''])
-} : {};
-var AssetGalleryCompactCard$1 = trackWindowScroll(React.memo(AssetGalleryCompactCard, (prevProps, nextProps) => {
-  const reactiveProps = ['selectable', 'selected', 'extendedSelectMode', 'softSelected', 'asset.previewUrl', 'asset.overlay', 'hasHeightAndWidth', 'collapseExtraInfo'];
-  return reactiveProps.every(propKey => get(prevProps, propKey) === get(nextProps, propKey));
-}));
-
-export { AssetGalleryCompactCard$1 as default };