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: {
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'
src/components/mainPart/calendar/calendar.tsx
+9 -2
View File
@@ -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<TProps> = React.memo((props) => {
@@ -71,6 +71,13 @@ export const CalendarComponent:React.FC<TProps> = 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);
}
}
/>
})
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 { 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<TProps> = React.memo((props) => {
export const Form:React.FC<TProps> = React.memo((props) => {
const {lang} = useContext(ContextLang);
const {control, handleSubmit} = useForm<FormData>();
const [isError, setIsError] = useState(false);
@@ -35,33 +36,10 @@ export const Form:React.FC<TProps> = 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<TProps> = React.memo((props) => {
{props.dateInfo}
</span> */}
<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
name="phone"
control={control}
@@ -85,15 +83,16 @@ export const Form:React.FC<TProps> = React.memo((props) => {
render={({ field }) =>
<CustomizedTextField
{...field}
// variant={"filled"}
variant={isError && field.value === '' ? 'outlined' : "filled"}
InputProps={{disableUnderline: true}}
variant={"filled"}
// variant={isError && field.value === '' ? 'outlined' : "filled"}
// required
size="medium"
label='Номер телефона'
label={LangDict.formPhone[lang]}
autoComplete="off"
type={'number'}
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 }) =>
<CustomizedTextField
{...field}
// variant={"filled"}
variant={isError && field.value === '' ? 'outlined' : "filled"}
InputProps={{disableUnderline: true}}
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 === '' ? 'Заполните поле' : ''}
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
type="submit"
textButton={'Записаться на просмотр'}
textButton={LangDict.checkoutButton[lang]}
width='100%'
/>
</form>
src/components/mainPart/mainPart.css
+8
View File
@@ -380,5 +380,13 @@
font-size: 8px;
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(
<PlanContentContainer
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 dateObj = {
ru: `${date.ru} в ${time}`,
en: `${date.en} in ${time}`
}
setPlaneContent(
<PlanContentContainer
title={LangDict.checkout}
date={dateTime}
date={dateObj}
content={
<Form
onSubmit={(data, date) => onSubmit(data, date)}
src/components/mainPart/planContentContainer.tsx
+5 -2
View File
@@ -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<TProps> = React.memo((props) => {
<span className="plan-content-title">{props.title[lang]}</span>
{
props.date
? <span className="plan-content-date">{props.date}</span>
? <span className="plan-content-date">{props.date[lang]}</span>
: null
}
<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';
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<TProps> = React.memo((props) => {
@@ -15,66 +21,66 @@ export const TimeSelector:React.FC<TProps> = React.memo((props) => {
return <div className="time-selector-container">
{/* <span className="time-selector-date">{props.date}</span> */}
<div className="time-selector-rows">
<RowTime
times={[
{time: '8:00', active: true},
{time: '8:30', active: true},
{time: '9:00', active: false},
{time: '9:30', active: true},
{time: '10:00', active: false},
]}
onClick={(time) => onClickTime(time)}
/>
<RowTime
times={[
{time: '10:30', active: true},
{time: '11:00', active: true},
{time: '11:30', active: false},
{time: '', active: false},
{time: '', active: false}
]}
onClick={(time) => onClickTime(time)}
/>
<RowTime
times={[
{time: '12:00', active: true},
{time: '12:30', active: true},
{time: '13:00', active: false},
{time: '13:30', active: true},
{time: '14:00', active: false},
]}
onClick={(time) => onClickTime(time)}
/>
<RowTime
times={[
{time: '14:30', active: true},
{time: '15:00', active: true},
{time: '15:30', active: false},
{time: '16:00', active: false},
{time: '16:30', active: false},
]}
onClick={(time) => onClickTime(time)}
/>
<RowTime
times={[
{time: '17:00', active: false},
{time: '17:30', active: false},
{time: '', active: false},
{time: '', active: false},
{time: '', active: false},
]}
onClick={(time) => onClickTime(time)}
/>
<RowTime
times={[
{time: '18:00', active: true},
{time: '18:30', active: true},
{time: '19:00', active: false},
{time: '19:30', active: true},
{time: '', active: false},
]}
onClick={(time) => onClickTime(time)}
/>
<RowTime
times={[
{time: '8:00', active: true},
{time: '8:30', active: true},
{time: '9:00', active: false},
{time: '9:30', active: true},
{time: '10:00', active: false},
]}
onClick={(time) => onClickTime(time)}
/>
<RowTime
times={[
{time: '10:30', active: true},
{time: '11:00', active: true},
{time: '11:30', active: false},
{time: '', active: false},
{time: '', active: false}
]}
onClick={(time) => onClickTime(time)}
/>
<RowTime
times={[
{time: '12:00', active: true},
{time: '12:30', active: true},
{time: '13:00', active: false},
{time: '13:30', active: true},
{time: '14:00', active: false},
]}
onClick={(time) => onClickTime(time)}
/>
<RowTime
times={[
{time: '14:30', active: true},
{time: '15:00', active: true},
{time: '15:30', active: false},
{time: '16:00', active: false},
{time: '16:30', active: false},
]}
onClick={(time) => onClickTime(time)}
/>
<RowTime
times={[
{time: '17:00', active: false},
{time: '17:30', active: false},
{time: '', active: false},
{time: '', active: false},
{time: '', active: false},
]}
onClick={(time) => onClickTime(time)}
/>
<RowTime
times={[
{time: '18:00', active: true},
{time: '18:30', active: true},
{time: '19:00', active: false},
{time: '19:30', active: true},
{time: '', active: false},
]}
onClick={(time) => onClickTime(time)}
/>
</div>
</div>
})