Какая лучшая практика для модальных окон?

Question

[historydev]

Немного вводных:

• Любая модалка может быть показана на любой странице
  
• Любая модалка может быть вызвана любым компонентом
  

Я посчитал что вставлять модалки на каждую страницу и добавлять состояние для её показа - это говно.
И я не уверен что пришёл к лучшему решению, но уверен что это намного лучше, чем описанное выше.

Погуглив, решил обернуть весь роутер в провайдер, в котором все модальные окна и показывать нужный через прослушивание глобального состояния.
В качестве менеджера выбрал атомарный "Джотай":

export const ModalProvider = (props?: IProps) => {
    const [modal, setModal] = useAtom(derivedModalAtom);
    const {type, isShown} = modal;

    const isInterlocutorFoundShown = type === 'InterlocutorFound' && isShown;
    const isSearchChatShown = type === 'SearchChat' && isShown;
    const isQuitChatShown = type === 'QuitChat' && isShown;
    const isEndChatShown = type === 'EndChat' && isShown;

    return (
        <ModalContext.Provider value={modal}>
            {props?.children}
            {isInterlocutorFoundShown && (<InterlocutorFoundModal/>)}
            {isSearchChatShown && (<SearchChatModal/>)}
            {isQuitChatShown && (<QuitChatModal/>)}
            {isEndChatShown && (<EndChatModal/>)}
        </ModalContext.Provider>
    );
};

Вызов:

const SomeComponent = (props: IProps) => {
    const [modal, setModal] = useAtom(derivedModalAtom);
    const onPress = () => setModal({
        type: 'InterlocutorFound',
        isShown: true,
    });
    
    return <Button onPress={onPress}></Button>
}

Comments

[Kentavr16]

Собственно судя по популярным решениям, есть ваш вариант и что-то вроде решения ант-дизайна, где в нужный компонент добавляется контекст и в него рендерится заготовка модалки. Вроде ваш код рабочий, по производительности не бьёт - в чем проблема-то?)

[historydev]

Kentavr16,
Масштабирование как минимум, больше модалок - больше условий.
Я бы смотрел в сторону динамического импорта из папки Modal например.

Скину новый вопрос, если не нагуглю, примерно как текстовые ключи в объекте, только с компонентами.

Условно у тебя есть массив имён компонентов, пробегаешься по нему и пытаешься вытянуть компонент по имени файла из папки Modal, а потом как-то его вызвать нужно. - не знаю возможно ли такое

И с таким подходом, сколько бы я новых модалок не добавил, всё что от меня требуется - обновить массив имён или пробежаться по папке с модалками.

[Kentavr16]

historydev, Вот один из вариантов :

export const ModalProvider = (props?: IProps) => {
    const [modal, setModal] = useAtom(derivedModalAtom);
    const { type, isShown } = modal;


    const modalComponents = {
        InterlocutorFound: InterlocutorFoundModal,
        SearchChat: SearchChatModal,
        QuitChat: QuitChatModal,
        EndChat: EndChatModal
    };

    const ModalComponent = modalComponents[type];

    return (
        <ModalContext.Provider value={modal}>
            {props?.children}
            {isShown && ModalComponent && <ModalComponent />}
        </ModalContext.Provider>
    );
};

При желании/большом количестве модалок можно вынести modalComponents в отдельный файл, редактируя который можно расширять список модалок. Или сделать ход конем и инкапсулировать логику рендеринга модалки и константы в отдельном компоненте, который будет возвращать

return (
        <>
            {isShown && ModalComponent && <ModalComponent />}
        </>

Тогда в вашем провайдере останется аккуратные

<КомпонентКоторыйРендерит  isShown={isShown} ModalComponent={ModalComponent} />

Ну или передавать в компонент тип модалки, а внутри него инкапсулировать все константы. В общем как фантазия прикажет.

[historydev]

Kentavr16, Лучше чем есть, но хуже чем должно быть, по факту масштабирование за счёт дописывания так и осталось, а динамический импорт не поддерживается в react-native как я понял.

Поэтому мне придётся использовать решение отсюда: https://stackoverflow.com/questions/60562457/impor...

Чуть позже перепишу и скину вариант, может придёт в голову ещё лучше

[Kentavr16]

historydev, лично я бы не стал изобретать велосипед. т.к. сомневаюсь что типов модалок будет более 10 условно говоря.

[historydev]

Kentavr16,
В этом приложении может быть меньше, в следующем может быть больше, кто знает.
И даже 10 это уже много, 10 строк лишних, 20 в целом будет т.к. тебе их нужно отобразить.

Если есть работающий велосипед - я использую, но пока я такого не нашёл.