From c7282486200c66782b8366cc9ae64ee27ff941bf Mon Sep 17 00:00:00 2001
From: DmitriyB <dimasik_burdin@inbox.ru>
Date: Mon, 15 Aug 2022 12:12:21 +0500
Subject: [PATCH] =?UTF-8?q?=D0=B4=D0=BE=D0=B1=D0=B0=D0=B2=D0=BB=D0=B5?=
 =?UTF-8?q?=D0=BD=D0=B0=20=D0=B0=D0=BD=D0=B8=D0=BC=D0=B0=D1=86=D0=B8=D1=8F?=
 =?UTF-8?q?=20=D0=BE=D1=82=D0=BA=D1=80=D1=8B=D1=82=D0=B8=D1=8F/=D0=B7?=
 =?UTF-8?q?=D0=B0=D0=BA=D1=80=D1=8B=D1=82=D0=B8=D1=8F=20=D0=B4=D0=BE=D0=BF?=
 =?UTF-8?q?=20=D0=BA=D0=BD=D0=BE=D0=BF=D0=BE=D0=BA=20=D0=B4=D0=BB=D1=8F=20?=
 =?UTF-8?q?=D0=B4=D0=B5=D0=BA=D1=81=D1=82=D0=BE=D0=BF=D0=B0,=20=D0=BF?=
 =?UTF-8?q?=D0=BE=D1=84=D0=B8=D0=BA=D1=88=D0=B5=D0=BD=20=D0=B1=D0=B0=D0=B3?=
 =?UTF-8?q?,=20=D0=BA=D0=BE=D0=B3=D0=B4=D0=B0=20=D0=B2=20=D0=BC=D0=BE?=
 =?UTF-8?q?=D0=B1=20=D0=B2=D0=B5=D1=80=D1=81=D0=B8=D0=B8=20=D0=BF=D1=80?=
 =?UTF-8?q?=D0=B8=20=D0=BE=D1=82=D0=BA=D1=80=D1=8B=D1=82=D0=BE=D0=BC=20?=
 =?UTF-8?q?=D1=80=D0=B0=D0=B7=D0=B4=D0=B5=D0=BB=D0=B5=20=D0=BC=D0=BE=D0=B6?=
 =?UTF-8?q?=D0=BD=D0=BE=20=D0=B1=D1=8B=D0=BB=D0=BE=20=D0=B7=D0=B0=D0=BA?=
 =?UTF-8?q?=D1=80=D1=8B=D1=82=D1=8C=20=D1=82=D1=83=D0=BB=D0=B1=D0=B0=D1=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../mainScreen/toolbar/buttonContainer.tsx    | 189 ++++++++++--------
 src/components/mainScreen/toolbar/toolbar.css |  19 ++
 src/components/mainScreen/toolbar/toolbar.tsx |  21 +-
 3 files changed, 140 insertions(+), 89 deletions(-)

diff --git a/src/components/mainScreen/toolbar/buttonContainer.tsx b/src/components/mainScreen/toolbar/buttonContainer.tsx
index af4c854..0e94262 100644
--- a/src/components/mainScreen/toolbar/buttonContainer.tsx
+++ b/src/components/mainScreen/toolbar/buttonContainer.tsx
@@ -1,4 +1,5 @@
 import React, { useContext, useState } from "react";
+import { CSSTransition } from "react-transition-group";
 import { ContextWindowHeight } from "../../contextWindowHeight";
 import { ControlButton } from "./controlButton";
 import { ToolbarButton } from "./toolbarButton";
@@ -16,13 +17,15 @@ type TProps = {
         isSelected?: boolean
     }>
     isOpenToolbar: boolean
