1
0
Fork 0

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:
Joost De Cock 2021-12-31 06:46:13 +01:00
parent 4a90513305
commit 09c2b89aed

View file

@ -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>
) )
} }