From 9f0fba6680c490a1aac1e83a4c70d786d0c454e3 Mon Sep 17 00:00:00 2001 From: Sergey <148218517+qradle-yndx@users.noreply.github.com> Date: Tue, 9 Apr 2024 17:31:10 +0300 Subject: [PATCH] chore: Revert "feat: add media images fullscreen slider (#889)" (#917) This reverts commit eec646dd4173f37be952d477c2afc8fc8c82b41b. --- src/blocks/Slider/Slider.tsx | 6 +-- .../FullscreenImage/FullscreenImage.scss | 21 ----------- .../FullscreenImage/FullscreenImage.tsx | 37 +------------------ src/components/Media/Image/Image.tsx | 15 ++------ src/components/Media/Media.scss | 5 --- src/components/Media/Media.tsx | 6 --- 6 files changed, 7 insertions(+), 83 deletions(-) diff --git a/src/blocks/Slider/Slider.tsx b/src/blocks/Slider/Slider.tsx index c9d76651b..12aa0fec1 100644 --- a/src/blocks/Slider/Slider.tsx +++ b/src/blocks/Slider/Slider.tsx @@ -61,7 +61,6 @@ export interface SliderProps dotsClassName?: string; blockClassName?: string; arrowSize?: number; - initialIndex?: number; } export const SliderBlock = (props: WithChildren) => { @@ -84,7 +83,6 @@ export const SliderBlock = (props: WithChildren) => { arrowSize, onAfterChange: handleAfterChange, onBeforeChange: handleBeforeChange, - initialIndex = 0, } = props; const {isServer} = useContext(SSRContext); @@ -109,7 +107,7 @@ export const SliderBlock = (props: WithChildren) => { const slidesToShowCount = getSlidesToShowCount(slidesToShow); const slidesCountByBreakpoint = getSlidesCountByBreakpoint(breakpoint, slidesToShow); - const [currentIndex, setCurrentIndex] = useState(initialIndex); + const [currentIndex, setCurrentIndex] = useState(0); const [childStyles, setChildStyles] = useState({}); const [slider, setSlider] = useState(); const autoplayTimeId = useRef(); @@ -348,7 +346,7 @@ export const SliderBlock = (props: WithChildren) => { responsive: getSliderResponsiveParams(slidesToShow), beforeChange: onBeforeChange, afterChange: onAfterChange, - initialSlide: initialIndex, + initialSlide: 0, nextArrow: , prevArrow: , lazyLoad, diff --git a/src/components/FullscreenImage/FullscreenImage.scss b/src/components/FullscreenImage/FullscreenImage.scss index 0df38d8b0..d706e50cf 100644 --- a/src/components/FullscreenImage/FullscreenImage.scss +++ b/src/components/FullscreenImage/FullscreenImage.scss @@ -32,27 +32,6 @@ $closeButtonSize: 36px; overflow: hidden; } - &__modal-slider { - max-width: $newContentWidth; - width: 100%; - max-height: 70vh; - overflow: hidden; - border-radius: $borderRadius; - - &_item { - height: 100%; - - &-image { - display: block; - max-height: 70vh; - max-width: 100%; - width: 100%; - object-fit: contain; - object-position: center; - } - } - } - &__modal .yc-modal__content, &__modal-image { border-radius: $borderRadius; diff --git a/src/components/FullscreenImage/FullscreenImage.tsx b/src/components/FullscreenImage/FullscreenImage.tsx index aee8897bb..41442f5c4 100644 --- a/src/components/FullscreenImage/FullscreenImage.tsx +++ b/src/components/FullscreenImage/FullscreenImage.tsx @@ -3,11 +3,8 @@ import React, {CSSProperties, HTMLProps, useState} from 'react'; import {ChevronsExpandUpRight, Xmark} from '@gravity-ui/icons'; import {Icon, Modal} from '@gravity-ui/uikit'; -import SliderBlock from '../../blocks/Slider/Slider'; -import {ImageProps as ModelImageProps, SliderType} from '../../models'; import {block} from '../../utils'; import Image, {ImageProps} from '../Image/Image'; -import {getMediaImage} from '../Media/Image/utils'; import {i18n} from './i18n'; @@ -18,7 +15,6 @@ export interface FullscreenImageProps extends ImageProps { modalImageClass?: string; imageStyle?: CSSProperties; extraProps?: HTMLProps; - sliderData?: {items: ModelImageProps[]; initialIndex: number}; } const b = block('fullscreen-image'); @@ -26,14 +22,7 @@ const FULL_SCREEN_ICON_SIZE = 18; const CLOSE_ICON_SIZE = 24; const FullscreenImage = (props: FullscreenImageProps) => { - const { - imageClassName, - sliderData, - modalImageClass, - imageStyle, - alt = i18n('img-alt'), - extraProps, - } = props; + const {imageClassName, modalImageClass, imageStyle, alt = i18n('img-alt'), extraProps} = props; const [isOpened, setIsOpened] = useState(false); const openModal = () => setIsOpened(true); @@ -77,29 +66,7 @@ const FullscreenImage = (props: FullscreenImageProps) => { className={b('icon', {hover: true})} /> - {sliderData ? ( -
- - {sliderData.items.map((item, index) => ( -
- -
- ))} - -
- ) : ( - - )} + )} diff --git a/src/components/Media/Image/Image.tsx b/src/components/Media/Image/Image.tsx index c5ef5abc0..1ecce074f 100644 --- a/src/components/Media/Image/Image.tsx +++ b/src/components/Media/Image/Image.tsx @@ -7,7 +7,7 @@ import SliderBlock from '../../../blocks/Slider/Slider'; import {ImageProps, MediaComponentImageProps, QAProps, SliderType} from '../../../models'; import {block, getQaAttrubutes} from '../../../utils'; import BackgroundImage from '../../BackgroundImage/BackgroundImage'; -import FullscreenImage, {FullscreenImageProps} from '../../FullscreenImage/FullscreenImage'; +import FullscreenImage from '../../FullscreenImage/FullscreenImage'; import ImageView from '../../Image/Image'; import {getMediaImage} from './utils'; @@ -20,7 +20,6 @@ export interface ImageAdditionProps { imageClassName?: string; isBackground?: boolean; fullscreen?: boolean; - fullscreenClassName?: string; onLoad?: () => void; } @@ -37,7 +36,6 @@ const Image = (props: ImageAllProps) => { parallax, height, imageClassName, - fullscreenClassName, isBackground, hasVideoFallback, video, @@ -89,10 +87,7 @@ const Image = (props: ImageAllProps) => { const imageClass = b('item', {withVideo: Boolean(video) && !hasVideoFallback}, imageClassName); - const renderFullscreenImage = ( - item: ImageProps, - sliderData?: FullscreenImageProps['sliderData'], - ) => { + const renderFullscreenImage = (item: ImageProps) => { const itemData = getMediaImage(item); return ( @@ -100,10 +95,8 @@ const Image = (props: ImageAllProps) => { key={itemData.alt} {...itemData} imageClassName={imageClass} - modalImageClass={fullscreenClassName} imageStyle={{height}} qa={qaAttributes.fullscreenImage} - sliderData={sliderData} /> ); }; @@ -142,9 +135,7 @@ const Image = (props: ImageAllProps) => { {imageArray.map((item, index) => ( - {fullscreenItem - ? renderFullscreenImage(item, {items: imageArray, initialIndex: index}) - : imageOnly(item)} + {fullscreenItem ? renderFullscreenImage(item) : imageOnly(item)} ))} diff --git a/src/components/Media/Media.scss b/src/components/Media/Media.scss index 5d71bc38b..af4b8fec0 100644 --- a/src/components/Media/Media.scss +++ b/src/components/Media/Media.scss @@ -13,9 +13,4 @@ $block: '.#{$ns}Media'; display: flex; align-items: center; } - - &__fullscreen-image-cover { - object-fit: cover; - object-position: top; - } } diff --git a/src/components/Media/Media.tsx b/src/components/Media/Media.tsx index 555fbcc59..2418e5140 100644 --- a/src/components/Media/Media.tsx +++ b/src/components/Media/Media.tsx @@ -16,7 +16,6 @@ const b = block('Media'); export interface MediaAllProps extends MediaProps, VideoAdditionProps, ImageAdditionProps, QAProps { className?: string; - isFullscreenImageCover?: boolean; youtubeClassName?: string; autoplay?: boolean; onImageLoad?: () => void; @@ -33,7 +32,6 @@ export const Media = (props: MediaAllProps) => { previewImg, parallax = false, fullscreen, - isFullscreenImageCover, analyticsEvents, className, imageClassName, @@ -68,9 +66,6 @@ export const Media = (props: MediaAllProps) => { disableImageSliderForArrayInput={disableImageSliderForArrayInput} height={height} imageClassName={imageClassName} - fullscreenClassName={ - isFullscreenImageCover ? b('fullscreen-image-cover') : undefined - } isBackground={isBackground} video={video} hasVideoFallback={hasVideoFallback} @@ -142,7 +137,6 @@ export const Media = (props: MediaAllProps) => { isBackground, hasVideoFallback, fullscreen, - isFullscreenImageCover, qaAttributes.image, qaAttributes.video, onImageLoad,