// Copyright (c) 2015 Mattermost, Inc. All Rights Reserved. // See License.txt for license information. var Constants = require('../../utils/constants.jsx'); 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().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( ); }); elements.push(
); } else { elements.push(
); colors += theme[element.id] + ','; } }); colors += theme.codeTheme; const pasteBox = (
); return (
{elements}
{pasteBox}
); } } CustomThemeChooser.propTypes = { theme: React.PropTypes.object.isRequired, updateTheme: React.PropTypes.func.isRequired };