import React from 'react'; import {RetinaImg, Flexbox} from 'nylas-component-kit'; class AppearanceModeSwitch extends React.Component { static displayName = 'AppearanceModeSwitch'; static propTypes = { config: React.PropTypes.object.isRequired, }; constructor(props) { super(); this.state = { value: props.config.get('core.workspace.mode'), }; } componentWillReceiveProps(nextProps) { this.setState({ value: nextProps.config.get('core.workspace.mode'), }); } _onApplyChanges = () => { NylasEnv.commands.dispatch(`application:select-${this.state.value}-mode`); } _renderModeOptions() { return ['list', 'split'].map((mode) => this.setState({value: mode})} /> ); } render() { const hasChanges = this.state.value !== this.props.config.get('core.workspace.mode'); let applyChangesClass = "btn"; if (!hasChanges) applyChangesClass += " btn-disabled"; return (
{this._renderModeOptions()}
Apply Layout
); } } class AppearanceModeOption extends React.Component { static propTypes = { mode: React.PropTypes.string.isRequired, active: React.PropTypes.bool, onClick: React.PropTypes.func, } constructor() { super(); } render() { let classname = "appearance-mode"; if (this.props.active) classname += " active"; const label = { 'list': 'Single Panel', 'split': 'Two Panel', }[this.props.mode]; return (
{label}
); } } class PreferencesAppearance extends React.Component { static displayName = 'PreferencesAppearance'; static propTypes = { config: React.PropTypes.object, configSchema: React.PropTypes.object, } onClick = () => { NylasEnv.commands.dispatch("window:launch-theme-picker"); } render() { return (
); } } export default PreferencesAppearance;