Модальные окна в React: архитектура управления для сложных интерфейсов

[kedzoo]

Как-то сложно. Я делал как в делфях, класс (хотя теперь говорят антипаттерн) модального окна, метод создания/загрузки и метод закрытия/выгрузки. Ну и метод showmodal. Никаких зависимостей, ну только что див надо указать куда грузить. В наследнике задаешь тайтл, иконку, кнопки с модальными резалтами, и собсна контент. Может немодно но удобно

[undefinet]

Привет, спасибо за комментарий!

Да, на первый взгляд кажется сложно — но в статье я намеренно показал случаи, когда простого show(content) не хватает. В реальных проектах модалки редко сводятся к заголовку и двум кнопкам — внутри таблицы, формы, многошаговые флоу, разные API в зависимости от того, откуда открыли. Передать всё это через один метод можно, но конфиг разрастается, и логика "что показать" начинает течь внутрь модалки. Как раз это я и пытался решить.

[kedzoo]

ИМХО модальные окна - для диалогов. Не в смысле что там две кнопки и вопрос. А в том смысле, что оно предназначено для изменения или передачи информации. Оно отбражает инфу, позволяет ее изменять, валидировать. И отдать результат обратно. А что с этим всем потом делать, это уже реализуется снаружи. Иначе сложность системы будет неконтролируемо расти.

[Teodor_Dre]

Спасибо большое за статью, откликнулось)

У меня в проекте все те кейсы встречаются, которые вы описали. Видов (компонентов) модальных окон - 90 штук, а мест где они вызываются наверное где-то под 200. Проекте правда на vue3

Есть только один вопрос, возможно ламерский, но все же.

Пример из статьи:

const openModal = useCallback(
    (id: number) =>
      open({ name: EOverlayName.EditProduct, data: { productId: id } }),
    [open],
  );

В этом случае, разве реактивность у productId не теряется? А что если пока была открыта модалка, стейт поменялся?

[undefinet]

Приветствую, да все так. Но те данные которые мы передаем, в данном подходе через open() в большинстве случаев не поменяются пока мы работает с модальным окном.
Эти данные нужны единожды при открытии, чтобы понять с какой сущностью мы работаем - в данном случае productId, а он вряд-ли поменяется пока наше окно открыто.

[subzey]

Очевидно: модалку нельзя рендерить в каждой строке.

Можно же возвращать из компонента null пока модалка не открыта и не нужна?

[Seasle]

Пожалуй хуки, которые очевидно будут внутри модалки до null – не бесплатные. Можно попробовать сделать в 2 компонента, сначала обёртку, которая будет возвращать или null или модалку, а внутри модалки уже нужные хуки, запросы и т.п., но до первых анимаций – уже какую-то задержку вводить в обёртке.

[undefinet]

Спасибо за коммент. Если мы будем возвращать null - данный подход не дружит к сожалению с анимациями - а в частности исчезновения, поэтому будут проблемки, если у модального окна присутствует анимация.
Также, хоть мы и вернули бы null, но стейт у компонента остается - это не бесплатно, к сожалению. Поэтому данный подход не сильно спасет ситуацию.