feat(base/modal): enable scroll for jitsi screen component

This commit is contained in:
Calin-Teodor 2022-10-06 16:52:45 +03:00 committed by Calinteodor
parent 66769136ed
commit f2b2b02029
2 changed files with 170 additions and 151 deletions

View File

@ -1,7 +1,7 @@
// @flow
import React from 'react';
import { View } from 'react-native';
import { ScrollView, View } from 'react-native';
import { SafeAreaView } from 'react-native-safe-area-context';
import { StyleType } from '../../styles';
@ -47,6 +47,11 @@ type Props = {
*/
safeAreaInsets?: Array,
/**
* Enable scroll for JitsiScreen.
*/
scrollEnabled?: boolean,
/**
* Additional style to be appended to the KeyboardAvoidingView containing the content of the modal.
*/
@ -61,10 +66,10 @@ const JitsiScreen = ({
hasBottomTextInput = false,
disableForcedKeyboardDismiss = false,
safeAreaInsets = [ 'left', 'right' ],
scrollEnabled = false,
style
}: Props) => (
<View
style = { styles.jitsiScreenContainer }>
}: Props) => {
const renderContent = () => (
<JitsiKeyboardAvoidingView
contentContainerStyle = { contentContainerStyle }
disableForcedKeyboardDismiss = { disableForcedKeyboardDismiss }
@ -74,12 +79,28 @@ const JitsiScreen = ({
<SafeAreaView
edges = { safeAreaInsets }
style = { styles.safeArea }>
{children}
{ children }
</SafeAreaView>
{ footerComponent && footerComponent() }
</JitsiKeyboardAvoidingView>
</View>
);
);
if (scrollEnabled) {
return (
<ScrollView
bounces = { false }
style = { styles.jitsiScreenContainer }>
{ renderContent() }
</ScrollView>
);
}
return (
<View style = { styles.jitsiScreenContainer }>
{ renderContent() }
</View>
);
};
export default JitsiScreen;

View File

@ -8,7 +8,6 @@ import {
Alert,
NativeModules,
Platform,
ScrollView,
Text,
View
} from 'react-native';
@ -275,157 +274,156 @@ class SettingsView extends Component<Props, State> {
return (
<JitsiScreen
safeAreaInsets = { [ 'bottom', 'left', 'right' ] }
scrollEnabled = { true }
style = { styles.settingsViewContainer }>
<ScrollView>
<View style = { styles.avatarContainer }>
<Avatar
participantId = { this.props._localParticipantId }
size = { AVATAR_SIZE } />
</View>
<FormSectionAccordion
label = 'settingsView.profileSection'>
<TextInput
autoCorrect = { false }
label = { t('settingsView.displayName') }
mode = 'outlined'
onChangeText = { this._onChangeDisplayName }
placeholder = { t('settingsView.displayNamePlaceholderText') }
placeholderTextColor = { PLACEHOLDER_TEXT_COLOR }
spellCheck = { false }
style = { styles.textInputContainer }
textContentType = { 'name' } // iOS only
theme = { textInputTheme }
value = { displayName } />
<Divider style = { styles.fieldSeparator } />
<TextInput
autoCapitalize = 'none'
autoCorrect = { false }
keyboardType = { 'email-address' }
label = { t('settingsView.email') }
mode = 'outlined'
onChangeText = { this._onChangeEmail }
placeholder = 'email@example.com'
placeholderTextColor = { PLACEHOLDER_TEXT_COLOR }
spellCheck = { false }
style = { styles.textInputContainer }
textContentType = { 'emailAddress' } // iOS only
theme = { textInputTheme }
value = { email } />
</FormSectionAccordion>
<FormSectionAccordion
label = 'settingsView.conferenceSection'>
<TextInput
autoCapitalize = 'none'
autoCorrect = { false }
editable = { this.props._serverURLChangeEnabled }
keyboardType = { 'url' }
label = { t('settingsView.serverURL') }
mode = 'outlined'
onBlur = { this._onBlurServerURL }
onChangeText = { this._onChangeServerURL }
placeholder = { this.props._serverURL }
placeholderTextColor = { PLACEHOLDER_TEXT_COLOR }
spellCheck = { false }
style = { styles.textInputContainer }
textContentType = { 'URL' } // iOS only
theme = { textInputTheme }
value = { serverURL } />
<Divider style = { styles.fieldSeparator } />
<FormRow label = 'settingsView.startCarModeInLowBandwidthMode'>
<Switch
checked = { startCarMode }
// @ts-ignore
onChange = { this._onStartCarmodeInLowBandwidthMode } />
</FormRow>
<Divider style = { styles.fieldSeparator } />
<FormRow
label = 'settingsView.startWithAudioMuted'>
<Switch
checked = { startWithAudioMuted }
// @ts-ignore
onChange = { this._onStartAudioMutedChange } />
</FormRow>
<Divider style = { styles.fieldSeparator } />
<FormRow label = 'settingsView.startWithVideoMuted'>
<Switch
checked = { startWithVideoMuted }
// @ts-ignore
onChange = { this._onStartVideoMutedChange } />
</FormRow>
<Divider style = { styles.fieldSeparator } />
<FormRow label = 'videothumbnail.hideSelfView'>
<Switch
checked = { disableSelfView }
// @ts-ignore
onChange = { this._onDisableSelfView } />
</FormRow>
</FormSectionAccordion>
<FormSectionAccordion
label = 'settingsView.links'>
<Link
style = { styles.sectionLink }
<View style = { styles.avatarContainer }>
<Avatar
participantId = { this.props._localParticipantId }
size = { AVATAR_SIZE } />
</View>
<FormSectionAccordion
label = 'settingsView.profileSection'>
<TextInput
autoCorrect = { false }
label = { t('settingsView.displayName') }
mode = 'outlined'
onChangeText = { this._onChangeDisplayName }
placeholder = { t('settingsView.displayNamePlaceholderText') }
placeholderTextColor = { PLACEHOLDER_TEXT_COLOR }
spellCheck = { false }
style = { styles.textInputContainer }
textContentType = { 'name' } // iOS only
theme = { textInputTheme }
value = { displayName } />
<Divider style = { styles.fieldSeparator } />
<TextInput
autoCapitalize = 'none'
autoCorrect = { false }
keyboardType = { 'email-address' }
label = { t('settingsView.email') }
mode = 'outlined'
onChangeText = { this._onChangeEmail }
placeholder = 'email@example.com'
placeholderTextColor = { PLACEHOLDER_TEXT_COLOR }
spellCheck = { false }
style = { styles.textInputContainer }
textContentType = { 'emailAddress' } // iOS only
theme = { textInputTheme }
value = { email } />
</FormSectionAccordion>
<FormSectionAccordion
label = 'settingsView.conferenceSection'>
<TextInput
autoCapitalize = 'none'
autoCorrect = { false }
editable = { this.props._serverURLChangeEnabled }
keyboardType = { 'url' }
label = { t('settingsView.serverURL') }
mode = 'outlined'
onBlur = { this._onBlurServerURL }
onChangeText = { this._onChangeServerURL }
placeholder = { this.props._serverURL }
placeholderTextColor = { PLACEHOLDER_TEXT_COLOR }
spellCheck = { false }
style = { styles.textInputContainer }
textContentType = { 'URL' } // iOS only
theme = { textInputTheme }
value = { serverURL } />
<Divider style = { styles.fieldSeparator } />
<FormRow label = 'settingsView.startCarModeInLowBandwidthMode'>
<Switch
checked = { startCarMode }
// @ts-ignore
to = {{ screen: screen.settings.links.help }}>
{ t('settingsView.help') }
</Link>
<Divider style = { styles.fieldSeparator } />
<Link
style = { styles.sectionLink }
onChange = { this._onStartCarmodeInLowBandwidthMode } />
</FormRow>
<Divider style = { styles.fieldSeparator } />
<FormRow
label = 'settingsView.startWithAudioMuted'>
<Switch
checked = { startWithAudioMuted }
// @ts-ignore
to = {{ screen: screen.settings.links.terms }}>
{ t('settingsView.terms') }
</Link>
<Divider style = { styles.fieldSeparator } />
<Link
style = { styles.sectionLink }
onChange = { this._onStartAudioMutedChange } />
</FormRow>
<Divider style = { styles.fieldSeparator } />
<FormRow label = 'settingsView.startWithVideoMuted'>
<Switch
checked = { startWithVideoMuted }
// @ts-ignore
to = {{ screen: screen.settings.links.privacy }}>
{ t('settingsView.privacy') }
</Link>
</FormSectionAccordion>
<FormSectionAccordion
label = 'settingsView.buildInfoSection'>
<FormRow
label = 'settingsView.version'>
<Text style = { styles.text }>
{`${AppInfo.version} build ${AppInfo.buildNumber}`}
</Text>
</FormRow>
</FormSectionAccordion>
<FormSectionAccordion
label = 'settingsView.advanced'>
{ Platform.OS === 'android' && (
<>
<FormRow
label = 'settingsView.disableCallIntegration'>
<Switch
checked = { disableCallIntegration }
// @ts-ignore
onChange = { this._onDisableCallIntegration } />
</FormRow>
<Divider style = { styles.fieldSeparator } />
</>
)}
<FormRow
label = 'settingsView.disableP2P'>
<Switch
checked = { disableP2P }
// @ts-ignore
onChange = { this._onDisableP2P } />
</FormRow>
<Divider style = { styles.fieldSeparator } />
{AppInfo.GOOGLE_SERVICES_ENABLED && (
onChange = { this._onStartVideoMutedChange } />
</FormRow>
<Divider style = { styles.fieldSeparator } />
<FormRow label = 'videothumbnail.hideSelfView'>
<Switch
checked = { disableSelfView }
// @ts-ignore
onChange = { this._onDisableSelfView } />
</FormRow>
</FormSectionAccordion>
<FormSectionAccordion
label = 'settingsView.links'>
<Link
style = { styles.sectionLink }
// @ts-ignore
to = {{ screen: screen.settings.links.help }}>
{ t('settingsView.help') }
</Link>
<Divider style = { styles.fieldSeparator } />
<Link
style = { styles.sectionLink }
// @ts-ignore
to = {{ screen: screen.settings.links.terms }}>
{ t('settingsView.terms') }
</Link>
<Divider style = { styles.fieldSeparator } />
<Link
style = { styles.sectionLink }
// @ts-ignore
to = {{ screen: screen.settings.links.privacy }}>
{ t('settingsView.privacy') }
</Link>
</FormSectionAccordion>
<FormSectionAccordion
label = 'settingsView.buildInfoSection'>
<FormRow
label = 'settingsView.version'>
<Text style = { styles.text }>
{`${AppInfo.version} build ${AppInfo.buildNumber}`}
</Text>
</FormRow>
</FormSectionAccordion>
<FormSectionAccordion
label = 'settingsView.advanced'>
{ Platform.OS === 'android' && (
<>
<FormRow
fieldSeparator = { true }
label = 'settingsView.disableCrashReporting'>
label = 'settingsView.disableCallIntegration'>
<Switch
checked = { disableCrashReporting }
checked = { disableCallIntegration }
// @ts-ignore
onChange = { this._onDisableCrashReporting } />
onChange = { this._onDisableCallIntegration } />
</FormRow>
)}
</FormSectionAccordion>
</ScrollView>
<Divider style = { styles.fieldSeparator } />
</>
)}
<FormRow
label = 'settingsView.disableP2P'>
<Switch
checked = { disableP2P }
// @ts-ignore
onChange = { this._onDisableP2P } />
</FormRow>
<Divider style = { styles.fieldSeparator } />
{AppInfo.GOOGLE_SERVICES_ENABLED && (
<FormRow
fieldSeparator = { true }
label = 'settingsView.disableCrashReporting'>
<Switch
checked = { disableCrashReporting }
// @ts-ignore
onChange = { this._onDisableCrashReporting } />
</FormRow>
)}
</FormSectionAccordion>
</JitsiScreen>
);
}