From 94ec4e676b8aaba914158c05166bc21c3a345fe3 Mon Sep 17 00:00:00 2001
From: DimaDemchenko <ipz215_ddo@student.ztu.edu.ua>
Date: Mon, 29 Jan 2024 10:30:22 +0200
Subject: [PATCH] added height change

---
 src/components/demo-scroll/DemoScroll.css |  5 +++++
 src/components/demo-scroll/DemoScroll.tsx | 18 ++++++++++++++----
 2 files changed, 19 insertions(+), 4 deletions(-)

diff --git a/src/components/demo-scroll/DemoScroll.css b/src/components/demo-scroll/DemoScroll.css
index ccd8d7b..2f437c7 100644
--- a/src/components/demo-scroll/DemoScroll.css
+++ b/src/components/demo-scroll/DemoScroll.css
@@ -70,6 +70,11 @@
   max-height: 80vh;
 }
 
+.max-height .list-container {
+  max-height: 100%;
+  overflow-y: hidden;
+}
+
 .list-container::-webkit-scrollbar-track {
   background: transparent;
 }
diff --git a/src/components/demo-scroll/DemoScroll.tsx b/src/components/demo-scroll/DemoScroll.tsx
index 80488c8..cb82d63 100644
--- a/src/components/demo-scroll/DemoScroll.tsx
+++ b/src/components/demo-scroll/DemoScroll.tsx
@@ -1,4 +1,4 @@
-import { useState } from 'react'
+import { useRef, useState } from 'react'
 import { Pokemon } from '../../types/pokemon-data'
 import { InfiniteScroll } from '../infinite-scroll/InfiniteScroll'
 import { InputCheckBox } from '../input-check-box/InputCheckBox'
@@ -43,6 +43,7 @@ const getDataFunc = async (page: number, itemsPerPage: number) => {
 export const DemoScroll = () => {
   const [isVideoVisible, setIsVideoVisible] = useState(false)
   const [isScrollByCameraOn, setIsScrollByCameraOn] = useState(false)
+  const mainContainerRef = useRef<HTMLDivElement>(null)
 
   const handleScrollByCamera = () => {
     setIsScrollByCameraOn(!isScrollByCameraOn)
@@ -52,11 +53,20 @@ export const DemoScroll = () => {
     setIsVideoVisible(!isVideoVisible)
   }
 
+  const changeHeightOfContainer = () => {
+    if (!mainContainerRef.current) return
+
+    mainContainerRef.current.classList.toggle('max-height')
+  }
+
   return (
-    <div className="main-container">
+    <div ref={mainContainerRef} className="main-container max-height">
       <InputCheckBox
         isChecked={isScrollByCameraOn}
-        onChange={handleScrollByCamera}
+        onChange={() => {
+          handleScrollByCamera()
+          changeHeightOfContainer()
+        }}
         labelText={'Scroll by camera'}
       />
       {isScrollByCameraOn && (
@@ -70,7 +80,7 @@ export const DemoScroll = () => {
         getDataFunc={getDataFunc}
         renderItem={renderItem}
         maxItemsInList={500}
-        itemsPerPage={5}
+        itemsPerPage={10}
         isScrollByCameraOn={isScrollByCameraOn}
         isCameraPreviewOn={isVideoVisible}
       />