@ntbjs/react-components 0.0.1-beta.39 → 0.0.1-beta.41

package/{AssetGallery-fe157bb4.js → AssetGallery-b52dbb14.js}

@@ -3,6 +3,7 @@
 var defaultTheme = require('./defaultTheme-18d7c1ee.js');
 var React = require('react');
 var lodash = require('lodash');
+var ResizeObserver = require('resize-observer-polyfill');
 var reactLazyLoadImageComponent = require('react-lazy-load-image-component');
 var ActionButton = require('./ActionButton-10a681b9.js');
 require('./Button-6f6b4ed4.js');
@@ -39,8 +40,11 @@ function _interopNamespace(e) {
 
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var ResizeObserver__default = /*#__PURE__*/_interopDefaultLegacy(ResizeObserver);
 var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 
+var useIsomorphicLayoutEffect = typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect;
+
 var toFnRef = function toFnRef(ref) {
   return !ref || typeof ref === 'function' ? ref : function (value) {
     ref.current = value;
@@ -264,7 +268,9 @@ var ComputedRootComponent$1 = function ComputedRootComponent(_ref) {
     }
   }
 
-  return React__default['default'].createElement(AssetGalleryCompactCard$2, newProps);
+  return React__default['default'].createElement(AssetGalleryCompactCard$2, defaultTheme._extends({
+    ref: newProps.innerRef
+  }, newProps));
 };
 
 var ComputedActionButton$1 = React__default['default'].forwardRef(function ComputedActionButton(_ref2, forwardedRef) {
@@ -352,8 +358,27 @@ var AssetGalleryCompactCard = function AssetGalleryCompactCard(props) {
       };
     }
   }, []);
+
+  function onDragstart(event) {
+    asset.onDragstart(event);
+  }
+
+  React.useEffect(function () {
+    if (lodash.isFunction(asset.onDragstart)) {
+      if (dragRef.current) {
+        dragRef.current.addEventListener('dragstart', onDragstart);
+      }
+
+      return function () {
+        if (dragRef.current) {
+          dragRef.current.removeEventListener('dragstart', onDragstart);
+        }
+      };
+    }
+  }, []);
   var videoPlayerRef = React.useRef();
   var cardRef = React.useRef();
