joplin/ElectronClient/app/gui/ConfigScreen.min.js

const React = require('react');
const { connect } = require('react-redux');
const { reg } = require('lib/registry.js');
const { Setting } = require('lib/models/setting.js');
const { bridge } = require('electron').remote.require('./bridge');
const { Header } = require('./Header.min.js');
const { themeStyle } = require('../theme.js');
const { _ } = require('lib/locale.js');

class ConfigScreenComponent extends React.Component {

	settingToComponent(key, value) {
		const theme = themeStyle(this.props.theme);

		let output = null;

		const rowStyle = {
			marginBottom: 10
		};

		const labelStyle = Object.assign({}, theme.textStyle, {
			display: 'inline-block',
			marginRight: 10
		});

		const controlStyle = {
			display: 'inline-block'
		};

		const updateSettingValue = (key, value) => {
			Setting.setValue(key, value);
		};

		const md = Setting.settingMetadata(key);

		if (md.isEnum) {
			let items = [];
			const settingOptions = md.options();
			for (let k in settingOptions) {
				if (!settingOptions.hasOwnProperty(k)) continue;
				items.push(React.createElement(
					'option',
					{ value: k.toString(), key: k },
					settingOptions[k]
				));
			}

			return React.createElement(
				'div',
				{ key: key, style: rowStyle },
				React.createElement(
					'div',
					{ style: labelStyle },
					React.createElement(
						'label',
						null,
						md.label()
					)
				),
				React.createElement(
					'select',
					{ value: value, style: controlStyle, onChange: event => {
							updateSettingValue(key, event.target.value);
						} },
					items
				)
			);
		} else if (md.type === Setting.TYPE_BOOL) {
			return React.createElement(
				'div',
				{ key: key, style: rowStyle },
				React.createElement(
					'div',
					{ style: controlStyle },
					React.createElement(
						'label',
						null,
						React.createElement('input', { type: 'checkbox', defaultChecked: !!value, onChange: event => {
								updateSettingValue(key, !!event.target.checked);
							} }),
						React.createElement(
							'span',
							{ style: labelStyle },
							' ',
							md.label()
						)
					)
				)
			);
		}

		return output;
	}

	render() {
		const theme = themeStyle(this.props.theme);
		const style = this.props.style;
		const settings = this.props.settings;

		const headerStyle = {
			width: style.width
		};

		const containerStyle = {
			padding: 10
		};

		let settingComps = [];
		let keys = Setting.keys(true, 'desktop');
		for (let i = 0; i < keys.length; i++) {
			const key = keys[i];
			if (key === 'sync.target') continue;
			if (!(key in settings)) {
				console.warn('Missing setting: ' + key);
				continue;
			}
			const comp = this.settingToComponent(key, settings[key]);
			if (!comp) continue;
			settingComps.push(comp);
		}

		return React.createElement(
			'div',
			{ style: style },
			React.createElement(Header, { style: headerStyle }),
			React.createElement(
				'div',
				{ style: containerStyle },
				settingComps
			)
		);
	}

}

const mapStateToProps = state => {
	return {
		theme: state.settings.theme,
		settings: state.settings,
		locale: state.settings.locale
	};
};

const ConfigScreen = connect(mapStateToProps)(ConfigScreenComponent);

module.exports = { ConfigScreen };