From 8b10faacce157560a464308e0658730bcaeea42c Mon Sep 17 00:00:00 2001
From: DmitriyB <dimasik_burdin@inbox.ru>
Date: Thu, 28 Jul 2022 15:49:58 +0500
Subject: [PATCH] add animation on change content in container

---
 src/components/mainPart/calendar/calendar.css |  2 +-
 src/components/mainPart/mainPart.css          | 29 ++++++-------
 src/components/mainPart/mainPart.tsx          | 41 ++++++++++++++-----
 3 files changed, 47 insertions(+), 25 deletions(-)

diff --git a/src/components/mainPart/calendar/calendar.css b/src/components/mainPart/calendar/calendar.css
index e627dd2..1f1adeb 100644
--- a/src/components/mainPart/calendar/calendar.css
+++ b/src/components/mainPart/calendar/calendar.css
@@ -145,7 +145,7 @@
   }
   .react-calendar__tile--active:enabled:hover,
   .react-calendar__tile--active:enabled:focus {
-    background: #1087ff;
+    /* background: #1087ff; */
   }
   .react-calendar--selectRange .react-calendar__tile--hover {
     background-color: #e6e6e6;
diff --git a/src/components/mainPart/mainPart.css b/src/components/mainPart/mainPart.css
index d4af311..07fc1dd 100644
--- a/src/components/mainPart/mainPart.css
+++ b/src/components/mainPart/mainPart.css
@@ -284,7 +284,7 @@
 /* ending ENTER animation */
 .change-main-part-content-enter-active {
     opacity: 1;    
-    transition: .3s;
+    transition: .2s;
 }
 
 /* starting EXIT animation */
@@ -295,7 +295,7 @@
 /* ending EXIT animation */
 .change-main-part-content-exit-active {
     opacity: 0;    
-    transition: .3s;
+    transition: .2s;
 }
 
 @media screen and (min-width: 2000px) {
@@ -391,18 +391,7 @@
         width: 482px;
     }
 
-    .main-part-text-button:hover {
-        background-color: #CE56C2;
-        color: #FFFFFF;
-        border: none;
-        /* transition: 0; */
-    }
-
-    /* .main-part-text-button:active {
-        background-color: #FFFFFF;
-        color: #CE56C2 ;
-        border: none;
-    } */
+    
 }
 
 @media screen and (max-width: 1024px) {
@@ -420,6 +409,18 @@
 }
 
 @media screen and (max-width: 640px) {
+    .main-part-text-button:hover {
+        background-color: #CE56C2;
+        color: #FFFFFF;
+        border: none;
+    }
+
+    .main-part-text-button:active {
+        background-color: #FFFFFF;
+        color: #CE56C2 ;
+        border: none;
+    }
+
     .main-part-container {    
         padding: 10px 10px 8px 10px;
     }
diff --git a/src/components/mainPart/mainPart.tsx b/src/components/mainPart/mainPart.tsx
index 9e7989e..fde7e43 100644
--- a/src/components/mainPart/mainPart.tsx
+++ b/src/components/mainPart/mainPart.tsx
@@ -21,7 +21,8 @@ type FormData = {
 export const MainPart: React.FC = React.memo(() => {
     // const [currentLang, setCurrentLang] = useState<'ru' | 'en'>('ru');
     const {lang, setLang} = useContext(ContextLang);
-    const [changeContent, setChangeContent] = useState(0);
+    // const [changeContent, setChangeContent] = useState(0);
+    const changeContent = useRef(0);
     const [showBackground, setShowBackground] = useState<boolean>(false);
     const [planContent, setPlaneContent] = useState<JSX.Element>();
     const defaultCurrentContent = 
@@ -45,13 +46,21 @@ export const MainPart: React.FC = React.memo(() => {
         
     }, [lang])
 
+    useEffect(() => {
+        console.log('change')
+    }, [changeContent])
+
     function changeLang(lang: 'ru' | 'en') {
         setLang(lang);
         document.querySelector('html').lang = lang;
     }
 
+    function changeContentFunc() {
+        changeContent.current += 1
+    }
+
     function onClickStartDemo() {
-        setChangeContent(changeContent + 1);
+        changeContentFunc();
         setCurrentContent(
             <>
                 <ContentContainer 
@@ -71,10 +80,9 @@ export const MainPart: React.FC = React.memo(() => {
     } 
 
     function onClickCreateNewDemo() {
-        setChangeContent(changeContent + 1);
+        changeContentFunc();
         setCurrentContent(
             <ContentContainer 
-                // titleText="Демонстрация запущена"
                 titleText={LangDict.demoStartedTitle}
                 descriptText={LangDict.demoStartedDescription}
                 onClickButton={() => onClickConnect()}
@@ -84,8 +92,8 @@ export const MainPart: React.FC = React.memo(() => {
         )            
     }
 
-    function onClickPlaneDemo() {
-        setChangeContent(changeContent + 1);
+    function onClickPlaneDemo() {  
+        // changeContentFunc()
         enableBackground();
         setPlaneContent(
             <PlanContentContainer 
@@ -102,6 +110,7 @@ export const MainPart: React.FC = React.memo(() => {
     }
 
     function onSelectDay(date: {ru: string, en: string}) {
+        changeContentFunc()
         setPlaneContent(
             <PlanContentContainer 
             title={LangDict.selectTime}
@@ -116,6 +125,7 @@ export const MainPart: React.FC = React.memo(() => {
     }
 
     function onSelectTime(date: {ru: string, en: string}, time: string) {
+        changeContentFunc()
         let dateTime = `${date} ${lang === 'ru' ? 'в' : 'in'} ${time}`;
         let dateObj = {
             ru: `${date.ru} в ${time}`,
@@ -138,6 +148,7 @@ export const MainPart: React.FC = React.memo(() => {
     }
 
     function onSubmit(data: FormData, date: string) {
+        changeContentFunc();
         setPlaneContent(null);
         setCurrentContent(
             <ContentContainer 
@@ -151,6 +162,7 @@ export const MainPart: React.FC = React.memo(() => {
     }
 
     function toMain() {
+        changeContentFunc();
         setCurrentContent(defaultCurrentContent);
         setPlaneContent(null);
         disableBackground();
@@ -169,7 +181,7 @@ export const MainPart: React.FC = React.memo(() => {
         <MainPartHeader changeLang={(lang) => changeLang(lang)} onClickLogo={toMain}/>
         <SwitchTransition mode="out-in">
             <CSSTransition
-                key={changeContent}
+                key={changeContent.current}
                 //@ts-ignore
                 addEndListener={(node, done) => node.addEventListener("transitionend", done, false)}
                 classNames={'change-main-part-content'}
@@ -181,9 +193,18 @@ export const MainPart: React.FC = React.memo(() => {
         </SwitchTransition>        
         {
             planContent ?
-            <div className="main-part-plan-content">
-                {planContent}
-            </div>
+            <SwitchTransition mode="out-in">
+                <CSSTransition
+                    key={changeContent.current}
+                    //@ts-ignore
+                    addEndListener={(node, done) => node.addEventListener("transitionend", done, false)}
+                    classNames={'change-main-part-content'}
+                >
+                <div className="main-part-plan-content">
+                    {planContent}
+                </div>
+            </CSSTransition>
+            </SwitchTransition>
             : null
         }        
         <CSSTransition