modals.md

Модальные окна

Модальные окна являются контейнерами. Единственная особенность заложена в способе их отображения и закрытия. Делается это не через роутинг, а через redux.

// Открытие окна по названию.
this.props.dispatch(
    modalAction.open("modal-name", props)
).then(result => {
   // после закрытия окна
});

//Закрытие текущего открытого окна
this.props.dispatch(
    modalAction.close(result)
)

Чтобы система знала контейнер модального окна по названию, его нужно реэкспортировать в containers/modals/config.js

Особенности позиционирования модального окна, затемнения фона, оформления - реализуются компонентом разметки. Соответствующую разметку нужно применить в контейнере модального окна.

class ModalInfo extend Component {
    onCancel = () => {
        this.props.dispatch(modalActions.close(false));
    };

    onSuccess = () => {
        this.props.dispatch(modalActions.close(true));
    };

    render() {
        return (
            <LayoutModal onClose={this.onCancel}>
                 Содержимое модального окна
            </LayoutModal>
        );
     }
}

Отображение модальных окон в соответствии со состоянием в redux (store.modals) реализуется в контейнере Modals. Modals используется в корневом контейнере приложения в App вне роутинга.

Чтобы окно открыть по прямой ссылке (например, окно авторизации по ссылке из email) можно использовать search параметр ссылки, при его наличии в App.componentWillMount() открывать соответствующее окно.

Логика управления модальными окнами будет различаться из-за особенностей проекта. Например, в текущей реализации невозможно открыть более одного модального окна одновременно (случай, когда модалка открывается из модалке). Или вообще, когда речь идет об оконной системе со сменой фокуса у окон. И возможны потребности в роутинге в рамках окна.