@ntbjs/react-components 2.0.0-rc.9 → 2.0.2-rc.1

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

@@ -1,392 +0,0 @@
-'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

@@ -1,43 +0,0 @@
-'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;