Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- import React from 'react';
- import Modal from './Modal';
- export interface ModalManagerProps {
- }
- export interface ModalManagerState {
- modals: ModalDescriptor[];
- }
- interface ModalDescriptor {
- id: number;
- url: string;
- }
- class ModalManager extends React.Component<ModalManagerProps, ModalManagerState> {
- private isInitialized = false;
- private readyCallback: () => void = () => {};
- state: ModalManagerState = {
- modals: [], // move to redux state
- };
- componentDidMount() {
- this.isInitialized = true;
- this.readyCallback();
- }
- public navigateTo = (url: string, data: object, type: 'GET' | 'POST') => {
- if (this.count() === 0) {
- // open new modal with given parameters
- } else {
- // change props of the last opened modal
- }
- };
- public navigateInBase = (url: string, data: object, type: 'GET' | 'POST') => {
- this.closeAllModals();
- this.navigateTo(url, data, type);
- };
- public openModal = (url: string, data: object, type: 'GET' | 'POST') => {
- // add parameters to the modals array in state
- // dispatch correct windowManager actions
- };
- public closeModal = (id: number) => {
- // remove modal with this id
- // dispatch correct windowManager actions
- };
- public closeTop = () => this.closeModal(this.state.modals[this.state.modals.length - 1].id);
- public closeAllModals = () => {
- this.state.modals.forEach(({ id }) => {
- this.closeModal(id);
- });
- };
- public count = () => this.state.modals.length;
- public onReady = (callback: () => void) => {
- if (this.isInitialized) {
- callback();
- } else {
- this.readyCallback = callback;
- }
- };
- public onEvent = (eventName: string, eventData?: string) => {
- // use modal middleware for events ???
- };
- handleModalClosed = (id: number) => (eventData: string) => {
- this.closeModal(id);
- };
- render() {
- const { modals } = this.state;
- return modals.map(({ id, url }, i) => (
- <Modal
- url={url}
- isActive={i === this.count() - 1}
- onModalClosed={this.handleModalClosed(id)}
- events={{ 'xhr-end': () => {}, 'navigation-finished': () => {} }}
- />
- ));
- }
- }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement