init

react/features/base/modal/components/JitsiKeyboardAvoidingView.tsx

@@ -0,0 +1,106 @@
+import { useHeaderHeight } from '@react-navigation/elements';
+import React, { useCallback, useEffect, useState } from 'react';
+import {
+    Keyboard,
+    KeyboardAvoidingView,
+    Platform,
+    StatusBar,
+    ViewStyle
+} from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+
+import { StyleType } from '../../styles/functions.any';
+
+interface IProps {
+
+    /**
+     * Adds bottom padding.
+     */
+    addBottomPadding?: boolean;
+
+    /**
+     * The children component(s) of the Modal, to be rendered.
+     */
+    children: React.ReactNode;
+
+    /**
+     * Additional style to be appended to the KeyboardAvoidingView content container.
+     */
+    contentContainerStyle?: StyleType;
+
+    /**
+     * Disable forced keyboard dismiss?
+     */
+    disableForcedKeyboardDismiss?: boolean;
+
+    /**
+     * Is a text input rendered at the bottom of the screen?
+     */
+    hasBottomTextInput: boolean;
+
+    /**
+     * Is the screen header having an extra height?
+     */
+    hasExtraHeaderHeight?: boolean;
+
+    /**
+     * Additional style to be appended to the KeyboardAvoidingView.
+     */
+    style?: StyleType;
+}
+
+const JitsiKeyboardAvoidingView = (
+        {
+            addBottomPadding = true,
+            children,
+            contentContainerStyle,
+            disableForcedKeyboardDismiss,
+            hasBottomTextInput,
+            hasExtraHeaderHeight,
+            style
+        }: IProps) => {
+    const headerHeight = useHeaderHeight();
+    const insets = useSafeAreaInsets();
+    const [ bottomPadding, setBottomPadding ] = useState(insets.bottom);
+
+    useEffect(() => {
+        // This useEffect is needed because insets are undefined at first for some reason
+        // https://github.com/th3rdwave/react-native-safe-area-context/issues/54
+        setBottomPadding(insets.bottom);
+    }, [ insets.bottom ]);
+
+
+    const extraHeaderHeight
+        = hasExtraHeaderHeight ? headerHeight : 0;
+    const extraBottomPadding
+        = addBottomPadding ? bottomPadding : 0;
+    const noNotchDevicePadding = extraBottomPadding || 10;
+    const iosVerticalOffset
+        = headerHeight + noNotchDevicePadding + extraHeaderHeight;
+    const androidVerticalOffset = hasBottomTextInput
+        ? headerHeight + Number(StatusBar.currentHeight) : headerHeight;
+
+    // Tells the view what to do with taps
+    const shouldSetResponse = useCallback(() => !disableForcedKeyboardDismiss, []);
+    const onRelease = useCallback(() => Keyboard.dismiss(), []);
+
+    return (
+        <KeyboardAvoidingView
+            behavior = { Platform.OS === 'ios' ? 'padding' : 'height' }
+            contentContainerStyle = { contentContainerStyle as ViewStyle }
+            enabled = { true }
+            keyboardVerticalOffset = {
+                Platform.OS === 'ios'
+                    ? iosVerticalOffset
+                    : androidVerticalOffset
+            }
+            onResponderRelease = { onRelease }
+            onStartShouldSetResponder = { shouldSetResponse }
+            style = { style as ViewStyle }>
+            { children }
+        </KeyboardAvoidingView>
+    );
+};
+
+
+export default JitsiKeyboardAvoidingView;

react/features/base/modal/components/JitsiScreen.tsx

@@ -0,0 +1,94 @@
+import React from 'react';
+import { View } from 'react-native';
+import { Edge, SafeAreaView } from 'react-native-safe-area-context';
+
+import { StyleType } from '../../styles/functions.any';
+
+import JitsiKeyboardAvoidingView from './JitsiKeyboardAvoidingView';
+import styles from './styles';
+
+interface IProps {
+
+    /**
+     * Adds bottom padding.
+     */
+    addBottomPadding?: boolean;
+
+    /**
+     * The children component(s) of the Modal, to be rendered.
+     */
+    children: React.ReactNode;
+
+    /**
+     * Additional style to be appended to the KeyboardAvoidingView content container.
+     */
+    contentContainerStyle?: StyleType;
+
+    /**
+     * Disabled forced keyboard dismiss?
+     */
+    disableForcedKeyboardDismiss?: boolean;
+
+    /**
+     * Optional function that renders a footer component, if needed.
+     */
+    footerComponent?: Function;
+
+    /**
+     * Is a text input rendered at the bottom of the screen?
+     */
+    hasBottomTextInput?: boolean;
+
+    /**
+     * Is the screen header having an extra height?
+     */
+    hasExtraHeaderHeight?: boolean;
+
+    /**
+     * Insets for the SafeAreaView.
+     */
+    safeAreaInsets?: Edge[];
+
+    /**
+     * Additional style to be appended to the KeyboardAvoidingView containing the content of the modal.
+     */
+    style?: StyleType;
+}
+
+const JitsiScreen = ({
+    addBottomPadding,
+    contentContainerStyle,
+    children,
+    disableForcedKeyboardDismiss = false,
+    footerComponent,
+    hasBottomTextInput = false,
+    hasExtraHeaderHeight = false,
+    safeAreaInsets = [ 'left', 'right' ],
+    style
+}: IProps) => {
+    const renderContent = () => (
+        <JitsiKeyboardAvoidingView
+            addBottomPadding = { addBottomPadding }
+            contentContainerStyle = { contentContainerStyle }
+            disableForcedKeyboardDismiss = { disableForcedKeyboardDismiss }
+            hasBottomTextInput = { hasBottomTextInput }
+            hasExtraHeaderHeight = { hasExtraHeaderHeight }
+            style = { style }>
+            <SafeAreaView
+                edges = { safeAreaInsets }
+                style = { styles.safeArea }>
+                { children }
+            </SafeAreaView>
+            { footerComponent?.() }
+        </JitsiKeyboardAvoidingView>
+    );
+
+    return (
+        <View style = { styles.jitsiScreenContainer }>
+            { renderContent() }
+        </View>
+    );
+};
+
+
+export default JitsiScreen;

react/features/base/modal/components/functions.native.ts

@@ -0,0 +1,32 @@
+import { IStateful } from '../../app/types';
+import { toState } from '../../redux/functions';
+
+/**
+ *
+ * Returns the client width.
+ *
+ * @param {(Function|Object)} stateful - The (whole) redux state, or redux's
+ * {@code getState} function to be used to retrieve the state
+ * features/base/config.
+ * @returns {number}
+ */
+export function getClientWidth(stateful: IStateful) {
+    const state = toState(stateful)['features/base/responsive-ui'];
+
+    return state.clientWidth;
+}
+
+/**
+ *
+ * Returns the client height.
+ *
+ * @param {(Function|Object)} stateful - The (whole) redux state, or redux's
+ * {@code getState} function to be used to retrieve the state
+ * features/base/config.
+ * @returns {number}
+ */
+export function getClientHeight(stateful: IStateful) {
+    const state = toState(stateful)['features/base/responsive-ui'];
+
+    return state.clientHeight;
+}

react/features/base/modal/components/styles.ts

@@ -0,0 +1,11 @@
+
+export default {
+
+    jitsiScreenContainer: {
+        flex: 1
+    },
+
+    safeArea: {
+        flex: 1
+    }
+};