jiti-meet/react/features/app-settings/components/AppSettings.native.js

100 lines
3.6 KiB
JavaScript

import React from 'react';
import {
Modal,
Switch,
Text,
TextInput,
View } from 'react-native';
import { connect } from 'react-redux';
import {
_mapStateToProps,
AbstractAppSettings
} from './AbstractAppSettings';
import FormRow from './FormRow';
import styles from './styles';
import { translate } from '../../base/i18n';
/**
* The native container rendering the app settings page.
*
* @extends AbstractAppSettings
*/
class AppSettings extends AbstractAppSettings {
/**
* Implements React's {@link Component#render()}, renders the settings page.
*
* @inheritdoc
* @returns {ReactElement}
*/
render() {
const { t } = this.props;
return (
<Modal
animationType = 'slide'
onRequestClose = { this._onRequestClose }
presentationStyle = 'fullScreen'
style = { styles.modal }
visible = { this.props._visible }>
<View style = { styles.headerContainer } >
<Text style = { [ styles.text, styles.headerTitle ] } >
{ t('profileModal.header') }
</Text>
</View>
<View style = { styles.settingsContainer } >
<FormRow
fieldSeparator = { true }
i18nLabel = 'profileModal.serverURL' >
<TextInput
autoCapitalize = 'none'
onChangeText = { this._onChangeServerName }
onEndEditing = { this._onSaveServerName }
placeholder = 'https://jitsi.example.com'
value = { this.state.serverURL } />
</FormRow>
<FormRow
fieldSeparator = { true }
i18nLabel = 'profileModal.displayName' >
<TextInput
onChangeText = { this._onChangeDisplayName }
onEndEditing = { this._onSaveDisplayName }
placeholder = 'John Doe'
value = { this.state.displayName } />
</FormRow>
<FormRow
fieldSeparator = { true }
i18nLabel = 'profileModal.email' >
<TextInput
onChangeText = { this._onChangeEmail }
onEndEditing = { this._onSaveEmail }
placeholder = 'email@example.com'
value = { this.state.email } />
</FormRow>
<FormRow
fieldSeparator = { true }
i18nLabel = 'profileModal.startWithAudioMuted' >
<Switch
onValueChange = {
this._onStartAudioMutedChange
}
value = { this.state.startWithAudioMuted } />
</FormRow>
<FormRow
i18nLabel = 'profileModal.startWithVideoMuted' >
<Switch
onValueChange = {
this._onStartVideoMutedChange
}
value = { this.state.startWithVideoMuted } />
</FormRow>
</View>
</Modal>
);
}
}
export default translate(connect(_mapStateToProps)(AppSettings));