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

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

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