@ntbjs/react-components 1.3.0-rc.9 → 2.0.0-rc.3

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

@@ -0,0 +1,402 @@
+'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,
+    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,
+      compact: true
+    });
+  }, [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
+  }), 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,
+  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(['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;