213 lines
7 KiB
JavaScript
213 lines
7 KiB
JavaScript
// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
|
|
// See LICENSE.txt for license information.
|
|
import React from 'react';
|
|
import PropTypes from 'prop-types';
|
|
import {
|
|
TouchableOpacity,
|
|
Modal,
|
|
View,
|
|
} from 'react-native';
|
|
|
|
import StatusBar from 'app/components/status_bar';
|
|
import FormattedText from 'app/components/formatted_text';
|
|
import RadioButtonGroup from 'app/components/radio_button';
|
|
|
|
import {changeOpacity, makeStyleSheetFromTheme} from 'app/utils/theme';
|
|
|
|
import ClockDisplayBase from './clock_display_base';
|
|
|
|
export default class ClockDisplay extends ClockDisplayBase {
|
|
static propTypes = {
|
|
showModal: PropTypes.bool.isRequired,
|
|
militaryTime: PropTypes.string.isRequired,
|
|
onClose: PropTypes.func.isRequired,
|
|
};
|
|
|
|
setMilitaryTime = (value) => {
|
|
this.setState({
|
|
newMilitaryTime: value,
|
|
});
|
|
};
|
|
|
|
closeModal = () => {
|
|
const {militaryTime, onClose} = this.props;
|
|
this.setState({
|
|
newMilitaryTime: militaryTime,
|
|
});
|
|
|
|
onClose();
|
|
};
|
|
|
|
saveSelection = () => {
|
|
const {newMilitaryTime} = this.state;
|
|
const {onClose} = this.props;
|
|
this.saveClockDisplayPreference(newMilitaryTime);
|
|
onClose();
|
|
};
|
|
|
|
renderClockDisplayModal = (style) => {
|
|
const {showModal} = this.props;
|
|
const {intl} = this.context;
|
|
const {newMilitaryTime} = this.state;
|
|
|
|
const options = [{
|
|
label: intl.formatMessage({
|
|
id: 'user.settings.display.normalClock',
|
|
defaultMessage: '12-hour clock (example: 4:00 PM)',
|
|
}),
|
|
value: 'false',
|
|
checked: newMilitaryTime === 'false',
|
|
}, {
|
|
label: intl.formatMessage({
|
|
id: 'user.settings.display.militaryClock',
|
|
defaultMessage: '24-hour clock (example: 16:00)',
|
|
}),
|
|
value: 'true',
|
|
checked: newMilitaryTime === 'true',
|
|
}];
|
|
|
|
return (
|
|
<Modal
|
|
animationType='slide'
|
|
transparent={true}
|
|
visible={showModal}
|
|
onRequestClose={this.closeModal}
|
|
>
|
|
<View style={style.modalOverlay}>
|
|
<View style={style.modal}>
|
|
<View style={style.modalBody}>
|
|
<View style={style.modalTitleContainer}>
|
|
<FormattedText
|
|
id='mobile.advanced_settings.clockDisplay'
|
|
defaultMessage='Clock display'
|
|
style={style.modalTitle}
|
|
/>
|
|
</View>
|
|
<RadioButtonGroup
|
|
name='replySettings'
|
|
onSelect={this.setMilitaryTime}
|
|
options={options}
|
|
/>
|
|
<FormattedText
|
|
id='user.settings.display.preferTime'
|
|
defaultMessage='Select how you prefer time displayed.'
|
|
style={style.modalHelpText}
|
|
/>
|
|
</View>
|
|
<View style={style.modalFooter}>
|
|
<View style={style.separator}/>
|
|
<View style={style.modalFooterContainer}>
|
|
<TouchableOpacity
|
|
style={style.modalFooterOptionContainer}
|
|
onPress={this.closeModal}
|
|
>
|
|
<FormattedText
|
|
id='mobile.notification_settings.modal_cancel'
|
|
defaultMessage='CANCEL'
|
|
style={style.modalFooterOption}
|
|
/>
|
|
</TouchableOpacity>
|
|
<View style={style.modalFooterButtonSpacer}/>
|
|
<TouchableOpacity
|
|
style={style.modalFooterOptionContainer}
|
|
onPress={this.saveSelection}
|
|
>
|
|
<FormattedText
|
|
id='mobile.notification_settings.modal_save'
|
|
defaultMessage='SAVE'
|
|
style={style.modalFooterOption}
|
|
/>
|
|
</TouchableOpacity>
|
|
</View>
|
|
</View>
|
|
</View>
|
|
</View>
|
|
</Modal>
|
|
);
|
|
};
|
|
|
|
render() {
|
|
const {theme} = this.props;
|
|
const style = getStyleSheet(theme);
|
|
|
|
return (
|
|
<View style={style.container}>
|
|
<StatusBar/>
|
|
<View style={style.wrapper}>
|
|
{this.renderClockDisplayModal(style)}
|
|
</View>
|
|
</View>
|
|
);
|
|
}
|
|
}
|
|
|
|
const getStyleSheet = makeStyleSheetFromTheme((theme) => {
|
|
return {
|
|
container: {
|
|
flex: 1,
|
|
backgroundColor: theme.centerChannelBg,
|
|
},
|
|
wrapper: {
|
|
backgroundColor: changeOpacity(theme.centerChannelColor, 0.06),
|
|
flex: 1,
|
|
},
|
|
separator: {
|
|
backgroundColor: changeOpacity(theme.centerChannelColor, 0.1),
|
|
height: 1,
|
|
width: '100%',
|
|
},
|
|
modalOverlay: {
|
|
backgroundColor: changeOpacity('#000000', 0.6),
|
|
alignItems: 'center',
|
|
flex: 1,
|
|
},
|
|
modal: {
|
|
backgroundColor: theme.centerChannelBg,
|
|
borderRadius: 4,
|
|
marginTop: 20,
|
|
width: '95%',
|
|
},
|
|
modalBody: {
|
|
paddingHorizontal: 24,
|
|
},
|
|
modalTitleContainer: {
|
|
marginBottom: 30,
|
|
marginTop: 20,
|
|
},
|
|
modalTitle: {
|
|
color: theme.centerChannelColor,
|
|
fontSize: 19,
|
|
},
|
|
modalHelpText: {
|
|
color: changeOpacity(theme.centerChannelColor, 0.5),
|
|
fontSize: 13,
|
|
marginTop: 20,
|
|
},
|
|
modalFooter: {
|
|
alignItems: 'flex-end',
|
|
height: 58,
|
|
marginTop: 40,
|
|
width: '100%',
|
|
},
|
|
modalFooterContainer: {
|
|
alignItems: 'center',
|
|
flex: 1,
|
|
flexDirection: 'row',
|
|
paddingRight: 24,
|
|
},
|
|
modalFooterOptionContainer: {
|
|
alignItems: 'center',
|
|
height: 40,
|
|
justifyContent: 'center',
|
|
paddingHorizontal: 10,
|
|
paddingVertical: 5,
|
|
},
|
|
modalFooterOption: {
|
|
color: theme.linkColor,
|
|
fontSize: 14,
|
|
},
|
|
modalFooterButtonSpacer: {
|
|
marginRight: 10,
|
|
},
|
|
};
|
|
});
|