+  var dragRef = React.useRef(null);
 
   function onMouseEnter(event) {
     event.stopPropagation();
@@ -424,7 +449,9 @@ var AssetGalleryCompactCard = function AssetGalleryCompactCard(props) {
     onClick: onClick,
     extendedSelectMode: extendedSelectMode,
     onMouseEnter: onMouseEnter,
-    onMouseLeave: onMouseLeave
+    onMouseLeave: onMouseLeave,
+    draggable: asset.draggable,
+    innerRef: dragRef
   }, asset.previewUrl && (['video'].includes(asset.fileType) ? React__default['default'].createElement(reactLazyLoadImageComponent.LazyLoadComponent, {
     scrollPosition: scrollPosition
   }, React__default['default'].createElement("video", {
@@ -561,7 +588,9 @@ var ComputedRootComponent = function ComputedRootComponent(_ref) {
     }
   }
 
-  return React__default['default'].createElement(AssetGalleryGridCard$2, newProps);
+  return React__default['default'].createElement(AssetGalleryGridCard$2, defaultTheme._extends({
+    ref: newProps.innerRef
+  }, newProps));
 };
 
 ComputedRootComponent.propTypes = process.env.NODE_ENV !== "production" ? {} : {};
@@ -603,6 +632,7 @@ var AssetGalleryGridCard = function AssetGalleryGridCard(props) {
       scrollPosition = props.scrollPosition;
   var videoPlayerRef = React.useRef();
   var cardRef = React.useRef();
+  var dragRef = React.useRef(null);
 
   function onMouseEnter(event) {
     event.stopPropagation();
@@ -673,6 +703,24 @@ var AssetGalleryGridCard = function AssetGalleryGridCard(props) {
       };
     }
   }, []);
+
+  function onDragstart(event) {
+    asset.onDragstart(event);
+  }
+
+  React.useEffect(function () {
+    if (lodash.isFunction(asset.onDragstart)) {
+      if (dragRef.current) {
+        dragRef.current.addEventListener('dragstart', onDragstart);
+      }
+
+      return function () {
+        if (dragRef.current) {
+          dragRef.current.removeEventListener('dragstart', onDragstart);
+        }
+      };
+    }
+  }, []);
   React.useEffect(function () {
     if (softSelected) {
       cardRef.current.scrollIntoView({
@@ -690,7 +738,9 @@ var AssetGalleryGridCard = function AssetGalleryGridCard(props) {
     onClick: onClick,
     extendedSelectMode: extendedSelectMode,
     onMouseEnter: onMouseEnter,
-    onMouseLeave: onMouseLeave
+    onMouseLeave: onMouseLeave,
+    draggable: asset.draggable,
+    innerRef: dragRef
   }, React__default['default'].createElement(ContentWrapper, {
     layout: asset.layout,
     ref: cardRef
@@ -823,10 +873,10 @@ var AssetGalleryBase = React__default['default'].forwardRef(function AssetGaller
   var previousYOffset = React.useRef(isBrowser ? window.pageYOffset : 0);
   var latestYOffset = React.useRef(isBrowser ? window.pageYOffset : 0);
   var scrollDirection = React.useRef('down');
-  React.useEffect(function () {
+  useIsomorphicLayoutEffect(function () {
     if (!assetGalleryDOMNode.current) return;
     var throttledOnResize = lodash.throttle(onResize, 1);
-    var resizeObserver = new ResizeObserver(throttledOnResize);
+    var resizeObserver = new ResizeObserver__default['default'](throttledOnResize);
     resizeObserver.observe(assetGalleryDOMNode.current);
 
     function onResize(entries) {
@@ -840,7 +890,7 @@ var AssetGalleryBase = React__default['default'].forwardRef(function AssetGaller
     }
 
     return function () {
-      return resizeObserver.unobserve(assetGalleryDOMNode.current);
+      resizeObserver.unobserve(assetGalleryDOMNode.current);
     };
   }, [assetsProp, assetGalleryDOMNode, MAXIMUM_ROW_HEIGHT]);
   React.useEffect(function () {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ntbjs/react-components",
-  "version": "0.0.1-beta.39",
+  "version": "0.0.1-beta.41",
   "description": "NTBs common front-end design utilities and React components.",
   "scripts": {
     "build": "cross-env NODE_ENV=production rollup -c",
@@ -77,6 +77,7 @@
     "nanoid": "^3.1.25",
     "polished": "^4.1.3",
     "react-lazy-load-image-component": "^1.5.1",
+    "resize-observer-polyfill": "^1.5.1",
     "styled-components": "^5.3.1"
   }
 }

package/widgets/AssetGallery/index.js

@@ -1,10 +1,11 @@
 'use strict';
 
-var AssetGallery = require('../../AssetGallery-fe157bb4.js');
+var AssetGallery = require('../../AssetGallery-b52dbb14.js');
 require('../../defaultTheme-18d7c1ee.js');
 require('styled-components');
 require('react');
 require('lodash');
+require('resize-observer-polyfill');
 require('react-lazy-load-image-component');
 require('../../ActionButton-10a681b9.js');
 require('../../Button-6f6b4ed4.js');

package/widgets/index.js

@@ -2,11 +2,12 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var AssetGallery = require('../AssetGallery-fe157bb4.js');
+var AssetGallery = require('../AssetGallery-b52dbb14.js');
 require('../defaultTheme-18d7c1ee.js');
 require('styled-components');
 require('react');
 require('lodash');
+require('resize-observer-polyfill');
 require('react-lazy-load-image-component');
 require('../ActionButton-10a681b9.js');
 require('../Button-6f6b4ed4.js');