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

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

@@ -0,0 +1,396 @@
+'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');
+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 AssetGalleryGridCard_styled = require('./AssetGalleryGridCard.styled.js');
+var ContextMenuItem = require('../../../ContextMenu/ContextMenuItem/ContextMenuItem.js');
+var ContextMenu = require('../../../ContextMenu/ContextMenu.js');
+var Popover = require('../../../../data/Popover/Popover.js');
+var ActionButton = require('../../../../inputs/ActionButton/ActionButton.js');
+var Badge = require('../../../../data/Badge/Badge.js');
+var SummaryCard = require('../../../SummaryCard/SummaryCard.js');
+var Tooltip = require('../../../../data/Tooltip/Tooltip.js');
+var index$1 = require('../../../../../_virtual/index.js');
+
+const _excluded = ["component", "asset"],
+  _excluded2 = ["component", "className", "subActions", "isSubActionsOpened"];
+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(AssetGalleryGridCard_styled.AssetGalleryGridCard, _rollupPluginBabelHelpers["extends"]({
+    ref: newProps.ref
+  }, newProps));
+};
+const ComputedActionButton = index["default"].forwardRef(function ComputedActionButton(_ref2, forwardedRef) {
+  let {
+      component,
+      className,
+      subActions = [],
+      isSubActionsOpened
+    } = _ref2,
+    props = _rollupPluginBabelHelpers.objectWithoutProperties(_ref2, _excluded2);
+  const newProps = props;
+  if (!lodash.isEmpty(subActions)) {
+    const contextMenuItems = subActions.map((subAction, key) => {
+      const {
+        onClick,
+        title,
+        icon
+      } = subAction;
+      return index["default"].createElement(ContextMenuItem["default"], {
+        key: key,
+        onClickEffect: onClick,
+        title: title,
+        icon: icon
+      });
+    });
+    const contextMenu = index["default"].createElement(ContextMenu["default"], null, contextMenuItems);
+    newProps.children = index["default"].createElement(Popover["default"], {
+      contextMenu: true,
+      content: contextMenu,
+      placement: 'bottom-end',
+      visible: isSubActionsOpened,
+      zIndex: 10001,
+      offset: [0, -8]
+    }, index["default"].createElement(ActionButton["default"], {
+      useShadow: true,
+      active: true,
+      ref: forwardedRef,
+      className: className,
+      icon: newProps.icon,
+      backgroundColors: ['black', 'white'],
+      onClick: newProps.onClick,
+      actionWidthHeight: newProps.actionWidthHeight
+    }));
+  } else {
+    newProps.children = index["default"].createElement(ActionButton["default"], {
+      useShadow: true,
+      active: true,
+      ref: forwardedRef,
+      className: className,
+      icon: newProps.icon,
+      onClick: newProps.onClick,
+      backgroundColors: ['black', 'white'],
+      actionWidthHeight: newProps.actionWidthHeight
+    });
+  }
+  if (component) {
+    if (!lodash.isFunction(component)) throw Error('Expected a function in component-prop');
+    if (index["default"].isValidElement(component())) {
+      return index["default"].cloneElement(component(), _rollupPluginBabelHelpers.objectSpread2({}, lodash.omit(newProps, 'icon')));
+    }
+  }
+  return index["default"].createElement(index["default"].Fragment, null, newProps.children);
+});
+const AssetGalleryGridCard = props => {
+  const {
+    asset,
+    selectable,
+    selected,
+    extendedSelectMode,
+    onAssetSelected,
+    onAssetUnselected,
+    softSelected,
+    component,
+    scrollPosition
+  } = props;
+  const [isCardHovered, setIsCardHovered] = index["default"].useState(false);
+  const [openedSubActions, updateOpenedSubActions] = index["default"].useState([]);
+  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 (!isCardHovered && openedSubActions !== null && openedSubActions !== void 0 && openedSubActions.length) {
+      updateOpenedSubActions(openedSubActions.map(() => false));
+    }
+  }, [isCardHovered]);
+  const mouseHasEnteredCard = index$1.react.exports.useCallback(() => {
+    setIsCardHovered(true);
+  }, []);
+  const mouseHasLeftCard = index$1.react.exports.useCallback(() => {
+    setIsCardHovered(false);
+  }, []);
+  const onSubActionsViewToggle = index$1.react.exports.useCallback(actionIndex => {
+    const newOpenedSubActions = openedSubActions.map((isOpened, index) => {
+      if (index !== actionIndex) {
+        return false;
+      }
+      return !isOpened;
+    });
+    updateOpenedSubActions(newOpenedSubActions);
+  }, [openedSubActions]);
+  const videoPlayerRef = index$1.react.exports.useRef();
+  const cardRef = index$1.react.exports.useRef();
+  const dragRef = index$1.react.exports.useRef(null);
+  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);
+    }
+    mouseHasEnteredCard();
+  }
+  function onMouseLeave() {
+    if (videoPlayerRef.current) {
+      videoPlayerRef.current.pause();
+    }
+    mouseHasLeftCard();
+  }
+  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);
+    }
+    return onAssetSelected(asset.key);
+  }
+  const onActionClick = index$1.react.exports.useCallback((event, action, index) => {
+    event.preventDefault();
+    event.stopPropagation();
+    if (lodash.isFunction(action === null || action === void 0 ? void 0 : action.onClick)) {
+      action.onClick(asset);
+    }
+    if (!lodash.isEmpty(action === null || action === void 0 ? void 0 : action.subActions)) {
+      onSubActionsViewToggle(index);
+    }
+  }, [onSubActionsViewToggle]);
+  const shouldOpenSubActions = index$1.react.exports.useCallback(actionIndex => openedSubActions[actionIndex], [openedSubActions]);
+  function onContextMenu(event) {
+    event.preventDefault();
+    asset.onContextMenu(event);
+  }
+  function renderPreview(asset) {
+    var _asset$fileType, _asset$fileType2, _asset$note, _asset$note2;
+    let previewContent = null;
+    if (((_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$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.title,
+        src: asset.previewUrl,
+        height: "100%",
+        width: "100%",
+        delayMethod: "debounce",
+        delayTime: 0,
+        threshold: 1500,
+        scrollPosition: scrollPosition
+      });
+    }
+    return index["default"].createElement(AssetGalleryGridCard_styled.Figure, {
+      selected: selected
+    }, previewContent, index["default"].createElement(AssetGalleryGridCard_styled.FigureOverlayBackdrop, {
+      selected: selected
+    }), index["default"].createElement(AssetGalleryGridCard_styled.Overlay, {
+      ref: cardRef
+    }, index["default"].createElement(AssetGalleryGridCard_styled.OverlayBackdrop, {
+      $softSelected: softSelected,
+      selected: selected
+    }), index["default"].createElement(AssetGalleryGridCard_styled.OverlayInfo, null, index["default"].createElement(AssetGalleryGridCard_styled.OverlayInfoTop, null, index["default"].createElement(AssetGalleryGridCard_styled.OverlayInfoTopVersions, null, renderVersionsBadge()), (asset === null || asset === void 0 || (_asset$note = asset.note) === null || _asset$note === void 0 ? void 0 : _asset$note.title) && index["default"].createElement(AssetGalleryGridCard_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(AssetGalleryGridCard_styled.OverlayInfoTopActions, {
+      isCardHovered: isCardHovered
+    }, asset.actions && asset.actions.map((action, index$1) => index["default"].createElement(Tooltip["default"], {
+      key: `${asset.key}-${action.title}`,
+      content: action.title
+    }, index["default"].createElement(AssetGalleryGridCard_styled.Fragment, {
+      key: `${asset.key}-${action.title}`,
+      as: ComputedActionButton,
+      component: action.component,
+      className: action.className,
+      icon: action.icon,
+      isCardHovered: isCardHovered,
+      isSubActionsOpened: shouldOpenSubActions(index$1),
+      onClick: event => onActionClick(event, action, index$1),
+      subActions: action === null || action === void 0 ? void 0 : action.subActions,
+      actionWidthHeight: action.actionWidthHeight
+    }))))), index["default"].createElement(AssetGalleryGridCard_styled.OverlayInfoBottom, null, selectable && index["default"].createElement(AssetGalleryGridCard_styled.OverlayInfoBottomSelectButton, {
+      selected: selected
+    }, index["default"].createElement(checkRectangleFilled.ReactComponent, {
+      onClick: onSelectClick
+    })), index["default"].createElement(AssetGalleryGridCard_styled.OverlayInfoBottomMediaIcon, null, renderMediaBadge()))), selectable && index["default"].createElement(AssetGalleryGridCard_styled.OverlaySelected, {
+      selected: selected,
+      $softSelected: softSelected
+    })), asset.overlay && index["default"].createElement(AssetGalleryGridCard_styled.ConsumerDefinedOverlay, null, asset.overlay));
+  }
+  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);
+        }
+      };
+    }
+  }, []);
+  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 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 renderSummary = index$1.react.exports.useCallback(() => {
+    var _asset$summary, _asset$summary2;
+    return index["default"].createElement(SummaryCard["default"], {
+      activeSummaryCard: true,
+      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',
+      footerLeft: (asset === null || asset === void 0 || (_asset$summary = asset.summary) === null || _asset$summary === void 0 ? void 0 : _asset$summary.footerLeft) || '',
+      footerRight: (asset === null || asset === void 0 || (_asset$summary2 = asset.summary) === null || _asset$summary2 === void 0 ? void 0 : _asset$summary2.footerRight) || '',
+      compact: false
+    });
+  }, [asset]);
+  return index["default"].createElement(AssetGalleryGridCard_styled.AssetGalleryWrapper, {
+    disabled: asset.disabled
+  }, index["default"].createElement(AssetGalleryGridCard_styled.AssetGalleryGridCard, {
+    as: ComputedRootComponent,
+    component: component,
+    asset: asset,
+    disabled: asset.disabled,
+    onClick: onClick,
+    extendedSelectMode: extendedSelectMode,
+    onMouseEnter: onMouseEnter,
+    onMouseLeave: onMouseLeave,
+    draggable: asset.draggable,
+    innerRef: dragRef,
+    selected: selected,
+    $softSelected: softSelected,
+    completed: asset === null || asset === void 0 ? void 0 : asset.completed,
+    $hasError: asset === null || asset === void 0 ? void 0 : asset.hasError
+  }, index["default"].createElement(AssetGalleryGridCard_styled.ContentWrapper, {
+    layout: asset.layout,
+    ref: cardRef,
+    $softSelected: softSelected,
+    selected: selected
+  }, index["default"].createElement(AssetGalleryGridCard_styled.Asset, {
+    "data-id": "ss",
+    selected: selected
+  }, asset.previewUrl && renderPreview(asset)), renderSummary())));
+};
+AssetGalleryGridCard.propTypes = process.env.NODE_ENV !== "production" ? {
+  asset: index$2["default"].shape(asset_propType.assetShapeWithLayout).isRequired,
+  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
+} : {};
+AssetGalleryGridCard.defaultProps = {};
+var AssetGalleryGridCard$1 = reactLazyLoadImageComponent.trackWindowScroll(index["default"].memo(AssetGalleryGridCard, (prevProps, nextProps) => {
+  const reactiveProps = ['selectable', 'selected', 'extendedSelectMode', 'softSelected', 'asset.previewUrl', 'asset.overlay', 'asset.layout'];
+  return reactiveProps.every(propKey => lodash.get(prevProps, propKey) === lodash.get(nextProps, propKey));
+}));
+
+exports["default"] = AssetGalleryGridCard$1;