+    openedAddButtons?: string
+    setOpenedAddButtons?: React.Dispatch<React.SetStateAction<string>>
     isBorderLineTop?: 'hide' | 'show'
     isBorderLineBottom?: 'hide' | 'show'
 }
 
 export const ButtonContainer:React.FC<TProps> = React.memo((props) => { 
     const windowHeight = useContext(ContextWindowHeight);
-    const [openedAddButtons, setOpenedAddButtons] = useState<string>('');
+    // const [openedAddButtons, setOpenedAddButtons] = useState<string>('');
     const controlStates = ['default', 'questing', 'return', 'questing'];// temp
     const [currentControlState, setCurrentControlState] = useState<number>(0); // temp
     const typeUser = 'admin' // 'user' // temp
@@ -42,15 +45,14 @@ export const ButtonContainer:React.FC<TProps> = React.memo((props) => {
         }
         {props.buttons.map((button, index) => {
             function onClick() {
-                if(openedAddButtons === button.type + index + 'areacont') {
-                    setOpenedAddButtons('');
+                if(props.openedAddButtons === button.type + index) {
+                    props?.setOpenedAddButtons('');
                 } else {
-                    setOpenedAddButtons(button.type + index + 'areacont')
+                    props?.setOpenedAddButtons(button.type + index);
                 }
             }
-            return <div className="toolbar-button-area-container" key={button.type + index + 'areacont'}>
+            return <div className="toolbar-button-area-container" key={button.type + index}>
                 <ToolbarButton
-                    // key={button.type + index}
                     onClick={() => {
                         onClick();                        
                         button.onClick()
@@ -61,99 +63,114 @@ export const ButtonContainer:React.FC<TProps> = React.memo((props) => {
                     active={button?.active}
                     isCaption={button.isCaption}
                     isSelected={button?.isSelected}
-                    isVisible={openedAddButtons === button.type + index + 'areacont' && windowHeight > 700 && (button.type.includes('user') || button.type.includes('language'))}
+                    isVisible={props?.openedAddButtons === button.type + index + 'areacont' && windowHeight > 700 && (button.type.includes('user') || button.type.includes('language'))}
                 />
                 {
                     button.type.includes('user') && windowHeight > 700 ?
-                    <div className={`toolbar-open-add-button-container ${openedAddButtons === button.type + index + 'areacont' && props.isOpenToolbar ? 'show' : ''}`}>
-                        <ToolbarButton
-                            // key={button.type + index}
-                            onClick={() => onClick()} 
-                            type={button.type} 
-                            isNotification={button?.isNotification}
-                            caption={CaptionToolbarButtons[button.type]}
-                            active={button?.active}
-                            isCaption={false}
-                            isSelected={button?.isSelected}
-                        />
-                        <ToolbarButton
-                            onClick={() => null}
-                            type={"micro"} 
-                            caption={''}
-                            isCaption={false}
-                        />
-                        {
-                            // temp
-                            currentControlState === 0
-                            ? <ControlButton
-                                onClick={() => nextControlState()}
-                                state={"default"}
-                                userType={typeUser}
+                    <CSSTransition
+                        in={props?.openedAddButtons === button.type + index && props.isOpenToolbar}
+                        timeout={300}
+                        classNames={'show-add-buttons'}
+                        unmountOnExit
+                    >
+                        {/* <div className={`toolbar-open-add-button-container ${props?.openedAddButtons === button.type + index && props.isOpenToolbar ? 'show' : ''}`}> */}
+                        <div className={`toolbar-open-add-button-container show`}>
+                            <ToolbarButton
+                                onClick={() => onClick()} 
+                                type={button.type} 
+                                isNotification={button?.isNotification}
+                                caption={CaptionToolbarButtons[button.type]}
+                                active={button?.active}
+                                isCaption={false}
+                                isSelected={button?.isSelected}
                             />
-                            : currentControlState === 1
-                            ? <>
-                                <ToolbarButton
-                                    onClick={() => nextControlState()}
-                                    type={"no"}
-                                    caption={''}
-                                    isCaption={false}
-                                    size={"medium"}
-                                />
-                                <ToolbarButton
-                                    onClick={() => nextControlState()}
-                                    type={"yes"}
-                                    caption={''}
-                                    isCaption={false}
-                                    size={"medium"}
-                                />
-                            </>
-                            : currentControlState === 2
-                            ? <ControlButton
-                                onClick={() => nextControlState()}
-                                state={"waiting"}
-                                userType={typeUser}
+                            <ToolbarButton
+                                onClick={() => null}
+                                type={"micro"} 
+                                caption={''}
+                                isCaption={false}
                             />
-                            : currentControlState === 3
-                            ? <>
-                                <ToolbarButton
+                            {
+                                // temp
+                                currentControlState === 0
+                                ? <ControlButton
                                     onClick={() => nextControlState()}
-                                    type={"no"}
-                                    caption={''}
-                                    isCaption={false}
-                                    size={"medium"}
+                                    state={"default"}
+                                    userType={typeUser}
                                 />
-                                <ToolbarButton
+                                : currentControlState === 1
+                                ? <>
+                                    <ToolbarButton
+                                        onClick={() => nextControlState()}
+                                        type={"no"}
+                                        caption={''}
+                                        isCaption={false}
+                                        size={"medium"}
+                                    />
+                                    <ToolbarButton
+                                        onClick={() => nextControlState()}
+                                        type={"yes"}
+                                        caption={''}
+                                        isCaption={false}
+                                        size={"medium"}
+                                    />
+                                </>
+                                : currentControlState === 2
+                                ? <ControlButton
                                     onClick={() => nextControlState()}
-                                    type={"yes"}
-                                    caption={''}
-                                    isCaption={false}
-                                    size={"medium"}
+                                    state={"waiting"}
+                                    userType={typeUser}
                                 />
-                            </>
-                            : null
-                        }
-                        
-                    </div>
+                                : currentControlState === 3
+                                ? <>
+                                    <ToolbarButton
+                                        onClick={() => nextControlState()}
+                                        type={"no"}
+                                        caption={''}
+                                        isCaption={false}
+                                        size={"medium"}
+                                    />
+                                    <ToolbarButton
+                                        onClick={() => nextControlState()}
+                                        type={"yes"}
+                                        caption={''}
+                                        isCaption={false}
+                                        size={"medium"}
+                                    />
+                                </>
+                                : null
+                            }
+                            
+                        </div>
+                    </CSSTransition>
                     : null
                 }
                 {
                     button.type.includes('language') && windowHeight > 700 ?
-                    <div className={`toolbar-open-add-button-container ${openedAddButtons === button.type + index + 'areacont' && props.isOpenToolbar ? 'show' : ''}`}>
-                        <ToolbarButton
-                            onClick={() => {onClick(); button.onClick()}} 
-                            type={button.type} 
-                            caption={CaptionToolbarButtons[button.type]}
-                            isCaption={false}
-                            isSelected={button.isSelected}
-                        />
-                        <ToolbarButton
-                            onClick={() => null} 
-                            type={"language en"} 
-                            caption={CaptionToolbarButtons[button.type]}
-                            isCaption={false}
-                            isSelected={false}
-                        /> 
-                    </div>
+                    <CSSTransition
+                        in={props?.openedAddButtons === button.type + index && props.isOpenToolbar}
+                        timeout={300}
+                        classNames={'show-add-buttons'}
+                        unmountOnExit
+                    >
+                        {/* <div className={`toolbar-open-add-button-container ${props?.openedAddButtons === button.type + index && props.isOpenToolbar ? 'show' : ''}`}> */}
+                        <div className={`toolbar-open-add-button-container show`}>
+                            <ToolbarButton
+                                onClick={() => {onClick(); button.onClick()}} 
+                                type={button.type} 
+                                caption={CaptionToolbarButtons[button.type]}
+                                isCaption={false}
+                                isSelected={button.isSelected}
+                            />
+                            <ToolbarButton
+                                onClick={() => null} 
+                                type={"language en"} 
+                                caption={CaptionToolbarButtons[button.type]}
+                                isCaption={false}
+                                isSelected={false}
+                            /> 
+                        </div>
+                    </CSSTransition>
                     : null
                 }
             </div>
diff --git a/src/components/mainScreen/toolbar/toolbar.css b/src/components/mainScreen/toolbar/toolbar.css
index 869bcbc..3ab0ab1 100644
--- a/src/components/mainScreen/toolbar/toolbar.css
+++ b/src/components/mainScreen/toolbar/toolbar.css
@@ -461,6 +461,25 @@
     transform: translateX(-60px);
 }
 
+
+.show-add-buttons-enter {
+    opacity: 0;
+}
+
+.show-add-buttons-enter-active {
+    opacity: 1;
+    transition: .3s;
+}
+
+.show-add-buttons-exit {
+    opacity: 1;
+}
+
+.show-add-buttons-exit-active {
+    opacity: 0;
+    transition: .3s;
+}
+
 @media screen and (max-height: 700px) {
     .toolbar-field {
         padding: 20px 14px;
diff --git a/src/components/mainScreen/toolbar/toolbar.tsx b/src/components/mainScreen/toolbar/toolbar.tsx
index 458e6e5..8b2c83f 100644
--- a/src/components/mainScreen/toolbar/toolbar.tsx
+++ b/src/components/mainScreen/toolbar/toolbar.tsx
@@ -19,6 +19,7 @@ type TProps = {
 export const Toolbar:React.FC<TProps> = React.memo((props) => {
     const windowHeight = useContext(ContextWindowHeight);
     const [showAddButtonsContOnDekstop, setShowAddButtonsContOnDekstop] = useState<boolean>(false);
+    const [openedAddButtons, setOpenedAddButtons] = useState<string>('');
 
     function showAddButtons() {
         setShowAddButtonsContOnDekstop(!showAddButtonsContOnDekstop);
@@ -50,7 +51,9 @@ export const Toolbar:React.FC<TProps> = React.memo((props) => {
                                 isSelected: props?.isOpenUsersMobilePart
                             }
                         ]}
-                    isOpenToolbar={props.isOpen}
+                        isOpenToolbar={props.isOpen}
+                        openedAddButtons={openedAddButtons}
+                        setOpenedAddButtons={setOpenedAddButtons}
                     />
                 </div>
                 <div className="toolbar-field-part">
@@ -70,6 +73,8 @@ export const Toolbar:React.FC<TProps> = React.memo((props) => {
                             }                        
                         ]}
                         isOpenToolbar={props.isOpen}
+                        openedAddButtons={openedAddButtons}
+                        setOpenedAddButtons={setOpenedAddButtons}
                     />                    
                     {/* <BorderLine /> */}
                     <ToolbarButton 
@@ -77,11 +82,15 @@ export const Toolbar:React.FC<TProps> = React.memo((props) => {
                         onClick={props.onClickMobileOther}
                         caption={CaptionToolbarButtons["other"]}
                         isCaption={false}
-                        isSelected={props.isOpenOtherMobilePart}
+                        isSelected={props.isOpenOtherMobilePart}                        
                     />
                 </div>
             </div>
-            <button className='toolbar-open-button' onClick={() => props.onClickOpenButton()}>
+            <button className='toolbar-open-button' onClick={() => {
+                if(!(props.isOpenOtherMobilePart || props.isOpenUsersMobilePart))
+                    props.onClickOpenButton()
+            }}
+            >
                 <span className="toolbar-open-button-icon"></span>
             </button>
         </div>
@@ -128,6 +137,8 @@ export const Toolbar:React.FC<TProps> = React.memo((props) => {
                         
                     ]}
                     isOpenToolbar={props.isOpen}
+                    openedAddButtons={openedAddButtons}
+                    setOpenedAddButtons={setOpenedAddButtons}
                 />
             </div>
             <div className="toolbar-field-part">
@@ -147,6 +158,8 @@ export const Toolbar:React.FC<TProps> = React.memo((props) => {
                         }                        
                     ]}
                     isOpenToolbar={props.isOpen}
+                    openedAddButtons={openedAddButtons}
+                    setOpenedAddButtons={setOpenedAddButtons}
                 />
                 <ButtonContainer
                     buttons={[
@@ -164,6 +177,8 @@ export const Toolbar:React.FC<TProps> = React.memo((props) => {
                     ]}
                     isBorderLineTop={"hide"}
                     isOpenToolbar={props.isOpen}
+                    openedAddButtons={openedAddButtons}
+                    setOpenedAddButtons={setOpenedAddButtons}
                 />
                  {/* <ToolbarButton 
                     type="share"