@chayns-components/core
Version:
A set of beautiful React components for developing your own applications with chayns.
71 lines (69 loc) • 2.5 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _chaynsApi = require("chayns-api");
var _react = _interopRequireDefault(require("react"));
var _styledComponents = require("styled-components");
var _pageProvider = require("../../utils/pageProvider");
var _ColorSchemeProvider = _interopRequireDefault(require("../color-scheme-provider/ColorSchemeProvider"));
var _PageProvider = require("./PageProvider.styles");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
/**
* 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 = (0, _styledComponents.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
} = (0, _chaynsApi.useEnvironment)();
const usableHeight = (0, _pageProvider.useUsableHeight)({
shouldReduceByCoverHeight: shouldReduceUsableHeightByCoverHeight
});
const shouldUsePadding = !shouldRemovePadding && ![_chaynsApi.RuntimeEnviroment.IntercomPlugin, _chaynsApi.RuntimeEnviroment.PagemakerPlugin, 6, 8].includes(runtimeEnvironment);
return /*#__PURE__*/_react.default.createElement(_PageProvider.StyledPageProvider, {
className: "page-provider",
$shouldUsePadding: shouldUsePadding,
$usableHeight: shouldUseUsableHeight ? usableHeight : undefined
}, /*#__PURE__*/_react.default.createElement(_ColorSchemeProvider.default, {
color: color,
secondaryColor: secondaryColor,
colorMode: colorMode,
siteId: siteId,
style: shouldUseUsableHeight ? {
...style,
height: '100%'
} : style,
customVariables: customVariables,
iconColor: iconColor,
shouldEnableKeyboardHighlighting: shouldEnableKeyboardHighlighting
}, children), /*#__PURE__*/_react.default.createElement(GlobalStyle, null));
};
PageProvider.displayName = 'PageProvider';
var _default = exports.default = PageProvider;
//# sourceMappingURL=PageProvider.js.map