diff --git a/src/desktop/components/gallery-modal/__stories__/index.stories.tsx b/src/desktop/components/gallery-modal/__stories__/index.stories.tsx index e4efa349..dbe19c11 100644 --- a/src/desktop/components/gallery-modal/__stories__/index.stories.tsx +++ b/src/desktop/components/gallery-modal/__stories__/index.stories.tsx @@ -1,4 +1,4 @@ -import React from 'react'; +import React, { useState } from 'react'; import { GalleryModal } from '..'; import { action } from '@storybook/addon-actions'; import { data } from '../__mocks__'; @@ -17,7 +17,7 @@ export default { }, }; -const text = +const longText = 'Двухшовная, однотонная, без логотипа, без посторонних запахов. На ребенке(1,5г.) сидит #отлично, на глаза не сползает, а взрослому-мала, уши не закрывает. Возможно, если взрослый будет лысый, то - норм), но если волосы все таки есть, то пиши пропало. Не понравилась, слишком мягкая, не держится на голове, все время съезжает. В результате абсолютно мокрая голова и куча потерянного времени, чтобы постоянно ее поправлять. Под водой крокодил смотрится эпично, очень забавно)) слому-мала, уши не закрывает. Возможно, если взрослый будет лысый, то - норм), но если волосы все таки есть, то пиши пропало. Не понравилась, слишком мягкая, не держится на голове, все время съезжает. В результате абсолютно мокрая голова и куча потерянного времени, чтобы постоянно ее поправлять. Под водой крокодил смотрится эпично, очень забавно)) слому-мала, уши не закрывает. Возможно, если взрослый будет лысый, то - норм), но если волосы все таки есть, то пиши пропало. Не понравилась, слишком мягкая, не держится на голове, все время съезжает. В результате абсолютно мокрая голова и куча потерянного времени, чтобы постоянно ее поправлять. Под водой крокодил смотрится эпично, очень забавно)) слому-мала, уши не закрывает. Возможно, если взрослый будет лысый, то - норм), но если волосы все таки есть, то пиши пропало. Не понравилась, слишком мягкая, не держится на голове, все время съезжает. В результате абсолютно мокрая голова и куча потерянного времени, чтобы постоянно ее поправлять. Под водой крокодил смотрится эпично, очень забавно))'; export const Primary = () => ( @@ -28,19 +28,24 @@ export const Primary = () => ( /> ); -export const WithReview = () => ( - action('GalleryModal:go-to-review')()} - onVideoEvent={e => action('GalleryModal:video-event')(e.type)} - /> -); +export const WithReview = () => { + const [index, setIndex] = useState(0); + + return ( + setIndex(nextIndex)} + onClose={action('GalleryModal:close')} + review={{ + rating: 3.2, + author: 'Пелагеевская Вероника Сергеевна', + content: `[${index + 1}] ${index % 2 === 0 ? longText : longText.slice(0, 80)}`, + }} + onGoToReview={() => action('GalleryModal:go-to-review')()} + onVideoEvent={e => action('GalleryModal:video-event')(e.type)} + /> + ); +}; export const WithReviewShort = () => ( ( review={{ rating: 3.2, author: 'Пелагеевская Вероника Сергеевна', - content: text.slice(0, 140), + content: longText.slice(0, 140), }} onGoToReview={() => action('GalleryModal:go-to-review')()} onVideoEvent={e => action('GalleryModal:video-event')(e.type)} @@ -86,7 +91,7 @@ export const WithReviewEmpty = () => ( export const WithReviewNotAffect = () => { const markup = ( <> - {text + {longText .replace(/(#[А-яA-z0-9]+)/g, '{divider}$1{divider}') .split('{divider}') .map((item, index) => diff --git a/src/desktop/components/gallery-modal/components/review-info.tsx b/src/desktop/components/gallery-modal/components/review-info.tsx index 637d651e..395327ab 100644 --- a/src/desktop/components/gallery-modal/components/review-info.tsx +++ b/src/desktop/components/gallery-modal/components/review-info.tsx @@ -41,8 +41,14 @@ export const ReviewInfo = ({ } }, [opened]); + useEffect(() => { + setClamped(false); + setOpened(false); + }, [content, author]); + useEffect(checkClamp, [content, opened]); + // @todo что делать если при изменении размеров изменилось состояние обрезания? useEffect(() => on(window, 'resize', checkClamp), [content, checkClamp]); return (