Да посмотрел ваше решение, до публикации статьи хук который я испльзую назывался useDialogControl, т.к пользуюсь Dialog из Material UI, но т.к статья про модальные окна решил назвать useModalControl)
В моей реализации я при мапинге рядов таблицы вешаю обработчик на каждый клик по каждому ряду
Само модальное окно находится в родительском компоненте, ну или даже если бы оно находилось бы здесь, то мне нужно в таком случае обернуть в модалку каждый ряд таблицы ?
например "id продукта", сама форма уже работает с сервисом для загрузки и сохранения.
Именно так и делаю в основном, т.е при нажатии на строку таблицы я отправляю в стор ключнужного мне модального окна и к примеру productId. Внтури модального окна компонент, который получает этот productId из хука и выполняет нужные действия: запрашивает продукт, формирует дефолтные данные для формы, обрабатывает занчения формы и т.д
В стате, я показал как с этим можно работать на простых примерах, но основную идею думаю донес, как применять решать уже читателям)
модалки отлично реализованы в Material UI, Ant Design, reactstrap и т.д. Когда модалка - это компонент, то это значительно удобнее, чем хуки
Я испльзую Material UI, но удобного способа закрывать и открывать + передавать данные в модальные окна я не нашел и придумал свой, которым поделился.
Статья не о создании модального окна, а об управлении сосотянием модальных окон при помощи хука.
Если будет, что дополнить по существу, то пишите, с удовольствием вникну в ваше предложение, а просто перечислять название UI библиотек не имеет смысла.
И вишенка на торте - это ни разу не модалка а попап.
В статье показал как работаю с открытием и закрытием Модальных окон, конкретно в примере испльзуется Dialog из Material UI, вот выжимка из документации:
A Dialog is a type of modal window that appears in front of app content to provide critical information or ask for a decision.
По функционалу - ....,
Все, что вы описали можно легко реализовать при помощи этого великолепного инструмента, я показал основной функционал.
что её не закроешь пока допустим юзер не тыкнет "да согласен".
Возможно, когда будет больше времени, специально напишу статью, о том как добавить кнопку "да согласен" в модальное окно и повесить на нее обработчик. Не думал, что это вызывает трудность в понимании.
Да посмотрел ваше решение, до публикации статьи хук который я испльзую назывался useDialogControl, т.к пользуюсь Dialog из Material UI, но т.к статья про модальные окна решил назвать useModalControl)
Вот таким образом работает ваш подход в React, благодарю за ваш вариант, тоже можно рассмотреть как подход.
Как применить этот подход к таблице?
В моей реализации я при мапинге рядов таблицы вешаю обработчик на каждый клик по каждому ряду
Само модальное окно находится в родительском компоненте, ну или даже если бы оно находилось бы здесь, то мне нужно в таком случае обернуть в модалку каждый ряд таблицы ?
Именно так и делаю в основном, т.е при нажатии на строку таблицы я отправляю в стор ключ нужного мне модального окна и к примеру productId. Внтури модального окна компонент, который получает этот productId из хука и выполняет нужные действия: запрашивает продукт, формирует дефолтные данные для формы, обрабатывает занчения формы и т.д
В стате, я показал как с этим можно работать на простых примерах, но основную идею думаю донес, как применять решать уже читателям)
Благодарю за внимание!
Спасибо за ваш пример подхода.
Я пишу на React и не знаю такого понятия как слот.
У нас так не принято, но в любом случае при желании можно доработать мое решение и под такую задачу.
Я испльзую Material UI, но удобного способа закрывать и открывать + передавать данные в модальные окна я не нашел и придумал свой, которым поделился.
Статья не о создании модального окна, а об управлении сосотянием модальных окон при помощи хука.
Если будет, что дополнить по существу, то пишите, с удовольствием вникну в ваше предложение, а просто перечислять название UI библиотек не имеет смысла.
Спасибо, что поделились своим подходом.
А как вы передаете данные в вашем подходе?
Например из таблицы, как в моем примере?
В модалку можно всунуть что угодно, вот очередная форма в модальном окне в моей работе
В нашей команде это плохой подход - модалка в модалке, но в любом случае статья показывает подход, если не подходит под ваши задачи, то жаль конечно
Если поделитесь своим решением этой проблемы, буду признателен, желательно так же подробно как я в статье
В статье показал как работаю с открытием и закрытием Модальных окон, конкретно в примере испльзуется Dialog из Material UI, вот выжимка из документации:
A Dialog is a type of modal window that appears in front of app content to provide critical information or ask for a decision.
Все, что вы описали можно легко реализовать при помощи этого великолепного инструмента, я показал основной функционал.
Возможно, когда будет больше времени, специально напишу статью, о том как добавить кнопку "да согласен" в модальное окно и повесить на нее обработчик. Не думал, что это вызывает трудность в понимании.