DmitriyB/pixelstreamingwebreact
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

закончена локализация, изменены инпуты формы под макет

Browse Source
This commit is contained in:
DmitriyB
2022-07-27 13:13:57 +05:00
parent a5dc5211c9
commit 490b84563c
7 changed files with 148 additions and 127 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/langDict.tsx
+13 -1
View File
@@ -29,7 +29,7 @@ export const LangDict = {
}, },
startDemoDescriptionEnroll: { startDemoDescriptionEnroll: {
ru: 'Запланируйте демонстрацию с сотрудником отдела продаж', ru: 'Запланируйте демонстрацию с сотрудником отдела продаж',
en: 'schedule a demonstration with manager' en: 'Schedule a demonstration with manager'
}, },
enrollNewDemoButton: { enrollNewDemoButton: {
ru: 'Запланировать демонстрацию', ru: 'Запланировать демонстрацию',
@@ -79,6 +79,18 @@ export const LangDict = {
ru: 'Оформление', ru: 'Оформление',
en: 'Checkout' en: 'Checkout'
}, },
formName: {
ru: 'Ваше имя',
en: 'Name'
},
formPhone: {
ru: 'Номер телефона',
en: 'Phone'
},
formEmptyError: {
ru: 'Заполните поле',
en: 'Fill in the field'
},
checkoutButton: { checkoutButton: {
ru: 'Запланировать', ru: 'Запланировать',
en: 'Schedule' en: 'Schedule'
src/components/mainPart/calendar/calendar.tsx
+9 -2
View File
@@ -4,7 +4,7 @@ import { ContextLang } from "../../ContextLang";
import './calendar.css'; import './calendar.css';
type TProps = { type TProps = {
onCLick: (date: string) => void onCLick: (date: {ru: string, en: string}) => void
} }
export const CalendarComponent:React.FC<TProps> = React.memo((props) => { export const CalendarComponent:React.FC<TProps> = React.memo((props) => {
@@ -71,6 +71,13 @@ export const CalendarComponent:React.FC<TProps> = React.memo((props) => {
// return props.disableDays.includes(a.date.getDate()) // return props.disableDays.includes(a.date.getDate())
// }} // }}
minDate={new Date()} 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);
}
}
/> />
}) })
src/components/mainPart/form/form.tsx
+38 -57
View File
@@ -1,10 +1,10 @@
import React, { useState } from "react"; import React, { useContext, useState } from "react";
import './form.css'; import './form.css';
import { useForm, Controller } from 'react-hook-form'; 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 { PinkButton } from "../pinkButton";
import { StyledOptions } from "@emotion/styled"; import { ContextLang } from "../../ContextLang";
import { MUIStyledCommonProps } from "@mui/system"; import { LangDict } from "../../langDict";
type TProps = { type TProps = {
dateInfo: string dateInfo: string
@@ -17,7 +17,8 @@ type FormData = {
firstName: string firstName: string
} }
export const Form:React.FC<TProps> = React.memo((props) => { export const Form:React.FC<TProps> = React.memo((props) => {
const {lang} = useContext(ContextLang);
const {control, handleSubmit} = useForm<FormData>(); const {control, handleSubmit} = useForm<FormData>();
const [isError, setIsError] = useState(false); const [isError, setIsError] = useState(false);
@@ -35,33 +36,10 @@ export const Form:React.FC<TProps> = React.memo((props) => {
font-weight: 500; font-weight: 500;
font-size: 17px; font-size: 17px;
line-height: 21px; line-height: 21px;
} }
& input:hover {
border: none;
}
& label.Mui-focused { & label.Mui-focused {
color: #B196AF; 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) { function onSubmit(data: FormData) {
@@ -78,6 +56,26 @@ export const Form:React.FC<TProps> = React.memo((props) => {
{props.dateInfo} {props.dateInfo}
</span> */} </span> */}
<form className="request-form" onSubmit={handleSubmit(onSubmit)}> <form className="request-form" onSubmit={handleSubmit(onSubmit)}>
<Controller
name="firstName"
control={control}
defaultValue=''
render={({ field }) =>
<CustomizedTextField
{...field}
InputProps={{disableUnderline: true}}
variant={"filled"}
// variant={isError && field.value === '' ? 'outlined' : "filled"}
size="medium"
label={LangDict.formName[lang]}
// required
type={'text'}
autoComplete="off"
error={isError && field.value === ''}
helperText={isError && field.value === '' ? LangDict.formEmptyError[lang] : ''}
/>
}
/>
<Controller <Controller
name="phone" name="phone"
control={control} control={control}
@@ -85,15 +83,16 @@ export const Form:React.FC<TProps> = React.memo((props) => {
render={({ field }) => render={({ field }) =>
<CustomizedTextField <CustomizedTextField
{...field} {...field}
// variant={"filled"} InputProps={{disableUnderline: true}}
variant={isError && field.value === '' ? 'outlined' : "filled"} variant={"filled"}
// variant={isError && field.value === '' ? 'outlined' : "filled"}
// required // required
size="medium" size="medium"
label='Номер телефона' label={LangDict.formPhone[lang]}
autoComplete="off" autoComplete="off"
type={'number'} type={'number'}
error={isError && field.value === ''} error={isError && field.value === ''}
helperText={isError && field.value === '' ? 'Заполните поле' : ''} helperText={isError && field.value === '' ? LangDict.formEmptyError[lang] : ''}
/> />
} }
/> />
@@ -104,40 +103,22 @@ export const Form:React.FC<TProps> = React.memo((props) => {
render={({ field }) => render={({ field }) =>
<CustomizedTextField <CustomizedTextField
{...field} {...field}
// variant={"filled"} InputProps={{disableUnderline: true}}
variant={isError && field.value === '' ? 'outlined' : "filled"} variant={"filled"}
// variant={isError && field.value === '' ? 'outlined' : "filled"}
size="medium" size="medium"
label='E-mail' label='E-mail'
// required // required
type={"email"} type={"email"}
autoComplete="off" autoComplete="off"
error={isError && field.value === ''} error={isError && field.value === ''}
helperText={isError && field.value === '' ? 'Заполните поле' : ''} helperText={isError && field.value === '' ? LangDict.formEmptyError[lang] : ''}
/> />
} }
/> />
<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 === '' ? 'Заполните поле' : ''}
/>
}
/>
<PinkButton <PinkButton
type="submit" type="submit"
textButton={'Записаться на просмотр'} textButton={LangDict.checkoutButton[lang]}
width='100%' width='100%'
/> />
</form> </form>
src/components/mainPart/mainPart.css
+8
View File
@@ -380,5 +380,13 @@
font-size: 8px; font-size: 8px;
gap: 4px; gap: 4px;
} }
.main-part-header-lang {
font-weight: 600;
font-size: 14px;
line-height: 17px;
}
} }
src/components/mainPart/mainPart.tsx
+7 -3
View File
@@ -100,7 +100,7 @@ export const MainPart: React.FC = React.memo(() => {
} }
function onSelectDay(date: string) { function onSelectDay(date: {ru: string, en: string}) {
setPlaneContent( setPlaneContent(
<PlanContentContainer <PlanContentContainer
title={LangDict.selectTime} title={LangDict.selectTime}
@@ -114,12 +114,16 @@ export const MainPart: React.FC = React.memo(() => {
); );
} }
function onSelectTime(date: string, time: string) { function onSelectTime(date: {ru: string, en: string}, time: string) {
let dateTime = `${date} ${lang === 'ru' ? 'в' : 'in'} ${time}`; let dateTime = `${date} ${lang === 'ru' ? 'в' : 'in'} ${time}`;
let dateObj = {
ru: `${date.ru} в ${time}`,
en: `${date.en} in ${time}`
}
setPlaneContent( setPlaneContent(
<PlanContentContainer <PlanContentContainer
title={LangDict.checkout} title={LangDict.checkout}
date={dateTime} date={dateObj}
content={ content={
<Form <Form
onSubmit={(data, date) => onSubmit(data, date)} onSubmit={(data, date) => onSubmit(data, date)}
src/components/mainPart/planContentContainer.tsx
+5 -2
View File
@@ -7,7 +7,10 @@ type TProps = {
ru: string, ru: string,
en: string en: string
} }
date?: string date?: {
ru: string,
en: string
}
content: JSX.Element content: JSX.Element
isLegend: boolean isLegend: boolean
} }
@@ -18,7 +21,7 @@ export const PlanContentContainer:React.FC<TProps> = React.memo((props) => {
<span className="plan-content-title">{props.title[lang]}</span> <span className="plan-content-title">{props.title[lang]}</span>
{ {
props.date props.date
? <span className="plan-content-date">{props.date}</span> ? <span className="plan-content-date">{props.date[lang]}</span>
: null : null
} }
<div className="plan-content-content"> <div className="plan-content-content">
src/components/mainPart/timeSelector/timeSelector.tsx
+68 -62
View File
@@ -3,8 +3,14 @@ import { RowTime } from "./rowTime";
import './timeSelector.css'; import './timeSelector.css';
type TProps = { type TProps = {
date: string date: {
onClickTime: (date: string, time: string) => void ru: string,
en: string
}
onClickTime: (date: {
ru: string,
en: string
}, time: string) => void
} }
export const TimeSelector:React.FC<TProps> = React.memo((props) => { export const TimeSelector:React.FC<TProps> = React.memo((props) => {
@@ -15,66 +21,66 @@ export const TimeSelector:React.FC<TProps> = React.memo((props) => {
return <div className="time-selector-container"> return <div className="time-selector-container">
{/* <span className="time-selector-date">{props.date}</span> */} {/* <span className="time-selector-date">{props.date}</span> */}
<div className="time-selector-rows"> <div className="time-selector-rows">
<RowTime <RowTime
times={[ times={[
{time: '8:00', active: true}, {time: '8:00', active: true},
{time: '8:30', active: true}, {time: '8:30', active: true},
{time: '9:00', active: false}, {time: '9:00', active: false},
{time: '9:30', active: true}, {time: '9:30', active: true},
{time: '10:00', active: false}, {time: '10:00', active: false},
]} ]}
onClick={(time) => onClickTime(time)} onClick={(time) => onClickTime(time)}
/> />
<RowTime <RowTime
times={[ times={[
{time: '10:30', active: true}, {time: '10:30', active: true},
{time: '11:00', active: true}, {time: '11:00', active: true},
{time: '11:30', active: false}, {time: '11:30', active: false},
{time: '', active: false}, {time: '', active: false},
{time: '', active: false} {time: '', active: false}
]} ]}
onClick={(time) => onClickTime(time)} onClick={(time) => onClickTime(time)}
/> />
<RowTime <RowTime
times={[ times={[
{time: '12:00', active: true}, {time: '12:00', active: true},
{time: '12:30', active: true}, {time: '12:30', active: true},
{time: '13:00', active: false}, {time: '13:00', active: false},
{time: '13:30', active: true}, {time: '13:30', active: true},
{time: '14:00', active: false}, {time: '14:00', active: false},
]} ]}
onClick={(time) => onClickTime(time)} onClick={(time) => onClickTime(time)}
/> />
<RowTime <RowTime
times={[ times={[
{time: '14:30', active: true}, {time: '14:30', active: true},
{time: '15:00', active: true}, {time: '15:00', active: true},
{time: '15:30', active: false}, {time: '15:30', active: false},
{time: '16:00', active: false}, {time: '16:00', active: false},
{time: '16:30', active: false}, {time: '16:30', active: false},
]} ]}
onClick={(time) => onClickTime(time)} onClick={(time) => onClickTime(time)}
/> />
<RowTime <RowTime
times={[ times={[
{time: '17:00', active: false}, {time: '17:00', active: false},
{time: '17:30', active: false}, {time: '17:30', active: false},
{time: '', active: false}, {time: '', active: false},
{time: '', active: false}, {time: '', active: false},
{time: '', active: false}, {time: '', active: false},
]} ]}
onClick={(time) => onClickTime(time)} onClick={(time) => onClickTime(time)}
/> />
<RowTime <RowTime
times={[ times={[
{time: '18:00', active: true}, {time: '18:00', active: true},
{time: '18:30', active: true}, {time: '18:30', active: true},
{time: '19:00', active: false}, {time: '19:00', active: false},
{time: '19:30', active: true}, {time: '19:30', active: true},
{time: '', active: false}, {time: '', active: false},
]} ]}
onClick={(time) => onClickTime(time)} onClick={(time) => onClickTime(time)}
/> />
</div> </div>
</div> </div>
}) })