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

добавлена локализация главного экрана, без записи

Browse Source
This commit is contained in:
DmitriyB
2022-07-27 11:46:33 +05:00
parent 0a550593e5
commit 5949851596
9 changed files with 108 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/App.tsx
+7 -3
View File
@@ -1,13 +1,17 @@
import React from 'react';
import React, { useState } from 'react';
import './App.css';
import { ContextLang } from './components/ContextLang';
import { Footer } from './components/footer/footer';
import { MainPart } from './components/mainPart/mainPart';
function App() {
const [currentLang, setCurrentLang] = useState<'ru' | 'en'>('ru');
return (
<div className="App">
<MainPart />
<Footer />
<ContextLang.Provider value={{lang: currentLang, setLang: setCurrentLang}} >
<MainPart />
<Footer />
</ContextLang.Provider>
</div>
);
}
src/components/ContextLang.tsx
+3
View File
@@ -0,0 +1,3 @@
import React from "react";
export const ContextLang = React.createContext<{lang: 'ru' | 'en', setLang: React.Dispatch<React.SetStateAction<"ru" | "en">>}>(null);
src/components/langDict.tsx
+4
View File
@@ -23,6 +23,10 @@ export const LangDict = {
ru: 'Начать новую демонстрацию',
en: 'Start new demonstration'
},
orLine: {
ru: 'или',
en: 'or'
},
startDemoDescriptionEnroll: {
ru: 'Запланируйте демонстрацию с сотрудником отдела продаж',
en: 'schedule a demonstration with manager'
src/components/mainPart/backgroundImagePng.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 13 MiB

src/components/mainPart/contentContainer.tsx
+20 -8
View File
@@ -1,24 +1,36 @@
import React from "react";
import React, { useContext, useEffect } from "react";
import { ContextLang } from "../ContextLang";
import { PinkButton } from "./pinkButton";
type TProps = {
textButton: string
textButton: {
ru: string,
en: string
}
onClickButton: () => void
titleText?: string
descriptText: string
accessCode?: string
titleText?: {
ru: string,
en: string
}
descriptText: {
ru: string,
en: string
}
accessCode?: string,
}
export const ContentContainer:React.FC<TProps> = React.memo((props) => {
let {lang} = useContext(ContextLang);
return <div className="main-part-text-container">
{
props.titleText &&
<span className="main-part-text-title">
{props.titleText}
{props.titleText[lang]}
</span>
}
<span className="main-part-text-descript">
{props.descriptText}
{props.descriptText[lang]}
</span>
{
props.accessCode &&
@@ -26,7 +38,7 @@ export const ContentContainer:React.FC<TProps> = React.memo((props) => {
}
<PinkButton
onClick={props.onClickButton}
textButton={props.textButton}
textButton={props.textButton[lang]}
/>
</div>
})
src/components/mainPart/mainPart.css
+3 -1
View File
@@ -17,7 +17,8 @@
position: absolute;
width: 100%;
height: 100%;
background: url('backgroundImage.svg') 50% 50% no-repeat;
/* background: url('backgroundImage.svg') 50% 50% no-repeat; */
background: url('backgroundImagePng.png') 50% 50% no-repeat;
/* background-size: 100% 100%; */
background-size: cover;
}
@@ -34,6 +35,7 @@
.main-part-header-logo {
width: 53px;
height: 85px;
cursor: pointer;
}
.main-part-header-lang {
src/components/mainPart/mainPart.tsx
+44 -23
View File
@@ -1,4 +1,4 @@
import React, { useEffect, useState } from "react";
import React, { useContext, useEffect, useRef, useState } from "react";
import './mainPart.css';
import { MainPartHeader } from "./mainPartHeader";
import { ContentContainer } from "./contentContainer";
@@ -9,6 +9,8 @@ import { CalendarComponent } from "./calendar/calendar";
import { PlanContentContainer } from "./planContentContainer";
import { TimeSelector } from "./timeSelector/timeSelector";
import { Form } from "./form/form";
import { LangDict } from "../langDict";
import { ContextLang } from "../ContextLang";
type FormData = {
phone: string
@@ -17,48 +19,66 @@ type FormData = {
}
export const MainPart: React.FC = React.memo(() => {
// const [currentLang, setCurrentLang] = useState<'ru' | 'en'>('ru');
const {lang, setLang} = useContext(ContextLang);
const [changeContent, setChangeContent] = useState(0);
const [showBackground, setShowBackground] = useState<boolean>(false);
const [planContent, setPlaneContent] = useState<JSX.Element>();
const defaultCurrentContent =
<ContentContainer
titleText="Удаленная демонстрация жилого комплекса"
descriptText="Основанная на стриминге технология удаленной демонстрации позволяет познакомиться с жилым комплексом, не посещая офис продаж."
onClickButton={() => onClickStartDemo()}
textButton='Начать демонстрацию'
titleText={LangDict.mainTitle}
descriptText={LangDict.mainDescription}
onClickButton={() => onClickStartDemo()}
textButton={LangDict.startDemoButton}
/>
const [currentContent, setCurrentContent] = useState<JSX.Element>(defaultCurrentContent);
const [currentContent, setCurrentContent] = useState<JSX.Element>(defaultCurrentContent);
const lastRender = currentContent;
useEffect(() => {
// setChangeContent(changeContent + 1);
}, [currentContent])
}, [currentContent]);
useEffect(() => {
console.log(lang)
// onClickStartDemo()
setCurrentContent(lastRender)
}, [lang])
function changeLang(lang: 'ru' | 'en') {
setLang(lang);
document.querySelector('html').lang = lang;
}
function onClickStartDemo() {
console.log(lang)
setCurrentContent(
<>
<ContentContainer
titleText="Запустите демонстрацию"
descriptText="Начните новую демонстрацию жилого комплекса"
titleText={LangDict.startDemoTitle}
descriptText={LangDict.startDemoDescriptionStart}
onClickButton={() => onClickCreateNewDemo()}
textButton='Начать новую демонстрацию'
textButton={LangDict.startNewDemoButton}
/>
<OrLineContainer />
<OrLineContainer text={LangDict.orLine}/>
<ContentContainer
descriptText="Запланируйте демонстрацию с сотрудником отдела продаж"
descriptText={LangDict.startDemoDescriptionEnroll}
onClickButton={() => onClickPlaneDemo()}
textButton='Запланировать демонстрацию'
/>
textButton={LangDict.enrollNewDemoButton}
/>
</>
)
}
function onClickCreateNewDemo() {
function onClickCreateNewDemo() {
console.log(lang)
setCurrentContent(
<ContentContainer
titleText="Демонстрация запущена"
descriptText="Код для подключения к демонстрации:"
// titleText="Демонстрация запущена"
titleText={LangDict.demoStartedTitle}
descriptText={LangDict.demoStartedDescription}
onClickButton={() => onClickConnect()}
textButton='Подключиться'
textButton={LangDict.connectToDemoButton}
accessCode="1876"
/>
)
@@ -116,9 +136,9 @@ export const MainPart: React.FC = React.memo(() => {
setPlaneContent(null);
setCurrentContent(
<ContentContainer
titleText="Просмотр запланирован"
descriptText="Дополнительная информация будет отправлена на указанный почтовый адрес или номер телефона."
textButton="На главную"
titleText={LangDict.checkouted}
descriptText={LangDict.checkoutedDescription}
textButton={LangDict.toHomeButton}
onClickButton={() => toMain()}
/>
)
@@ -127,6 +147,7 @@ export const MainPart: React.FC = React.memo(() => {
function toMain() {
setCurrentContent(defaultCurrentContent);
setPlaneContent(null);
disableBackground();
}
@@ -140,7 +161,7 @@ export const MainPart: React.FC = React.memo(() => {
return <div className="main-part-container">
<div className="background-image"></div>
<MainPartHeader />
<MainPartHeader changeLang={(lang) => changeLang(lang)} onClickLogo={toMain}/>
<TransitionGroup>
<CSSTransition
key={changeContent}
@@ -151,7 +172,7 @@ export const MainPart: React.FC = React.memo(() => {
{currentContent}
</div>
</CSSTransition>
</TransitionGroup>
</TransitionGroup>
{
planContent ?
<div className="main-part-plan-content">
src/components/mainPart/mainPartHeader.tsx
+9 -3
View File
@@ -1,15 +1,21 @@
import React, { useState } from "react";
import whiteLogo from './logoWhiteIcon.svg';
export const MainPartHeader:React.FC = React.memo(() => {
type TProps = {
changeLang: (lang: 'ru' | 'en') => void
onClickLogo: () => void
}
export const MainPartHeader:React.FC<TProps> = React.memo((props) => {
const [activeButton, setActiveButton] = useState<string>('ru');
function onClickChangeLang(lang: string) {
function onClickChangeLang(lang: 'ru' | 'en') {
setActiveButton(lang);
props.changeLang(lang);
}
return <div className="main-part-header">
<img className="main-part-header-logo" alt="logo" src={whiteLogo} />
<img className="main-part-header-logo" alt="logo" src={whiteLogo} onClick={() => props.onClickLogo()}/>
<div className="main-part-header-lang">
<span className={`main-part-header-lang-button ${activeButton === 'en' ? 'active' : null}`} onClick={() => onClickChangeLang('en')}>EN</span>
<span className="main-part-header-lang-slash">/</span>
src/components/mainPart/orLineContainer.tsx
+18 -6
View File
@@ -1,7 +1,19 @@
import React from "react";
import React, { useContext } from "react";
import { ContextLang } from "../ContextLang";
export const OrLineContainer:React.FC = () => <div className="main-part-content-or-line-container">
<span className="main-part-content-or-line"></span>
<span className="main-part-content-or-line-text">или</span>
<span className="main-part-content-or-line"></span>
</div>;
type TProps = {
text: {
ru: string,
en: string
}
}
export const OrLineContainer:React.FC<TProps> = (props) => {
const {lang} = useContext(ContextLang);
return <div className="main-part-content-or-line-container">
<span className="main-part-content-or-line"></span>
<span className="main-part-content-or-line-text">{props.text[lang]}</span>
<span className="main-part-content-or-line"></span>
</div>
};