// Copyright (c) 2015 Mattermost, Inc. All Rights Reserved.
// See License.txt for license information.
import Constants from '../../utils/constants.jsx';
const OverlayTrigger = ReactBootstrap.OverlayTrigger;
const Popover = ReactBootstrap.Popover;
export default class CustomThemeChooser extends React.Component {
constructor(props) {
super(props);
this.onPickerChange = this.onPickerChange.bind(this);
this.onInputChange = this.onInputChange.bind(this);
this.pasteBoxChange = this.pasteBoxChange.bind(this);
this.state = {};
}
componentDidMount() {
$('.color-picker').colorpicker({
format: 'hex'
});
$('.color-picker').on('changeColor', this.onPickerChange);
}
onPickerChange(e) {
const theme = this.props.theme;
theme[e.target.id] = e.color.toHex();
theme.type = 'custom';
this.props.updateTheme(theme);
}
onInputChange(e) {
const theme = this.props.theme;
theme[e.target.parentNode.id] = e.target.value;
theme.type = 'custom';
this.props.updateTheme(theme);
}
pasteBoxChange(e) {
const text = e.target.value;
if (text.length === 0) {
return;
}
const colors = text.split(',');
const theme = {type: 'custom'};
let index = 0;
Constants.THEME_ELEMENTS.forEach((element) => {
if (index < colors.length - 1) {
theme[element.id] = colors[index];
}
index++;
});
theme.codeTheme = colors[colors.length - 1];
this.props.updateTheme(theme);
}
render() {
const theme = this.props.theme;
const elements = [];
let colors = '';
Constants.THEME_ELEMENTS.forEach((element, index) => {
if (element.id === 'codeTheme') {
const codeThemeOptions = [];
element.themes.forEach((codeTheme, codeThemeIndex) => {
codeThemeOptions.push(
);
});
var popoverContent = (