Skip to content

refactor(ThemeProvider): Remove custom Theme Injection #241

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Dec 5, 2019
Merged

refactor(ThemeProvider): Remove custom Theme Injection #241

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
62 changes: 6 additions & 56 deletions packages/main/src/components/ThemeProvider/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,15 +1,11 @@
import boot from '@ui5/webcomponents-base/dist/boot';
import { getCompactSize } from '@ui5/webcomponents-base/dist/config/CompactSize';
import { getTheme } from '@ui5/webcomponents-base/dist/config/Theme';
import { createGenerateClassName } from '@ui5/webcomponents-react-base/lib/createGenerateClassName';
import { Device } from '@ui5/webcomponents-react-base/lib/Device';
import * as sap_fiori_3 from '@ui5/webcomponents-react-base/lib/sap_fiori_3';
import { ContentDensity } from '@ui5/webcomponents-react/lib/ContentDensity';
import { MessageToast } from '@ui5/webcomponents-react/lib/MessageToast';
import { Themes } from '@ui5/webcomponents-react/lib/Themes';
import { _ as fiori3Theme } from '@ui5/webcomponents/dist/assets/themes/sap_fiori_3/parameters-bundle.css.json';
import { Jss } from 'jss';
import React, { FC, Fragment, ReactNode, useEffect, useMemo } from 'react';
import React, { FC, Fragment, ReactNode, useMemo } from 'react';
import { JssProvider, ThemeProvider as ReactJssThemeProvider } from 'react-jss';

export interface ThemeProviderProps {
Expand All @@ -20,71 +16,26 @@ export interface ThemeProviderProps {
withToastContainer?: boolean;
children: ReactNode;
/*
* Allows you to inject a custom JSS instance, e.g. if you need another insertionPoint or differnent plugins.
* Allows you to inject a custom JSS instance, e.g. if you need another insertionPoint or different plugins.
* If not provided, the default instance from `react-jss` will be used.
*/
jss?: Jss;
/*
* The Theme Provider injects the fiori_3 theme variables into the document head.
* If this prop is set to true, this step is skipped.
*/
noInjectThemeProperties?: boolean;
}

const generateClassName = createGenerateClassName();

const ThemeProvider: FC<ThemeProviderProps> = (props) => {
const { withToastContainer, children, jss, noInjectThemeProperties } = props;
const { withToastContainer, children, jss } = props;
const theme = getTheme();

useEffect(() => {
if (!noInjectThemeProperties) {
boot().then(() => {
// only inject parameters for sap_fiori_3 and if they haven't been injected before
let styleElement = document.head.querySelector('style[data-ui5-webcomponents-react-theme-properties]');
if (theme === Themes.sap_fiori_3) {
if (!styleElement) {
styleElement = document.createElement('style');
// @ts-ignore
styleElement.type = 'text/css';
styleElement.setAttribute('data-ui5-webcomponents-react-theme-properties', '');
document.head.appendChild(styleElement);
}

if (!styleElement.textContent) {
styleElement.textContent = fiori3Theme;
}

const CSSVarsPonyfill = window['CSSVarsPonyfill'];
if (Device.browser.msie && CSSVarsPonyfill) {
setTimeout(() => {
CSSVarsPonyfill.resetCssVars();
CSSVarsPonyfill.cssVars();
}, 0);
}
} else {
if (styleElement) {
styleElement.textContent = '';
}
}
});
}
}, [theme, noInjectThemeProperties]);

const isCompactSize = getCompactSize();

const parameters = useMemo(() => {
if (theme === Themes.sap_fiori_3) return sap_fiori_3;
return null;
}, [theme]);

const themeContext = useMemo(() => {
return {
theme,
contentDensity: isCompactSize ? ContentDensity.Compact : ContentDensity.Cozy,
parameters
parameters: sap_fiori_3
};
}, [theme, isCompactSize, parameters]);
}, [theme, isCompactSize]);

return (
<JssProvider generateId={generateClassName} jss={jss}>
Expand All @@ -100,8 +51,7 @@ const ThemeProvider: FC<ThemeProviderProps> = (props) => {

ThemeProvider.displayName = 'ThemeProvider';
ThemeProvider.defaultProps = {
withToastContainer: false,
noInjectThemeProperties: false
withToastContainer: false
};

export { ThemeProvider };