diff --git a/packages/main/src/components/ThemeProvider/index.tsx b/packages/main/src/components/ThemeProvider/index.tsx index 33e4ae55c6c..c1164c110c0 100644 --- a/packages/main/src/components/ThemeProvider/index.tsx +++ b/packages/main/src/components/ThemeProvider/index.tsx @@ -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 { @@ -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 = (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 ( @@ -100,8 +51,7 @@ const ThemeProvider: FC = (props) => { ThemeProvider.displayName = 'ThemeProvider'; ThemeProvider.defaultProps = { - withToastContainer: false, - noInjectThemeProperties: false + withToastContainer: false }; export { ThemeProvider };