/* eslint jsx-a11y/tabindex-no-positive: 0 */ import React from 'react'; import {Flexbox, ScrollRegion} from 'nylas-component-kit'; import ThemeOption from './theme-option'; class ThemePicker extends React.Component { static displayName = 'ThemePicker'; constructor(props) { super(props); this.themes = NylasEnv.themes; this.state = this._getState(); } componentDidMount() { this.disposable = this.themes.onDidChangeActiveThemes(() => { this.setState(this._getState()); }); } componentWillUnmount() { this.disposable.dispose(); } _getState() { return { themes: this.themes.getLoadedThemes(), activeTheme: this.themes.getActiveTheme().name, } } _setActiveTheme(theme) { const prevActiveTheme = this.state.activeTheme; this.themes.setActiveTheme(theme); this._rewriteIFrame(prevActiveTheme, theme); } _rewriteIFrame(prevActiveTheme, activeTheme) { const prevActiveThemeDoc = document.querySelector(`.theme-preview-${prevActiveTheme.replace(/\./g, '-')}`).contentDocument; const prevActiveElement = prevActiveThemeDoc.querySelector(".theme-option.active-true"); if (prevActiveElement) prevActiveElement.className = "theme-option active-false"; const activeThemeDoc = document.querySelector(`.theme-preview-${activeTheme.replace(/\./g, '-')}`).contentDocument; const activeElement = activeThemeDoc.querySelector(".theme-option.active-false"); if (activeElement) activeElement.className = "theme-option active-true"; } _renderThemeOptions() { const internalThemes = ['ui-less-is-more', 'ui-ubuntu', 'ui-taiga', 'ui-darkside', 'ui-dark', 'ui-light']; const sortedThemes = [].concat(this.state.themes); sortedThemes.sort((a, b) => { return (internalThemes.indexOf(a.name) - internalThemes.indexOf(b.name)) * -1; }); return sortedThemes.map((theme) => this._setActiveTheme(theme.name)} /> ); } render() { return (

Themes

Click any theme to apply:
{this._renderThemeOptions()}
Create a Theme
); } } export default ThemePicker;