@micromag/viewer 0.3.42 → 0.3.43

package/es/index.js

@@ -727,7 +727,7 @@ var propTypes$5 = {
   onClickItem: PropTypes.func,
   onClose: PropTypes.func,
   onShare: PropTypes.func,
-  thumbsPerLine: PropTypes.number,
+  maxThumbsWidth: PropTypes.number,
   toggleFullscreen: PropTypes.func,
   fullscreenActive: PropTypes.bool,
   fullscreenEnabled: PropTypes.bool,
@@ -744,7 +744,7 @@ var defaultProps$5 = {
   onClickItem: null,
   onClose: null,
   onShare: null,
-  thumbsPerLine: 3,
+  maxThumbsWidth: 140,
   toggleFullscreen: null,
   fullscreenActive: false,
   fullscreenEnabled: false,
@@ -762,7 +762,7 @@ var ViewerMenuPreview = function ViewerMenuPreview(_ref) {
       onClickItem = _ref.onClickItem,
       onClose = _ref.onClose,
       onShare = _ref.onShare,
-      thumbsPerLine = _ref.thumbsPerLine,
+      maxThumbsWidth = _ref.maxThumbsWidth,
       toggleFullscreen = _ref.toggleFullscreen,
       fullscreenActive = _ref.fullscreenActive,
       fullscreenEnabled = _ref.fullscreenEnabled,
@@ -777,48 +777,57 @@ var ViewerMenuPreview = function ViewerMenuPreview(_ref) {
       firstScreenContainerRef = _useResizeObserver.ref,
       firstScreenContentRect = _useResizeObserver.entry.contentRect;
 
+  var _useResizeObserver2 = useResizeObserver(),
+      containerRef = _useResizeObserver2.ref,
+      containerRect = _useResizeObserver2.entry.contentRect;
+
   var _ref3 = firstScreenContentRect || {},
       _ref3$width = _ref3.width,
-      thumbWidth = _ref3$width === void 0 ? 0 : _ref3$width; // Viewer theme
-
-
-  var _ref4 = viewerTheme || {},
-      _ref4$colors = _ref4.colors,
-      colors = _ref4$colors === void 0 ? null : _ref4$colors,
-      _ref4$background = _ref4.background,
-      background = _ref4$background === void 0 ? null : _ref4$background,
-      _ref4$textStyles = _ref4.textStyles,
-      textStyles = _ref4$textStyles === void 0 ? null : _ref4$textStyles,
-      _ref4$logo = _ref4.logo,
-      brandLogo = _ref4$logo === void 0 ? null : _ref4$logo;
-
-  var _ref5 = textStyles || {},
-      _ref5$title = _ref5.title,
-      brandTextStyle = _ref5$title === void 0 ? null : _ref5$title;
-
-  var _ref6 = colors || {},
-      _ref6$primary = _ref6.primary,
-      brandPrimaryColor = _ref6$primary === void 0 ? null : _ref6$primary,
-      _ref6$secondary = _ref6.secondary,
-      brandSecondaryColor = _ref6$secondary === void 0 ? null : _ref6$secondary;
-
-  var _ref7 = background || {},
-      _ref7$color = _ref7.color,
-      brandBackgroundColor = _ref7$color === void 0 ? null : _ref7$color,
-      _ref7$image = _ref7.image,
-      image = _ref7$image === void 0 ? null : _ref7$image;
-
-  var _ref8 = image || {},
-      _ref8$url = _ref8.url,
-      brandImageUrl = _ref8$url === void 0 ? null : _ref8$url;
+      thumbWidth = _ref3$width === void 0 ? 0 : _ref3$width;
+
+  var _ref4 = containerRect || {},
+      _ref4$width = _ref4.width,
+      contentWidth = _ref4$width === void 0 ? 0 : _ref4$width;
+
+  var thumbsPerLine = Math.max(Math.floor(contentWidth / maxThumbsWidth), 3); // Viewer theme
+
+  var _ref5 = viewerTheme || {},
+      _ref5$colors = _ref5.colors,
+      colors = _ref5$colors === void 0 ? null : _ref5$colors,
+      _ref5$background = _ref5.background,
+      background = _ref5$background === void 0 ? null : _ref5$background,
+      _ref5$textStyles = _ref5.textStyles,
+      textStyles = _ref5$textStyles === void 0 ? null : _ref5$textStyles,
+      _ref5$logo = _ref5.logo,
+      brandLogo = _ref5$logo === void 0 ? null : _ref5$logo;
+
+  var _ref6 = textStyles || {},
+      _ref6$title = _ref6.title,
+      brandTextStyle = _ref6$title === void 0 ? null : _ref6$title;
+
+  var _ref7 = colors || {},
+      _ref7$primary = _ref7.primary,
+      brandPrimaryColor = _ref7$primary === void 0 ? null : _ref7$primary,
+      _ref7$secondary = _ref7.secondary,
+      brandSecondaryColor = _ref7$secondary === void 0 ? null : _ref7$secondary;
+
+  var _ref8 = background || {},
+      _ref8$color = _ref8.color,
+      brandBackgroundColor = _ref8$color === void 0 ? null : _ref8$color,
+      _ref8$image = _ref8.image,
+      image = _ref8$image === void 0 ? null : _ref8$image;
+
+  var _ref9 = image || {},
+      _ref9$url = _ref9.url,
+      brandImageUrl = _ref9$url === void 0 ? null : _ref9$url;
 
   var borderPrimaryColorStyle = getStyleFromColor(brandPrimaryColor, 'borderColor');
   var colorSecondaryColorStyle = getStyleFromColor(brandSecondaryColor, 'color');
   var backgroundColorStyle = getStyleFromColor(brandBackgroundColor, 'backgroundColor');
 
-  var _ref9 = brandLogo || {},
-      _ref9$url = _ref9.url,
-      brandLogoUrl = _ref9$url === void 0 ? null : _ref9$url;
+  var _ref10 = brandLogo || {},
+      _ref10$url = _ref10.url,
+      brandLogoUrl = _ref10$url === void 0 ? null : _ref10$url;
 
   var brandImageStyle = brandImageUrl !== null ? {
     backgroundImage: "url(".concat(brandImageUrl, ")")
@@ -830,11 +839,11 @@ var ViewerMenuPreview = function ViewerMenuPreview(_ref) {
       scrolledBottom = _useState2[0],
       setScrolledBottom = _useState2[1];
 
-  var dragBind = useDrag(function (_ref10) {
-    var _ref10$direction = _slicedToArray(_ref10.direction, 2),
-        dy = _ref10$direction[1],
-        last = _ref10.last,
-        tap = _ref10.tap;
+  var dragBind = useDrag(function (_ref11) {
+    var _ref11$direction = _slicedToArray(_ref11.direction, 2),
+        dy = _ref11$direction[1],
+        last = _ref11.last,
+        tap = _ref11.tap;
 
     if (!tap && last && scrolledBottom && dy < 0 && onClose !== null) {
       onClose();
@@ -923,7 +932,8 @@ var ViewerMenuPreview = function ViewerMenuPreview(_ref) {
     className: styles$3.icon,
     icon: faTimes
   })))), /*#__PURE__*/React.createElement("div", {
-    className: styles$3.content
+    className: styles$3.content,
+    ref: containerRef
   }, /*#__PURE__*/React.createElement(Scroll, {
     className: styles$3.scroll,
     onScrolledBottom: onScrolledBottom,

package/lib/index.js

@@ -745,7 +745,7 @@ var propTypes$5 = {
   onClickItem: PropTypes__default["default"].func,
   onClose: PropTypes__default["default"].func,
   onShare: PropTypes__default["default"].func,
-  thumbsPerLine: PropTypes__default["default"].number,
+  maxThumbsWidth: PropTypes__default["default"].number,
   toggleFullscreen: PropTypes__default["default"].func,
   fullscreenActive: PropTypes__default["default"].bool,
   fullscreenEnabled: PropTypes__default["default"].bool,
@@ -762,7 +762,7 @@ var defaultProps$5 = {
   onClickItem: null,
   onClose: null,
   onShare: null,
-  thumbsPerLine: 3,
+  maxThumbsWidth: 140,
   toggleFullscreen: null,
   fullscreenActive: false,
   fullscreenEnabled: false,
@@ -780,7 +780,7 @@ var ViewerMenuPreview = function ViewerMenuPreview(_ref) {
       onClickItem = _ref.onClickItem,
       onClose = _ref.onClose,
       onShare = _ref.onShare,
-      thumbsPerLine = _ref.thumbsPerLine,
+      maxThumbsWidth = _ref.maxThumbsWidth,
       toggleFullscreen = _ref.toggleFullscreen,
       fullscreenActive = _ref.fullscreenActive,
       fullscreenEnabled = _ref.fullscreenEnabled,
@@ -795,48 +795,57 @@ var ViewerMenuPreview = function ViewerMenuPreview(_ref) {
       firstScreenContainerRef = _useResizeObserver.ref,
       firstScreenContentRect = _useResizeObserver.entry.contentRect;
 
+  var _useResizeObserver2 = hooks.useResizeObserver(),
+      containerRef = _useResizeObserver2.ref,
+      containerRect = _useResizeObserver2.entry.contentRect;
+
   var _ref3 = firstScreenContentRect || {},
       _ref3$width = _ref3.width,
-      thumbWidth = _ref3$width === void 0 ? 0 : _ref3$width; // Viewer theme
-
-
-  var _ref4 = viewerTheme || {},
-      _ref4$colors = _ref4.colors,
-      colors = _ref4$colors === void 0 ? null : _ref4$colors,
-      _ref4$background = _ref4.background,
-      background = _ref4$background === void 0 ? null : _ref4$background,
-      _ref4$textStyles = _ref4.textStyles,
-      textStyles = _ref4$textStyles === void 0 ? null : _ref4$textStyles,
-      _ref4$logo = _ref4.logo,
-      brandLogo = _ref4$logo === void 0 ? null : _ref4$logo;
-
-  var _ref5 = textStyles || {},
-      _ref5$title = _ref5.title,
-      brandTextStyle = _ref5$title === void 0 ? null : _ref5$title;
-
-  var _ref6 = colors || {},
-      _ref6$primary = _ref6.primary,
-      brandPrimaryColor = _ref6$primary === void 0 ? null : _ref6$primary,
-      _ref6$secondary = _ref6.secondary,
-      brandSecondaryColor = _ref6$secondary === void 0 ? null : _ref6$secondary;
-
-  var _ref7 = background || {},
-      _ref7$color = _ref7.color,
-      brandBackgroundColor = _ref7$color === void 0 ? null : _ref7$color,
-      _ref7$image = _ref7.image,
-      image = _ref7$image === void 0 ? null : _ref7$image;
-
-  var _ref8 = image || {},
-      _ref8$url = _ref8.url,
-      brandImageUrl = _ref8$url === void 0 ? null : _ref8$url;
+      thumbWidth = _ref3$width === void 0 ? 0 : _ref3$width;
+
+  var _ref4 = containerRect || {},
+      _ref4$width = _ref4.width,
+      contentWidth = _ref4$width === void 0 ? 0 : _ref4$width;
+
+  var thumbsPerLine = Math.max(Math.floor(contentWidth / maxThumbsWidth), 3); // Viewer theme
+
+  var _ref5 = viewerTheme || {},
+      _ref5$colors = _ref5.colors,
+      colors = _ref5$colors === void 0 ? null : _ref5$colors,
+      _ref5$background = _ref5.background,
+      background = _ref5$background === void 0 ? null : _ref5$background,
+      _ref5$textStyles = _ref5.textStyles,
+      textStyles = _ref5$textStyles === void 0 ? null : _ref5$textStyles,
+      _ref5$logo = _ref5.logo,
+      brandLogo = _ref5$logo === void 0 ? null : _ref5$logo;
+
+  var _ref6 = textStyles || {},
+      _ref6$title = _ref6.title,
+      brandTextStyle = _ref6$title === void 0 ? null : _ref6$title;
+
+  var _ref7 = colors || {},
+      _ref7$primary = _ref7.primary,
+      brandPrimaryColor = _ref7$primary === void 0 ? null : _ref7$primary,
+      _ref7$secondary = _ref7.secondary,
+      brandSecondaryColor = _ref7$secondary === void 0 ? null : _ref7$secondary;
+
+  var _ref8 = background || {},
+      _ref8$color = _ref8.color,
+      brandBackgroundColor = _ref8$color === void 0 ? null : _ref8$color,
+      _ref8$image = _ref8.image,
+      image = _ref8$image === void 0 ? null : _ref8$image;
+
+  var _ref9 = image || {},
+      _ref9$url = _ref9.url,
+      brandImageUrl = _ref9$url === void 0 ? null : _ref9$url;
 
   var borderPrimaryColorStyle = utils.getStyleFromColor(brandPrimaryColor, 'borderColor');
   var colorSecondaryColorStyle = utils.getStyleFromColor(brandSecondaryColor, 'color');
   var backgroundColorStyle = utils.getStyleFromColor(brandBackgroundColor, 'backgroundColor');
 
-  var _ref9 = brandLogo || {},
-      _ref9$url = _ref9.url,
-      brandLogoUrl = _ref9$url === void 0 ? null : _ref9$url;
+  var _ref10 = brandLogo || {},
+      _ref10$url = _ref10.url,
+      brandLogoUrl = _ref10$url === void 0 ? null : _ref10$url;
 
   var brandImageStyle = brandImageUrl !== null ? {
     backgroundImage: "url(".concat(brandImageUrl, ")")
@@ -848,11 +857,11 @@ var ViewerMenuPreview = function ViewerMenuPreview(_ref) {
       scrolledBottom = _useState2[0],
       setScrolledBottom = _useState2[1];
 
-  var dragBind = react.useDrag(function (_ref10) {
-    var _ref10$direction = _slicedToArray__default["default"](_ref10.direction, 2),
-        dy = _ref10$direction[1],
-        last = _ref10.last,
-        tap = _ref10.tap;
+  var dragBind = react.useDrag(function (_ref11) {
+    var _ref11$direction = _slicedToArray__default["default"](_ref11.direction, 2),
+        dy = _ref11$direction[1],
+        last = _ref11.last,
+        tap = _ref11.tap;
 
     if (!tap && last && scrolledBottom && dy < 0 && onClose !== null) {
       onClose();
@@ -941,7 +950,8 @@ var ViewerMenuPreview = function ViewerMenuPreview(_ref) {
     className: styles$3.icon,
     icon: freeSolidSvgIcons.faTimes
   })))), /*#__PURE__*/React__default["default"].createElement("div", {
-    className: styles$3.content
+    className: styles$3.content,
+    ref: containerRef
   }, /*#__PURE__*/React__default["default"].createElement(Scroll__default["default"], {
     className: styles$3.scroll,
     onScrolledBottom: onScrolledBottom,

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@micromag/viewer",
-    "version": "0.3.42",
+    "version": "0.3.43",
     "description": "",
     "keywords": [
         "javascript"
@@ -61,10 +61,10 @@
         "@fortawesome/react-fontawesome": "^0.1.13",
         "@micromag/core": "^0.3.42",
         "@micromag/element-scroll": "^0.3.42",
-        "@micromag/elements": "^0.3.42",
+        "@micromag/elements": "^0.3.43",
         "@micromag/fields": "^0.3.42",
         "@micromag/intl": "^0.3.42",
-        "@micromag/screens": "^0.3.42",
+        "@micromag/screens": "^0.3.43",
         "@react-spring/core": "^9.1.1",
         "@react-spring/web": "^9.1.1",
         "@use-gesture/react": "^10.2.4",
@@ -81,5 +81,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "a80c775c071fffda13172464ce19db2c46c520a2"
+    "gitHead": "3fd19b6c6bc1a009382b1d03314475875bc09d6b"
 }