From 84be43939a8c580bee77d8a8ea2f0500b5571b6f Mon Sep 17 00:00:00 2001
From: Egor Startsev <78896684+benax-se@users.noreply.github.com>
Date: Tue, 2 Apr 2024 13:55:34 +0300
Subject: [PATCH] feat: allow to disable image slider inside media component
 (#887) (#891)

* feat: allow to disable image slider inside media component
---
 src/components/Media/Image/Image.tsx   | 6 +++++-
 src/components/Media/Media.tsx         | 3 +++
 src/models/constructor-items/common.ts | 1 +
 src/schema/validators/common.ts        | 3 +++
 4 files changed, 12 insertions(+), 1 deletion(-)

diff --git a/src/components/Media/Image/Image.tsx b/src/components/Media/Image/Image.tsx
index 1c1cd2ac5..1ecce074f 100644
--- a/src/components/Media/Image/Image.tsx
+++ b/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,
diff --git a/src/components/Media/Media.tsx b/src/components/Media/Media.tsx
index 96565d39f..f97ca2350 100644
--- a/src/components/Media/Media.tsx
+++ b/src/components/Media/Media.tsx
@@ -38,6 +38,7 @@ export const Media = (props: MediaAllProps) => {
         imageClassName,
         videoClassName,
         youtubeClassName,
+        disableImageSliderForArrayInput,
         playVideo = true,
         isBackground,
         playButton,
@@ -63,6 +64,7 @@ export const Media = (props: MediaAllProps) => {
                     key="image"
                     parallax={parallax}
                     image={image}
+                    disableImageSliderForArrayInput={disableImageSliderForArrayInput}
                     height={height}
                     imageClassName={imageClassName}
                     isBackground={isBackground}
@@ -131,6 +133,7 @@ export const Media = (props: MediaAllProps) => {
         dataLens,
         iframe,
         parallax,
+        disableImageSliderForArrayInput,
         height,
         imageClassName,
         isBackground,
diff --git a/src/models/constructor-items/common.ts b/src/models/constructor-items/common.ts
index a1d830318..bf65bec2d 100644
--- a/src/models/constructor-items/common.ts
+++ b/src/models/constructor-items/common.ts
@@ -258,6 +258,7 @@ export interface MediaComponentImageProps {
     video?: MediaVideoProps;
     parallax?: boolean;
     height?: number;
+    disableImageSliderForArrayInput?: boolean;
 }
 
 export interface MediaComponentDataLensProps {
diff --git a/src/schema/validators/common.ts b/src/schema/validators/common.ts
index fb00c8ccf..817c65b34 100644
--- a/src/schema/validators/common.ts
+++ b/src/schema/validators/common.ts
@@ -621,6 +621,9 @@ export const MediaProps = {
             {type: 'array', items: ImageProps, optionName: 'list'},
         ],
     },
+    disableImageSliderForArrayInput: {
+        type: 'boolean',
+    },
     video: VideoProps,
     youtube: {
         type: 'string',