update theme based on prop change
This commit is contained in:
parent
7aae6baaa9
commit
4fad161ae0
3 changed files with 16 additions and 5 deletions
|
@ -3,6 +3,7 @@ import { selectPageTitle, selectHistoryIndex, selectActiveHistoryEntry } from 'l
|
||||||
import { doRecordScroll } from 'redux/actions/navigation';
|
import { doRecordScroll } from 'redux/actions/navigation';
|
||||||
import { selectUser } from 'lbryinc';
|
import { selectUser } from 'lbryinc';
|
||||||
import { doAlertError } from 'redux/actions/app';
|
import { doAlertError } from 'redux/actions/app';
|
||||||
|
import { selectThemePath } from 'redux/selectors/settings';
|
||||||
import App from './view';
|
import App from './view';
|
||||||
|
|
||||||
const select = state => ({
|
const select = state => ({
|
||||||
|
@ -10,6 +11,7 @@ const select = state => ({
|
||||||
user: selectUser(state),
|
user: selectUser(state),
|
||||||
currentStackIndex: selectHistoryIndex(state),
|
currentStackIndex: selectHistoryIndex(state),
|
||||||
currentPageAttributes: selectActiveHistoryEntry(state),
|
currentPageAttributes: selectActiveHistoryEntry(state),
|
||||||
|
theme: selectThemePath(state),
|
||||||
});
|
});
|
||||||
|
|
||||||
const perform = dispatch => ({
|
const perform = dispatch => ({
|
||||||
|
|
|
@ -6,7 +6,6 @@ import ReactModal from 'react-modal';
|
||||||
import throttle from 'util/throttle';
|
import throttle from 'util/throttle';
|
||||||
import SideBar from 'component/sideBar';
|
import SideBar from 'component/sideBar';
|
||||||
import Header from 'component/header';
|
import Header from 'component/header';
|
||||||
import { whatIsTheTheme } from 'redux/selectors/settings';
|
|
||||||
import { openContextMenu } from '../../util/contextMenu';
|
import { openContextMenu } from '../../util/contextMenu';
|
||||||
|
|
||||||
type Props = {
|
type Props = {
|
||||||
|
@ -15,6 +14,7 @@ type Props = {
|
||||||
currentStackIndex: number,
|
currentStackIndex: number,
|
||||||
currentPageAttributes: { path: string, scrollY: number },
|
currentPageAttributes: { path: string, scrollY: number },
|
||||||
pageTitle: ?string,
|
pageTitle: ?string,
|
||||||
|
theme: string,
|
||||||
};
|
};
|
||||||
|
|
||||||
class App extends React.PureComponent<Props> {
|
class App extends React.PureComponent<Props> {
|
||||||
|
@ -25,7 +25,7 @@ class App extends React.PureComponent<Props> {
|
||||||
}
|
}
|
||||||
|
|
||||||
componentWillMount() {
|
componentWillMount() {
|
||||||
const { alertError } = this.props;
|
const { alertError, theme } = this.props;
|
||||||
|
|
||||||
// TODO: create type for this object
|
// TODO: create type for this object
|
||||||
// it lives in jsonrpc.js
|
// it lives in jsonrpc.js
|
||||||
|
@ -34,7 +34,7 @@ class App extends React.PureComponent<Props> {
|
||||||
});
|
});
|
||||||
|
|
||||||
// $FlowFixMe
|
// $FlowFixMe
|
||||||
document.documentElement.setAttribute('data-theme', whatIsTheTheme());
|
document.documentElement.setAttribute('data-theme', theme);
|
||||||
}
|
}
|
||||||
|
|
||||||
componentDidMount() {
|
componentDidMount() {
|
||||||
|
@ -54,12 +54,17 @@ class App extends React.PureComponent<Props> {
|
||||||
}
|
}
|
||||||
|
|
||||||
componentDidUpdate(prevProps: Props) {
|
componentDidUpdate(prevProps: Props) {
|
||||||
const { currentStackIndex: prevStackIndex } = prevProps;
|
const { currentStackIndex: prevStackIndex, theme: prevTheme } = prevProps;
|
||||||
const { currentStackIndex, currentPageAttributes } = this.props;
|
const { currentStackIndex, currentPageAttributes, theme } = this.props;
|
||||||
|
|
||||||
if (this.mainContent && currentStackIndex !== prevStackIndex && currentPageAttributes) {
|
if (this.mainContent && currentStackIndex !== prevStackIndex && currentPageAttributes) {
|
||||||
this.mainContent.scrollTop = currentPageAttributes.scrollY || 0;
|
this.mainContent.scrollTop = currentPageAttributes.scrollY || 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
if (prevTheme !== theme) {
|
||||||
|
// $FlowFixMe
|
||||||
|
document.documentElement.setAttribute('data-theme', theme);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
componentWillUnmount() {
|
componentWillUnmount() {
|
||||||
|
|
|
@ -101,6 +101,10 @@
|
||||||
lodash "^4.2.0"
|
lodash "^4.2.0"
|
||||||
to-fast-properties "^2.0.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":
|
"@mapbox/hast-util-table-cell-style@^0.1.3":
|
||||||
version "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"
|
resolved "https://registry.yarnpkg.com/@mapbox/hast-util-table-cell-style/-/hast-util-table-cell-style-0.1.3.tgz#5b7166ae01297d72216932b245e4b2f0b642dca6"
|
||||||
|
|
Loading…
Add table
Reference in a new issue