Commit ace58ed3 authored by egorkqq's avatar egorkqq
Browse files

feat: application

parent 24928d36
REACT_APP_HORIZONTAL_IMAGE_PATH= https://static.aviapark.com/files/155333/960x576_1.png
REACT_APP_VERTICAL_IMAGE_PATH= https://static.aviapark.com/files/155333/nc_ss19_620x960px_1.png
REACT_APP_N=3
\ No newline at end of file
......@@ -33,5 +33,8 @@
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"@types/styled-components": "^4.1.19"
}
}
......@@ -8,7 +8,7 @@
<meta name="description" content="Web site created using create-react-app" />
<title>React App</title>
</head>
<body>
<body style="margin: 0">
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
</body>
......
import React from "react"
import React, { useState } from "react"
import styled, { css, keyframes } from "styled-components"
const N: number = Number(process.env.REACT_APP_N)
const progress = keyframes`
from {
width: 0%;
}
to {
width: 100%;
}
`
const animation = css`
animation: ${N}s ${progress} linear;
`
const Wrapper = styled.main`
position: relative;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
`
const Image = styled.img`
display: block;
width: 100%;
height: 100%;
object-fit: contain;
object-position: center;
`
interface IProgressBarProps {
isWait: boolean
}
const ProgressBar = styled.div<IProgressBarProps>`
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 20px;
background-color: rgba(122, 122, 122, 0.8);
${p => (p.isWait ? animation : null)}
`
const Close = styled.button`
position: absolute;
top: 10px;
right: 10px;
padding: 0;
border: none;
background: none;
cursor: pointer;
width: 20px;
&:before,
&:after {
position: absolute;
content: "";
height: 20px;
width: 2px;
background-color: #333;
}
&:before {
transform: rotate(45deg);
}
&:after {
transform: rotate(-45deg);
}
`
type TOrientation = "vertical" | "horizontal"
function getOrientation(): TOrientation {
return window.innerHeight > window.innerWidth ? "vertical" : "horizontal"
}
const App: React.FC = () => {
return <div className='App'>Test App</div>
const [orientation, setOrientation] = useState<TOrientation>(getOrientation())
const [isWait, setIsWait] = useState<boolean>(true)
React.useEffect(() => {
// Отслеживаем изменение ориентации и обновляем в состоянии.
function observer() {
setOrientation(orientation === "vertical" ? "horizontal" : "vertical")
}
window.addEventListener("orientationchange", observer)
return () => window.removeEventListener("orientationchange", observer)
}, [orientation])
React.useEffect(() => {
// Через 3 секунды после того, как баннер отрисовался, запускаем таймер.
const timeoutId = setTimeout(() => {
setIsWait(false)
}, 3000)
return () => clearTimeout(timeoutId)
}, [])
const image =
orientation === "horizontal"
? process.env.REACT_APP_HORIZONTAL_IMAGE_PATH
: process.env.REACT_APP_VERTICAL_IMAGE_PATH
return (
<Wrapper>
<Image src={image} />
{!isWait && <Close />}
{isWait && <ProgressBar isWait={isWait} />}
</Wrapper>
)
}
export default App
......@@ -1224,6 +1224,14 @@
dependencies:
"@types/react" "*"
"@types/react-native@*":
version "0.60.17"
resolved "https://registry.yarnpkg.com/@types/react-native/-/react-native-0.60.17.tgz#3a4c2f3ebe1942fb267bba9374f0533c0ece261c"
integrity sha512-dvPdLYxrU74bU14GvGV+f1EMjyD6L2iDenEzDfUBWhxn7KKRgkWb289r2EIN+10XqvRP+H7YBgl+AoEHEfkcTA==
dependencies:
"@types/prop-types" "*"
"@types/react" "*"
"@types/react@*", "@types/react@16.9.3":
version "16.9.3"
resolved "https://registry.yarnpkg.com/@types/react/-/react-16.9.3.tgz#6d13251e441a3e67fb60d719d1fc8785b984a2ec"
......@@ -1237,6 +1245,15 @@
resolved "https://registry.yarnpkg.com/@types/stack-utils/-/stack-utils-1.0.1.tgz#0a851d3bd96498fa25c33ab7278ed3bd65f06c3e"
integrity sha512-l42BggppR6zLmpfU6fq9HEa2oGPEI8yrSPL3GITjfRInppYFahObbIQOQK3UGxEnyQpltZLaPe75046NOZQikw==
"@types/styled-components@^4.1.19":
version "4.1.19"
resolved "https://registry.yarnpkg.com/@types/styled-components/-/styled-components-4.1.19.tgz#535b455d7744fda1608c605df82c0800eda61a09"
integrity sha512-nDkoTQ8ItcJiyEvTa24TwsIpIfNKCG+Lq0LvAwApOcjQ8OaeOOCg66YSPHBePHUh6RPt1LA8aEzRlgWhQPFqPg==
dependencies:
"@types/react" "*"
"@types/react-native" "*"
csstype "^2.2.0"
"@types/yargs-parser@*":
version "13.1.0"
resolved "https://registry.yarnpkg.com/@types/yargs-parser/-/yargs-parser-13.1.0.tgz#c563aa192f39350a1d18da36c5a8da382bbd8228"
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment