@ntbjs/react-components 2.0.0-rc.3 → 2.0.0-rc.30

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

@@ -1,396 +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');
-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;