Как мы решили проблемы с z-index + ВИКТОРИНА! 

Рады быть полезными) спасибо за напутствие)

В Амстердам)

Только наоборот, z-index дочернего элемента не может быть больше родительского, если у родительского z-index: 1, то дочернему хоть 1000 можно задать толку от этого не будет

С порталом тут было сразу 2 примера)) с overflow: hidden и с z-index)

Ещё можно внутрь айфрейма его юзать)

да, мне так же понравилось это решение, что не надо возиться с этими цифрами) а по поводу анимации, там проблемы большой нет, там надо хук написать, который будет сначала закрывать попап, а потом вымаунчивать портал

@@it-sin9k "вымаунчивать"). you made my day, возьму на вооружение

да) вся его прелесть в простоте подхода)

настоящая тру стори)) иногда приходится делать страшные решения) главное, что переписали очень быстро)

ага) я когда UiKit компоненты проекта делаю, очень много смотрю на тот как сделано в material-ui) И порталы использовал по их примеру) а вот на одинаковый z-index 1300 у всех компонентов (Dialog, Popover, Drawer), я как то не обращал внимание, вот коллега и подсказал)

спасибо!) делает другой человек) насколько я помню в after effects

@@it-sin9k Все верно, анимации делаю в After Effects

@@set1k899 очень толково выходит, сам когда то в after effects делал шейповые антмации и разные приколы в связке с cinema 4d. Вообщем у вас классная команда и уникальный контент)). Представляю сколько трудов уходит даже на короткий ролик. Дерзайте, желаю побольше подписчиков, крутых проектов и жирных рейтов)

@@379sanek Спасибо! Будем стараться и улучшать контент👍

А что под собой подразумевает isolated? В реакте можно запилить изменения попапа при изменении url

Добавлять модалку под текущую модалку на будущее, тоже звучит не то чтобы хорошо) обычно прилетевшие модалки все равно летят на перед экрана. Ну и в таком случае есть решение, не обязательно добавлять в DOM дерево последним элементом, можно добавить предпоследним. Либо не отображать новую модалку, пока пользователь не закончит с текущей модалкой

Честно говоря, я сходу хорошего решения не выдам. У меня. не такой богатый опыт в юнит тестировании компонентов

Достаточно сложно ответить на этот вопрос коротко в комментариях. У меня целая философия по работе с попапами. Я их делю на разные категории и управляю ими по разному. Я начинал делиться какой-то базой в рамках плейлиста react-router-tricks. Думаю еще буду развивать тему попапов в разных плейлистах, как минимум в UiKit еще хотел одно видео про попапы записать

рады слышать) у нас уже много чего накопилось посмотреть)

На словах достаточно сложно понять, в чем именно у вас проблема. Если вы уделите время и зальете код на codesandbox или github и покажете результат на gh-pages. Я постараюсь вам помочь :)

@@it-sin9k Третья попытка отправить комментарий

​@@it-sin9k думаю есть какая-то блокировка на добавление ссылок на codesandbox драфт с id laughing-fog-tykin

ага, мерси. Я посмотрел код, первый комментарий, это то что мы используем ClickOutside только для Popover, а не для Popup. А чтобы заработал код в sandbox, я изменил на а так же вот код самого ClickOutside: paste.ubuntu.com/p/4GnqjZwJcF/

@@it-sin9k большое спасибо! Я даже разобрался почему не работало раньше (current тоже переносил), проблема была, что работало 2 ClickOutside одновременно, потому, что Popup открывается с Popover. Отдельное спасибо за пример компонента ClickOutside, понравилась реализация 👍 Удачи в продвижении канала!

да, со скролом есть косяк. И кстати впервые я его обнаржил буквально недавно. Обычно мы делали стратегию на скрол скрывать все или в некоторых ситуациях дизейблили скрол. Поэтому даже не знал о такой проблеме :(

в моей голове выбор стоял следующий. На каждый рендер создавать div или создавать функцию и прокидывать это в useState. Я решил, что функция будет дешевле и пробросил функцию

@@it-sin9k мне кажется решение с useRef(domNode) было бы понятнее. По поводу "функция будет дешевле" - непонятно в чем заключается "дешевизна"? "На каждый рендер создавать div или создавать функцию и прокидывать это в useState" - причем тут прокидывание функции на каждый рендер - вы же просто лениво создаете див на каждый рендер)

рассмотрим следующий код: const [element, setElement] = useState(document.createElement('div')); можно его привести к следующему: const div = document.createElement('div'); const [element, setElement] = useState(div); т.е. абсолютно на каждый рендер создается новый div. И я решил не создавать div. С другой стороны в моем коде: const callback = () => document.createElement('div'); const [element, setElement] = useState(callback); В данном примере, мы не создаем div на каждый render, а создаем функцию callback на каждый рендер. В случае useRef, вы точно так же будете создавать div на каждый render, я решил, что это будет более избыточно, хотя цифрами я не могу подтвердить. Просто по внутренним ощущениям решил сделать так

@@it-sin9k мне кажется вопрос был в том, зачем вообще нужен useState? Не дешевле написать просто const container = document.createElement('div') useEffect...... { return ReactDOM.createPortal(children, container) }

а этот код опасен для продакшена. В данном примере если компонент зарендериться, то предыдущий div с тем же попапом удалится и вставится новый div. DOM будет сильнее перерисовываться. А в случае с useState мы всегда работаем с одним и тем же инстансом div и создаем его лишь один раз

а как этот вопрос относиться к этому видео?)

@@it-sin9k извиняюсь , что не в тему , просто решил написать , как тему для обсуждения в видио или в комментарии , так как тут обсуждаются обычно такие тонкости )))

