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

add transition, add plane container

Browse Source
This commit is contained in:
DmitriyB
2022-07-25 17:35:15 +05:30
parent d4c6e27616
commit 3a53ad9e8c
8 changed files with 172 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files
package-lock.json
Generated
+65 -1
View File
@@ -7,6 +7,7 @@
"": {
"name": "pixelstreamingwebreact",
"version": "0.1.0",
"license": "ISC",
"dependencies": {
"@testing-library/jest-dom": "^5.16.4",
"@testing-library/react": "^13.3.0",
@@ -15,12 +16,15 @@
"@types/node": "^16.11.45",
"@types/react": "^18.0.15",
"@types/react-dom": "^18.0.6",
"@types/react-transition-group": "^4.4.5",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-scripts": "5.0.1",
"react-transition-group": "^4.4.2",
"typescript": "^4.7.4",
"web-vitals": "^2.1.4"
}
},
"devDependencies": {}
},
"node_modules/@ampproject/remapping": {
"version": "2.2.0",
@@ -3785,6 +3789,14 @@
"@types/react": "*"
}
},
"node_modules/@types/react-transition-group": {
"version": "4.4.5",
"resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.5.tgz",
"integrity": "sha512-juKD/eiSM3/xZYzjuzH6ZwpP+/lejltmiS3QEzV/vmb/Q8+HfDmxu+Baga8UEMGBqV88Nbg4l2hY/K2DkyaLLA==",
"dependencies": {
"@types/react": "*"
}
},
"node_modules/@types/resolve": {
"version": "1.17.1",
"resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-1.17.1.tgz",
@@ -6283,6 +6295,15 @@
"utila": "~0.4"
}
},
"node_modules/dom-helpers": {
"version": "5.2.1",
"resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.1.tgz",
"integrity": "sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==",
"dependencies": {
"@babel/runtime": "^7.8.7",
"csstype": "^3.0.2"
}
},
"node_modules/dom-serializer": {
"version": "1.4.1",
"resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-1.4.1.tgz",
@@ -13846,6 +13867,21 @@
}
}
},
"node_modules/react-transition-group": {
"version": "4.4.2",
"resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.2.tgz",
"integrity": "sha512-/RNYfRAMlZwDSr6z4zNKV6xu53/e2BuaBbGhbyYIXTrmgu/bGHzmqOs7mJSJBHy9Ud+ApHx3QjrkKSp1pxvlFg==",
"dependencies": {
"@babel/runtime": "^7.5.5",
"dom-helpers": "^5.0.1",
"loose-envify": "^1.4.0",
"prop-types": "^15.6.2"
},
"peerDependencies": {
"react": ">=16.6.0",
"react-dom": ">=16.6.0"
}
},
"node_modules/read-cache": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
@@ -19167,6 +19203,14 @@
"@types/react": "*"
}
},
"@types/react-transition-group": {
"version": "4.4.5",
"resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.5.tgz",
"integrity": "sha512-juKD/eiSM3/xZYzjuzH6ZwpP+/lejltmiS3QEzV/vmb/Q8+HfDmxu+Baga8UEMGBqV88Nbg4l2hY/K2DkyaLLA==",
"requires": {
"@types/react": "*"
}
},
"@types/resolve": {
"version": "1.17.1",
"resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-1.17.1.tgz",
@@ -20999,6 +21043,15 @@
"utila": "~0.4"
}
},
"dom-helpers": {
"version": "5.2.1",
"resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.1.tgz",
"integrity": "sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==",
"requires": {
"@babel/runtime": "^7.8.7",
"csstype": "^3.0.2"
}
},
"dom-serializer": {
"version": "1.4.1",
"resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-1.4.1.tgz",
@@ -26280,6 +26333,17 @@
"workbox-webpack-plugin": "^6.4.1"
}
},
"react-transition-group": {
"version": "4.4.2",
"resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.2.tgz",
"integrity": "sha512-/RNYfRAMlZwDSr6z4zNKV6xu53/e2BuaBbGhbyYIXTrmgu/bGHzmqOs7mJSJBHy9Ud+ApHx3QjrkKSp1pxvlFg==",
"requires": {
"@babel/runtime": "^7.5.5",
"dom-helpers": "^5.0.1",
"loose-envify": "^1.4.0",
"prop-types": "^15.6.2"
}
},
"read-cache": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
package.json
+11 -1
View File
@@ -10,9 +10,11 @@
"@types/node": "^16.11.45",
"@types/react": "^18.0.15",
"@types/react-dom": "^18.0.6",
"@types/react-transition-group": "^4.4.5",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-scripts": "5.0.1",
"react-transition-group": "^4.4.2",
"typescript": "^4.7.4",
"web-vitals": "^2.1.4"
},
@@ -39,5 +41,13 @@
"last 1 firefox version",
"last 1 safari version"
]
}
},
"description": "This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).",
"main": "index.js",
"repository": {
"type": "git",
"url": "http://localhost:3000/DmitriyB/pixelstreamingwebreact.git"
},
"author": "",
"license": "ISC"
}
src/components/footer/contactsContainer.tsx
+1 -1
View File
@@ -19,7 +19,7 @@ export const ContactContainer:React.FC<TProps> = React.memo((props) => {
}
<div className="contact-data-container">
{props.pairData.map(pair => {
return <div className="contact-data-row">
return <div key={pair.value1} className="contact-data-row">
<div className="contact-data-value-container">
<span className="contact-data-value">{pair.value1}</span>
</div>
src/components/footer/footer.tsx
+1 -1
View File
@@ -20,7 +20,7 @@ export const Footer:React.FC = React.memo(() => {
<ContactContainer
title="Соцсети"
pairData={[
{value1: 'Facebook', value2: 'Instagramm'},
{value1: 'Facebook', value2: 'Instagram'},
{value1: 'YouTube', value2: 'VK'}
]}
/>
src/components/mainPart/main-part-footer.tsx
+9 -2
View File
@@ -2,8 +2,15 @@ import React from "react";
export const MainPartFooter:React.FC = React.memo(() => {
return <div className="main-part-footer-container">
<span className="main-part-footer-text">
Данная технология находится на стадии разработки. Если подключиться к демонстрации не удалось, свяжитесь с нами.
<span className="main-part-footer-text-container">
<div className="main-part-footer-text">
<span className="main-part-footer-text-one">
Данная технология находится на стадии разработки.
</span>
<span className="main-part-footer-text-two">
Если подключиться к демонстрации не удалось, свяжитесь с нами.
</span>
</div>
</span>
<span className="main-part-footer-number">
+7 800 770 00 67 (Россия) / +971 50 983 8902 (ОАЭ)
src/components/mainPart/mainPart.css
+43 -2
View File
@@ -1,4 +1,4 @@
.main-part-container {
.main-part-container {
position: relative;
width: 100%;
height: 100vh;
@@ -22,6 +22,7 @@
}
.main-part-header {
z-index: 1;
box-sizing: border-box;
width: 100%;
display: flex;
@@ -139,8 +140,48 @@
display: flex;
flex-direction: column;
position: relative;
max-width: 600px;
gap: 8px;
}
.main-part-footer-text::before {
.main-part-footer-text-container {
display: flex;
}
.main-part-footer-text-container::before {
content: '*';
}
.main-part-footer-text {
display: flex;
flex-direction: column;
}
.background-container {
z-index: 0;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(30, 22, 48, 0.8);
backdrop-filter: blur(12px);
}
.show-background-enter {
opacity: 0;
}
.show-background-enter-active {
opacity: 1;
transition: .3s;
}
.show-background-exit {
opacity: 1;
}
.show-background-exit-active {
opacity: 0;
transition: .3s;
}
src/components/mainPart/mainPart.tsx
+35 -20
View File
@@ -4,8 +4,12 @@ import { PinkButton } from "./button";
import { MainPartHeader } from "./mainPartHeader";
import { ContentContainer } from "./contentContainer";
import { MainPartFooter } from "./main-part-footer";
import { OrLineContainer } from "./orLineContainer";
import { CSSTransition } from "react-transition-group";
export const MainPart: React.FC = React.memo(() => {
const [showBackground, setShowBackground] = useState<boolean>(false);
const [currentContent, setCurrentContent] = useState<JSX.Element>(
<ContentContainer
titleText="Удаленная демонстрация жилого комплекса"
@@ -16,26 +20,21 @@ export const MainPart: React.FC = React.memo(() => {
);
function onClickStartDemo() {
setCurrentContent(<>
<ContentContainer
titleText="Запустите демонстрацию"
descriptText="Начните новую демонстрацию жилого комплекса"
onClickButton={() => onClickCreateNewDemo()}
textButton='Начать новую демонстрацию'
/>
<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>
<ContentContainer
descriptText="Запланируйте демонстрацию с сотрудником отдела продаж"
onClickButton={() => onClickPlaneDemo()}
textButton='Запланировать демонстрацию'
/>
setCurrentContent(
<>
<ContentContainer
titleText="Запустите демонстрацию"
descriptText="Начните новую демонстрацию жилого комплекса"
onClickButton={() => onClickCreateNewDemo()}
textButton='Начать новую демонстрацию'
/>
<OrLineContainer />
<ContentContainer
descriptText="Запланируйте демонстрацию с сотрудником отдела продаж"
onClickButton={() => onClickPlaneDemo()}
textButton='Запланировать демонстрацию'
/>
</>
)
}
@@ -52,19 +51,35 @@ export const MainPart: React.FC = React.memo(() => {
}
function onClickPlaneDemo() {
enableBackground();
}
function onClickConnect() {
}
function enableBackground() {
setShowBackground(true);
}
function disableBackground() {
setShowBackground(false);
}
return <div className="main-part-container">
<div className="background-image"></div>
<MainPartHeader />
<div className="main-part-content">
{currentContent}
</div>
<CSSTransition
in={showBackground}
timeout={300}
classNames='show-background'
unmountOnExit
>
<div className="background-container"></div>
</CSSTransition>
<MainPartFooter />
</div>
})
src/components/mainPart/orLineContainer.tsx
+7
View File
@@ -0,0 +1,7 @@
import React from "react";
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>;