update theme based on prop change

This commit is contained in:
Sean Yesmunt 2018-10-19 11:27:14 -04:00
parent 7aae6baaa9
commit 4fad161ae0
3 changed files with 16 additions and 5 deletions

View file

@ -3,6 +3,7 @@ import { selectPageTitle, selectHistoryIndex, selectActiveHistoryEntry } from 'l
import { doRecordScroll } from 'redux/actions/navigation';
import { selectUser } from 'lbryinc';
import { doAlertError } from 'redux/actions/app';
import { selectThemePath } from 'redux/selectors/settings';
import App from './view';
const select = state => ({
@ -10,6 +11,7 @@ const select = state => ({
user: selectUser(state),
currentStackIndex: selectHistoryIndex(state),
currentPageAttributes: selectActiveHistoryEntry(state),
theme: selectThemePath(state),
});
const perform = dispatch => ({

View file

@ -6,7 +6,6 @@ import ReactModal from 'react-modal';
import throttle from 'util/throttle';
import SideBar from 'component/sideBar';
import Header from 'component/header';
import { whatIsTheTheme } from 'redux/selectors/settings';
import { openContextMenu } from '../../util/contextMenu';
type Props = {
@ -15,6 +14,7 @@ type Props = {
currentStackIndex: number,
currentPageAttributes: { path: string, scrollY: number },
pageTitle: ?string,
theme: string,
};
class App extends React.PureComponent<Props> {
@ -25,7 +25,7 @@ class App extends React.PureComponent<Props> {
}
componentWillMount() {
const { alertError } = this.props;
const { alertError, theme } = this.props;
// TODO: create type for this object
// it lives in jsonrpc.js
@ -34,7 +34,7 @@ class App extends React.PureComponent<Props> {
});
// $FlowFixMe
document.documentElement.setAttribute('data-theme', whatIsTheTheme());
document.documentElement.setAttribute('data-theme', theme);
}
componentDidMount() {
@ -54,12 +54,17 @@ class App extends React.PureComponent<Props> {
}
componentDidUpdate(prevProps: Props) {
const { currentStackIndex: prevStackIndex } = prevProps;
const { currentStackIndex, currentPageAttributes } = this.props;
const { currentStackIndex: prevStackIndex, theme: prevTheme } = prevProps;
const { currentStackIndex, currentPageAttributes, theme } = this.props;
if (this.mainContent && currentStackIndex !== prevStackIndex && currentPageAttributes) {
this.mainContent.scrollTop = currentPageAttributes.scrollY || 0;
}
if (prevTheme !== theme) {
// $FlowFixMe
document.documentElement.setAttribute('data-theme', theme);
}
}
componentWillUnmount() {

View file

@ -101,6 +101,10 @@
lodash "^4.2.0"
to-fast-properties "^2.0.0"
"@lbry/color@^1.0.2":
version "1.0.3"
resolved "https://registry.yarnpkg.com/@lbry/color/-/color-1.0.3.tgz#ec22b2c48b0e358759528fb3bbe7ba468d4e41ca"
"@mapbox/hast-util-table-cell-style@^0.1.3":
version "0.1.3"
resolved "https://registry.yarnpkg.com/@mapbox/hast-util-table-cell-style/-/hast-util-table-cell-style-0.1.3.tgz#5b7166ae01297d72216932b245e4b2f0b642dca6"