да, без проблем) вообще мысли правильные, мы даже в вебе делали похожий компонент List, в который передавали мемоизированную функцию

Все верно :)

Потому что в useState можно передать функцию, которая вызовется лишь 1 раз. И не будет создавать какой-то мнимый div на каждый ререндер. По крайней мере такая была идея. Хз насколько она окупается на самом деле

Эту проблему я решил путем создания стора для событий. Я создал объект в стиле { ESC: [...], ON_ARROW_DOWN: [...], ON_ARROW_UP: [...] } Логика следующая. Когда монтируется компонент KeyDownListener. В конец массива ESC добавляет callback, и при анмаунте удаляю этот callback. Когда срабатывает addEventListener. Я иду в этот стор и беру последний callback и вызываю его. Описываю и понимаю что надо видео делать отдельное))

@@it-sin9k Элегантное решение! Я вчера все-таки смог прийти к рабочему варианту, который чуть более императивный. Я создал в index.html отдельный див с id="portals" и все порталы складывал туда один за другим, присваивая каждому уникальный id, который принимал в пропсах: const [container] = useState(() => document.createElement('div')) container.id = id //... const portals = document.getElementById('portals')! portals.appendChild(container) Каждый портал также замыкает в себе функцию onClose(). При регистрации нажатия на Escape прослушивателем я смотрел, какой id у последнего дива в portals и вызывал для него функцию onClose(). Примерно так выглядит логика, только тут еще не вынесен в отдельный компонент для лучшей читабельности: const Portal: FC = ({ children, onClose, id }) => { const [container] = useState(() => document.createElement('div')) container.id = id useEffect(() => { const closeOnEscapeKey = (e: KeyboardEvent) => { if (e.key === 'Escape') { const portals = document.getElementById('portals')! if (portals.children) { if (portals.children[portals.children.length - 1]?.id === id) { onClose() } } } } document.body.addEventListener('keydown', closeOnEscapeKey) const portals = document.getElementById('portals')! portals.appendChild(container) return () => { portals.removeChild(container) document.body.removeEventListener('keydown', closeOnEscapeKey) } }, [container, id, onClose]) return ReactDOM.createPortal(children, container) } Работает замечательно, из минусов - каждому порталу нужно присваивать уникальный id.

Отдельный же у меня выглядит так при этом решении: interface KeyboardListenerProps { portals: HTMLElement onClose: () => void id: string children: React.ReactNode } const KeyboardListener: FC = ({ portals, onClose, id, children }) => { useEffect(() => { const closeOnEscapeKey = (e: KeyboardEvent) => { if (e.key === 'Escape') { const portals = document.getElementById('portals')! if ( portals.children && portals.children[portals.children.length - 1]?.id === id ) { onClose() } } } document.body.addEventListener('keydown', closeOnEscapeKey) return () => document.body.removeEventListener('keydown', closeOnEscapeKey) }, [id, portals, onClose]) return {children} } В него я оборачиваю children портала: //... return ReactDOM.createPortal( {children} , container)

+ пока не успел в точности разобраться, с чем это связано, но раньше при открытии нескольких поп-апов и клике на оверлей они закрывались сразу все, при имплементации же вышеописанного решения они стали закрываться последовательно, прямо как при нажатии на Escape. Вот такой приятный сайд-эффект.

@@kr4chinin771 а если внутри попапа надо будет обработать еще один onEsc? У вас в любом случае закроется попап

Сам не использовал, а как научился, то подсел на этот вариант)

Я чаще всего пишу сам мелкий компонентик, иногда реализация немного отличается от проекта к проекту :)

Я тоже задался этим вопросом и нашел интересную реализацию хука, которая выглядит примерно так: export function useClickOutside(ref: HTMLElement, func: () => void) { useEffect(() => { function handleClickOutside(e: any) { if (ref && !ref.contains(e.target)) { func() } } document.addEventListener('mousedown', handleClickOutside) return () => { document.removeEventListener('mousedown', handleClickOutside) } }, [ref, func]) } Остается только импортировать его в компонент (например, в ) и передать в него референс на сам поп-овер и функцию, которая будет его закрывать. Для тех, кому может быть интересно, моя реализация с поп-овера с новым API библиотеки Popper и этим хуком выглядит примерно так: const Popover: FC = ({ isOpen, onClose, referenceElement, children }) => { const [popperElement, setPopperElement] = useState() const { styles, attributes } = usePopper(referenceElement, popperElement, { placement: 'bottom' }) useClickOutside(popperElement, onClose) if (!isOpen) { return null } return ( {children} ) }

Это мышление развилось в давние времена. Когда ты используешь разного рода либы. Например раньше крайне популярен был bootstrap. И если посмотреть стили их компонента попапа или тултипа, вы увидите, как раз такого рода z-index. Суть подхода в том, чтобы не цифру инкрементировать, а нолик добавлять, если хотите показать уровень выше. Таким образом теоретически bootstrap мог оставить вам задел использовать 101 или 102, для того чтобы поместить кастомные компоненты поверх бустраповского)

Обратил внимание Popup Materil UI имеет z-index: 1300;

Мне кажется это повод пойти тв гитхаб и научить этих любителей зет индекса в цссы :-(

да, пример хороший. В таких случаях без мемоизации никуда

Спасибо, что подготовил демку! Круто что не забил) мне кажется основная проблема, в том что наша html структура отличается. У тебя зеленый блок внутри красного, а в моем примере зеленый блок рядом с красным. Думаю, если это поправить, все станет на свои места)

Как я и говорил в видео, порталы мы добавили по другим причинам)

да, не очень приятно vue - 95 angular/core - 238 Особо альтернативы успешной не видно В gzip по приятнее будет размер. Вместо 133к будет 42кб