mattermost-mobile/app/actions/navigation.js

// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
// See LICENSE.txt for license information.

import {Platform} from 'react-native';
import {Navigation} from 'react-native-navigation';

import merge from 'deepmerge';

import {getTheme} from 'mattermost-redux/selectors/entities/preferences';

import EphemeralStore from 'app/store/ephemeral_store';

export function resetToChannel(passProps = {}) {
    return (dispatch, getState) => {
        const theme = getTheme(getState());

        Navigation.setRoot({
            root: {
                stack: {
                    children: [{
                        component: {
                            name: 'Channel',
                            passProps,
                            options: {
                                layout: {
                                    backgroundColor: 'transparent',
                                },
                                statusBar: {
                                    visible: true,
                                },
                                topBar: {
                                    visible: false,
                                    height: 0,
                                    backButton: {
                                        color: theme.sidebarHeaderTextColor,
                                        title: '',
                                    },
                                    background: {
                                        color: theme.sidebarHeaderBg,
                                    },
                                    title: {
                                        color: theme.sidebarHeaderTextColor,
                                    },
                                },
                            },
                        },
                    }],
                },
            },
        });
    };
}

export function resetToSelectServer(allowOtherServers) {
    return (dispatch, getState) => {
        const theme = getTheme(getState());

        Navigation.setRoot({
            root: {
                stack: {
                    children: [{
                        component: {
                            name: 'SelectServer',
                            passProps: {
                                allowOtherServers,
                            },
                            options: {
                                statusBar: {
                                    visible: true,
                                },
                                topBar: {
                                    backButton: {
                                        color: theme.sidebarHeaderTextColor,
                                        title: '',
                                    },
                                    background: {
                                        color: theme.sidebarHeaderBg,
                                    },
                                    visible: false,
                                    height: 0,
                                },
                            },
                        },
                    }],
                },
            },
        });
    };
}

export function resetToTeams(name, title, passProps = {}, options = {}) {
    return (dispatch, getState) => {
        const theme = getTheme(getState());
        const defaultOptions = {
            layout: {
                backgroundColor: theme.centerChannelBg,
            },
            statusBar: {
                visible: true,
            },
            topBar: {
                visible: true,
                title: {
                    color: theme.sidebarHeaderTextColor,
                    text: title,
                },
                backButton: {
                    color: theme.sidebarHeaderTextColor,
                    title: '',
                },
                background: {
                    color: theme.sidebarHeaderBg,
                },
            },
        };

        Navigation.setRoot({
            root: {
                stack: {
                    children: [{
                        component: {
                            name,
                            passProps,
                            options: merge(defaultOptions, options),
                        },
                    }],
                },
            },
        });
    };
}

export function goToScreen(name, title, passProps = {}, options = {}) {
    return (dispatch, getState) => {
        const state = getState();
        const componentId = EphemeralStore.getNavigationTopComponentId();
        const theme = getTheme(state);
        const defaultOptions = {
            layout: {
                backgroundColor: theme.centerChannelBg,
            },
            topBar: {
                animate: true,
                visible: true,
                backButton: {
                    color: theme.sidebarHeaderTextColor,
                    title: '',
                },
                background: {
                    color: theme.sidebarHeaderBg,
                },
                title: {
                    color: theme.sidebarHeaderTextColor,
                    text: title,
                },
            },
        };

        Navigation.push(componentId, {
            component: {
                name,
                passProps,
                options: merge(defaultOptions, options),
            },
        });
    };
}

export function popTopScreen(screenId) {
    return () => {
        if (screenId) {
            Navigation.pop(screenId);
        } else {
            const componentId = EphemeralStore.getNavigationTopComponentId();
            Navigation.pop(componentId);
        }
    };
}

export function popToRoot() {
    return () => {
        const componentId = EphemeralStore.getNavigationTopComponentId();

        Navigation.popToRoot(componentId).catch(() => {
            // RNN returns a promise rejection if there are no screens
            // atop the root screen to pop. We'll do nothing in this
            // case but we will catch the rejection here so that the
            // caller doesn't have to.
        });
    };
}

