fix(fs.dev): Force data-theme update with key prop
This is a replacement for the hack I implemented in
bb901c4d8a
It accomplishes the same effect, but with just setting the key prop.
Sadly, it does not work with just setting the key prop to the theme
but forcing the key prop to be re-set by including the date does the
trick.
To be clear: This is still a hack and I'd love to avoid it (or just
understand the right way to handle this) but for now it will do.
This commit is contained in:
parent
4a90513305
commit
09c2b89aed
1 changed files with 6 additions and 12 deletions
|
@ -53,24 +53,18 @@ const AppWrapper= props => {
|
||||||
// locale, languages: config.languages,
|
// locale, languages: config.languages,
|
||||||
//}
|
//}
|
||||||
|
|
||||||
// Cannot understand why, but a re-render does update the content
|
|
||||||
// but not the attributes. So this is a hackish workaround
|
|
||||||
const themeWrappers = {
|
|
||||||
light: props => <div {...props} data-theme="light" />,
|
|
||||||
dark: props => <div {...props} data-theme="dark" />,
|
|
||||||
hax0r: props => <div {...props} data-theme="hax0r" />,
|
|
||||||
lgbtq: props => <div {...props} data-theme="lgbtq" />,
|
|
||||||
trans: props => <div {...props} data-theme="trans" />,
|
|
||||||
}
|
|
||||||
const Wrapper = themeWrappers[props.app.theme]
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Wrapper>
|
<div
|
||||||
|
{...swipeHandlers}
|
||||||
|
data-theme={props.app.theme}
|
||||||
|
key={props.app.theme+Date.now()} // Thiis forces the data-theme update
|
||||||
|
>
|
||||||
{props.noLayout
|
{props.noLayout
|
||||||
? props.children
|
? props.children
|
||||||
: <Layout {...childProps}>{props.children}</Layout>
|
: <Layout {...childProps}>{props.children}</Layout>
|
||||||
}
|
}
|
||||||
</Wrapper>
|
</div>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue