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

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

@@ -0,0 +1,392 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _rollupPluginBabelHelpers = require('../../../../_virtual/_rollupPluginBabelHelpers.js');
+var index = require('../../../../node_modules/react/index.js');
+var useMergedRefs = require('../../../../node_modules/@restart/hooks/esm/useMergedRefs.js');
+var lodash = require('lodash');
+var index$2 = require('../../../../node_modules/prop-types/index.js');
+var ResizeObserver = require('resize-observer-polyfill');
+var asset_propType = require('../asset.propType.js');
+var useIsomorphicLayoutEffect = require('../../../../hooks/useIsomorphicLayoutEffect.js');
+var AssetGalleryBase_styled = require('./AssetGalleryBase.styled.js');
+var AssetGalleryGridCard = require('./AssetGalleryGridCard/AssetGalleryGridCard.js');
+var AssetGalleryCompactCard = require('./AssetGalleryCompactCard/AssetGalleryCompactCard.js');
+var index$1 = require('../../../../_virtual/index.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var ResizeObserver__default = /*#__PURE__*/_interopDefaultLegacy(ResizeObserver);
+
+const _excluded = ["assets", "activeSummaryCard", "displayIcon", "viewMode", "thumbnailMaxHeight", "selectable", "selectedAssetKeys", "onAssetSelected", "onAssetUnselected", "softSelectable", "softSelectedAssetKey", "scrollElement", "onAssetSoftSelectedChanged", "component"];
+const AssetGalleryBase = index["default"].forwardRef(function AssetGalleryBase(_ref, forwardedRef) {
+  let {
+      assets: assetsProp,
+      activeSummaryCard,
+      displayIcon,
+      viewMode,
+      thumbnailMaxHeight,
+      selectable,
+      selectedAssetKeys,
+      onAssetSelected,
+      onAssetUnselected,
+      softSelectable,
+      softSelectedAssetKey,
+      scrollElement: scrollElementProp,
+      onAssetSoftSelectedChanged,
+      component
+    } = _ref,
+    props = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
+  const assetGalleryDOMNode = index$1.react.exports.useRef();
+  const assetGalleryCompactRef = useMergedRefs["default"](forwardedRef, assetGalleryDOMNode);
+  const assetGalleryWidth = index$1.react.exports.useRef(0);
+  const minimumRowAspectRatio = index$1.react.exports.useRef(0);
+  const calculatedAssets = index$1.react.exports.useRef([]);
+  const [assets, setAssets] = index$1.react.exports.useState([]);
+  const MAXIMUM_ROW_HEIGHT = index$1.react.exports.useMemo(() => viewMode === 'grid' ? 450 : thumbnailMaxHeight, [viewMode, thumbnailMaxHeight]);
+  const SPACE_BETWEEN_ASSETS = 8;
+  const SPACE_UNDER_ASSETS = 8;
+  const PRIMARY_SCROLL_BUFFER_HEIGHT = 1500;
+  const SECONDARY_SCROLL_BUFFER_HEIGHT = 500;
+  const GRID_VIEW_MODE_ASSET_MIN_WIDTH = 300;
+  const GRID_VIEW_MODE_ASSET_HEIGHT = 427;
+  const MISSING_WIDTH_PLACEHOLDER = 1920;
+  const MISSING_HEIGHT_PLACEHOLDER = 1080;
+  const isBrowser = typeof window !== 'undefined';
+  const scrollElement = scrollElementProp || window;
+  const previousYOffset = index$1.react.exports.useRef(isBrowser ? scrollElement.pageYOffset : 0);
+  const latestYOffset = index$1.react.exports.useRef(isBrowser ? scrollElement.pageYOffset : 0);
+  const scrollDirection = index$1.react.exports.useRef('down');
+  useIsomorphicLayoutEffect["default"](() => {
+    if (!assetGalleryDOMNode.current) return;
+    const throttledOnResize = lodash.throttle(onResize, 1);
+    const resizeObserver = new ResizeObserver__default["default"](throttledOnResize);
+    resizeObserver.observe(assetGalleryDOMNode.current);
+    function onResize(entries) {
+      entries.forEach(entry => {
+        if (assetGalleryWidth.current === entry.contentRect.width) return;
+        window.requestAnimationFrame(() => {
+          assetGalleryWidth.current = entry.contentRect.width;
+          main();
+        });
+      });
+    }
+    return () => {
+      resizeObserver.unobserve(assetGalleryDOMNode.current);
+    };
+  }, [assetsProp, assetGalleryDOMNode, MAXIMUM_ROW_HEIGHT]);
+  index$1.react.exports.useEffect(() => {
+    main();
+  }, [MAXIMUM_ROW_HEIGHT, assetsProp]);
+  const main = () => {
+    calculateAssetGalleryAspectRatio();
+    calculateLayout();
+    calculateVisibility();
+  };
+  const calculateAssetGalleryAspectRatio = () => {
+    if (assetGalleryWidth.current > 0) {
+      minimumRowAspectRatio.current = calculateAspectRatio(assetGalleryWidth.current, MAXIMUM_ROW_HEIGHT);
+    }
+  };
+  const calculateLayout = () => {
+    const assetsWithoutAKey = assetsProp.filter(a => !a.key);
+    if (assetsWithoutAKey.length > 0) {
+      assetsProp = assetsProp.filter(a => a.key);
+      assetsWithoutAKey.forEach(a => console.warn('Omitted asset from the gallery because it was missing the unique `key` property.', a));
+    }
+    if (viewMode === 'grid' && assetGalleryWidth.current > 0) {
+      let row = [];
+      let translateX = 0;
+      let translateY = 0;
+      const computedAssets = [];
+      let lastGroup = null;
+      const desiredAssetCountInRow = Math.floor(assetGalleryWidth.current / GRID_VIEW_MODE_ASSET_MIN_WIDTH) || 1;
+      const desiredAssetWidth = assetGalleryWidth.current / desiredAssetCountInRow - SPACE_BETWEEN_ASSETS + SPACE_BETWEEN_ASSETS / desiredAssetCountInRow;
+      assetsProp.forEach((asset, index) => {
+        var _assetsProp;
+        if (asset.group && asset.group !== lastGroup) {
+          computedAssets.push({
+            title: asset.group,
+            key: asset.key,
+            layout: {
+              type: 'groupLabel',
+              height: 50,
+              translateX: Math.round(translateX),
+              translateY: Math.round(translateY)
+            }
+          });
+          lastGroup = asset.group;
+          translateY += 50 + SPACE_UNDER_ASSETS;
+        }
+        row.push(asset);
+        if (row.length === desiredAssetCountInRow || index + 1 === assetsProp.length || (_assetsProp = assetsProp[index + 1]) !== null && _assetsProp !== void 0 && _assetsProp.group && assetsProp[index + 1].group !== asset.group) {
+          row.forEach(rowAsset => {
+            computedAssets.push(_rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, rowAsset), {}, {
+              layout: {
+                type: 'asset',
+                width: Math.round(desiredAssetWidth),
+                height: Math.round(GRID_VIEW_MODE_ASSET_HEIGHT),
+                translateX: Math.round(translateX),
+                translateY: Math.round(translateY)
+              }
+            }));
+            translateX += desiredAssetWidth + SPACE_BETWEEN_ASSETS;
+          });
+          row = [];
+          translateX = 0;
+          translateY += GRID_VIEW_MODE_ASSET_HEIGHT + SPACE_UNDER_ASSETS;
+        }
+      });
+      calculatedAssets.current = computedAssets;
+    } else {
+      if (minimumRowAspectRatio.current > 0) {
+        let row = [];
+        let translateX = 0;
+        let translateY = 0;
+        let rowAspectRatio = 0;
+        let lastGroup = null;
+        const computedAssets = [];
+        assetsProp.forEach((asset, index) => {
+          var _assetsProp2;
+          if (asset.group && asset.group !== lastGroup) {
+            computedAssets.push({
+              title: asset.group,
+              key: asset.key,
+              layout: {
+                type: 'groupLabel',
+                height: 50,
+                translateX: Math.round(translateX),
+                translateY: Math.round(translateY)
+              }
+            });
+            lastGroup = asset.group;
+            translateY += 50 + SPACE_UNDER_ASSETS;
+          }
+          rowAspectRatio += calculateAspectRatio(asset.width || MISSING_WIDTH_PLACEHOLDER, asset.height || MISSING_HEIGHT_PLACEHOLDER);
+          row.push(asset);
+          if (rowAspectRatio >= minimumRowAspectRatio.current || index + 1 === assetsProp.length || (_assetsProp2 = assetsProp[index + 1]) !== null && _assetsProp2 !== void 0 && _assetsProp2.group && assetsProp[index + 1].group !== asset.group) {
+            rowAspectRatio = Math.max(rowAspectRatio, minimumRowAspectRatio.current);
+            const totalDesiredWidthOfImages = assetGalleryWidth.current - SPACE_BETWEEN_ASSETS * (row.length - 1);
+            const rowHeight = totalDesiredWidthOfImages / rowAspectRatio;
+            row.forEach(rowAsset => {
+              const assetWidth = rowHeight * calculateAspectRatio(rowAsset.width || MISSING_WIDTH_PLACEHOLDER, rowAsset.height || MISSING_HEIGHT_PLACEHOLDER);
+              computedAssets.push(_rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, rowAsset), {}, {
+                layout: {
+                  type: 'asset',
+                  width: Math.round(assetWidth),
+                  height: Math.round(rowHeight),
+                  translateX: Math.round(translateX),
+                  translateY: Math.round(translateY),
+                  hasHeightAndWidth: Boolean(rowAsset.width && rowAsset.height)
+                }
+              }));
+              translateX += assetWidth + SPACE_BETWEEN_ASSETS;
+            });
+            row = [];
+            rowAspectRatio = 0;
+            translateY += rowHeight + SPACE_UNDER_ASSETS;
+            translateX = 0;
+          }
+        });
+        calculatedAssets.current = computedAssets;
+      }
+    }
+  };
+  function calculateAspectRatio(width, height) {
+    return width / height;
+  }
+  const totalGalleryHeight = index$1.react.exports.useMemo(() => {
+    if (assets.length === 0) {
+      return 0;
+    }
+    const lastAsset = assets[assets.length - 1];
+    if (assets.length < 8) {
+      return (lastAsset.layout.translateY + lastAsset.layout.height) * 2;
+    }
+    return lastAsset.layout.translateY + lastAsset.layout.height;
+  }, [assets]);
+  index$1.react.exports.useEffect(() => {
+    const throttledOnScroll = lodash.throttle(onScroll, 200);
+    scrollElement.addEventListener('scroll', throttledOnScroll, false);
+    return () => scrollElement.removeEventListener('scroll', throttledOnScroll, false);
+  }, [assetGalleryDOMNode, calculatedAssets]);
+  function onScroll() {
+    setScrollPositionAndDirection();
+    calculateVisibility();
+  }
+  function setScrollPositionAndDirection() {
+    const newYOffset = scrollElement.pageYOffset;
+    previousYOffset.current = latestYOffset.current;
+    latestYOffset.current = newYOffset;
+    scrollDirection.current = latestYOffset.current > previousYOffset.current ? 'down' : 'up';
+  }
+  const calculateVisibility = () => {
+    if (!assetGalleryDOMNode.current) return;
+    const bufferTop = scrollDirection.current === 'up' ? PRIMARY_SCROLL_BUFFER_HEIGHT : SECONDARY_SCROLL_BUFFER_HEIGHT;
+    const bufferBottom = scrollDirection.current === 'up' ? SECONDARY_SCROLL_BUFFER_HEIGHT : PRIMARY_SCROLL_BUFFER_HEIGHT;
+    const containerOffset = getOffsetTop(assetGalleryDOMNode.current);
+    const scrollerHeight = scrollElement.innerHeight;
+    const yOffset = latestYOffset.current;
+    const minTranslateYPlusHeight = yOffset - containerOffset - bufferTop;
+    const maxTranslateY = yOffset - containerOffset + scrollerHeight + bufferBottom;
+    const finalizedAssets = calculatedAssets.current.map(asset => {
+      if (scrollElement.self == window && (asset.layout.translateY + asset.layout.height < minTranslateYPlusHeight || asset.layout.translateY > maxTranslateY)) {
+        asset.layout.show = false;
+      } else {
+        asset.layout.show = true;
+      }
+      return asset;
+    });
+    setAssets(finalizedAssets);
+  };
+  function getOffsetTop(elem) {
+    let offsetTop = 0;
+    do {
+      if (!isNaN(elem.offsetTop)) {
+        offsetTop += elem.offsetTop;
+      }
+      elem = elem.offsetParent;
+    } while (elem);
+    return offsetTop;
+  }
+  const handleKeyPress = index$1.react.exports.useCallback(e => {
+    function isElementVisible(el) {
+      const rect = el.getBoundingClientRect(),
+        vWidth = scrollElement.innerWidth || document.documentElement.clientWidth,
+        vHeight = scrollElement.innerHeight || document.documentElement.clientHeight,
+        efp = function efp(x, y) {
+          return document.elementFromPoint(x, y);
+        };
+      if (rect.right < 0 || rect.bottom < 0 || rect.left > vWidth || rect.top > vHeight) return false;
+      return el.contains(efp(rect.left, rect.top)) || el.contains(efp(rect.right, rect.top)) || el.contains(efp(rect.right, rect.bottom)) || el.contains(efp(rect.left, rect.bottom));
+    }
+    function softSelectFirstVisibleAsset() {
+      const visibleAssets = assets.filter(asset => asset.layout.show);
+      for (let i = 0; i < assetGalleryDOMNode.current.children.length; i++) {
+        if (isElementVisible(assetGalleryDOMNode.current.children[i])) {
+          onAssetSoftSelectedChanged(visibleAssets[i].key);
+          break;
+        }
+      }
+    }
+    if (assets.length === 0) return;
+    if (e.key === 'ArrowLeft' || e.key === 'ArrowRight') {
+      if (softSelectedAssetKey === null) {
+        softSelectFirstVisibleAsset();
+        return;
+      }
+    }
+    if (e.key === 'ArrowLeft') {
+      const previousAssetIndex = assets.findIndex(asset => asset.key === softSelectedAssetKey) - 1;
+      const previousAsset = assets[previousAssetIndex];
+      if (previousAsset) {
+        if (previousAsset.layout.show) {
+          onAssetSoftSelectedChanged(previousAsset.key);
+        } else {
+          softSelectFirstVisibleAsset();
+        }
+      }
+      return;
+    }
+    if (e.key === 'ArrowRight') {
+      const nextAssetIndex = assets.findIndex(asset => asset.key === softSelectedAssetKey) + 1;
+      const nextAsset = assets[nextAssetIndex];
+      if (nextAsset) {
+        if (nextAsset.layout.show) {
+          onAssetSoftSelectedChanged(nextAsset.key);
+        } else {
+          softSelectFirstVisibleAsset();
+        }
+      }
+      return;
+    }
+    if (e.key === 'Enter') {
+      if (softSelectedAssetKey === null) return;
+      if (selectedAssetKeys.includes(softSelectedAssetKey)) {
+        onAssetUnselected(softSelectedAssetKey);
+      } else {
+        onAssetSelected(softSelectedAssetKey);
+      }
+    }
+  }, [assets, softSelectedAssetKey, onAssetSoftSelectedChanged, selectedAssetKeys, assetGalleryCompactRef]);
+  const handleClick = index$1.react.exports.useCallback(() => {
+    onAssetSoftSelectedChanged(null);
+  }, []);
+  index$1.react.exports.useEffect(() => {
+    if (softSelectable) {
+      document.addEventListener('keydown', handleKeyPress);
+    }
+    return () => document.removeEventListener('keydown', handleKeyPress);
+  }, [softSelectable, handleKeyPress]);
+  index$1.react.exports.useEffect(() => {
+    if (softSelectable && softSelectedAssetKey !== null) {
+      document.addEventListener('click', handleClick, true);
+    }
+    return () => document.removeEventListener('click', handleClick, true);
+  }, [softSelectable, softSelectedAssetKey, handleClick]);
+  return index["default"].createElement(index["default"].Fragment, null, index["default"].createElement(AssetGalleryBase_styled.AssetGalleryBase, _rollupPluginBabelHelpers["extends"]({
+    ref: assetGalleryCompactRef,
+    style: {
+      height: `${totalGalleryHeight}px`
+    },
+    className: props.className
+  }, props), assets.map(asset => asset.layout.show && index["default"].createElement(index["default"].Fragment, {
+    key: `asset-gallery-${asset.layout.type}-${asset.key}`
+  }, asset.layout.type === 'groupLabel' && index["default"].createElement(AssetGalleryBase_styled.GroupLabel, {
+    style: {
+      transform: `translate3d(${asset.layout.translateX}px,${asset.layout.translateY}px, 0)`,
+      height: `${asset.layout.height}px`
+    }
+  }, asset.title), asset.layout.type === 'asset' && index["default"].createElement(AssetGalleryBase_styled.AssetGalleryCardBase, {
+    style: {
+      transform: `translate3d(${asset.layout.translateX}px, ${asset.layout.translateY}px, 0)`,
+      width: `${asset.layout.width}px`,
+      height: `${asset.layout.height}px`,
+      display: 'flex',
+      justifyContent: 'center'
+    }
+  }, viewMode === 'grid' ? index["default"].createElement(AssetGalleryGridCard["default"], {
+    asset: asset,
+    selectable: 'selectable' in asset ? asset.selectable : selectable,
+    selected: selectedAssetKeys.includes(asset.key),
+    extendedSelectMode: Boolean(selectedAssetKeys.length),
+    onAssetSelected: onAssetSelected,
+    onAssetUnselected: onAssetUnselected,
+    softSelected: softSelectedAssetKey === asset.key,
+    component: component
+  }) : index["default"].createElement(AssetGalleryCompactCard["default"], {
+    asset: asset,
+    activeSummaryCard: activeSummaryCard,
+    displayIcon: displayIcon,
+    hasHeightAndWidth: asset.layout.hasHeightAndWidth,
+    collapseExtraInfo: asset.layout.width < 90,
+    selectable: 'selectable' in asset ? asset.selectable : selectable,
+    selected: selectedAssetKeys.includes(asset.key),
+    extendedSelectMode: Boolean(selectedAssetKeys.length),
+    onAssetSelected: onAssetSelected,
+    onAssetUnselected: onAssetUnselected,
+    softSelected: softSelectedAssetKey === asset.key,
+    component: component
+  }))))));
+});
+AssetGalleryBase.propTypes = process.env.NODE_ENV !== "production" ? {
+  assets: index$2["default"].arrayOf(index$2["default"].shape(asset_propType.assetShape)),
+  activeSummaryCard: index$2["default"].bool,
+  displayIcon: index$2["default"].string,
+  viewMode: index$2["default"].oneOf(['compact', 'grid']),
+  thumbnailMaxHeight: index$2["default"].number,
+  selectable: index$2["default"].bool,
+  selectedAssetKeys: index$2["default"].oneOfType([index$2["default"].arrayOf(index$2["default"].string), index$2["default"].arrayOf(index$2["default"].number)]).isRequired,
+  scrollElement: index$2["default"].instanceOf(Element),
+  onAssetSelected: index$2["default"].func.isRequired,
+  onAssetUnselected: index$2["default"].func.isRequired,
+  softSelectable: index$2["default"].bool,
+  softSelectedAssetKey: index$2["default"].oneOfType([index$2["default"].string, index$2["default"].number]),
+  onAssetSoftSelectedChanged: index$2["default"].func.isRequired,
+  component: index$2["default"].func,
+  className: index$2["default"].string
+} : {};
+var AssetGalleryBase$1 = AssetGalleryBase;
+
+exports["default"] = AssetGalleryBase$1;

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

@@ -0,0 +1,43 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var styled = require('styled-components');
+var defaultTheme = require('../../../../utils/defaultTheme.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
+
+let _ = t => t,
+  _t,
+  _t2,
+  _t3;
+const AssetGalleryBase = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_t || (_t = _`
+  position: relative;
+`));
+const GroupLabel = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_t2 || (_t2 = _`
+  font-family: ${0};
+  ${0}
+  display: flex;
+  align-items: flex-end;
+  position: absolute;
+  padding-bottom: 4px;
+  box-sizing: border-box;
+`), props => props.theme.primaryFontFamily, props => props.theme.themeProp('color', props.theme.getColor('gray-100'), props.theme.getColor('gray-700')));
+const AssetGalleryCardBase = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_t3 || (_t3 = _`
+  position: absolute;
+  top: 0;
+  left: 0;
+  margin: 0;
+  z-index: 1;
+  will-change: transform, width, height;
+
+  &:hover {
+    z-index: 2;
+  }
+`));
+
+exports.AssetGalleryBase = AssetGalleryBase;
+exports.AssetGalleryCardBase = AssetGalleryCardBase;
+exports.GroupLabel = GroupLabel;