Compare commits
4 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 vasya
|
9dbb7708c3 | ||
|
vasya
|
e5527cbde0 | ||
|
vasya
|
80fd08561e | ||
|
vasya
|
68977678d9 |
@@ -123,4 +123,11 @@ return [
|
|||||||
'store' => env('APP_MAINTENANCE_STORE', 'database'),
|
'store' => env('APP_MAINTENANCE_STORE', 'database'),
|
||||||
],
|
],
|
||||||
|
|
||||||
|
//Типы всплывающих уведомлений, использующихся на фронте. От типа зависит внешний вид уведомления и некоторые другие параметры. Прописаны в resources/js/components/MagicPopup.tsx
|
||||||
|
'FRONT_notification_types' => [
|
||||||
|
'info',
|
||||||
|
'success',
|
||||||
|
'error',
|
||||||
|
'attention'
|
||||||
|
]
|
||||||
];
|
];
|
||||||
|
|||||||
@@ -0,0 +1,8 @@
|
|||||||
|
#popup-parent-container{
|
||||||
|
padding: 10px;
|
||||||
|
top: 150px;
|
||||||
|
z-index: 901;
|
||||||
|
position: fixed;
|
||||||
|
left: 50%;
|
||||||
|
transform: translate(-50%, -50px);
|
||||||
|
}
|
||||||
@@ -0,0 +1,104 @@
|
|||||||
|
@import url('./../variables.css');
|
||||||
|
@import '@fortawesome/fontawesome-free/css/all.css';
|
||||||
|
|
||||||
|
/* Анимация таймера popup, по истечению которого он скроется */
|
||||||
|
@keyframes popupTimer {
|
||||||
|
from{
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
width: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.magic-popup-container{
|
||||||
|
padding: 5px;
|
||||||
|
margin-bottom: 15px;
|
||||||
|
border-radius: 5px;
|
||||||
|
display: flex;
|
||||||
|
box-shadow: 0px 3px 4px 1px #918787;
|
||||||
|
background: var(--color_graphite_main);
|
||||||
|
width: 500px;
|
||||||
|
transition: 0.3s;
|
||||||
|
opacity: 0;
|
||||||
|
transform: translateY(-10px);
|
||||||
|
|
||||||
|
&.hide{
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.show{
|
||||||
|
opacity: 1;
|
||||||
|
transform: translateY(0px);
|
||||||
|
}
|
||||||
|
|
||||||
|
&.hidePopup{
|
||||||
|
transform: translateY(10px);
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
&>.popup__icon-block{
|
||||||
|
flex-basis: 10%;
|
||||||
|
align-self: center;
|
||||||
|
|
||||||
|
&>i{
|
||||||
|
font-size: 4rem;
|
||||||
|
color: var(--color_purple_main);
|
||||||
|
|
||||||
|
&.fa-circle-check{
|
||||||
|
color: var(--color_emerald_main);
|
||||||
|
}
|
||||||
|
&.fa-circle-xmark{
|
||||||
|
color: var(--color_ruby_main);
|
||||||
|
}
|
||||||
|
&.fa-circle-exclamation{
|
||||||
|
color: orange;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&>.popup__content-block{
|
||||||
|
flex-basis: 90%;
|
||||||
|
border-left: 2px solid white;
|
||||||
|
|
||||||
|
&>.popup__content__text-block{
|
||||||
|
color: white;
|
||||||
|
padding: 5px;
|
||||||
|
text-align: center;
|
||||||
|
font-size: 1.2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
&>.popup__button-block{
|
||||||
|
margin: 10px 0;
|
||||||
|
|
||||||
|
&>button{
|
||||||
|
font-size: 1rem;
|
||||||
|
margin: auto;
|
||||||
|
opacity: 0.5;
|
||||||
|
background: var(--color_purple_main);
|
||||||
|
transition: 0.3s;
|
||||||
|
|
||||||
|
&:hover{
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.popup__timer-block__timer{
|
||||||
|
|
||||||
|
&.popup__timer-block__timer {
|
||||||
|
height: 5px;
|
||||||
|
margin: 0 5px;
|
||||||
|
border-radius: 10px;
|
||||||
|
|
||||||
|
&.timerProgress{
|
||||||
|
background: #63707a;
|
||||||
|
animation: popupTimer;
|
||||||
|
animation-duration: 3s;
|
||||||
|
animation-fill-mode: forwards;
|
||||||
|
animation-timing-function: linear;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -1,173 +0,0 @@
|
|||||||
@import url('./../variables.css');
|
|
||||||
|
|
||||||
#preloader_container {
|
|
||||||
position: fixed;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
background: rgba(0, 0, 0, 0.3);
|
|
||||||
z-index: 900;
|
|
||||||
backdrop-filter: blur(5px);
|
|
||||||
|
|
||||||
&.hide {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
&>#preloader{
|
|
||||||
width: 200px;
|
|
||||||
height: 200px;
|
|
||||||
background: none;
|
|
||||||
position: relative;
|
|
||||||
top: 30%;
|
|
||||||
left: 0;
|
|
||||||
right: 0;
|
|
||||||
margin-left: auto;
|
|
||||||
margin-right: auto;
|
|
||||||
|
|
||||||
&>.circle {
|
|
||||||
position: absolute;
|
|
||||||
border-radius: 50%;
|
|
||||||
box-sizing: border-box;
|
|
||||||
border: 10px solid transparent;
|
|
||||||
}
|
|
||||||
|
|
||||||
&>#circle_one {
|
|
||||||
width: 80%;
|
|
||||||
height: 80%;
|
|
||||||
border-top-width: 10px;
|
|
||||||
left: 5%;
|
|
||||||
top: 5%;
|
|
||||||
animation: roll_one 4.5s;
|
|
||||||
animation-fill-mode: forwards;
|
|
||||||
animation-iteration-count: infinite;
|
|
||||||
animation-timing-function: linear;
|
|
||||||
|
|
||||||
&.preloader-emerald-circle{
|
|
||||||
border-top-color: var(--color_emerald_light);
|
|
||||||
}
|
|
||||||
&.preloader-ruby-circle{
|
|
||||||
border-top-color: var(--color_ruby_main);
|
|
||||||
}
|
|
||||||
&.preloader-graphite-circle{
|
|
||||||
border-top-color: var(--color_graphite_main);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&>#circle_two {
|
|
||||||
width: 70%;
|
|
||||||
height: 70%;
|
|
||||||
left: 10%;
|
|
||||||
top: 10%;
|
|
||||||
border-right-width: 10px;
|
|
||||||
animation: roll_two 2.5s;
|
|
||||||
animation-fill-mode: forwards;
|
|
||||||
animation-iteration-count: infinite;
|
|
||||||
animation-timing-function: linear;
|
|
||||||
|
|
||||||
&.preloader-emerald-circle{
|
|
||||||
border-right-color: var(--color_emerald_light);
|
|
||||||
}
|
|
||||||
&.preloader-ruby-circle{
|
|
||||||
border-right-color: var(--color_ruby_main);
|
|
||||||
}
|
|
||||||
&.preloader-graphite-circle{
|
|
||||||
border-right-color: var(--color_graphite_main);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&>#circle_three {
|
|
||||||
width: 60%;
|
|
||||||
height: 60%;
|
|
||||||
left: 15%;
|
|
||||||
top: 15%;
|
|
||||||
border-bottom-width: 10px;
|
|
||||||
animation: roll_three 3s;
|
|
||||||
animation-fill-mode: forwards;
|
|
||||||
animation-iteration-count: infinite;
|
|
||||||
animation-timing-function: linear;
|
|
||||||
|
|
||||||
&.preloader-emerald-circle{
|
|
||||||
border-bottom-color: var(--color_emerald_light);
|
|
||||||
}
|
|
||||||
&.preloader-ruby-circle{
|
|
||||||
border-bottom-color: var(--color_ruby_main);
|
|
||||||
}
|
|
||||||
&.preloader-graphite-circle{
|
|
||||||
border-bottom-color: var(--color_graphite_main);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
&>#preloader_text {
|
|
||||||
width: 150%;
|
|
||||||
left: -25%;
|
|
||||||
font-size: 1.5rem;
|
|
||||||
position: absolute;
|
|
||||||
bottom: -50px;
|
|
||||||
text-align: center;
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
|
|
||||||
&>#logo {
|
|
||||||
position: absolute;
|
|
||||||
background: none;
|
|
||||||
width: 40%;
|
|
||||||
height: 40%;
|
|
||||||
top: 25%;
|
|
||||||
left: 25%;
|
|
||||||
|
|
||||||
&>.logo_square {
|
|
||||||
position: absolute;
|
|
||||||
box-sizing: border-box;
|
|
||||||
}
|
|
||||||
|
|
||||||
&>#left-top {
|
|
||||||
width: 60%;
|
|
||||||
height: 70%;
|
|
||||||
top: 15%;
|
|
||||||
left: 20%;
|
|
||||||
border-left: 7px solid white;
|
|
||||||
border-top: 7px solid white;
|
|
||||||
border-top-left-radius: 45%;
|
|
||||||
}
|
|
||||||
|
|
||||||
&>#right-bottom {
|
|
||||||
width: 40%;
|
|
||||||
height: 50%;
|
|
||||||
top: 15%;
|
|
||||||
left: 40%;
|
|
||||||
border-right: 7px solid white;
|
|
||||||
border-bottom: 7px solid white;
|
|
||||||
border-bottom-right-radius: 45%;
|
|
||||||
border-bottom-left-radius: 10%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes roll_one {
|
|
||||||
0% {
|
|
||||||
transform: rotate(0deg);
|
|
||||||
}
|
|
||||||
100% {
|
|
||||||
transform: rotate(360deg);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@keyframes roll_two {
|
|
||||||
0% {
|
|
||||||
transform: rotate(0deg);
|
|
||||||
}
|
|
||||||
100% {
|
|
||||||
transform: rotate(-360deg);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@keyframes roll_three {
|
|
||||||
0% {
|
|
||||||
transform: rotate(0deg);
|
|
||||||
}
|
|
||||||
100% {
|
|
||||||
transform: rotate(720deg);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -0,0 +1,108 @@
|
|||||||
|
import React, { useEffect, useState } from "react";
|
||||||
|
import './../../css/components/magicPopup.css';
|
||||||
|
import { Button } from '@SharePoint/rencredit_uikit';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Компонент всплывающего окна
|
||||||
|
*/
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Варианты типов для всплывающих окон: info - стандартный вид, error - произошла ошибка, attention - обратить внимание, success - успешное событие
|
||||||
|
*/
|
||||||
|
type PopupType = 'info' | 'success' | 'error' | 'attention';
|
||||||
|
|
||||||
|
//Интерфейс для передаваемых пропсов объекта всплывающего окна
|
||||||
|
interface MagicPopupProps {
|
||||||
|
key: number,
|
||||||
|
id: number, //Уникальный идентификатор, по котором всплывающее окно будет в том числе размонтироваться
|
||||||
|
message: string, //Текст всплывающего окна
|
||||||
|
renderIndex: number, //Индекс рендеринга компонента. Так как может отрисовываться сразу несколько popup, чтобы корректно их отрисовывать с анимацией с задержкой по времени, нужно передавать индекс компонента в наборе. Передавать "вручную" не нужно, он сам рассчитывается в компоненте MagicPopupContainer
|
||||||
|
type: PopupType, //Тип всплывающего окна, определяющий его внешний вид
|
||||||
|
timeOut?: boolean, //Если передается true, для элемента будет запущен стандартный таймер исчезновения. ВАЖНО! для всплывающих окон типа error таймер не будет активироваться, даже если передается. Пользователь должен гарантированно ознакомиться с сообщением и сам его закрыть
|
||||||
|
onClose?: (id: number) => void //Колбэк для полного размонтирования компонента со страницы
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Компонент всплывающих окон
|
||||||
|
* @param props
|
||||||
|
* @returns
|
||||||
|
*/
|
||||||
|
export default function MagicPopup (props: MagicPopupProps)
|
||||||
|
{
|
||||||
|
//Объект с классами для иконок font-awesome в зависимости от переданного типа всплывающего окна. При изменении, необходимо поменять названия классов в magicPopup.css!
|
||||||
|
const iconNameObj = {
|
||||||
|
info: 'fa-circle-info',
|
||||||
|
success: 'fa-circle-check',
|
||||||
|
error: 'fa-circle-xmark',
|
||||||
|
attention: 'fa-circle-exclamation'
|
||||||
|
}
|
||||||
|
//С помощью деструктуризации указываем значение типа окна по умолчанию
|
||||||
|
const {message, timeOut = true, onClose} = props;
|
||||||
|
//Задержка исчезновения popup
|
||||||
|
const popupDelay = 300;
|
||||||
|
//Итоговая длительность таймера перед закрытием конкретного popup, учитывая его положение в наборе передаваемых попапов
|
||||||
|
const hideTimeOut: number = 3000 + popupDelay;
|
||||||
|
//Стейт для размонтирования попапа
|
||||||
|
const [popupVisible, setPopupVisible] = useState<boolean>(true)
|
||||||
|
//Стейт для плавного сокрытия popup. Класс плавного сокрытия присваивается за пол секунды до полного исчезновения через popupVisible, чтобы сначала плавно сокрыть блок из интерфейса, а затем полностью удалить его из DOM
|
||||||
|
const [popupHideClass, setPopupHideClass] = useState<string>('popup-visible')
|
||||||
|
//Стейт плавного появления popup. Каждый следующий popup в передаваемом наборе должен появляться с небольшой задержкой
|
||||||
|
const [popupShowClass, setPopupFadeinClass] = useState<string>('');
|
||||||
|
//Стейт запуска анимированного таймера исчезновения popup
|
||||||
|
const [popupTimer, setPopupTimer] = useState<string>('');
|
||||||
|
//Функция сокрытия popup. Сначала присваиваем класс, который анимированно скрывает popup, а через небольшую задержку размонтируем компонент
|
||||||
|
function hidePopupBlock (): void
|
||||||
|
{
|
||||||
|
setPopupHideClass('hidePopup');
|
||||||
|
setTimeout ( () => {
|
||||||
|
setPopupVisible(false);
|
||||||
|
}, 300)
|
||||||
|
//Вызываем метод удаления экземпляра компонента из набора. Так как попапы отрисовываются на основе компонента PopupContainer с набором компонентов MagicPopup, то после их размонтирования, их необходимо и удалить из набора в PopupContainer. Без их удаления, при вызове новых попапов, весь набор с уже просмотренными попапами будет снова отрисовываться.
|
||||||
|
onClose && onClose(props.id)
|
||||||
|
};
|
||||||
|
|
||||||
|
//При рендеринге сразу же запускается таймер сокрытия popup, если аргумент timeOut = true и тип окна != error
|
||||||
|
useEffect( () => {
|
||||||
|
if (timeOut && props.type !== 'error') {
|
||||||
|
setTimeout( () => {
|
||||||
|
//Задержка для отображения таймера нужна, так как при вызове рендеринга нескольких окон, каждое последующее появляется с задержкой. Без задержки ниже, таймер будет запускаться для всех popup одновременно и когда появится последний popup, его таймер уже может закончиться
|
||||||
|
setPopupTimer('timerProgress')
|
||||||
|
}, popupDelay)
|
||||||
|
//Через небольшую задержку после сокрытия компонента срабатывает таймер на размонтирование компонента и удаления его из набора
|
||||||
|
setTimeout( () => {
|
||||||
|
hidePopupBlock()
|
||||||
|
}, hideTimeOut)
|
||||||
|
}
|
||||||
|
//Появление popup при рендеринге
|
||||||
|
setTimeout ( () => {
|
||||||
|
setPopupFadeinClass('show')
|
||||||
|
}, popupDelay)
|
||||||
|
}, [])
|
||||||
|
|
||||||
|
return (
|
||||||
|
popupVisible ?
|
||||||
|
// <div onClick = {hidePopupBlock}>Раз</div>
|
||||||
|
<div className = {`magic-popup-container ${popupHideClass} ${popupShowClass}`} >
|
||||||
|
<div className = 'popup__icon-block'>
|
||||||
|
<i className = {`fa-solid ${iconNameObj[props.type]}`}></i>
|
||||||
|
</div>
|
||||||
|
<div className = "popup__content-block">
|
||||||
|
<div className = 'popup__content__text-block'>
|
||||||
|
{message}
|
||||||
|
</div>
|
||||||
|
<div className = "popup__button-block">
|
||||||
|
<Button
|
||||||
|
type = "button"
|
||||||
|
className = "popup__button-block__button"
|
||||||
|
onClick = {hidePopupBlock}
|
||||||
|
text = "OK"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className = "popup__timer-block">
|
||||||
|
<div className = {`popup__timer-block__timer ${popupTimer}`}></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
: null
|
||||||
|
);
|
||||||
|
};
|
||||||
@@ -0,0 +1,45 @@
|
|||||||
|
import React, { useContext, ComponentProps } from "react";
|
||||||
|
import MagicPopup from "./MagicPopup";
|
||||||
|
import './../../css/components/magicPopupContainer.css';
|
||||||
|
import { PopupContext } from "../contexts/PopupContext";
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Компонент контейнера для всплывающих окон, который вызывается на странице и куда передается массив всплывающих окон
|
||||||
|
*/
|
||||||
|
|
||||||
|
//ГАВРИЛОВ. ЛОГИЧНЕЕ ЭКСПОРТИРОВАТЬ ТИП С ПРОПСАМИ КОМПОНЕНТА ИЗ САМОГО КОМПОНЕНТА MAGICPOPUP?
|
||||||
|
/**
|
||||||
|
* Дополнительный экспорт типа MagicPopup из компонента всплывающего окна для возможности его импорта, в свою очередь, из компонента, собирающего страницу, например TaxiPage TaxiPage
|
||||||
|
*/
|
||||||
|
export type MagicPopupType = ComponentProps<typeof MagicPopup>;
|
||||||
|
/**
|
||||||
|
* Метод рендеринга контейнара для всплывающих окон
|
||||||
|
* @param {array} magicPopupArr массив объектов типа MagicPopup с информацией о всплывающем окне: текст, таймер и т.д.
|
||||||
|
* @param {callable} delHiddenPopupFunc колбэк для закрытия конкретного всплывающего окна по его уникальному идентификатору
|
||||||
|
* @returns ReactNode
|
||||||
|
*/
|
||||||
|
export default function MagicPopupContainer ()
|
||||||
|
{
|
||||||
|
const popupArr = useContext(PopupContext);
|
||||||
|
|
||||||
|
return (
|
||||||
|
//Родительский контейнер для всех всплывающих окон
|
||||||
|
<div id = "popup-parent-container">
|
||||||
|
{/* { magicPopupArr.map( (propsObj: MagicPopupType, index: number) => ( */}
|
||||||
|
{ popupArr.popupArrTest.map( (propsObj: MagicPopupType, index: number) => (
|
||||||
|
<MagicPopup
|
||||||
|
//Подробнее описание пропсов компонента смотри в MagicPopup.tsx
|
||||||
|
id = {propsObj.id}
|
||||||
|
key = {propsObj.id}
|
||||||
|
message = {propsObj.message}
|
||||||
|
timeOut = {propsObj.timeOut}
|
||||||
|
type = {propsObj.type}
|
||||||
|
renderIndex = {index}
|
||||||
|
//onClose = {delHiddenPopupFunc}
|
||||||
|
onClose = {popupArr.delPopupTest}
|
||||||
|
/>
|
||||||
|
))
|
||||||
|
}
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
@@ -1,39 +0,0 @@
|
|||||||
import "./../../../css/components/preloader.css";
|
|
||||||
import React from "react";
|
|
||||||
|
|
||||||
export default function Preloader ( props: {visible: boolean, text?: string | null}) {
|
|
||||||
const {text = 'загрузка'} = props;
|
|
||||||
let preloaderColorArray: string[] = ['preloader-ruby-circle', 'preloader-emerald-circle', 'preloader-graphite-circle'],
|
|
||||||
//Код ниже реализует возможность присваивать каждую перезагрузку разные классы с цветом полос
|
|
||||||
//Рандомное число, по которому получим первый класс
|
|
||||||
firstColorIndex: number = Math.floor(Math.random() * 3),
|
|
||||||
firstCircleClass: typeof preloaderColorArray[number] = preloaderColorArray[firstColorIndex],
|
|
||||||
secondCircleClass: typeof preloaderColorArray[number],
|
|
||||||
thirdCircleClass: typeof preloaderColorArray[number];
|
|
||||||
//Удалим уже используемый класс цвета из массива
|
|
||||||
preloaderColorArray.splice(firstColorIndex, 1);
|
|
||||||
//Оставшиеся 2 класса распределеяем в зависимости от проостой проверки четности/нечетности
|
|
||||||
if (Math.floor(Math.random() * 2) % 2 === 0) {
|
|
||||||
secondCircleClass = preloaderColorArray[0];
|
|
||||||
thirdCircleClass = preloaderColorArray[1];
|
|
||||||
} else {
|
|
||||||
secondCircleClass = preloaderColorArray[1];
|
|
||||||
thirdCircleClass = preloaderColorArray[0];
|
|
||||||
}
|
|
||||||
return (
|
|
||||||
props.visible ?
|
|
||||||
<div id='preloader_container'>
|
|
||||||
<div id='preloader'>
|
|
||||||
<div className={'circle ' + firstCircleClass} id='circle_one'></div>
|
|
||||||
<div className={'circle ' + secondCircleClass} id='circle_two'></div>
|
|
||||||
<div className={'circle ' + thirdCircleClass} id='circle_three'></div>
|
|
||||||
<div id='logo'>
|
|
||||||
<div className='logo_square' id='right-bottom'></div>
|
|
||||||
<div className='logo_square' id='left-top'></div>
|
|
||||||
</div>
|
|
||||||
<div id='preloader_text'>{ text }</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
: null
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@@ -0,0 +1,41 @@
|
|||||||
|
import React, { createContext, useState } from "react";
|
||||||
|
import { MagicPopupType } from "../components/MagicPopupContainer";
|
||||||
|
import MagicPopupContainer from "../components/MagicPopupContainer";
|
||||||
|
|
||||||
|
//гаврилов. передай значением по умолчанию null и спроси у ChatGPT (deepseek не справляется) почему при указании null возникает ошибка в аргументе value
|
||||||
|
export const PopupContext = createContext('');
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Контекст для компонента всплывающих окон
|
||||||
|
*/
|
||||||
|
export const PopupProvider = ({ children }) => {
|
||||||
|
const [popupArrTestVar, setPopupArrTestVar] = useState<MagicPopupType[] | []>( [] );
|
||||||
|
|
||||||
|
function addPopupTest (newPopupArrData: MagicPopupType[]) {
|
||||||
|
setPopupArrTestVar(prev => {
|
||||||
|
//Конкатенируем предыдущее состояние набора попапов и новые попапы, присваивая новому попапу параметр id с уникальным рандомным значением
|
||||||
|
return [...prev, ...newPopupArrData].map(popup => popup.id ? popup : {...popup, id: getRandomId()})
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
//Колбэк для удаления попапа из набора
|
||||||
|
function delPopupTest (popupDelKey: number) {
|
||||||
|
setPopupArrTestVar(prev => {
|
||||||
|
return prev.filter(popup => popup.id !== popupDelKey);
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
function getRandomId(): number { return Date.now() - Math.random() };
|
||||||
|
|
||||||
|
const value = {
|
||||||
|
popupArrTest: popupArrTestVar,
|
||||||
|
//ГАВРИЛОВ. переименуй
|
||||||
|
addPopupArrTest: addPopupTest,
|
||||||
|
delPopupArrTest: delPopupTest,
|
||||||
|
};
|
||||||
|
|
||||||
|
return <PopupContext.Provider value={value}>
|
||||||
|
{children}
|
||||||
|
<MagicPopupContainer />
|
||||||
|
</PopupContext.Provider>
|
||||||
|
}
|
||||||
@@ -1,40 +0,0 @@
|
|||||||
import React, { createContext, useState } from "react";
|
|
||||||
import Preloader from "../components/preloader/Preloader";
|
|
||||||
|
|
||||||
interface PreloaderProps{
|
|
||||||
setPreloaderVisible: (preloaderVisible: boolean) => void;
|
|
||||||
setPreloaderText: (preloaderText: string) => void;
|
|
||||||
}
|
|
||||||
|
|
||||||
export const PreloaderContext = createContext<PreloaderProps>({
|
|
||||||
setPreloaderVisible: () => {},
|
|
||||||
setPreloaderText: () => {},
|
|
||||||
});
|
|
||||||
|
|
||||||
export function PreloaderProvider({ children }){
|
|
||||||
const [visible, setVisible] = useState<boolean>(true);
|
|
||||||
const [text, setText] = useState<string>('Страница загружается');
|
|
||||||
|
|
||||||
function setPreloaderVisible(preloaderVisible: boolean){
|
|
||||||
setVisible(preloaderVisible);
|
|
||||||
}
|
|
||||||
|
|
||||||
function setPreloaderText(preloaderText: string){
|
|
||||||
setText(preloaderText);
|
|
||||||
}
|
|
||||||
|
|
||||||
let value = {
|
|
||||||
setPreloaderVisible: setPreloaderVisible,
|
|
||||||
setPreloaderText: setPreloaderText
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<PreloaderContext.Provider value={value}>
|
|
||||||
<Preloader
|
|
||||||
visible={visible}
|
|
||||||
text={text}
|
|
||||||
/>
|
|
||||||
{children}
|
|
||||||
</PreloaderContext.Provider>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
Reference in New Issue
Block a user