From c96895b052d7edc856a513bfef9cedc4c76246d6 Mon Sep 17 00:00:00 2001
From: DmitriyB <dimasik_burdin@inbox.ru>
Date: Tue, 9 Aug 2022 15:53:54 +0500
Subject: [PATCH] add disabled button

---
 src/components/connectWindow/popup/popup.tsx | 25 +++++++++++++++++---
 src/components/mainPart/pinkButton.css       |  7 ++++++
 src/components/mainPart/pinkButton.tsx       |  6 +++--
 3 files changed, 33 insertions(+), 5 deletions(-)

diff --git a/src/components/connectWindow/popup/popup.tsx b/src/components/connectWindow/popup/popup.tsx
index d2c2820..a094e26 100644
--- a/src/components/connectWindow/popup/popup.tsx
+++ b/src/components/connectWindow/popup/popup.tsx
@@ -1,4 +1,4 @@
-import React, { useContext } from "react";
+import React, { useContext, useEffect, useState } from "react";
 import { PinkButton } from "../../mainPart/pinkButton";
 import './popup.css';
 import { LangDict } from "../../langDict";
@@ -16,6 +16,12 @@ type TProps = {
 
 export const Popup:React.FC<TProps> = React.memo((props) => {
     const {lang} = useContext(ContextLang);
+    const [isDisabledButton, setIsDisabledButton] = useState<boolean>(false);
+
+    useEffect(() => {
+        setIsDisabledButton(props?.accessCode === '');
+    }, [props?.accessCode])
+
     return <div className="popup-container" style={{padding: props.type === "title-input-button" ? '48px 48px 26px 48px' : ''}}>
         {
             props.logo
@@ -38,8 +44,21 @@ export const Popup:React.FC<TProps> = React.memo((props) => {
             : <div className="popup-title-input-container">
                 <span className="popup-title-input-title">{LangDict.promtConnectFirst[lang]}<br/>{LangDict.promtConnectSecond[lang]}</span>
                 <div className="popup-title-input-input-container">
-                    <input type={'text'} className='popup-title-input-input' value={props.accessCode} onChange={e => props.setAccessCode(e.target.value)} />
-                    <PinkButton textButton={LangDict.continue[lang]} onClick={props.onClickFirst} width='100%' />
+                    <input 
+                        type={'text'} 
+                        className='popup-title-input-input' 
+                        value={props.accessCode} 
+                        onChange={e => {
+                            props.setAccessCode(e.target.value)
+                            
+                        }}
+                    />
+                    <PinkButton 
+                        textButton={LangDict.continue[lang]} 
+                        onClick={props.onClickFirst} 
+                        width='100%' 
+                        disabled={isDisabledButton}
+                    />
                     <span className="popup-line"></span>
                 </div>
                 <button className="popup-title-input-back-button" onClick={() => props.onClickChange()}>{LangDict.selecеDemoMode[lang]}</button>
diff --git a/src/components/mainPart/pinkButton.css b/src/components/mainPart/pinkButton.css
index beb59d3..1f55c31 100644
--- a/src/components/mainPart/pinkButton.css
+++ b/src/components/mainPart/pinkButton.css
@@ -35,6 +35,13 @@
     border: none;
 }
 
+.main-part-text-button.disabled,
+.main-part-text-button.disabled:hover,
+.main-part-text-button.disabled:active {
+    background: #828282;
+    color: #FFFFFF;
+}
+
 @media screen and (min-width: 2000px) {
     .main-part-text-button {
         width: 50%;
diff --git a/src/components/mainPart/pinkButton.tsx b/src/components/mainPart/pinkButton.tsx
index 45d66d5..6eb6ec5 100644
--- a/src/components/mainPart/pinkButton.tsx
+++ b/src/components/mainPart/pinkButton.tsx
@@ -7,7 +7,8 @@ type TProps = {
     onClick?: () => void
     type?: 'submit' | 'button'
     width?: '100%' | string,
-    variant?: 'gray' | 'default'
+    variant?: 'gray' | 'default',
+    disabled?: boolean
 }
 
 export const PinkButton:React.FC<TProps> = React.memo((props) => {
@@ -19,11 +20,12 @@ export const PinkButton:React.FC<TProps> = React.memo((props) => {
     }, [])
     return <button        
         style={{width: props.width ? props.width : '', ...styles}}
-        className={`main-part-text-button ${props.variant === "gray" ? 'gray' : ''}`}
+        className={`main-part-text-button ${props.variant === "gray" ? 'gray' : ''} ${props.disabled ? 'disabled' : ''}`}
         onClick={() => {
             return props?.onClick ? props.onClick() : null;
         }}
         type={props.type ? props.type : 'button'}
+        disabled={props?.disabled || false}
         >
             {props.textButton}
         </button>