@chayns-components/core 5.0.0-beta.1332 → 5.0.0-beta.1334
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/cjs/components/page-provider/PageProvider.js +17 -3
- package/lib/cjs/components/page-provider/PageProvider.js.map +1 -1
- package/lib/cjs/utils/pageProvider.js +7 -2
- package/lib/cjs/utils/pageProvider.js.map +1 -1
- package/lib/esm/components/page-provider/PageProvider.js +18 -3
- package/lib/esm/components/page-provider/PageProvider.js.map +1 -1
- package/lib/esm/utils/pageProvider.js +7 -2
- package/lib/esm/utils/pageProvider.js.map +1 -1
- package/lib/types/components/page-provider/PageProvider.d.ts +34 -2
- package/lib/types/utils/pageProvider.d.ts +5 -1
- package/package.json +2 -2
|
@@ -11,6 +11,17 @@ var _pageProvider = require("../../utils/pageProvider");
|
|
|
11
11
|
var _ColorSchemeProvider = _interopRequireDefault(require("../color-scheme-provider/ColorSchemeProvider"));
|
|
12
12
|
var _PageProvider = require("./PageProvider.styles");
|
|
13
13
|
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
|
14
|
+
/**
|
|
15
|
+
* Props for the PageProvider component.
|
|
16
|
+
* @description
|
|
17
|
+
* This interface defines the props that can be passed to the PageProvider component
|
|
18
|
+
* for controlling the layout and styling behavior.
|
|
19
|
+
* @example
|
|
20
|
+
* <PageProvider shouldRemovePadding={true}>
|
|
21
|
+
* {children}
|
|
22
|
+
* </PageProvider>
|
|
23
|
+
*/
|
|
24
|
+
|
|
14
25
|
const GlobalStyle = (0, _styledComponents.createGlobalStyle)`
|
|
15
26
|
*, *::before, *::after {
|
|
16
27
|
box-sizing: border-box;
|
|
@@ -23,15 +34,18 @@ const PageProvider = ({
|
|
|
23
34
|
secondaryColor,
|
|
24
35
|
siteId,
|
|
25
36
|
style = {},
|
|
26
|
-
|
|
27
|
-
|
|
37
|
+
shouldReduceUsableHeightByCoverHeight = false,
|
|
38
|
+
shouldRemovePadding = false,
|
|
39
|
+
shouldUseUsableHeight = false,
|
|
28
40
|
iconColor,
|
|
29
41
|
customVariables
|
|
30
42
|
}) => {
|
|
31
43
|
const {
|
|
32
44
|
runtimeEnvironment
|
|
33
45
|
} = (0, _chaynsApi.useEnvironment)();
|
|
34
|
-
const usableHeight = (0, _pageProvider.useUsableHeight)(
|
|
46
|
+
const usableHeight = (0, _pageProvider.useUsableHeight)({
|
|
47
|
+
shouldReduceByCoverHeight: shouldReduceUsableHeightByCoverHeight
|
|
48
|
+
});
|
|
35
49
|
const shouldUsePadding = !shouldRemovePadding && ![_chaynsApi.RuntimeEnviroment.IntercomPlugin, _chaynsApi.RuntimeEnviroment.PagemakerPlugin, 6].includes(runtimeEnvironment);
|
|
36
50
|
return /*#__PURE__*/_react.default.createElement(_PageProvider.StyledPageProvider, {
|
|
37
51
|
className: "page-provider",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PageProvider.js","names":["_chaynsApi","require","_react","_interopRequireDefault","_styledComponents","_pageProvider","_ColorSchemeProvider","_PageProvider","e","__esModule","default","GlobalStyle","createGlobalStyle","PageProvider","children","color","colorMode","secondaryColor","siteId","style","shouldRemovePadding","shouldUseUsableHeight","iconColor","customVariables","runtimeEnvironment","useEnvironment","usableHeight","useUsableHeight","shouldUsePadding","RuntimeEnviroment","IntercomPlugin","PagemakerPlugin","includes","createElement","StyledPageProvider","className","$shouldUsePadding","$usableHeight","undefined","height","displayName","_default","exports"],"sources":["../../../../src/components/page-provider/PageProvider.tsx"],"sourcesContent":["import { RuntimeEnviroment, useEnvironment } from 'chayns-api';\nimport React, { FC } from 'react';\nimport { createGlobalStyle } from 'styled-components';\nimport { useUsableHeight } from '../../utils/pageProvider';\nimport ColorSchemeProvider, {\n type ColorSchemeProviderProps,\n} from '../color-scheme-provider/ColorSchemeProvider';\nimport { StyledPageProvider } from './PageProvider.styles';\n\ninterface PageProviderProps extends ColorSchemeProviderProps {\n /**\n *
|
|
1
|
+
{"version":3,"file":"PageProvider.js","names":["_chaynsApi","require","_react","_interopRequireDefault","_styledComponents","_pageProvider","_ColorSchemeProvider","_PageProvider","e","__esModule","default","GlobalStyle","createGlobalStyle","PageProvider","children","color","colorMode","secondaryColor","siteId","style","shouldReduceUsableHeightByCoverHeight","shouldRemovePadding","shouldUseUsableHeight","iconColor","customVariables","runtimeEnvironment","useEnvironment","usableHeight","useUsableHeight","shouldReduceByCoverHeight","shouldUsePadding","RuntimeEnviroment","IntercomPlugin","PagemakerPlugin","includes","createElement","StyledPageProvider","className","$shouldUsePadding","$usableHeight","undefined","height","displayName","_default","exports"],"sources":["../../../../src/components/page-provider/PageProvider.tsx"],"sourcesContent":["import { RuntimeEnviroment, useEnvironment } from 'chayns-api';\nimport React, { FC } from 'react';\nimport { createGlobalStyle } from 'styled-components';\nimport { useUsableHeight } from '../../utils/pageProvider';\nimport ColorSchemeProvider, {\n type ColorSchemeProviderProps,\n} from '../color-scheme-provider/ColorSchemeProvider';\nimport { StyledPageProvider } from './PageProvider.styles';\n\n/**\n * Props for the PageProvider component.\n * @description\n * This interface defines the props that can be passed to the PageProvider component\n * for controlling the layout and styling behavior.\n * @example\n * <PageProvider shouldRemovePadding={true}>\n * {children}\n * </PageProvider>\n */\ninterface PageProviderProps extends ColorSchemeProviderProps {\n /**\n * Controls whether the usable height should be reduced by the cover height\n * @description\n * When true, the usable height will be reduced by the cover image height. This is useful\n * when the page should not be scrollable due to the cover image. The property has no effect\n * when `shouldUseUsableHeight` is false.\n * @default false\n * @optional\n */\n shouldReduceUsableHeightByCoverHeight?: boolean;\n /**\n * Controls whether padding should be removed from the page\n * @description\n * When true, the padding around the page content will be removed. This is useful when the\n * page should not have any padding, for example, when it is embedded in a pagemaker page.\n * @default false\n * @optional\n */\n shouldRemovePadding?: boolean;\n /**\n * Controls whether the component should use the calculated usable height\n * @description\n * When true, the page will cover the entire usable height of the screen. This means that\n * the viewport is not scrollable and the page takes up the full height not required by the\n * title or bottom bar. Optionally, the height of the cover image can be reduced by setting\n * `shouldReduceUsableHeightByCoverHeight` to true.\n * @default false\n * @optional\n */\n shouldUseUsableHeight?: boolean;\n}\n\nconst GlobalStyle = createGlobalStyle`\n *, *::before, *::after {\n box-sizing: border-box;\n }\n`;\n\nconst PageProvider: FC<PageProviderProps> = ({\n children,\n color,\n colorMode,\n secondaryColor,\n siteId,\n style = {},\n shouldReduceUsableHeightByCoverHeight = false,\n shouldRemovePadding = false,\n shouldUseUsableHeight = false,\n iconColor,\n customVariables,\n}) => {\n const { runtimeEnvironment } = useEnvironment();\n\n const usableHeight = useUsableHeight({\n shouldReduceByCoverHeight: shouldReduceUsableHeightByCoverHeight,\n });\n\n const shouldUsePadding =\n !shouldRemovePadding &&\n ![RuntimeEnviroment.IntercomPlugin, RuntimeEnviroment.PagemakerPlugin, 6].includes(\n runtimeEnvironment as number,\n );\n\n return (\n <StyledPageProvider\n className=\"page-provider\"\n $shouldUsePadding={shouldUsePadding}\n $usableHeight={shouldUseUsableHeight ? usableHeight : undefined}\n >\n <ColorSchemeProvider\n color={color}\n secondaryColor={secondaryColor}\n colorMode={colorMode}\n siteId={siteId}\n style={shouldUseUsableHeight ? { ...style, height: '100%' } : style}\n customVariables={customVariables}\n iconColor={iconColor}\n >\n {children}\n </ColorSchemeProvider>\n <GlobalStyle />\n </StyledPageProvider>\n );\n};\nPageProvider.displayName = 'PageProvider';\n\nexport default PageProvider;\n"],"mappings":";;;;;;AAAA,IAAAA,UAAA,GAAAC,OAAA;AACA,IAAAC,MAAA,GAAAC,sBAAA,CAAAF,OAAA;AACA,IAAAG,iBAAA,GAAAH,OAAA;AACA,IAAAI,aAAA,GAAAJ,OAAA;AACA,IAAAK,oBAAA,GAAAH,sBAAA,CAAAF,OAAA;AAGA,IAAAM,aAAA,GAAAN,OAAA;AAA2D,SAAAE,uBAAAK,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAE3D;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAkCA,MAAMG,WAAW,GAAG,IAAAC,mCAAiB;AACrC;AACA;AACA;AACA,CAAC;AAED,MAAMC,YAAmC,GAAGA,CAAC;EACzCC,QAAQ;EACRC,KAAK;EACLC,SAAS;EACTC,cAAc;EACdC,MAAM;EACNC,KAAK,GAAG,CAAC,CAAC;EACVC,qCAAqC,GAAG,KAAK;EAC7CC,mBAAmB,GAAG,KAAK;EAC3BC,qBAAqB,GAAG,KAAK;EAC7BC,SAAS;EACTC;AACJ,CAAC,KAAK;EACF,MAAM;IAAEC;EAAmB,CAAC,GAAG,IAAAC,yBAAc,EAAC,CAAC;EAE/C,MAAMC,YAAY,GAAG,IAAAC,6BAAe,EAAC;IACjCC,yBAAyB,EAAET;EAC/B,CAAC,CAAC;EAEF,MAAMU,gBAAgB,GAClB,CAACT,mBAAmB,IACpB,CAAC,CAACU,4BAAiB,CAACC,cAAc,EAAED,4BAAiB,CAACE,eAAe,EAAE,CAAC,CAAC,CAACC,QAAQ,CAC9ET,kBACJ,CAAC;EAEL,oBACIvB,MAAA,CAAAQ,OAAA,CAAAyB,aAAA,CAAC5B,aAAA,CAAA6B,kBAAkB;IACfC,SAAS,EAAC,eAAe;IACzBC,iBAAiB,EAAER,gBAAiB;IACpCS,aAAa,EAAEjB,qBAAqB,GAAGK,YAAY,GAAGa;EAAU,gBAEhEtC,MAAA,CAAAQ,OAAA,CAAAyB,aAAA,CAAC7B,oBAAA,CAAAI,OAAmB;IAChBK,KAAK,EAAEA,KAAM;IACbE,cAAc,EAAEA,cAAe;IAC/BD,SAAS,EAAEA,SAAU;IACrBE,MAAM,EAAEA,MAAO;IACfC,KAAK,EAAEG,qBAAqB,GAAG;MAAE,GAAGH,KAAK;MAAEsB,MAAM,EAAE;IAAO,CAAC,GAAGtB,KAAM;IACpEK,eAAe,EAAEA,eAAgB;IACjCD,SAAS,EAAEA;EAAU,GAEpBT,QACgB,CAAC,eACtBZ,MAAA,CAAAQ,OAAA,CAAAyB,aAAA,CAACxB,WAAW,MAAE,CACE,CAAC;AAE7B,CAAC;AACDE,YAAY,CAAC6B,WAAW,GAAG,cAAc;AAAC,IAAAC,QAAA,GAAAC,OAAA,CAAAlC,OAAA,GAE3BG,YAAY","ignoreList":[]}
|
|
@@ -22,18 +22,23 @@ const getUsableHeight = async () => {
|
|
|
22
22
|
return usableHeight;
|
|
23
23
|
};
|
|
24
24
|
exports.getUsableHeight = getUsableHeight;
|
|
25
|
-
const useUsableHeight = (
|
|
25
|
+
const useUsableHeight = ({
|
|
26
|
+
shouldReduceByCoverHeight
|
|
27
|
+
} = {}) => {
|
|
26
28
|
let usableHeight;
|
|
27
29
|
const {
|
|
28
30
|
bottomBarHeight,
|
|
29
31
|
offsetTop,
|
|
32
|
+
topBarHeight,
|
|
30
33
|
windowHeight
|
|
31
34
|
} = (0, _chaynsApi.useWindowMetrics)();
|
|
32
35
|
usableHeight = windowHeight;
|
|
33
36
|
if (bottomBarHeight) {
|
|
34
37
|
usableHeight -= bottomBarHeight;
|
|
35
38
|
}
|
|
36
|
-
if (
|
|
39
|
+
if (!shouldReduceByCoverHeight && topBarHeight) {
|
|
40
|
+
usableHeight -= topBarHeight;
|
|
41
|
+
} else if (shouldReduceByCoverHeight && offsetTop) {
|
|
37
42
|
usableHeight -= offsetTop;
|
|
38
43
|
}
|
|
39
44
|
return usableHeight;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"pageProvider.js","names":["_chaynsApi","require","getUsableHeight","usableHeight","bottomBarHeight","offsetTop","windowHeight","getWindowMetrics","exports","useUsableHeight","useWindowMetrics"],"sources":["../../../src/utils/pageProvider.ts"],"sourcesContent":["import { getWindowMetrics, useWindowMetrics } from 'chayns-api';\n\nexport const getUsableHeight = async () => {\n let usableHeight;\n\n const { bottomBarHeight, offsetTop, windowHeight } = await getWindowMetrics();\n\n usableHeight = windowHeight;\n\n if (bottomBarHeight) {\n usableHeight -= bottomBarHeight;\n }\n\n if (offsetTop) {\n usableHeight -= offsetTop;\n }\n\n return usableHeight;\n};\n\nexport const useUsableHeight = () => {\n let usableHeight;\n\n const { bottomBarHeight, offsetTop, windowHeight } = useWindowMetrics();\n usableHeight = windowHeight;\n\n if (bottomBarHeight) {\n usableHeight -= bottomBarHeight;\n }\n\n if (offsetTop) {\n usableHeight -= offsetTop;\n }\n\n return usableHeight;\n};\n"],"mappings":";;;;;;AAAA,IAAAA,UAAA,GAAAC,OAAA;AAEO,MAAMC,eAAe,GAAG,MAAAA,CAAA,KAAY;EACvC,IAAIC,YAAY;EAEhB,MAAM;IAAEC,eAAe;IAAEC,SAAS;IAAEC;EAAa,CAAC,GAAG,MAAM,IAAAC,2BAAgB,EAAC,CAAC;EAE7EJ,YAAY,GAAGG,YAAY;EAE3B,IAAIF,eAAe,EAAE;IACjBD,YAAY,IAAIC,eAAe;EACnC;EAEA,IAAIC,SAAS,EAAE;IACXF,YAAY,IAAIE,SAAS;EAC7B;EAEA,OAAOF,YAAY;AACvB,CAAC;AAACK,OAAA,CAAAN,eAAA,GAAAA,eAAA;
|
|
1
|
+
{"version":3,"file":"pageProvider.js","names":["_chaynsApi","require","getUsableHeight","usableHeight","bottomBarHeight","offsetTop","windowHeight","getWindowMetrics","exports","useUsableHeight","shouldReduceByCoverHeight","topBarHeight","useWindowMetrics"],"sources":["../../../src/utils/pageProvider.ts"],"sourcesContent":["import { getWindowMetrics, useWindowMetrics } from 'chayns-api';\n\nexport const getUsableHeight = async () => {\n let usableHeight;\n\n const { bottomBarHeight, offsetTop, windowHeight } = await getWindowMetrics();\n\n usableHeight = windowHeight;\n\n if (bottomBarHeight) {\n usableHeight -= bottomBarHeight;\n }\n\n if (offsetTop) {\n usableHeight -= offsetTop;\n }\n\n return usableHeight;\n};\n\ninterface UseUsableHeightOptions {\n shouldReduceByCoverHeight?: boolean;\n}\n\nexport const useUsableHeight = ({ shouldReduceByCoverHeight }: UseUsableHeightOptions = {}) => {\n let usableHeight;\n\n const { bottomBarHeight, offsetTop, topBarHeight, windowHeight } = useWindowMetrics();\n\n usableHeight = windowHeight;\n\n if (bottomBarHeight) {\n usableHeight -= bottomBarHeight;\n }\n\n if (!shouldReduceByCoverHeight && topBarHeight) {\n usableHeight -= topBarHeight;\n } else if (shouldReduceByCoverHeight && offsetTop) {\n usableHeight -= offsetTop;\n }\n\n return usableHeight;\n};\n"],"mappings":";;;;;;AAAA,IAAAA,UAAA,GAAAC,OAAA;AAEO,MAAMC,eAAe,GAAG,MAAAA,CAAA,KAAY;EACvC,IAAIC,YAAY;EAEhB,MAAM;IAAEC,eAAe;IAAEC,SAAS;IAAEC;EAAa,CAAC,GAAG,MAAM,IAAAC,2BAAgB,EAAC,CAAC;EAE7EJ,YAAY,GAAGG,YAAY;EAE3B,IAAIF,eAAe,EAAE;IACjBD,YAAY,IAAIC,eAAe;EACnC;EAEA,IAAIC,SAAS,EAAE;IACXF,YAAY,IAAIE,SAAS;EAC7B;EAEA,OAAOF,YAAY;AACvB,CAAC;AAACK,OAAA,CAAAN,eAAA,GAAAA,eAAA;AAMK,MAAMO,eAAe,GAAGA,CAAC;EAAEC;AAAkD,CAAC,GAAG,CAAC,CAAC,KAAK;EAC3F,IAAIP,YAAY;EAEhB,MAAM;IAAEC,eAAe;IAAEC,SAAS;IAAEM,YAAY;IAAEL;EAAa,CAAC,GAAG,IAAAM,2BAAgB,EAAC,CAAC;EAErFT,YAAY,GAAGG,YAAY;EAE3B,IAAIF,eAAe,EAAE;IACjBD,YAAY,IAAIC,eAAe;EACnC;EAEA,IAAI,CAACM,yBAAyB,IAAIC,YAAY,EAAE;IAC5CR,YAAY,IAAIQ,YAAY;EAChC,CAAC,MAAM,IAAID,yBAAyB,IAAIL,SAAS,EAAE;IAC/CF,YAAY,IAAIE,SAAS;EAC7B;EAEA,OAAOF,YAAY;AACvB,CAAC;AAACK,OAAA,CAAAC,eAAA,GAAAA,eAAA","ignoreList":[]}
|
|
@@ -4,6 +4,18 @@ import { createGlobalStyle } from 'styled-components';
|
|
|
4
4
|
import { useUsableHeight } from '../../utils/pageProvider';
|
|
5
5
|
import ColorSchemeProvider from '../color-scheme-provider/ColorSchemeProvider';
|
|
6
6
|
import { StyledPageProvider } from './PageProvider.styles';
|
|
7
|
+
|
|
8
|
+
/**
|
|
9
|
+
* Props for the PageProvider component.
|
|
10
|
+
* @description
|
|
11
|
+
* This interface defines the props that can be passed to the PageProvider component
|
|
12
|
+
* for controlling the layout and styling behavior.
|
|
13
|
+
* @example
|
|
14
|
+
* <PageProvider shouldRemovePadding={true}>
|
|
15
|
+
* {children}
|
|
16
|
+
* </PageProvider>
|
|
17
|
+
*/
|
|
18
|
+
|
|
7
19
|
const GlobalStyle = createGlobalStyle`
|
|
8
20
|
*, *::before, *::after {
|
|
9
21
|
box-sizing: border-box;
|
|
@@ -16,15 +28,18 @@ const PageProvider = ({
|
|
|
16
28
|
secondaryColor,
|
|
17
29
|
siteId,
|
|
18
30
|
style = {},
|
|
19
|
-
|
|
20
|
-
|
|
31
|
+
shouldReduceUsableHeightByCoverHeight = false,
|
|
32
|
+
shouldRemovePadding = false,
|
|
33
|
+
shouldUseUsableHeight = false,
|
|
21
34
|
iconColor,
|
|
22
35
|
customVariables
|
|
23
36
|
}) => {
|
|
24
37
|
const {
|
|
25
38
|
runtimeEnvironment
|
|
26
39
|
} = useEnvironment();
|
|
27
|
-
const usableHeight = useUsableHeight(
|
|
40
|
+
const usableHeight = useUsableHeight({
|
|
41
|
+
shouldReduceByCoverHeight: shouldReduceUsableHeightByCoverHeight
|
|
42
|
+
});
|
|
28
43
|
const shouldUsePadding = !shouldRemovePadding && ![RuntimeEnviroment.IntercomPlugin, RuntimeEnviroment.PagemakerPlugin, 6].includes(runtimeEnvironment);
|
|
29
44
|
return /*#__PURE__*/React.createElement(StyledPageProvider, {
|
|
30
45
|
className: "page-provider",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PageProvider.js","names":["RuntimeEnviroment","useEnvironment","React","createGlobalStyle","useUsableHeight","ColorSchemeProvider","StyledPageProvider","GlobalStyle","PageProvider","children","color","colorMode","secondaryColor","siteId","style","shouldRemovePadding","shouldUseUsableHeight","iconColor","customVariables","runtimeEnvironment","usableHeight","shouldUsePadding","IntercomPlugin","PagemakerPlugin","includes","createElement","className","$shouldUsePadding","$usableHeight","undefined","height","displayName"],"sources":["../../../../src/components/page-provider/PageProvider.tsx"],"sourcesContent":["import { RuntimeEnviroment, useEnvironment } from 'chayns-api';\nimport React, { FC } from 'react';\nimport { createGlobalStyle } from 'styled-components';\nimport { useUsableHeight } from '../../utils/pageProvider';\nimport ColorSchemeProvider, {\n type ColorSchemeProviderProps,\n} from '../color-scheme-provider/ColorSchemeProvider';\nimport { StyledPageProvider } from './PageProvider.styles';\n\ninterface PageProviderProps extends ColorSchemeProviderProps {\n /**\n *
|
|
1
|
+
{"version":3,"file":"PageProvider.js","names":["RuntimeEnviroment","useEnvironment","React","createGlobalStyle","useUsableHeight","ColorSchemeProvider","StyledPageProvider","GlobalStyle","PageProvider","children","color","colorMode","secondaryColor","siteId","style","shouldReduceUsableHeightByCoverHeight","shouldRemovePadding","shouldUseUsableHeight","iconColor","customVariables","runtimeEnvironment","usableHeight","shouldReduceByCoverHeight","shouldUsePadding","IntercomPlugin","PagemakerPlugin","includes","createElement","className","$shouldUsePadding","$usableHeight","undefined","height","displayName"],"sources":["../../../../src/components/page-provider/PageProvider.tsx"],"sourcesContent":["import { RuntimeEnviroment, useEnvironment } from 'chayns-api';\nimport React, { FC } from 'react';\nimport { createGlobalStyle } from 'styled-components';\nimport { useUsableHeight } from '../../utils/pageProvider';\nimport ColorSchemeProvider, {\n type ColorSchemeProviderProps,\n} from '../color-scheme-provider/ColorSchemeProvider';\nimport { StyledPageProvider } from './PageProvider.styles';\n\n/**\n * Props for the PageProvider component.\n * @description\n * This interface defines the props that can be passed to the PageProvider component\n * for controlling the layout and styling behavior.\n * @example\n * <PageProvider shouldRemovePadding={true}>\n * {children}\n * </PageProvider>\n */\ninterface PageProviderProps extends ColorSchemeProviderProps {\n /**\n * Controls whether the usable height should be reduced by the cover height\n * @description\n * When true, the usable height will be reduced by the cover image height. This is useful\n * when the page should not be scrollable due to the cover image. The property has no effect\n * when `shouldUseUsableHeight` is false.\n * @default false\n * @optional\n */\n shouldReduceUsableHeightByCoverHeight?: boolean;\n /**\n * Controls whether padding should be removed from the page\n * @description\n * When true, the padding around the page content will be removed. This is useful when the\n * page should not have any padding, for example, when it is embedded in a pagemaker page.\n * @default false\n * @optional\n */\n shouldRemovePadding?: boolean;\n /**\n * Controls whether the component should use the calculated usable height\n * @description\n * When true, the page will cover the entire usable height of the screen. This means that\n * the viewport is not scrollable and the page takes up the full height not required by the\n * title or bottom bar. Optionally, the height of the cover image can be reduced by setting\n * `shouldReduceUsableHeightByCoverHeight` to true.\n * @default false\n * @optional\n */\n shouldUseUsableHeight?: boolean;\n}\n\nconst GlobalStyle = createGlobalStyle`\n *, *::before, *::after {\n box-sizing: border-box;\n }\n`;\n\nconst PageProvider: FC<PageProviderProps> = ({\n children,\n color,\n colorMode,\n secondaryColor,\n siteId,\n style = {},\n shouldReduceUsableHeightByCoverHeight = false,\n shouldRemovePadding = false,\n shouldUseUsableHeight = false,\n iconColor,\n customVariables,\n}) => {\n const { runtimeEnvironment } = useEnvironment();\n\n const usableHeight = useUsableHeight({\n shouldReduceByCoverHeight: shouldReduceUsableHeightByCoverHeight,\n });\n\n const shouldUsePadding =\n !shouldRemovePadding &&\n ![RuntimeEnviroment.IntercomPlugin, RuntimeEnviroment.PagemakerPlugin, 6].includes(\n runtimeEnvironment as number,\n );\n\n return (\n <StyledPageProvider\n className=\"page-provider\"\n $shouldUsePadding={shouldUsePadding}\n $usableHeight={shouldUseUsableHeight ? usableHeight : undefined}\n >\n <ColorSchemeProvider\n color={color}\n secondaryColor={secondaryColor}\n colorMode={colorMode}\n siteId={siteId}\n style={shouldUseUsableHeight ? { ...style, height: '100%' } : style}\n customVariables={customVariables}\n iconColor={iconColor}\n >\n {children}\n </ColorSchemeProvider>\n <GlobalStyle />\n </StyledPageProvider>\n );\n};\nPageProvider.displayName = 'PageProvider';\n\nexport default PageProvider;\n"],"mappings":"AAAA,SAASA,iBAAiB,EAAEC,cAAc,QAAQ,YAAY;AAC9D,OAAOC,KAAK,MAAc,OAAO;AACjC,SAASC,iBAAiB,QAAQ,mBAAmB;AACrD,SAASC,eAAe,QAAQ,0BAA0B;AAC1D,OAAOC,mBAAmB,MAEnB,8CAA8C;AACrD,SAASC,kBAAkB,QAAQ,uBAAuB;;AAE1D;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAkCA,MAAMC,WAAW,GAAGJ,iBAAiB;AACrC;AACA;AACA;AACA,CAAC;AAED,MAAMK,YAAmC,GAAGA,CAAC;EACzCC,QAAQ;EACRC,KAAK;EACLC,SAAS;EACTC,cAAc;EACdC,MAAM;EACNC,KAAK,GAAG,CAAC,CAAC;EACVC,qCAAqC,GAAG,KAAK;EAC7CC,mBAAmB,GAAG,KAAK;EAC3BC,qBAAqB,GAAG,KAAK;EAC7BC,SAAS;EACTC;AACJ,CAAC,KAAK;EACF,MAAM;IAAEC;EAAmB,CAAC,GAAGnB,cAAc,CAAC,CAAC;EAE/C,MAAMoB,YAAY,GAAGjB,eAAe,CAAC;IACjCkB,yBAAyB,EAAEP;EAC/B,CAAC,CAAC;EAEF,MAAMQ,gBAAgB,GAClB,CAACP,mBAAmB,IACpB,CAAC,CAAChB,iBAAiB,CAACwB,cAAc,EAAExB,iBAAiB,CAACyB,eAAe,EAAE,CAAC,CAAC,CAACC,QAAQ,CAC9EN,kBACJ,CAAC;EAEL,oBACIlB,KAAA,CAAAyB,aAAA,CAACrB,kBAAkB;IACfsB,SAAS,EAAC,eAAe;IACzBC,iBAAiB,EAAEN,gBAAiB;IACpCO,aAAa,EAAEb,qBAAqB,GAAGI,YAAY,GAAGU;EAAU,gBAEhE7B,KAAA,CAAAyB,aAAA,CAACtB,mBAAmB;IAChBK,KAAK,EAAEA,KAAM;IACbE,cAAc,EAAEA,cAAe;IAC/BD,SAAS,EAAEA,SAAU;IACrBE,MAAM,EAAEA,MAAO;IACfC,KAAK,EAAEG,qBAAqB,GAAG;MAAE,GAAGH,KAAK;MAAEkB,MAAM,EAAE;IAAO,CAAC,GAAGlB,KAAM;IACpEK,eAAe,EAAEA,eAAgB;IACjCD,SAAS,EAAEA;EAAU,GAEpBT,QACgB,CAAC,eACtBP,KAAA,CAAAyB,aAAA,CAACpB,WAAW,MAAE,CACE,CAAC;AAE7B,CAAC;AACDC,YAAY,CAACyB,WAAW,GAAG,cAAc;AAEzC,eAAezB,YAAY","ignoreList":[]}
|
|
@@ -15,18 +15,23 @@ export const getUsableHeight = async () => {
|
|
|
15
15
|
}
|
|
16
16
|
return usableHeight;
|
|
17
17
|
};
|
|
18
|
-
export const useUsableHeight = (
|
|
18
|
+
export const useUsableHeight = ({
|
|
19
|
+
shouldReduceByCoverHeight
|
|
20
|
+
} = {}) => {
|
|
19
21
|
let usableHeight;
|
|
20
22
|
const {
|
|
21
23
|
bottomBarHeight,
|
|
22
24
|
offsetTop,
|
|
25
|
+
topBarHeight,
|
|
23
26
|
windowHeight
|
|
24
27
|
} = useWindowMetrics();
|
|
25
28
|
usableHeight = windowHeight;
|
|
26
29
|
if (bottomBarHeight) {
|
|
27
30
|
usableHeight -= bottomBarHeight;
|
|
28
31
|
}
|
|
29
|
-
if (
|
|
32
|
+
if (!shouldReduceByCoverHeight && topBarHeight) {
|
|
33
|
+
usableHeight -= topBarHeight;
|
|
34
|
+
} else if (shouldReduceByCoverHeight && offsetTop) {
|
|
30
35
|
usableHeight -= offsetTop;
|
|
31
36
|
}
|
|
32
37
|
return usableHeight;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"pageProvider.js","names":["getWindowMetrics","useWindowMetrics","getUsableHeight","usableHeight","bottomBarHeight","offsetTop","windowHeight","useUsableHeight"],"sources":["../../../src/utils/pageProvider.ts"],"sourcesContent":["import { getWindowMetrics, useWindowMetrics } from 'chayns-api';\n\nexport const getUsableHeight = async () => {\n let usableHeight;\n\n const { bottomBarHeight, offsetTop, windowHeight } = await getWindowMetrics();\n\n usableHeight = windowHeight;\n\n if (bottomBarHeight) {\n usableHeight -= bottomBarHeight;\n }\n\n if (offsetTop) {\n usableHeight -= offsetTop;\n }\n\n return usableHeight;\n};\n\nexport const useUsableHeight = () => {\n let usableHeight;\n\n const { bottomBarHeight, offsetTop, windowHeight } = useWindowMetrics();\n usableHeight = windowHeight;\n\n if (bottomBarHeight) {\n usableHeight -= bottomBarHeight;\n }\n\n if (offsetTop) {\n usableHeight -= offsetTop;\n }\n\n return usableHeight;\n};\n"],"mappings":"AAAA,SAASA,gBAAgB,EAAEC,gBAAgB,QAAQ,YAAY;AAE/D,OAAO,MAAMC,eAAe,GAAG,MAAAA,CAAA,KAAY;EACvC,IAAIC,YAAY;EAEhB,MAAM;IAAEC,eAAe;IAAEC,SAAS;IAAEC;EAAa,CAAC,GAAG,MAAMN,gBAAgB,CAAC,CAAC;EAE7EG,YAAY,GAAGG,YAAY;EAE3B,IAAIF,eAAe,EAAE;IACjBD,YAAY,IAAIC,eAAe;EACnC;EAEA,IAAIC,SAAS,EAAE;IACXF,YAAY,IAAIE,SAAS;EAC7B;EAEA,OAAOF,YAAY;AACvB,CAAC;
|
|
1
|
+
{"version":3,"file":"pageProvider.js","names":["getWindowMetrics","useWindowMetrics","getUsableHeight","usableHeight","bottomBarHeight","offsetTop","windowHeight","useUsableHeight","shouldReduceByCoverHeight","topBarHeight"],"sources":["../../../src/utils/pageProvider.ts"],"sourcesContent":["import { getWindowMetrics, useWindowMetrics } from 'chayns-api';\n\nexport const getUsableHeight = async () => {\n let usableHeight;\n\n const { bottomBarHeight, offsetTop, windowHeight } = await getWindowMetrics();\n\n usableHeight = windowHeight;\n\n if (bottomBarHeight) {\n usableHeight -= bottomBarHeight;\n }\n\n if (offsetTop) {\n usableHeight -= offsetTop;\n }\n\n return usableHeight;\n};\n\ninterface UseUsableHeightOptions {\n shouldReduceByCoverHeight?: boolean;\n}\n\nexport const useUsableHeight = ({ shouldReduceByCoverHeight }: UseUsableHeightOptions = {}) => {\n let usableHeight;\n\n const { bottomBarHeight, offsetTop, topBarHeight, windowHeight } = useWindowMetrics();\n\n usableHeight = windowHeight;\n\n if (bottomBarHeight) {\n usableHeight -= bottomBarHeight;\n }\n\n if (!shouldReduceByCoverHeight && topBarHeight) {\n usableHeight -= topBarHeight;\n } else if (shouldReduceByCoverHeight && offsetTop) {\n usableHeight -= offsetTop;\n }\n\n return usableHeight;\n};\n"],"mappings":"AAAA,SAASA,gBAAgB,EAAEC,gBAAgB,QAAQ,YAAY;AAE/D,OAAO,MAAMC,eAAe,GAAG,MAAAA,CAAA,KAAY;EACvC,IAAIC,YAAY;EAEhB,MAAM;IAAEC,eAAe;IAAEC,SAAS;IAAEC;EAAa,CAAC,GAAG,MAAMN,gBAAgB,CAAC,CAAC;EAE7EG,YAAY,GAAGG,YAAY;EAE3B,IAAIF,eAAe,EAAE;IACjBD,YAAY,IAAIC,eAAe;EACnC;EAEA,IAAIC,SAAS,EAAE;IACXF,YAAY,IAAIE,SAAS;EAC7B;EAEA,OAAOF,YAAY;AACvB,CAAC;AAMD,OAAO,MAAMI,eAAe,GAAGA,CAAC;EAAEC;AAAkD,CAAC,GAAG,CAAC,CAAC,KAAK;EAC3F,IAAIL,YAAY;EAEhB,MAAM;IAAEC,eAAe;IAAEC,SAAS;IAAEI,YAAY;IAAEH;EAAa,CAAC,GAAGL,gBAAgB,CAAC,CAAC;EAErFE,YAAY,GAAGG,YAAY;EAE3B,IAAIF,eAAe,EAAE;IACjBD,YAAY,IAAIC,eAAe;EACnC;EAEA,IAAI,CAACI,yBAAyB,IAAIC,YAAY,EAAE;IAC5CN,YAAY,IAAIM,YAAY;EAChC,CAAC,MAAM,IAAID,yBAAyB,IAAIH,SAAS,EAAE;IAC/CF,YAAY,IAAIE,SAAS;EAC7B;EAEA,OAAOF,YAAY;AACvB,CAAC","ignoreList":[]}
|
|
@@ -1,12 +1,44 @@
|
|
|
1
1
|
import { FC } from 'react';
|
|
2
2
|
import { type ColorSchemeProviderProps } from '../color-scheme-provider/ColorSchemeProvider';
|
|
3
|
+
/**
|
|
4
|
+
* Props for the PageProvider component.
|
|
5
|
+
* @description
|
|
6
|
+
* This interface defines the props that can be passed to the PageProvider component
|
|
7
|
+
* for controlling the layout and styling behavior.
|
|
8
|
+
* @example
|
|
9
|
+
* <PageProvider shouldRemovePadding={true}>
|
|
10
|
+
* {children}
|
|
11
|
+
* </PageProvider>
|
|
12
|
+
*/
|
|
3
13
|
interface PageProviderProps extends ColorSchemeProviderProps {
|
|
4
14
|
/**
|
|
5
|
-
*
|
|
15
|
+
* Controls whether the usable height should be reduced by the cover height
|
|
16
|
+
* @description
|
|
17
|
+
* When true, the usable height will be reduced by the cover image height. This is useful
|
|
18
|
+
* when the page should not be scrollable due to the cover image. The property has no effect
|
|
19
|
+
* when `shouldUseUsableHeight` is false.
|
|
20
|
+
* @default false
|
|
21
|
+
* @optional
|
|
22
|
+
*/
|
|
23
|
+
shouldReduceUsableHeightByCoverHeight?: boolean;
|
|
24
|
+
/**
|
|
25
|
+
* Controls whether padding should be removed from the page
|
|
26
|
+
* @description
|
|
27
|
+
* When true, the padding around the page content will be removed. This is useful when the
|
|
28
|
+
* page should not have any padding, for example, when it is embedded in a pagemaker page.
|
|
29
|
+
* @default false
|
|
30
|
+
* @optional
|
|
6
31
|
*/
|
|
7
32
|
shouldRemovePadding?: boolean;
|
|
8
33
|
/**
|
|
9
|
-
*
|
|
34
|
+
* Controls whether the component should use the calculated usable height
|
|
35
|
+
* @description
|
|
36
|
+
* When true, the page will cover the entire usable height of the screen. This means that
|
|
37
|
+
* the viewport is not scrollable and the page takes up the full height not required by the
|
|
38
|
+
* title or bottom bar. Optionally, the height of the cover image can be reduced by setting
|
|
39
|
+
* `shouldReduceUsableHeightByCoverHeight` to true.
|
|
40
|
+
* @default false
|
|
41
|
+
* @optional
|
|
10
42
|
*/
|
|
11
43
|
shouldUseUsableHeight?: boolean;
|
|
12
44
|
}
|
|
@@ -1,2 +1,6 @@
|
|
|
1
1
|
export declare const getUsableHeight: () => Promise<number>;
|
|
2
|
-
|
|
2
|
+
interface UseUsableHeightOptions {
|
|
3
|
+
shouldReduceByCoverHeight?: boolean;
|
|
4
|
+
}
|
|
5
|
+
export declare const useUsableHeight: ({ shouldReduceByCoverHeight }?: UseUsableHeightOptions) => number;
|
|
6
|
+
export {};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@chayns-components/core",
|
|
3
|
-
"version": "5.0.0-beta.
|
|
3
|
+
"version": "5.0.0-beta.1334",
|
|
4
4
|
"description": "A set of beautiful React components for developing your own applications with chayns.",
|
|
5
5
|
"sideEffects": false,
|
|
6
6
|
"browserslist": [
|
|
@@ -86,5 +86,5 @@
|
|
|
86
86
|
"publishConfig": {
|
|
87
87
|
"access": "public"
|
|
88
88
|
},
|
|
89
|
-
"gitHead": "
|
|
89
|
+
"gitHead": "26e07bda3890a08706d8792fba0ef1467bf7cfc8"
|
|
90
90
|
}
|