export function showModal(name, title, passProps = {}, options = {}) {
    return (dispatch, getState) => {
        const theme = getTheme(getState());
        const defaultOptions = {
            layout: {
                backgroundColor: theme.centerChannelBg,
            },
            statusBar: {
                visible: true,
            },
            topBar: {
                animate: true,
                visible: true,
                backButton: {
                    color: theme.sidebarHeaderTextColor,
                    title: '',
                },
                background: {
                    color: theme.sidebarHeaderBg,
                },
                title: {
                    color: theme.sidebarHeaderTextColor,
                    text: title,
                },
                leftButtonColor: theme.sidebarHeaderTextColor,
                rightButtonColor: theme.sidebarHeaderTextColor,
            },
        };

        Navigation.showModal({
            stack: {
                children: [{
                    component: {
                        name,
                        passProps,
                        options: merge(defaultOptions, options),
                    },
                }],
            },
        });
    };
}

export function showModalOverCurrentContext(name, passProps = {}, options = {}) {
    return (dispatch) => {
        const title = '';
        const animationsEnabled = (Platform.OS === 'android').toString();
        const defaultOptions = {
            modalPresentationStyle: 'overCurrentContext',
            layout: {
                backgroundColor: 'transparent',
            },
            topBar: {
                visible: false,
                height: 0,
            },
            animations: {
                showModal: {
                    enabled: animationsEnabled,
                    alpha: {
                        from: 0,
                        to: 1,
                        duration: 250,
                    },
                },
                dismissModal: {
                    enabled: animationsEnabled,
                    alpha: {
                        from: 1,
                        to: 0,
                        duration: 250,
                    },
                },
            },
        };
        const mergeOptions = merge(defaultOptions, options);

        dispatch(showModal(name, title, passProps, mergeOptions));
    };
}

export function showSearchModal(initialValue = '') {
    return (dispatch) => {
        const name = 'Search';
        const title = '';
        const passProps = {initialValue};
        const options = {
            topBar: {
                visible: false,
                height: 0,
            },
        };

        dispatch(showModal(name, title, passProps, options));
    };
}

export function dismissModal(options = {}) {
    return () => {
        const componentId = EphemeralStore.getNavigationTopComponentId();

        Navigation.dismissModal(componentId, options).catch(() => {
            // RNN returns a promise rejection if there is no modal to
            // dismiss. We'll do nothing in this case but we will catch
            // the rejection here so that the caller doesn't have to.
        });
    };
}

export function dismissAllModals(options = {}) {
    return () => {
        Navigation.dismissAllModals(options).catch(() => {
            // RNN returns a promise rejection if there are no modals to
            // dismiss. We'll do nothing in this case but we will catch
            // the rejection here so that the caller doesn't have to.
        });
    };
}

export function peek(name, passProps = {}, options = {}) {
    return () => {
        const componentId = EphemeralStore.getNavigationTopComponentId();
        const defaultOptions = {
            preview: {
                commit: false,
            },
        };

        Navigation.push(componentId, {
            component: {
                name,
                passProps,
                options: merge(defaultOptions, options),
            },
        });
    };
}

export function setButtons(componentId, buttons = {leftButtons: [], rightButtons: []}) {
    return () => {
        Navigation.mergeOptions(componentId, {
            topBar: {
                ...buttons,
            },
        });
    };
}

export function showOverlay(name, passProps, options = {}) {
    return () => {
        const defaultOptions = {
            overlay: {
                interceptTouchOutside: false,
            },
        };

        Navigation.showOverlay({
            component: {
                name,
                passProps,
                options: merge(defaultOptions, options),
            },
        });
    };
}

export function dismissOverlay(componentId) {
    return () => {
        return Navigation.dismissOverlay(componentId).catch(() => {
            // RNN returns a promise rejection if there is no modal with
            // this componentId to dismiss. We'll do nothing in this case
            // but we will catch the rejection here so that the caller
            // doesn't have to.
        });
    };
}

export function applyTheme(componentId, skipBackButtonStyle = false) {
    return (dispatch, getState) => {
        const theme = getTheme(getState());

        let backButton = {
            color: theme.sidebarHeaderTextColor,
        };

        if (skipBackButtonStyle && Platform.OS === 'android') {
            backButton = null;
        }

        Navigation.mergeOptions(componentId, {
            topBar: {
                backButton,
                background: {
                    color: theme.sidebarHeaderBg,
                },
                title: {
                    color: theme.sidebarHeaderTextColor,
                },
            },
        });
    };
}