@chayns-components/core 5.0.0-beta.918 → 5.0.0-beta.920
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 +11 -11
- package/lib/cjs/components/page-provider/PageProvider.js.map +1 -1
- package/lib/cjs/utils/pageProvider.js +9 -6
- package/lib/cjs/utils/pageProvider.js.map +1 -1
- package/lib/esm/components/page-provider/PageProvider.js +11 -11
- package/lib/esm/components/page-provider/PageProvider.js.map +1 -1
- package/lib/esm/utils/pageProvider.js +9 -6
- package/lib/esm/utils/pageProvider.js.map +1 -1
- package/lib/types/utils/pageProvider.d.ts +1 -1
- package/package.json +2 -2
|
@@ -30,33 +30,33 @@ const PageProvider = ({
|
|
|
30
30
|
shouldUseUsableHeight
|
|
31
31
|
}) => {
|
|
32
32
|
const [usableHeight, setUsableHeight] = (0, _react.useState)(0);
|
|
33
|
-
const [padding, setPadding] = (0, _react.useState)();
|
|
33
|
+
const [padding, setPadding] = (0, _react.useState)(shouldRemovePadding ? 0 : (0, _pageProvider.getPagePadding)());
|
|
34
34
|
(0, _react.useEffect)(() => {
|
|
35
|
-
|
|
36
|
-
const height = await (0, _pageProvider.getUsableHeight)();
|
|
35
|
+
void (0, _pageProvider.getUsableHeight)(shouldRemovePadding).then(height => {
|
|
37
36
|
setUsableHeight(height);
|
|
38
|
-
};
|
|
39
|
-
|
|
40
|
-
}, []);
|
|
37
|
+
});
|
|
38
|
+
}, [shouldRemovePadding]);
|
|
41
39
|
(0, _react.useEffect)(() => {
|
|
42
40
|
const handleResize = () => {
|
|
43
|
-
setPadding((0, _pageProvider.getPagePadding)());
|
|
41
|
+
setPadding(shouldRemovePadding ? 0 : (0, _pageProvider.getPagePadding)());
|
|
44
42
|
};
|
|
45
|
-
setPadding((0, _pageProvider.getPagePadding)());
|
|
46
43
|
window.addEventListener('resize', handleResize);
|
|
47
44
|
return () => {
|
|
48
45
|
window.removeEventListener('resize', handleResize);
|
|
49
46
|
};
|
|
50
|
-
}, [
|
|
47
|
+
}, [shouldRemovePadding]);
|
|
51
48
|
return /*#__PURE__*/_react.default.createElement(_PageProvider.StyledPageProvider, {
|
|
52
49
|
className: "page-provider",
|
|
53
|
-
$padding:
|
|
50
|
+
$padding: padding,
|
|
54
51
|
$usableHeight: shouldUseUsableHeight ? usableHeight : undefined
|
|
55
52
|
}, /*#__PURE__*/_react.default.createElement(_ColorSchemeProvider.default, {
|
|
56
53
|
color: color,
|
|
57
54
|
secondaryColor: secondaryColor,
|
|
58
55
|
colorMode: colorMode,
|
|
59
|
-
style:
|
|
56
|
+
style: shouldUseUsableHeight ? {
|
|
57
|
+
...style,
|
|
58
|
+
height: '100%'
|
|
59
|
+
} : style,
|
|
60
60
|
siteId: siteId,
|
|
61
61
|
designSettings: designSettings,
|
|
62
62
|
cssVariables: cssVariables
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PageProvider.js","names":["_react","_interopRequireWildcard","require","_styledComponents","_pageProvider","_ColorSchemeProvider","_interopRequireDefault","_PageProvider","e","__esModule","default","_getRequireWildcardCache","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","GlobalStyle","createGlobalStyle","PageProvider","children","color","colorMode","cssVariables","secondaryColor","siteId","style","designSettings","shouldRemovePadding","shouldUseUsableHeight","usableHeight","setUsableHeight","useState","padding","setPadding","
|
|
1
|
+
{"version":3,"file":"PageProvider.js","names":["_react","_interopRequireWildcard","require","_styledComponents","_pageProvider","_ColorSchemeProvider","_interopRequireDefault","_PageProvider","e","__esModule","default","_getRequireWildcardCache","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","GlobalStyle","createGlobalStyle","PageProvider","children","color","colorMode","cssVariables","secondaryColor","siteId","style","designSettings","shouldRemovePadding","shouldUseUsableHeight","usableHeight","setUsableHeight","useState","padding","setPadding","getPagePadding","useEffect","getUsableHeight","then","height","handleResize","window","addEventListener","removeEventListener","createElement","StyledPageProvider","className","$padding","$usableHeight","undefined","displayName","_default","exports"],"sources":["../../../../src/components/page-provider/PageProvider.tsx"],"sourcesContent":["import React, { FC, useEffect, useState, type CSSProperties } from 'react';\nimport { createGlobalStyle } from 'styled-components';\nimport { getPagePadding, getUsableHeight } 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 * Whether the padding should be removed.\n */\n shouldRemovePadding?: boolean;\n /**\n * Whether the usable height should be used.\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 cssVariables = {},\n secondaryColor,\n siteId,\n style = {},\n designSettings,\n shouldRemovePadding,\n shouldUseUsableHeight,\n}) => {\n const [usableHeight, setUsableHeight] = useState(0);\n const [padding, setPadding] = useState<CSSProperties['padding']>(\n shouldRemovePadding ? 0 : getPagePadding(),\n );\n\n useEffect(() => {\n void getUsableHeight(shouldRemovePadding).then((height) => {\n setUsableHeight(height);\n });\n }, [shouldRemovePadding]);\n\n useEffect(() => {\n const handleResize = () => {\n setPadding(shouldRemovePadding ? 0 : getPagePadding());\n };\n\n window.addEventListener('resize', handleResize);\n\n return () => {\n window.removeEventListener('resize', handleResize);\n };\n }, [shouldRemovePadding]);\n\n return (\n <StyledPageProvider\n className=\"page-provider\"\n $padding={padding}\n $usableHeight={shouldUseUsableHeight ? usableHeight : undefined}\n >\n <ColorSchemeProvider\n color={color}\n secondaryColor={secondaryColor}\n colorMode={colorMode}\n style={shouldUseUsableHeight ? { ...style, height: '100%' } : style}\n siteId={siteId}\n designSettings={designSettings}\n cssVariables={cssVariables}\n >\n {children}\n </ColorSchemeProvider>\n <GlobalStyle />\n </StyledPageProvider>\n );\n};\nPageProvider.displayName = 'PageProvider';\n\nexport default PageProvider;\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -19,8 +19,8 @@ const getPagePadding = () => {
|
|
|
19
19
|
return '15px 10px 20px';
|
|
20
20
|
};
|
|
21
21
|
exports.getPagePadding = getPagePadding;
|
|
22
|
-
const getPageProviderInformation =
|
|
23
|
-
const padding =
|
|
22
|
+
const getPageProviderInformation = () => {
|
|
23
|
+
const padding = getPagePadding().split(' ');
|
|
24
24
|
const parseValue = value => {
|
|
25
25
|
const parsed = parseInt(value.replace('px', ''), 10);
|
|
26
26
|
return Number.isNaN(parsed) ? 0 : parsed;
|
|
@@ -68,7 +68,7 @@ const getPageProviderInformation = customPadding => {
|
|
|
68
68
|
left: 0
|
|
69
69
|
};
|
|
70
70
|
};
|
|
71
|
-
const getUsableHeight = async
|
|
71
|
+
const getUsableHeight = async shouldRemovePadding => {
|
|
72
72
|
let usableHeight;
|
|
73
73
|
const {
|
|
74
74
|
bottomBarHeight,
|
|
@@ -76,9 +76,12 @@ const getUsableHeight = async customPadding => {
|
|
|
76
76
|
windowHeight
|
|
77
77
|
} = await (0, _chaynsApi.getWindowMetrics)();
|
|
78
78
|
const {
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
} =
|
|
79
|
+
bottom,
|
|
80
|
+
top
|
|
81
|
+
} = shouldRemovePadding ? {
|
|
82
|
+
bottom: 0,
|
|
83
|
+
top: 0
|
|
84
|
+
} : getPageProviderInformation();
|
|
82
85
|
usableHeight = windowHeight - bottom - top;
|
|
83
86
|
if (bottomBarHeight) {
|
|
84
87
|
usableHeight -= bottomBarHeight;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"pageProvider.js","names":["_chaynsApi","require","_pageProvider","getPagePadding","runtimeEnvironment","getEnvironment","includes","matchMedia","PAGE_BREAKPOINTS","desktop","matches","exports","getPageProviderInformation","
|
|
1
|
+
{"version":3,"file":"pageProvider.js","names":["_chaynsApi","require","_pageProvider","getPagePadding","runtimeEnvironment","getEnvironment","includes","matchMedia","PAGE_BREAKPOINTS","desktop","matches","exports","getPageProviderInformation","padding","split","parseValue","value","parsed","parseInt","replace","Number","isNaN","length","top","right","bottom","left","vertical","horizontal","map","getUsableHeight","shouldRemovePadding","usableHeight","bottomBarHeight","topBarHeight","windowHeight","getWindowMetrics"],"sources":["../../../src/utils/pageProvider.ts"],"sourcesContent":["import { getEnvironment, getWindowMetrics } from 'chayns-api';\nimport { PAGE_BREAKPOINTS } from '../constants/pageProvider';\n\nexport const getPagePadding = () => {\n const { runtimeEnvironment } = getEnvironment();\n\n if (typeof runtimeEnvironment === 'number' && [4, 5].includes(runtimeEnvironment)) {\n return '0';\n }\n\n if (matchMedia(PAGE_BREAKPOINTS.desktop).matches) {\n return '35px 43px 30px';\n }\n\n return '15px 10px 20px';\n};\n\ntype PaddingValues = {\n top: number;\n right: number;\n bottom: number;\n left: number;\n};\n\nconst getPageProviderInformation = (): PaddingValues => {\n const padding = getPagePadding().split(' ');\n\n const parseValue = (value: string): number => {\n const parsed = parseInt(value.replace('px', ''), 10);\n return Number.isNaN(parsed) ? 0 : parsed;\n };\n\n if (padding.length === 1) {\n const value = parseValue(padding[0] ?? '');\n return { top: value, right: value, bottom: value, left: value };\n }\n\n if (padding.length === 2) {\n const [vertical, horizontal] = padding.map(parseValue);\n return {\n top: vertical ?? 0,\n right: horizontal ?? 0,\n bottom: vertical ?? 0,\n left: horizontal ?? 0,\n };\n }\n\n if (padding.length === 3) {\n const [top, horizontal, bottom] = padding.map(parseValue);\n return {\n top: top ?? 0,\n right: horizontal ?? 0,\n bottom: bottom ?? 0,\n left: horizontal ?? 0,\n };\n }\n\n if (padding.length === 4) {\n const [top, right, bottom, left] = padding.map(parseValue);\n return { top: top ?? 0, right: right ?? 0, bottom: bottom ?? 0, left: left ?? 0 };\n }\n\n return { top: 0, right: 0, bottom: 0, left: 0 };\n};\n\nexport const getUsableHeight = async (shouldRemovePadding?: boolean) => {\n let usableHeight;\n\n const { bottomBarHeight, topBarHeight, windowHeight } = await getWindowMetrics();\n\n const { bottom, top } = shouldRemovePadding\n ? { bottom: 0, top: 0 }\n : getPageProviderInformation();\n\n usableHeight = windowHeight - bottom - top;\n\n if (bottomBarHeight) {\n usableHeight -= bottomBarHeight;\n }\n\n if (topBarHeight) {\n usableHeight -= topBarHeight;\n }\n\n return usableHeight;\n};\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -22,33 +22,33 @@ const PageProvider = _ref => {
|
|
|
22
22
|
shouldUseUsableHeight
|
|
23
23
|
} = _ref;
|
|
24
24
|
const [usableHeight, setUsableHeight] = useState(0);
|
|
25
|
-
const [padding, setPadding] = useState();
|
|
25
|
+
const [padding, setPadding] = useState(shouldRemovePadding ? 0 : getPagePadding());
|
|
26
26
|
useEffect(() => {
|
|
27
|
-
|
|
28
|
-
const height = await getUsableHeight();
|
|
27
|
+
void getUsableHeight(shouldRemovePadding).then(height => {
|
|
29
28
|
setUsableHeight(height);
|
|
30
|
-
};
|
|
31
|
-
|
|
32
|
-
}, []);
|
|
29
|
+
});
|
|
30
|
+
}, [shouldRemovePadding]);
|
|
33
31
|
useEffect(() => {
|
|
34
32
|
const handleResize = () => {
|
|
35
|
-
setPadding(getPagePadding());
|
|
33
|
+
setPadding(shouldRemovePadding ? 0 : getPagePadding());
|
|
36
34
|
};
|
|
37
|
-
setPadding(getPagePadding());
|
|
38
35
|
window.addEventListener('resize', handleResize);
|
|
39
36
|
return () => {
|
|
40
37
|
window.removeEventListener('resize', handleResize);
|
|
41
38
|
};
|
|
42
|
-
}, [
|
|
39
|
+
}, [shouldRemovePadding]);
|
|
43
40
|
return /*#__PURE__*/React.createElement(StyledPageProvider, {
|
|
44
41
|
className: "page-provider",
|
|
45
|
-
$padding:
|
|
42
|
+
$padding: padding,
|
|
46
43
|
$usableHeight: shouldUseUsableHeight ? usableHeight : undefined
|
|
47
44
|
}, /*#__PURE__*/React.createElement(ColorSchemeProvider, {
|
|
48
45
|
color: color,
|
|
49
46
|
secondaryColor: secondaryColor,
|
|
50
47
|
colorMode: colorMode,
|
|
51
|
-
style:
|
|
48
|
+
style: shouldUseUsableHeight ? {
|
|
49
|
+
...style,
|
|
50
|
+
height: '100%'
|
|
51
|
+
} : style,
|
|
52
52
|
siteId: siteId,
|
|
53
53
|
designSettings: designSettings,
|
|
54
54
|
cssVariables: cssVariables
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PageProvider.js","names":["React","useEffect","useState","createGlobalStyle","getPagePadding","getUsableHeight","ColorSchemeProvider","StyledPageProvider","GlobalStyle","PageProvider","_ref","children","color","colorMode","cssVariables","secondaryColor","siteId","style","designSettings","shouldRemovePadding","shouldUseUsableHeight","usableHeight","setUsableHeight","padding","setPadding","
|
|
1
|
+
{"version":3,"file":"PageProvider.js","names":["React","useEffect","useState","createGlobalStyle","getPagePadding","getUsableHeight","ColorSchemeProvider","StyledPageProvider","GlobalStyle","PageProvider","_ref","children","color","colorMode","cssVariables","secondaryColor","siteId","style","designSettings","shouldRemovePadding","shouldUseUsableHeight","usableHeight","setUsableHeight","padding","setPadding","then","height","handleResize","window","addEventListener","removeEventListener","createElement","className","$padding","$usableHeight","undefined","displayName"],"sources":["../../../../src/components/page-provider/PageProvider.tsx"],"sourcesContent":["import React, { FC, useEffect, useState, type CSSProperties } from 'react';\nimport { createGlobalStyle } from 'styled-components';\nimport { getPagePadding, getUsableHeight } 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 * Whether the padding should be removed.\n */\n shouldRemovePadding?: boolean;\n /**\n * Whether the usable height should be used.\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 cssVariables = {},\n secondaryColor,\n siteId,\n style = {},\n designSettings,\n shouldRemovePadding,\n shouldUseUsableHeight,\n}) => {\n const [usableHeight, setUsableHeight] = useState(0);\n const [padding, setPadding] = useState<CSSProperties['padding']>(\n shouldRemovePadding ? 0 : getPagePadding(),\n );\n\n useEffect(() => {\n void getUsableHeight(shouldRemovePadding).then((height) => {\n setUsableHeight(height);\n });\n }, [shouldRemovePadding]);\n\n useEffect(() => {\n const handleResize = () => {\n setPadding(shouldRemovePadding ? 0 : getPagePadding());\n };\n\n window.addEventListener('resize', handleResize);\n\n return () => {\n window.removeEventListener('resize', handleResize);\n };\n }, [shouldRemovePadding]);\n\n return (\n <StyledPageProvider\n className=\"page-provider\"\n $padding={padding}\n $usableHeight={shouldUseUsableHeight ? usableHeight : undefined}\n >\n <ColorSchemeProvider\n color={color}\n secondaryColor={secondaryColor}\n colorMode={colorMode}\n style={shouldUseUsableHeight ? { ...style, height: '100%' } : style}\n siteId={siteId}\n designSettings={designSettings}\n cssVariables={cssVariables}\n >\n {children}\n </ColorSchemeProvider>\n <GlobalStyle />\n </StyledPageProvider>\n );\n};\nPageProvider.displayName = 'PageProvider';\n\nexport default PageProvider;\n"],"mappings":"AAAA,OAAOA,KAAK,IAAQC,SAAS,EAAEC,QAAQ,QAA4B,OAAO;AAC1E,SAASC,iBAAiB,QAAQ,mBAAmB;AACrD,SAASC,cAAc,EAAEC,eAAe,QAAQ,0BAA0B;AAC1E,OAAOC,mBAAmB,MAEnB,8CAA8C;AACrD,SAASC,kBAAkB,QAAQ,uBAAuB;AAa1D,MAAMC,WAAW,GAAGL,iBAAiB;AACrC;AACA;AACA;AACA,CAAC;AAED,MAAMM,YAAmC,GAAGC,IAAA,IAWtC;EAAA,IAXuC;IACzCC,QAAQ;IACRC,KAAK;IACLC,SAAS;IACTC,YAAY,GAAG,CAAC,CAAC;IACjBC,cAAc;IACdC,MAAM;IACNC,KAAK,GAAG,CAAC,CAAC;IACVC,cAAc;IACdC,mBAAmB;IACnBC;EACJ,CAAC,GAAAV,IAAA;EACG,MAAM,CAACW,YAAY,EAAEC,eAAe,CAAC,GAAGpB,QAAQ,CAAC,CAAC,CAAC;EACnD,MAAM,CAACqB,OAAO,EAAEC,UAAU,CAAC,GAAGtB,QAAQ,CAClCiB,mBAAmB,GAAG,CAAC,GAAGf,cAAc,CAAC,CAC7C,CAAC;EAEDH,SAAS,CAAC,MAAM;IACZ,KAAKI,eAAe,CAACc,mBAAmB,CAAC,CAACM,IAAI,CAAEC,MAAM,IAAK;MACvDJ,eAAe,CAACI,MAAM,CAAC;IAC3B,CAAC,CAAC;EACN,CAAC,EAAE,CAACP,mBAAmB,CAAC,CAAC;EAEzBlB,SAAS,CAAC,MAAM;IACZ,MAAM0B,YAAY,GAAGA,CAAA,KAAM;MACvBH,UAAU,CAACL,mBAAmB,GAAG,CAAC,GAAGf,cAAc,CAAC,CAAC,CAAC;IAC1D,CAAC;IAEDwB,MAAM,CAACC,gBAAgB,CAAC,QAAQ,EAAEF,YAAY,CAAC;IAE/C,OAAO,MAAM;MACTC,MAAM,CAACE,mBAAmB,CAAC,QAAQ,EAAEH,YAAY,CAAC;IACtD,CAAC;EACL,CAAC,EAAE,CAACR,mBAAmB,CAAC,CAAC;EAEzB,oBACInB,KAAA,CAAA+B,aAAA,CAACxB,kBAAkB;IACfyB,SAAS,EAAC,eAAe;IACzBC,QAAQ,EAAEV,OAAQ;IAClBW,aAAa,EAAEd,qBAAqB,GAAGC,YAAY,GAAGc;EAAU,gBAEhEnC,KAAA,CAAA+B,aAAA,CAACzB,mBAAmB;IAChBM,KAAK,EAAEA,KAAM;IACbG,cAAc,EAAEA,cAAe;IAC/BF,SAAS,EAAEA,SAAU;IACrBI,KAAK,EAAEG,qBAAqB,GAAG;MAAE,GAAGH,KAAK;MAAES,MAAM,EAAE;IAAO,CAAC,GAAGT,KAAM;IACpED,MAAM,EAAEA,MAAO;IACfE,cAAc,EAAEA,cAAe;IAC/BJ,YAAY,EAAEA;EAAa,GAE1BH,QACgB,CAAC,eACtBX,KAAA,CAAA+B,aAAA,CAACvB,WAAW,MAAE,CACE,CAAC;AAE7B,CAAC;AACDC,YAAY,CAAC2B,WAAW,GAAG,cAAc;AAEzC,eAAe3B,YAAY","ignoreList":[]}
|
|
@@ -12,8 +12,8 @@ export const getPagePadding = () => {
|
|
|
12
12
|
}
|
|
13
13
|
return '15px 10px 20px';
|
|
14
14
|
};
|
|
15
|
-
const getPageProviderInformation =
|
|
16
|
-
const padding =
|
|
15
|
+
const getPageProviderInformation = () => {
|
|
16
|
+
const padding = getPagePadding().split(' ');
|
|
17
17
|
const parseValue = value => {
|
|
18
18
|
const parsed = parseInt(value.replace('px', ''), 10);
|
|
19
19
|
return Number.isNaN(parsed) ? 0 : parsed;
|
|
@@ -61,7 +61,7 @@ const getPageProviderInformation = customPadding => {
|
|
|
61
61
|
left: 0
|
|
62
62
|
};
|
|
63
63
|
};
|
|
64
|
-
export const getUsableHeight = async
|
|
64
|
+
export const getUsableHeight = async shouldRemovePadding => {
|
|
65
65
|
let usableHeight;
|
|
66
66
|
const {
|
|
67
67
|
bottomBarHeight,
|
|
@@ -69,9 +69,12 @@ export const getUsableHeight = async customPadding => {
|
|
|
69
69
|
windowHeight
|
|
70
70
|
} = await getWindowMetrics();
|
|
71
71
|
const {
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
} =
|
|
72
|
+
bottom,
|
|
73
|
+
top
|
|
74
|
+
} = shouldRemovePadding ? {
|
|
75
|
+
bottom: 0,
|
|
76
|
+
top: 0
|
|
77
|
+
} : getPageProviderInformation();
|
|
75
78
|
usableHeight = windowHeight - bottom - top;
|
|
76
79
|
if (bottomBarHeight) {
|
|
77
80
|
usableHeight -= bottomBarHeight;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"pageProvider.js","names":["getEnvironment","getWindowMetrics","PAGE_BREAKPOINTS","getPagePadding","runtimeEnvironment","includes","matchMedia","desktop","matches","getPageProviderInformation","
|
|
1
|
+
{"version":3,"file":"pageProvider.js","names":["getEnvironment","getWindowMetrics","PAGE_BREAKPOINTS","getPagePadding","runtimeEnvironment","includes","matchMedia","desktop","matches","getPageProviderInformation","padding","split","parseValue","value","parsed","parseInt","replace","Number","isNaN","length","top","right","bottom","left","vertical","horizontal","map","getUsableHeight","shouldRemovePadding","usableHeight","bottomBarHeight","topBarHeight","windowHeight"],"sources":["../../../src/utils/pageProvider.ts"],"sourcesContent":["import { getEnvironment, getWindowMetrics } from 'chayns-api';\nimport { PAGE_BREAKPOINTS } from '../constants/pageProvider';\n\nexport const getPagePadding = () => {\n const { runtimeEnvironment } = getEnvironment();\n\n if (typeof runtimeEnvironment === 'number' && [4, 5].includes(runtimeEnvironment)) {\n return '0';\n }\n\n if (matchMedia(PAGE_BREAKPOINTS.desktop).matches) {\n return '35px 43px 30px';\n }\n\n return '15px 10px 20px';\n};\n\ntype PaddingValues = {\n top: number;\n right: number;\n bottom: number;\n left: number;\n};\n\nconst getPageProviderInformation = (): PaddingValues => {\n const padding = getPagePadding().split(' ');\n\n const parseValue = (value: string): number => {\n const parsed = parseInt(value.replace('px', ''), 10);\n return Number.isNaN(parsed) ? 0 : parsed;\n };\n\n if (padding.length === 1) {\n const value = parseValue(padding[0] ?? '');\n return { top: value, right: value, bottom: value, left: value };\n }\n\n if (padding.length === 2) {\n const [vertical, horizontal] = padding.map(parseValue);\n return {\n top: vertical ?? 0,\n right: horizontal ?? 0,\n bottom: vertical ?? 0,\n left: horizontal ?? 0,\n };\n }\n\n if (padding.length === 3) {\n const [top, horizontal, bottom] = padding.map(parseValue);\n return {\n top: top ?? 0,\n right: horizontal ?? 0,\n bottom: bottom ?? 0,\n left: horizontal ?? 0,\n };\n }\n\n if (padding.length === 4) {\n const [top, right, bottom, left] = padding.map(parseValue);\n return { top: top ?? 0, right: right ?? 0, bottom: bottom ?? 0, left: left ?? 0 };\n }\n\n return { top: 0, right: 0, bottom: 0, left: 0 };\n};\n\nexport const getUsableHeight = async (shouldRemovePadding?: boolean) => {\n let usableHeight;\n\n const { bottomBarHeight, topBarHeight, windowHeight } = await getWindowMetrics();\n\n const { bottom, top } = shouldRemovePadding\n ? { bottom: 0, top: 0 }\n : getPageProviderInformation();\n\n usableHeight = windowHeight - bottom - top;\n\n if (bottomBarHeight) {\n usableHeight -= bottomBarHeight;\n }\n\n if (topBarHeight) {\n usableHeight -= topBarHeight;\n }\n\n return usableHeight;\n};\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
export declare const getPagePadding: () => "0" | "35px 43px 30px" | "15px 10px 20px";
|
|
2
|
-
export declare const getUsableHeight: (
|
|
2
|
+
export declare const getUsableHeight: (shouldRemovePadding?: boolean) => Promise<number>;
|
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.920",
|
|
4
4
|
"description": "A set of beautiful React components for developing your own applications with chayns.",
|
|
5
5
|
"sideEffects": false,
|
|
6
6
|
"browserslist": [
|
|
@@ -87,5 +87,5 @@
|
|
|
87
87
|
"publishConfig": {
|
|
88
88
|
"access": "public"
|
|
89
89
|
},
|
|
90
|
-
"gitHead": "
|
|
90
|
+
"gitHead": "7648b9a9d0c113b14ace255f63fbf0de5cb8daab"
|
|
91
91
|
}
|