jitsi_app_c0/react/features/base/modal/components/JitsiModal.js

// @flow

import React, { PureComponent } from 'react';
import { SafeAreaView, View } from 'react-native';

import { ColorSchemeRegistry } from '../../color-scheme';
import { HeaderWithNavigation, SlidingView } from '../../react';
import { connect } from '../../redux';
import { StyleType } from '../../styles';

import { setActiveModalId } from '../actions';

import styles from './styles';

type Props = {

    /**
     * The color schemed style of the common header component.
     */
    _headerStyles: StyleType,

    /**
     * True if the modal should be shown, false otherwise.
     */
    _show: boolean,

    /**
     * The color schemed style of the modal.
     */
    _styles: StyleType,

    /**
     * The children component(s) of the Modal, to be rendered.
     */
    children: React$Node,

    /**
     * The Redux Dispatch function.
     */
    dispatch: Function,

    /**
     * The i18n label key of the header title.
     */
    headerLabelKey: string,

    /**
     * The ID of the modal that is being rendered. This is used to show/hide the modal.
     */
    modalId: string,

    /**
     * Callback to be invoked when the modal closes.
     */
    onClose?: Function,

    /**
     * The position from where the modal should be opened. This is derived from the
     * props of the {@code SlidingView} with the same name.
     */
    position?: string
};

/**
 * Implements a custom Jitsi Modal that doesn't use the built in native
 * Modal component of React Native.
 */
class JitsiModal extends PureComponent<Props> {
    static defaultProps = {
        position: 'bottom'
    };

    /**
     * Instantiates a new component.
     *
     * @inheritdoc
     */
    constructor(props: Props) {
        super(props);

        this._onRequestClose = this._onRequestClose.bind(this);
    }

    /**
     * Implements {@code PureComponent#render}.
     *
     * @inheritdoc
     */
    render() {
        const { _headerStyles, _show, _styles, children, headerLabelKey, position } = this.props;

        return (
            <SlidingView
                onHide = { this._onRequestClose }
                position = { position }
                show = { _show }>
                <View
                    style = { [
                        _headerStyles.page,
                        _styles.page
                    ] }>
                    <HeaderWithNavigation
                        headerLabelKey = { headerLabelKey }
                        onPressBack = { this._onRequestClose } />
                    <SafeAreaView style = { styles.safeArea }>
                        { children }
                    </SafeAreaView>
                </View>
            </SlidingView>
        );
    }

    _onRequestClose: () => boolean;

    /**
     * Callback to be invoked when the SlidingView requests closing.
     *
     * @returns {boolean}
     */
    _onRequestClose() {
        const { _show, dispatch, onClose } = this.props;

        if (_show) {
            if (typeof onClose === 'function') {
                onClose();
            }
            dispatch(setActiveModalId());

            return true;
        }

        return false;
    }
}

/**
 * Maps part of the Redix state to the props of this component.
 *
 * @param {Object} state - The Redux state.
 * @param {Props} ownProps - The own props of the component.
 * @returns {Props}
 */
function _mapStateToProps(state, ownProps): $Shape<Props> {
    return {
        _headerStyles: ColorSchemeRegistry.get(state, 'Header'),
        _show: state['features/base/modal'].activeModalId === ownProps.modalId,
        _styles: ColorSchemeRegistry.get(state, 'Modal')
    };
}

export default connect(_mapStateToProps)(JitsiModal);