@chayns-components/core
Version:
A set of beautiful React components for developing your own applications with chayns.
65 lines (63 loc) • 2.14 kB
JavaScript
import { RuntimeEnviroment, useEnvironment } from 'chayns-api';
import React from 'react';
import { createGlobalStyle } from 'styled-components';
import { useUsableHeight } from '../../utils/pageProvider';
import ColorSchemeProvider from '../color-scheme-provider/ColorSchemeProvider';
import { StyledPageProvider } from './PageProvider.styles';
/**
* Props for the PageProvider component.
* @description
* This interface defines the props that can be passed to the PageProvider component
* for controlling the layout and styling behavior.
* @example
* <PageProvider shouldRemovePadding={true}>
* {children}
* </PageProvider>
*/
const GlobalStyle = createGlobalStyle`
*, *::before, *::after {
box-sizing: border-box;
}
`;
const PageProvider = ({
children,
color,
colorMode,
secondaryColor,
siteId,
style = {},
shouldReduceUsableHeightByCoverHeight = false,
shouldRemovePadding = false,
shouldUseUsableHeight = false,
iconColor,
customVariables,
shouldEnableKeyboardHighlighting
}) => {
const {
runtimeEnvironment
} = useEnvironment();
const usableHeight = useUsableHeight({
shouldReduceByCoverHeight: shouldReduceUsableHeightByCoverHeight
});
const shouldUsePadding = !shouldRemovePadding && ![RuntimeEnviroment.IntercomPlugin, RuntimeEnviroment.PagemakerPlugin, 6, 8].includes(runtimeEnvironment);
return /*#__PURE__*/React.createElement(StyledPageProvider, {
className: "page-provider",
$shouldUsePadding: shouldUsePadding,
$usableHeight: shouldUseUsableHeight ? usableHeight : undefined
}, /*#__PURE__*/React.createElement(ColorSchemeProvider, {
color: color,
secondaryColor: secondaryColor,
colorMode: colorMode,
siteId: siteId,
style: shouldUseUsableHeight ? {
...style,
height: '100%'
} : style,
customVariables: customVariables,
iconColor: iconColor,
shouldEnableKeyboardHighlighting: shouldEnableKeyboardHighlighting
}, children), /*#__PURE__*/React.createElement(GlobalStyle, null));
};
PageProvider.displayName = 'PageProvider';
export default PageProvider;
//# sourceMappingURL=PageProvider.js.map