Allow custom theme to only change the code theme (#2185)

parent d2038f23
......@@ -5,7 +5,7 @@ import $ from 'jquery';
import PropTypes from 'prop-types';
import React from 'react';
import {OverlayTrigger, Popover} from 'react-bootstrap';
import {defineMessages, FormattedMessage, injectIntl, intlShape} from 'react-intl';
import {defineMessages, FormattedMessage, intlShape} from 'react-intl';
import {localizeMessage} from 'utils/utils.jsx';
import {t} from 'utils/i18n';
......@@ -111,7 +111,16 @@ const messages = defineMessages({
},
});
class CustomThemeChooser extends React.Component {
export default class CustomThemeChooser extends React.Component {
static propTypes = {
theme: PropTypes.object.isRequired,
updateTheme: PropTypes.func.isRequired,
};
static contextTypes = {
intl: intlShape.isRequired,
};
constructor(props) {
super(props);
const copyTheme = this.setCopyTheme(this.props.theme);
......@@ -230,13 +239,17 @@ class CustomThemeChooser extends React.Component {
}
onCodeThemeChange = (e) => {
const theme = this.props.theme;
theme.codeTheme = e.target.value;
const theme = {
...this.props.theme,
type: 'custom',
codeTheme: e.target.value,
};
this.props.updateTheme(theme);
}
render() {
const {formatMessage} = this.props.intl;
const {formatMessage} = this.context.intl;
const theme = this.props.theme;
const sidebarElements = [];
......@@ -469,11 +482,3 @@ class CustomThemeChooser extends React.Component {
);
}
}
CustomThemeChooser.propTypes = {
intl: intlShape.isRequired,
theme: PropTypes.object.isRequired,
updateTheme: PropTypes.func.isRequired,
};
export default injectIntl(CustomThemeChooser);
// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
// See LICENSE.txt for license information.
import React from 'react';
import {Preferences} from 'mattermost-redux/constants';
import {shallowWithIntl} from 'tests/helpers/intl-test-helper.jsx';
import CustomThemeChooser from 'components/user_settings/display/user_settings_theme/custom_theme_chooser.jsx';
describe('components/user_settings/display/CustomThemeChooser', () => {
const baseProps = {
theme: Preferences.THEMES.default,
updateTheme: jest.fn(),
};
it('should match, init', () => {
const wrapper = shallowWithIntl(
<CustomThemeChooser {...baseProps}/>
);
expect(wrapper).toMatchSnapshot();
});
it('should create a custom theme when the code theme changes', () => {
const wrapper = shallowWithIntl(
<CustomThemeChooser {...baseProps}/>
);
const event = {
target: {
value: 'monokai',
},
};
wrapper.instance().onCodeThemeChange(event);
expect(baseProps.updateTheme).toHaveBeenCalledTimes(1);
expect(baseProps.updateTheme).toHaveBeenCalledWith({
...baseProps.theme,
type: 'custom',
codeTheme: 'monokai',
});
});
});
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment