Fix isRelevant item size controller

packages/lib/src/core/presets/columnGallery.js

@@ -17,6 +17,8 @@ const fixToColumn = (options) => {
   presetOptions[optionsMap.layoutParams.groups.allowedGroupTypes] = [
     GALLERY_CONSTS[optionsMap.layoutParams.groups.allowedGroupTypes]['1'],
   ];
+  presetOptions[optionsMap.layoutParams.structure.responsiveMode] =
+    GALLERY_CONSTS[optionsMap.layoutParams.structure.responsiveMode].SET_ITEMS_PER_ROW;
   presetOptions[optionsMap.layoutParams.structure.numberOfGridRows] = 1;
   presetOptions[optionsMap.layoutParams.crop.enableSmartCrop] = false;
 

packages/lib/src/core/presets/fullsizeGallery.js

@@ -20,6 +20,8 @@ const fixToFullsize = (options) => {
   presetOptions[optionsMap.layoutParams.groups.allowedGroupTypes] = [
     GALLERY_CONSTS[optionsMap.layoutParams.groups.allowedGroupTypes]['1'],
   ];
+  presetOptions[optionsMap.layoutParams.structure.responsiveMode] =
+    GALLERY_CONSTS[optionsMap.layoutParams.structure.responsiveMode].SET_ITEMS_PER_ROW;
   presetOptions[optionsMap.layoutParams.structure.numberOfGridRows] = 1;
   presetOptions[optionsMap.layoutParams.crop.enableSmartCrop] = false;
   presetOptions[optionsMap.behaviourParams.gallery.horizontal.enableScrollSnap] = true;

packages/lib/src/core/presets/sliderGallery.js

@@ -17,7 +17,8 @@ const fixToSlider = (options) => {
   ];
   presetOptions[optionsMap.layoutParams.structure.numberOfGridRows] = 1;
   presetOptions[optionsMap.layoutParams.crop.enableSmartCrop] = false;
-
+  presetOptions[optionsMap.layoutParams.structure.responsiveMode] =
+    GALLERY_CONSTS[optionsMap.layoutParams.structure.responsiveMode].SET_ITEMS_PER_ROW;
   presetOptions[optionsMap.behaviourParams.gallery.horizontal.enableScrollSnap] = true;
   presetOptions[optionsMap.layoutParams.crop.cropOnlyFill] = true;
   presetOptions[optionsMap.behaviourParams.gallery.horizontal.slideAnimation] =

packages/lib/src/core/presets/slideshowGallery.js

@@ -8,6 +8,8 @@ const fixToSlideshow = (options) => {
   presetOptions[optionsMap.layoutParams.structure.galleryLayout] =
     GALLERY_CONSTS[optionsMap.layoutParams.structure.galleryLayout].SLIDESHOW;
   presetOptions[optionsMap.layoutParams.crop.ratios] = ['100%/100%'];
+  presetOptions[optionsMap.layoutParams.structure.responsiveMode] =
+    GALLERY_CONSTS[optionsMap.layoutParams.structure.responsiveMode].SET_ITEMS_PER_ROW;
   presetOptions[optionsMap.layoutParams.crop.enable] = true;
 
   presetOptions[optionsMap.layoutParams.structure.scrollDirection] =

packages/lib/src/core/presets/thumbnailsGallery.js

@@ -7,6 +7,8 @@ const fixToThumbnail = (options) => {
   presetOptions[optionsMap.layoutParams.structure.galleryLayout] =
     GALLERY_CONSTS[optionsMap.layoutParams.structure.galleryLayout].THUMBNAIL;
   presetOptions[optionsMap.layoutParams.crop.ratios] = ['100%/100%'];
+  presetOptions[optionsMap.layoutParams.structure.responsiveMode] =
+    GALLERY_CONSTS[optionsMap.layoutParams.structure.responsiveMode].SET_ITEMS_PER_ROW;
   presetOptions[optionsMap.layoutParams.crop.enable] = true;
   presetOptions[optionsMap.layoutParams.info.placement] =
     GALLERY_CONSTS[optionsMap.layoutParams.info.placement].OVERLAY;

packages/lib/src/settings/options/layoutParams_targetItemSize_value.js

@@ -1,10 +1,30 @@
+import { default as GALLERY_CONSTS } from '../../common/constants';
+import optionsMap from '../../core/helpers/optionsMap';
+import layoutParams_structure_responsiveMode from './layoutParams_structure_responsiveMode';
+
 export default {
   title: 'Item Size (smart)',
   description: `Set the item size between 1 to 100 units. The real size will be determined by the layout.`,
-  isRelevant: () => {
-    return true;
+  isRelevant: (options) => {
+    return (
+      //is vertical layout and fit to screen?
+      //if the responsive mode is irrelevant, return true (because we don't need to check it). Otherwise, check if it's fit to screen
+      (options[optionsMap.layoutParams.structure.scrollDirection] ===
+        GALLERY_CONSTS[optionsMap.layoutParams.structure.scrollDirection].VERTICAL &&
+        (!layoutParams_structure_responsiveMode.isRelevant(options) ||
+          options[optionsMap.layoutParams.structure.responsiveMode] ===
+            GALLERY_CONSTS[optionsMap.layoutParams.structure.responsiveMode].FIT_TO_SCREEN)) ||
+      //is horizontal collage?
+      //(the only horizontal layout we want it to be relevant in is collage, and its only relevant for group size > 1.
+      //But in horizontal grid, if the numberOfGridRows is more than 1, it changes the group size.
+      //So the way to handle it is to make sure that the groupSize > 1 not because of numberOfGridRows)
+      (options[optionsMap.layoutParams.structure.scrollDirection] ===
+        GALLERY_CONSTS[optionsMap.layoutParams.structure.scrollDirection].HORIZONTAL &&
+        options[optionsMap.layoutParams.groups.groupSize] > 1 &&
+        options[optionsMap.layoutParams.structure.numberOfGridRows] <= 1)
+    );
   },
   isRelevantDescription:
-    'Set a Horizontal gallery ("Scroll Direction" as "Horizontal") and set Responsive Type to Fit to screen',
+    'Set a Vertical gallery ("Scroll Direction" as "Vertical") and set Responsive Type to Fit to screen, or set a Collage layout with "Horizontal" Scroll Direction.',
   default: 30,
 };