From 490b84563c142eaff0fba048e10d33ba07ce6cdd Mon Sep 17 00:00:00 2001 From: DmitriyB Date: Wed, 27 Jul 2022 13:13:57 +0500 Subject: [PATCH] =?UTF-8?q?=D0=B7=D0=B0=D0=BA=D0=BE=D0=BD=D1=87=D0=B5?= =?UTF-8?q?=D0=BD=D0=B0=20=D0=BB=D0=BE=D0=BA=D0=B0=D0=BB=D0=B8=D0=B7=D0=B0?= =?UTF-8?q?=D1=86=D0=B8=D1=8F,=20=D0=B8=D0=B7=D0=BC=D0=B5=D0=BD=D0=B5?= =?UTF-8?q?=D0=BD=D1=8B=20=D0=B8=D0=BD=D0=BF=D1=83=D1=82=D1=8B=20=D1=84?= =?UTF-8?q?=D0=BE=D1=80=D0=BC=D1=8B=20=D0=BF=D0=BE=D0=B4=20=D0=BC=D0=B0?= =?UTF-8?q?=D0=BA=D0=B5=D1=82?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/langDict.tsx | 14 +- src/components/mainPart/calendar/calendar.tsx | 11 +- src/components/mainPart/form/form.tsx | 95 +++++-------- src/components/mainPart/mainPart.css | 8 ++ src/components/mainPart/mainPart.tsx | 10 +- .../mainPart/planContentContainer.tsx | 7 +- .../mainPart/timeSelector/timeSelector.tsx | 130 +++++++++--------- 7 files changed, 148 insertions(+), 127 deletions(-) diff --git a/src/components/langDict.tsx b/src/components/langDict.tsx index 8e1e55e..28d9db8 100644 --- a/src/components/langDict.tsx +++ b/src/components/langDict.tsx @@ -29,7 +29,7 @@ export const LangDict = { }, startDemoDescriptionEnroll: { ru: 'Запланируйте демонстрацию с сотрудником отдела продаж', - en: 'schedule a demonstration with manager' + en: 'Schedule a demonstration with manager' }, enrollNewDemoButton: { ru: 'Запланировать демонстрацию', @@ -79,6 +79,18 @@ export const LangDict = { ru: 'Оформление', en: 'Checkout' }, + formName: { + ru: 'Ваше имя', + en: 'Name' + }, + formPhone: { + ru: 'Номер телефона', + en: 'Phone' + }, + formEmptyError: { + ru: 'Заполните поле', + en: 'Fill in the field' + }, checkoutButton: { ru: 'Запланировать', en: 'Schedule' diff --git a/src/components/mainPart/calendar/calendar.tsx b/src/components/mainPart/calendar/calendar.tsx index d73e70a..70f81df 100644 --- a/src/components/mainPart/calendar/calendar.tsx +++ b/src/components/mainPart/calendar/calendar.tsx @@ -4,7 +4,7 @@ import { ContextLang } from "../../ContextLang"; import './calendar.css'; type TProps = { - onCLick: (date: string) => void + onCLick: (date: {ru: string, en: string}) => void } export const CalendarComponent:React.FC = React.memo((props) => { @@ -71,6 +71,13 @@ export const CalendarComponent:React.FC = React.memo((props) => { // return props.disableDays.includes(a.date.getDate()) // }} minDate={new Date()} - onClickDay={(e) => props.onCLick(`${e.getDate()} ${months[e.getMonth() as keyof typeof months][lang]}`)} + onClickDay={(e) => { + let dateObj = { + ru: `${e.getDate()} ${months[e.getMonth() as keyof typeof months].ru}`, + en: `${months[e.getMonth() as keyof typeof months].en} ${e.getDate()}` + } + props.onCLick(dateObj); + } + } /> }) \ No newline at end of file diff --git a/src/components/mainPart/form/form.tsx b/src/components/mainPart/form/form.tsx index 7aa8667..e457fae 100644 --- a/src/components/mainPart/form/form.tsx +++ b/src/components/mainPart/form/form.tsx @@ -1,10 +1,10 @@ -import React, { useState } from "react"; +import React, { useContext, useState } from "react"; import './form.css'; import { useForm, Controller } from 'react-hook-form'; -import { InputProps, styled, TextField, TextFieldProps } from "@mui/material"; +import { styled, TextField} from "@mui/material"; import { PinkButton } from "../pinkButton"; -import { StyledOptions } from "@emotion/styled"; -import { MUIStyledCommonProps } from "@mui/system"; +import { ContextLang } from "../../ContextLang"; +import { LangDict } from "../../langDict"; type TProps = { dateInfo: string @@ -17,7 +17,8 @@ type FormData = { firstName: string } -export const Form:React.FC = React.memo((props) => { +export const Form:React.FC = React.memo((props) => { + const {lang} = useContext(ContextLang); const {control, handleSubmit} = useForm(); const [isError, setIsError] = useState(false); @@ -35,33 +36,10 @@ export const Form:React.FC = React.memo((props) => { 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) { @@ -78,6 +56,26 @@ export const Form:React.FC = React.memo((props) => { {props.dateInfo} */}
+ + + } + /> = React.memo((props) => { render={({ field }) => } /> @@ -104,40 +103,22 @@ export const Form:React.FC = React.memo((props) => { render={({ field }) => } - /> - - - } - /> + /> diff --git a/src/components/mainPart/mainPart.css b/src/components/mainPart/mainPart.css index 840806c..d0349db 100644 --- a/src/components/mainPart/mainPart.css +++ b/src/components/mainPart/mainPart.css @@ -380,5 +380,13 @@ font-size: 8px; gap: 4px; } + + .main-part-header-lang { + font-weight: 600; + font-size: 14px; + line-height: 17px; + + } + } \ No newline at end of file diff --git a/src/components/mainPart/mainPart.tsx b/src/components/mainPart/mainPart.tsx index 9bdcd4c..c9ccf10 100644 --- a/src/components/mainPart/mainPart.tsx +++ b/src/components/mainPart/mainPart.tsx @@ -100,7 +100,7 @@ export const MainPart: React.FC = React.memo(() => { } - function onSelectDay(date: string) { + function onSelectDay(date: {ru: string, en: string}) { setPlaneContent( { ); } - function onSelectTime(date: string, time: string) { + function onSelectTime(date: {ru: string, en: string}, time: string) { let dateTime = `${date} ${lang === 'ru' ? 'в' : 'in'} ${time}`; + let dateObj = { + ru: `${date.ru} в ${time}`, + en: `${date.en} in ${time}` + } setPlaneContent( onSubmit(data, date)} diff --git a/src/components/mainPart/planContentContainer.tsx b/src/components/mainPart/planContentContainer.tsx index 900a397..eb12684 100644 --- a/src/components/mainPart/planContentContainer.tsx +++ b/src/components/mainPart/planContentContainer.tsx @@ -7,7 +7,10 @@ type TProps = { ru: string, en: string } - date?: string + date?: { + ru: string, + en: string + } content: JSX.Element isLegend: boolean } @@ -18,7 +21,7 @@ export const PlanContentContainer:React.FC = React.memo((props) => { {props.title[lang]} { props.date - ? {props.date} + ? {props.date[lang]} : null }
diff --git a/src/components/mainPart/timeSelector/timeSelector.tsx b/src/components/mainPart/timeSelector/timeSelector.tsx index 6e98edf..4ce4e26 100644 --- a/src/components/mainPart/timeSelector/timeSelector.tsx +++ b/src/components/mainPart/timeSelector/timeSelector.tsx @@ -3,8 +3,14 @@ import { RowTime } from "./rowTime"; import './timeSelector.css'; type TProps = { - date: string - onClickTime: (date: string, time: string) => void + date: { + ru: string, + en: string + } + onClickTime: (date: { + ru: string, + en: string + }, time: string) => void } export const TimeSelector:React.FC = React.memo((props) => { @@ -15,66 +21,66 @@ export const TimeSelector:React.FC = React.memo((props) => { return
{/* {props.date} */}
- onClickTime(time)} - /> - onClickTime(time)} - /> - onClickTime(time)} - /> - onClickTime(time)} - /> - onClickTime(time)} - /> - onClickTime(time)} - /> + onClickTime(time)} + /> + onClickTime(time)} + /> + onClickTime(time)} + /> + onClickTime(time)} + /> + onClickTime(time)} + /> + onClickTime(time)} + />
}) \ No newline at end of file