Merge pull request #119 from sima-land/118-gallery-modal-review-change

#118  GalleryModal: поправить логику отображения кнопки 'показать полностью'/'скрыть отзыв'

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 = () => (
-  <GalleryModal
-    media={data.media}
-    onClose={action('GalleryModal:close')}
-    review={{
-      rating: 3.2,
-      author: 'Пелагеевская Вероника Сергеевна',
-      content: text,
-    }}
-    onGoToReview={() => action('GalleryModal:go-to-review')()}
-    onVideoEvent={e => action('GalleryModal:video-event')(e.type)}
-  />
-);
+export const WithReview = () => {
+  const [index, setIndex] = useState<number>(0);
+
+  return (
+    <GalleryModal
+      media={data.media}
+      onMediaChange={(_, nextIndex) => 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 = () => (
   <GalleryModal
@@ -49,7 +54,7 @@ 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) =>

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 (