feat: allow to disable image slider inside media component (#887)

* feat: allow to disable image slider inside media component

Author: benax-se

src/components/Media/Image/Image.tsx

@@ -34,16 +34,20 @@ export const defaultAnimatedDivQa = 'animated-div';
 const Image = (props: ImageAllProps) => {
     const {
         parallax,
-        image,
         height,
         imageClassName,
         isBackground,
         hasVideoFallback,
         video,
         fullscreen,
+        disableImageSliderForArrayInput,
         qa,
         onLoad,
     } = props;
+    const image =
+        Array.isArray(props.image) && disableImageSliderForArrayInput
+            ? props.image[0]
+            : props.image;
 
     const qaAttributes = getQaAttrubutes(
         qa,

src/components/Media/Media.tsx

@@ -37,6 +37,7 @@ export const Media = (props: MediaAllProps) => {
         imageClassName,
         videoClassName,
         youtubeClassName,
+        disableImageSliderForArrayInput,
         playVideo = true,
         isBackground,
         playButton,
@@ -62,6 +63,7 @@ export const Media = (props: MediaAllProps) => {
                     key="image"
                     parallax={parallax}
                     image={image}
+                    disableImageSliderForArrayInput={disableImageSliderForArrayInput}
                     height={height}
                     imageClassName={imageClassName}
                     isBackground={isBackground}
@@ -129,6 +131,7 @@ export const Media = (props: MediaAllProps) => {
         dataLens,
         iframe,
         parallax,
+        disableImageSliderForArrayInput,
         height,
         imageClassName,
         isBackground,

src/models/constructor-items/common.ts

@@ -252,6 +252,7 @@ export interface MediaComponentImageProps {
     video?: MediaVideoProps;
     parallax?: boolean;
     height?: number;
+    disableImageSliderForArrayInput?: boolean;
 }
 
 export interface MediaComponentDataLensProps {

src/schema/validators/common.ts

@@ -590,6 +590,9 @@ export const MediaProps = {
             {type: 'array', items: ImageProps, optionName: 'list'},
         ],
     },
+    disableImageSliderForArrayInput: {
+        type: 'boolean',
+    },
     video: VideoProps,
     youtube: {
         type: 'string',