добавлена форма записи, но инпуты не до конца стилизованы

2022-07-26 13:23:06 +05:00
parent a238cbd514
commit 83a85d66ad
7 changed files with 991 additions and 3 deletions
@@ -0,0 +1,151 @@
+import React, { useState } from "react";
+import './form.css';
+import { useForm, Controller } from 'react-hook-form';
+import { InputProps, styled, TextField, TextFieldProps } from "@mui/material";
+import { PinkButton } from "../button";
+import { StyledOptions } from "@emotion/styled";
+import { MUIStyledCommonProps } from "@mui/system";
+
+type TProps = {
+    // dateInfo: string
+    onSubmit: (data: FormData) => void
+}
+
+type FormData = {
+    phone: string
+    email: string
+    firstName: string
+}
+
+export const Form:React.FC<TProps> = React.memo((props) => {    
+    const {control, handleSubmit} = useForm<FormData>();
+    const [isError, setIsError] = useState(false);
+    let inputPr: InputProps = {
+        
+    }
+    let a: StyledOptions<TextFieldProps> = {
+        
+    }
+    const CustomizedTextField = styled(TextField)`
+        background: #322948;
+        border-radius: 8px;
+        & label {
+            color: #B196AF;
+            font-weight: 500;
+            font-size: 17px;
+            line-height: 21px;
+        }
+        & input {
+            color: #FFFFFF;
+            font-weight: 500;
+            font-size: 17px;
+            line-height: 21px;
+        }
+        & input:hover {
+            border: none;
+        }        
+        & label.Mui-focused {
+            color: #B196AF;
+        }
+        & .MuiTextField-root:hover {
+            
+        }
+        .bottom-line-color(red)     
+        & .MuiFilledInput-underline:before {
+            border: none;           
+        }  
+        & .MuiFilledInput-underline:before-focused {
+            border-bottom-color: red;
+        }
+        & .MuiOutlinedInput-root {
+            & fieldset {
+                border-color: red;
+                color: red;
+            }
+            &.Mui-focused fieldset {
+                border-color: white;
+            }
+        }
+
+    `;
+
+    function onSubmit(data: FormData) { 
+        if(!(data.email && data.firstName && data.phone)) {
+            setIsError(true);
+            return
+        }
+        console.log(data)
+        props.onSubmit(data)
+    }
+
+    return <div className="request-form-container">
+        {/* <span className="request-form-date">
+            {props.dateInfo}
+        </span>      */}
+        <form className="request-form" onSubmit={handleSubmit(onSubmit)}>
+            <Controller
+                name="phone"
+                control={control}
+                defaultValue=''                
+                render={({ field }) => 
+                    <CustomizedTextField 
+                        {...field}
+                        // variant={"filled"}
+                        variant={isError && field.value === '' ? 'outlined' : "filled"}
+                        // required
+                        size="medium"
+                        label='Номер телефона'
+                        autoComplete="off"
+                        type={'number'}
+                        error={isError && field.value === ''}
+                        helperText={isError && field.value === '' ? 'Заполните поле' : ''}
+                    />
+                }
+            />
+            <Controller
+                name="email"
+                control={control}
+                defaultValue=''
+                render={({ field }) =>
+                    <CustomizedTextField                        
+                        {...field}
+                        // variant={"filled"}
+                        variant={isError && field.value === '' ? 'outlined' : "filled"}
+                        size="medium"
+                        label='E-mail'
+                        // required
+                        type={"email"}
+                        autoComplete="off"
+                        error={isError && field.value === ''}
+                        helperText={isError && field.value === '' ? 'Заполните поле' : ''}
+                    />                    
+                }
+            />
+            <Controller
+                name="firstName"
+                control={control}
+                defaultValue=''
+                render={({ field }) => 
+                    <CustomizedTextField
+                        {...field} 
+                        // variant={"filled"}
+                        variant={isError && field.value === '' ? 'outlined' : "filled"}
+                        size="medium"
+                        label='Ваше имя'
+                        // required
+                        type={'text'}
+                        autoComplete="off"
+                        error={isError && field.value === ''}
+                        helperText={isError && field.value === '' ? 'Заполните поле' : ''}
+                    />
+                }
+            />
+            {/* <input className="request-form-submit-button" type="submit" value={'Записаться на просмотр'}/> */}
+            <PinkButton 
+                type="submit" 
+                textButton={'Записаться на просмотр'}
+                width='100%'
+            />
+        </form>
+    </div>
+})