feat(base/modal): enable scroll for jitsi screen component
This commit is contained in:
Calin-Teodor
Calinteodor
parent
66769136ed
commit
f2b2b02029
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue