2018-03-09 22:59:12 +02:00
|
|
|
const React = require('react'); const Component = React.Component;
|
|
|
|
const { Platform, TouchableOpacity, Linking, View, Switch, Slider, StyleSheet, Text, Button, ScrollView, TextInput } = require('react-native');
|
|
|
|
const { connect } = require('react-redux');
|
|
|
|
const { ScreenHeader } = require('lib/components/screen-header.js');
|
|
|
|
const { _, setLocale } = require('lib/locale.js');
|
|
|
|
const { BaseScreenComponent } = require('lib/components/base-screen.js');
|
|
|
|
const { Dropdown } = require('lib/components/Dropdown.js');
|
|
|
|
const { themeStyle } = require('lib/components/global-style.js');
|
|
|
|
const Setting = require('lib/models/Setting.js');
|
|
|
|
const shared = require('lib/components/shared/config-shared.js');
|
|
|
|
const SyncTargetRegistry = require('lib/SyncTargetRegistry');
|
2017-07-23 20:26:50 +02:00
|
|
|
|
2017-08-01 19:59:01 +02:00
|
|
|
class ConfigScreenComponent extends BaseScreenComponent {
|
2018-03-09 22:59:12 +02:00
|
|
|
|
2017-08-01 19:59:01 +02:00
|
|
|
static navigationOptions(options) {
|
|
|
|
return { header: null };
|
2017-07-30 23:04:26 +02:00
|
|
|
}
|
2017-07-23 20:26:50 +02:00
|
|
|
|
2017-08-01 19:59:01 +02:00
|
|
|
constructor() {
|
|
|
|
super();
|
|
|
|
this.styles_ = {};
|
2018-01-25 21:01:14 +02:00
|
|
|
|
2018-02-06 20:59:36 +02:00
|
|
|
shared.init(this);
|
|
|
|
|
|
|
|
this.checkSyncConfig_ = async () => {
|
|
|
|
await shared.checkSyncConfig(this, this.state.settings);
|
2018-03-09 22:59:12 +02:00
|
|
|
}
|
2018-02-06 20:59:36 +02:00
|
|
|
|
2018-01-25 21:01:14 +02:00
|
|
|
this.saveButton_press = () => {
|
2018-02-13 20:26:33 +02:00
|
|
|
return shared.saveSettings(this);
|
2018-01-25 21:01:14 +02:00
|
|
|
};
|
|
|
|
}
|
|
|
|
|
|
|
|
componentWillMount() {
|
|
|
|
this.setState({ settings: this.props.settings });
|
2017-08-01 19:59:01 +02:00
|
|
|
}
|
2017-07-30 23:04:26 +02:00
|
|
|
|
2017-08-01 19:59:01 +02:00
|
|
|
styles() {
|
|
|
|
const themeId = this.props.theme;
|
|
|
|
const theme = themeStyle(themeId);
|
|
|
|
|
|
|
|
if (this.styles_[themeId]) return this.styles_[themeId];
|
|
|
|
this.styles_ = {};
|
|
|
|
|
|
|
|
let styles = {
|
2017-11-19 01:59:07 +02:00
|
|
|
body: {
|
|
|
|
flex: 1,
|
2018-03-09 22:59:12 +02:00
|
|
|
justifyContent: 'flex-start',
|
|
|
|
flexDirection: 'column',
|
2017-11-19 01:59:07 +02:00
|
|
|
},
|
2017-08-01 19:59:01 +02:00
|
|
|
settingContainer: {
|
2017-11-19 01:59:07 +02:00
|
|
|
flex: 1,
|
2018-03-09 22:59:12 +02:00
|
|
|
flexDirection: 'row',
|
|
|
|
alignItems: 'center',
|
2017-08-01 19:59:01 +02:00
|
|
|
borderBottomWidth: 1,
|
|
|
|
borderBottomColor: theme.dividerColor,
|
|
|
|
paddingTop: theme.marginTop,
|
|
|
|
paddingBottom: theme.marginBottom,
|
|
|
|
paddingLeft: theme.marginLeft,
|
|
|
|
paddingRight: theme.marginRight,
|
|
|
|
},
|
|
|
|
settingText: {
|
2018-03-09 22:59:12 +02:00
|
|
|
fontWeight: 'bold',
|
2017-08-01 19:59:01 +02:00
|
|
|
color: theme.color,
|
|
|
|
fontSize: theme.fontSize,
|
2017-11-19 01:59:07 +02:00
|
|
|
flex: 1,
|
2017-08-01 19:59:01 +02:00
|
|
|
},
|
2018-02-14 21:08:07 +02:00
|
|
|
descriptionText: {
|
|
|
|
color: theme.color,
|
|
|
|
fontSize: theme.fontSize,
|
|
|
|
flex: 1,
|
|
|
|
},
|
2017-08-01 19:59:01 +02:00
|
|
|
settingControl: {
|
|
|
|
color: theme.color,
|
2017-11-19 01:59:07 +02:00
|
|
|
flex: 1,
|
2017-08-01 19:59:01 +02:00
|
|
|
},
|
2018-03-09 22:59:12 +02:00
|
|
|
}
|
2017-07-26 19:49:01 +02:00
|
|
|
|
2018-03-09 22:59:12 +02:00
|
|
|
if (Platform.OS === 'ios') {
|
2018-02-05 20:32:59 +02:00
|
|
|
styles.settingControl.borderBottomWidth = 1;
|
|
|
|
styles.settingControl.borderBottomColor = theme.dividerColor;
|
|
|
|
}
|
|
|
|
|
2017-08-01 19:59:01 +02:00
|
|
|
styles.switchSettingText = Object.assign({}, styles.settingText);
|
2018-03-09 22:59:12 +02:00
|
|
|
styles.switchSettingText.width = '80%';
|
2017-07-26 19:49:01 +02:00
|
|
|
|
2017-08-01 19:59:01 +02:00
|
|
|
styles.switchSettingContainer = Object.assign({}, styles.settingContainer);
|
2018-03-09 22:59:12 +02:00
|
|
|
styles.switchSettingContainer.flexDirection = 'row';
|
|
|
|
styles.switchSettingContainer.justifyContent = 'space-between';
|
2017-07-23 20:26:50 +02:00
|
|
|
|
2017-11-20 20:25:23 +02:00
|
|
|
styles.linkText = Object.assign({}, styles.settingText);
|
|
|
|
styles.linkText.borderBottomWidth = 1;
|
|
|
|
styles.linkText.borderBottomColor = theme.color;
|
|
|
|
styles.linkText.flex = 0;
|
2018-03-09 22:59:12 +02:00
|
|
|
styles.linkText.fontWeight = 'normal';
|
2017-11-20 20:25:23 +02:00
|
|
|
|
2017-08-01 19:59:01 +02:00
|
|
|
styles.switchSettingControl = Object.assign({}, styles.settingControl);
|
|
|
|
delete styles.switchSettingControl.color;
|
2017-11-19 02:23:18 +02:00
|
|
|
//styles.switchSettingControl.width = '20%';
|
|
|
|
styles.switchSettingControl.flex = 0;
|
2017-08-01 19:59:01 +02:00
|
|
|
|
|
|
|
this.styles_[themeId] = StyleSheet.create(styles);
|
|
|
|
return this.styles_[themeId];
|
2017-07-23 20:26:50 +02:00
|
|
|
}
|
|
|
|
|
2017-07-31 22:51:24 +02:00
|
|
|
settingToComponent(key, value) {
|
2017-11-19 01:59:07 +02:00
|
|
|
const themeId = this.props.theme;
|
|
|
|
const theme = themeStyle(themeId);
|
2017-07-23 20:26:50 +02:00
|
|
|
let output = null;
|
|
|
|
|
|
|
|
const updateSettingValue = (key, value) => {
|
2018-02-13 20:26:33 +02:00
|
|
|
return shared.updateSettingValue(this, key, value);
|
2018-03-09 22:59:12 +02:00
|
|
|
}
|
2017-07-23 20:26:50 +02:00
|
|
|
|
2017-07-31 22:51:24 +02:00
|
|
|
const md = Setting.settingMetadata(key);
|
|
|
|
|
|
|
|
if (md.isEnum) {
|
|
|
|
value = value.toString();
|
2017-07-23 20:26:50 +02:00
|
|
|
|
|
|
|
let items = [];
|
2017-07-31 22:51:24 +02:00
|
|
|
const settingOptions = md.options();
|
2017-07-23 20:26:50 +02:00
|
|
|
for (let k in settingOptions) {
|
|
|
|
if (!settingOptions.hasOwnProperty(k)) continue;
|
2017-11-19 01:59:07 +02:00
|
|
|
items.push({ label: settingOptions[k], value: k.toString() });
|
2017-07-23 20:26:50 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
return (
|
2017-08-01 19:59:01 +02:00
|
|
|
<View key={key} style={this.styles().settingContainer}>
|
2018-03-09 22:59:12 +02:00
|
|
|
<Text key="label" style={this.styles().settingText}>{md.label()}</Text>
|
2017-11-19 01:59:07 +02:00
|
|
|
<Dropdown
|
|
|
|
key="control"
|
|
|
|
style={this.styles().settingControl}
|
|
|
|
items={items}
|
|
|
|
selectedValue={value}
|
|
|
|
itemListStyle={{
|
|
|
|
backgroundColor: theme.backgroundColor,
|
|
|
|
}}
|
|
|
|
headerStyle={{
|
|
|
|
color: theme.color,
|
|
|
|
fontSize: theme.fontSize,
|
|
|
|
}}
|
|
|
|
itemStyle={{
|
|
|
|
color: theme.color,
|
|
|
|
fontSize: theme.fontSize,
|
|
|
|
}}
|
2018-03-09 22:59:12 +02:00
|
|
|
onValueChange={(itemValue, itemIndex) => { updateSettingValue(key, itemValue); }}
|
2017-11-19 01:59:07 +02:00
|
|
|
/>
|
2017-07-23 20:26:50 +02:00
|
|
|
</View>
|
|
|
|
);
|
2017-07-31 22:51:24 +02:00
|
|
|
} else if (md.type == Setting.TYPE_BOOL) {
|
2017-07-26 19:49:01 +02:00
|
|
|
return (
|
2017-08-01 19:59:01 +02:00
|
|
|
<View key={key} style={this.styles().switchSettingContainer}>
|
2018-03-09 22:59:12 +02:00
|
|
|
<Text key="label" style={this.styles().switchSettingText}>{md.label()}</Text>
|
|
|
|
<Switch key="control" style={this.styles().switchSettingControl} value={value} onValueChange={(value) => updateSettingValue(key, value)} />
|
2017-07-26 19:49:01 +02:00
|
|
|
</View>
|
|
|
|
);
|
2017-07-31 22:51:24 +02:00
|
|
|
} else if (md.type == Setting.TYPE_INT) {
|
2017-07-25 23:55:26 +02:00
|
|
|
return (
|
2017-08-01 19:59:01 +02:00
|
|
|
<View key={key} style={this.styles().settingContainer}>
|
2018-03-09 22:59:12 +02:00
|
|
|
<Text key="label" style={this.styles().settingText}>{md.label()}</Text>
|
|
|
|
<Slider key="control" style={this.styles().settingControl} value={value} onValueChange={(value) => updateSettingValue(key, value)} />
|
2017-07-25 23:55:26 +02:00
|
|
|
</View>
|
|
|
|
);
|
2018-01-25 21:01:14 +02:00
|
|
|
} else if (md.type == Setting.TYPE_STRING) {
|
|
|
|
return (
|
|
|
|
<View key={key} style={this.styles().settingContainer}>
|
2018-03-09 22:59:12 +02:00
|
|
|
<Text key="label" style={this.styles().settingText}>{md.label()}</Text>
|
2018-04-11 19:25:07 +02:00
|
|
|
<TextInput selectionColor={theme.textSelectionColor} autoCapitalize="none" key="control" style={this.styles().settingControl} value={value} onChangeText={(value) => updateSettingValue(key, value)} secureTextEntry={!!md.secure} />
|
2018-01-25 21:01:14 +02:00
|
|
|
</View>
|
|
|
|
);
|
2017-07-26 19:49:01 +02:00
|
|
|
} else {
|
2018-01-25 21:01:14 +02:00
|
|
|
//throw new Error('Unsupported setting type: ' + md.type);
|
2017-07-23 20:26:50 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
return output;
|
|
|
|
}
|
|
|
|
|
|
|
|
render() {
|
2018-01-25 21:01:14 +02:00
|
|
|
const settings = this.state.settings;
|
2017-07-23 20:26:50 +02:00
|
|
|
|
2018-03-09 22:59:12 +02:00
|
|
|
const settingComps = shared.settingsToComponents(this, 'mobile', settings);
|
2018-02-06 20:59:36 +02:00
|
|
|
|
2018-03-09 22:59:12 +02:00
|
|
|
const syncTargetMd = SyncTargetRegistry.idToMetadata(settings['sync.target']);
|
2018-02-06 20:59:36 +02:00
|
|
|
|
|
|
|
if (syncTargetMd.supportsConfigCheck) {
|
|
|
|
const messages = shared.checkSyncConfigMessages(this);
|
|
|
|
const statusComp = !messages.length ? null : (
|
2018-03-09 22:59:12 +02:00
|
|
|
<View style={{flex:1, marginTop: 10}}>
|
2018-02-14 21:08:07 +02:00
|
|
|
<Text style={this.styles().descriptionText}>{messages[0]}</Text>
|
2018-03-09 22:59:12 +02:00
|
|
|
{messages.length >= 1 ? (<View style={{marginTop:10}}><Text style={this.styles().descriptionText}>{messages[1]}</Text></View>) : null}
|
|
|
|
</View>);
|
2018-02-06 20:59:36 +02:00
|
|
|
|
|
|
|
settingComps.push(
|
|
|
|
<View key="check_sync_config_button" style={this.styles().settingContainer}>
|
2018-03-09 22:59:12 +02:00
|
|
|
<View style={{flex:1, flexDirection: 'column'}}>
|
|
|
|
<View style={{flex:1}}>
|
|
|
|
<Button title={_('Check synchronisation configuration')} onPress={this.checkSyncConfig_}/>
|
2018-02-06 20:59:36 +02:00
|
|
|
</View>
|
2018-03-09 22:59:12 +02:00
|
|
|
{ statusComp }
|
2018-02-06 20:59:36 +02:00
|
|
|
</View>
|
2018-03-09 22:59:12 +02:00
|
|
|
</View>);
|
2018-02-06 20:59:36 +02:00
|
|
|
}
|
2018-03-09 11:09:13 +02:00
|
|
|
|
|
|
|
settingComps.push(
|
|
|
|
<View key="donate_link" style={this.styles().settingContainer}>
|
2018-03-24 22:13:52 +02:00
|
|
|
<TouchableOpacity onPress={() => { Linking.openURL('https://joplin.cozic.net/donate/') }}>
|
2018-03-09 22:59:12 +02:00
|
|
|
<Text key="label" style={this.styles().linkText}>{_('Make a donation')}</Text>
|
2018-03-09 11:09:13 +02:00
|
|
|
</TouchableOpacity>
|
|
|
|
</View>
|
|
|
|
);
|
2018-03-09 22:59:12 +02:00
|
|
|
|
2017-11-20 20:25:23 +02:00
|
|
|
settingComps.push(
|
|
|
|
<View key="website_link" style={this.styles().settingContainer}>
|
2018-03-24 22:13:52 +02:00
|
|
|
<TouchableOpacity onPress={() => { Linking.openURL('https://joplin.cozic.net/') }}>
|
2018-03-09 22:59:12 +02:00
|
|
|
<Text key="label" style={this.styles().linkText}>{_('Joplin website')}</Text>
|
2017-11-20 20:25:23 +02:00
|
|
|
</TouchableOpacity>
|
|
|
|
</View>
|
|
|
|
);
|
|
|
|
|
|
|
|
settingComps.push(
|
|
|
|
<View key="privacy_link" style={this.styles().settingContainer}>
|
2018-03-24 22:13:52 +02:00
|
|
|
<TouchableOpacity onPress={() => { Linking.openURL('https://joplin.cozic.net/privacy/') }}>
|
2018-03-09 22:59:12 +02:00
|
|
|
<Text key="label" style={this.styles().linkText}>Privacy Policy</Text>
|
2017-11-20 20:25:23 +02:00
|
|
|
</TouchableOpacity>
|
|
|
|
</View>
|
|
|
|
);
|
2017-07-23 20:26:50 +02:00
|
|
|
|
|
|
|
return (
|
2017-08-01 19:59:01 +02:00
|
|
|
<View style={this.rootStyle(this.props.theme).root}>
|
2018-03-09 22:59:12 +02:00
|
|
|
<ScreenHeader
|
|
|
|
title={_('Configuration')}
|
|
|
|
showSaveButton={true}
|
|
|
|
saveButtonDisabled={!this.state.changedSettingKeys.length}
|
|
|
|
onSaveButtonPress={this.saveButton_press}
|
|
|
|
/>
|
|
|
|
<ScrollView >
|
|
|
|
{ settingComps }
|
|
|
|
</ScrollView>
|
2017-07-23 20:26:50 +02:00
|
|
|
</View>
|
|
|
|
);
|
|
|
|
}
|
2018-03-09 22:59:12 +02:00
|
|
|
|
2017-07-23 20:26:50 +02:00
|
|
|
}
|
|
|
|
|
2018-03-09 22:59:12 +02:00
|
|
|
const ConfigScreen = connect(
|
|
|
|
(state) => {
|
|
|
|
return {
|
|
|
|
settings: state.settings,
|
|
|
|
theme: state.settings.theme,
|
|
|
|
};
|
|
|
|
}
|
|
|
|
)(ConfigScreenComponent)
|
2017-07-23 20:26:50 +02:00
|
|
|
|
2018-03-09 22:59:12 +02:00
|
|
|
module.exports = { ConfigScreen };
|