upd Form, Button

- Add disabled Button - Del link Button - Add disabled Form
seelentov · Jul 29, 2024 · 3404960 · 3404960
1 parent 15027c2
commit 3404960
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 5 deletions.
diff --git a/src/components/Form/Form.tsx b/src/components/Form/Form.tsx
@@ -74,6 +74,8 @@ export const Form = ({ type = 'default' }) => {
         }
     };
 
+    const enabledButton = Object.values(formData).every(field => field.trim() != "") && token != ""
+
     return (
         <form className={cn(styles.form, type === 'default' && styles.default) + " modal-form"}>
             {type === 'default' &&
@@ -101,8 +103,8 @@ export const Form = ({ type = 'default' }) => {
       />}
 
 
-            <Button dubleText='Отправить' onClick={handleSubmit}>
-                <YMClick child="Отправить" name="form_action" metrik_id={96723379} styleNest="display: inline" />
+            <Button dubleText='Отправить' onClick={handleSubmit} disabled={!enabledButton}>
+                Отправить
             </Button>
         </form>
     )

diff --git a/src/components/UI/Button/Button.module.scss b/src/components/UI/Button/Button.module.scss
@@ -1,3 +1,13 @@
+.main:disabled{
+  opacity: 0.5;
+  pointer-events: none;
+  &:hover {
+    .textHover {
+      width: 0%;
+    }
+  }
+}
+
 .main {
   background-color: var(--color_main-text);
   border: 2px var(--color_main-text) solid;

diff --git a/src/components/UI/Button/Button.tsx b/src/components/UI/Button/Button.tsx
@@ -2,12 +2,13 @@ import { FC, HTMLAttributes } from 'react';
 import styles from './Button.module.scss';
 
 export interface IButtonProps extends HTMLAttributes<HTMLButtonElement> {
-  dubleText?: string
+  dubleText?: string,
+  disabled?: boolean
 }
 
-export const Button: FC<IButtonProps> = ({ children, dubleText="", ...rest }) => {
+export const Button: FC<IButtonProps> = ({ children, dubleText="", disabled = false, ...rest }) => {
   return (
-    <button className={styles.main} {...rest}>
+    <button className={styles.main} disabled={disabled} {...rest}>
       <noindex>
         <span className={styles.textHover}>
           <span>{children}</span>