@xyo-network/react-webapp 2.64.9 → 2.65.0
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/package.json +13 -13
- package/dist/browser/components/Body.cjs +0 -116
- package/dist/browser/components/Body.cjs.map +0 -1
- package/dist/browser/components/Body.js +0 -95
- package/dist/browser/components/Body.js.map +0 -1
- package/dist/browser/components/Chrome.cjs +0 -246
- package/dist/browser/components/Chrome.cjs.map +0 -1
- package/dist/browser/components/Chrome.js +0 -225
- package/dist/browser/components/Chrome.js.map +0 -1
- package/dist/browser/components/ErrorPage.cjs +0 -211
- package/dist/browser/components/ErrorPage.cjs.map +0 -1
- package/dist/browser/components/ErrorPage.js +0 -190
- package/dist/browser/components/ErrorPage.js.map +0 -1
- package/dist/browser/components/NotFoundPage/Page.cjs +0 -207
- package/dist/browser/components/NotFoundPage/Page.cjs.map +0 -1
- package/dist/browser/components/NotFoundPage/Page.js +0 -186
- package/dist/browser/components/NotFoundPage/Page.js.map +0 -1
- package/dist/browser/components/NotFoundPage/index.cjs +0 -209
- package/dist/browser/components/NotFoundPage/index.cjs.map +0 -1
- package/dist/browser/components/NotFoundPage/index.js +0 -186
- package/dist/browser/components/NotFoundPage/index.js.map +0 -1
- package/dist/browser/components/Page.cjs +0 -200
- package/dist/browser/components/Page.cjs.map +0 -1
- package/dist/browser/components/Page.js +0 -179
- package/dist/browser/components/Page.js.map +0 -1
- package/dist/browser/components/index.cjs +0 -261
- package/dist/browser/components/index.cjs.map +0 -1
- package/dist/browser/components/index.js +0 -238
- package/dist/browser/components/index.js.map +0 -1
- package/dist/browser/components/lib/cssValues.cjs +0 -43
- package/dist/browser/components/lib/cssValues.cjs.map +0 -1
- package/dist/browser/components/lib/cssValues.js +0 -22
- package/dist/browser/components/lib/cssValues.js.map +0 -1
- package/dist/browser/components/lib/index.cjs +0 -45
- package/dist/browser/components/lib/index.cjs.map +0 -1
- package/dist/browser/components/lib/index.js +0 -22
- package/dist/browser/components/lib/index.js.map +0 -1
- package/dist/docs.json +0 -94282
- package/dist/node/components/Body.cjs +0 -120
- package/dist/node/components/Body.cjs.map +0 -1
- package/dist/node/components/Body.js +0 -95
- package/dist/node/components/Body.js.map +0 -1
- package/dist/node/components/Chrome.cjs +0 -250
- package/dist/node/components/Chrome.cjs.map +0 -1
- package/dist/node/components/Chrome.js +0 -225
- package/dist/node/components/Chrome.js.map +0 -1
- package/dist/node/components/ErrorPage.cjs +0 -216
- package/dist/node/components/ErrorPage.cjs.map +0 -1
- package/dist/node/components/ErrorPage.js +0 -190
- package/dist/node/components/ErrorPage.js.map +0 -1
- package/dist/node/components/NotFoundPage/Page.cjs +0 -212
- package/dist/node/components/NotFoundPage/Page.cjs.map +0 -1
- package/dist/node/components/NotFoundPage/Page.js +0 -186
- package/dist/node/components/NotFoundPage/Page.js.map +0 -1
- package/dist/node/components/NotFoundPage/index.cjs +0 -214
- package/dist/node/components/NotFoundPage/index.cjs.map +0 -1
- package/dist/node/components/NotFoundPage/index.js +0 -186
- package/dist/node/components/NotFoundPage/index.js.map +0 -1
- package/dist/node/components/Page.cjs +0 -205
- package/dist/node/components/Page.cjs.map +0 -1
- package/dist/node/components/Page.js +0 -179
- package/dist/node/components/Page.js.map +0 -1
- package/dist/node/components/index.cjs +0 -272
- package/dist/node/components/index.cjs.map +0 -1
- package/dist/node/components/index.js +0 -238
- package/dist/node/components/index.js.map +0 -1
- package/dist/node/components/lib/cssValues.cjs +0 -50
- package/dist/node/components/lib/cssValues.cjs.map +0 -1
- package/dist/node/components/lib/cssValues.js +0 -22
- package/dist/node/components/lib/cssValues.js.map +0 -1
- package/dist/node/components/lib/index.cjs +0 -52
- package/dist/node/components/lib/index.cjs.map +0 -1
- package/dist/node/components/lib/index.js +0 -22
- package/dist/node/components/lib/index.js.map +0 -1
|
@@ -1,209 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
var __defProp = Object.defineProperty;
|
|
3
|
-
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
|
-
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
5
|
-
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
6
|
-
var __export = (target, all) => {
|
|
7
|
-
for (var name in all)
|
|
8
|
-
__defProp(target, name, { get: all[name], enumerable: true });
|
|
9
|
-
};
|
|
10
|
-
var __copyProps = (to, from, except, desc) => {
|
|
11
|
-
if (from && typeof from === "object" || typeof from === "function") {
|
|
12
|
-
for (let key of __getOwnPropNames(from))
|
|
13
|
-
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
14
|
-
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
15
|
-
}
|
|
16
|
-
return to;
|
|
17
|
-
};
|
|
18
|
-
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
19
|
-
|
|
20
|
-
// src/components/NotFoundPage/index.ts
|
|
21
|
-
var NotFoundPage_exports = {};
|
|
22
|
-
__export(NotFoundPage_exports, {
|
|
23
|
-
NotFoundPage: () => NotFoundPage,
|
|
24
|
-
WebAppNotFoundPage: () => WebAppNotFoundPage
|
|
25
|
-
});
|
|
26
|
-
module.exports = __toCommonJS(NotFoundPage_exports);
|
|
27
|
-
|
|
28
|
-
// src/components/NotFoundPage/Page.tsx
|
|
29
|
-
var import_react_shared = require("@xyo-network/react-shared");
|
|
30
|
-
|
|
31
|
-
// src/components/Page.tsx
|
|
32
|
-
var import_material2 = require("@mui/material");
|
|
33
|
-
var import_react_async_effect = require("@xylabs/react-async-effect");
|
|
34
|
-
var import_react_flexbox2 = require("@xylabs/react-flexbox");
|
|
35
|
-
var import_react_pixel = require("@xylabs/react-pixel");
|
|
36
|
-
var import_react_helmet = require("react-helmet");
|
|
37
|
-
var import_react_router_dom = require("react-router-dom");
|
|
38
|
-
|
|
39
|
-
// src/components/Body.tsx
|
|
40
|
-
var import_material = require("@mui/material");
|
|
41
|
-
var import_react_flexbox = require("@xylabs/react-flexbox");
|
|
42
|
-
|
|
43
|
-
// src/components/lib/cssValues.ts
|
|
44
|
-
var scrollableWrap = {
|
|
45
|
-
inset: 0,
|
|
46
|
-
position: "absolute"
|
|
47
|
-
};
|
|
48
|
-
var fixedWrap = {
|
|
49
|
-
inset: "unset",
|
|
50
|
-
position: "relative"
|
|
51
|
-
};
|
|
52
|
-
var scrollableContent = {
|
|
53
|
-
...fixedWrap
|
|
54
|
-
};
|
|
55
|
-
var fixedContent = {
|
|
56
|
-
...scrollableWrap
|
|
57
|
-
};
|
|
58
|
-
|
|
59
|
-
// src/components/Body.tsx
|
|
60
|
-
var import_jsx_runtime = require("react/jsx-runtime");
|
|
61
|
-
var WebAppBodyName = "WebAppBody";
|
|
62
|
-
var propsNotForwarded = ["mobileScrollingBreakpoint", "variant", "spacing", "disableBreadcrumbGutter"];
|
|
63
|
-
var defaultStyledOptions = {
|
|
64
|
-
shouldForwardProp: (prop) => !propsNotForwarded.includes(prop)
|
|
65
|
-
};
|
|
66
|
-
var WebAppBodyRoot = (0, import_material.styled)(import_react_flexbox.FlexGrowCol, {
|
|
67
|
-
...defaultStyledOptions,
|
|
68
|
-
name: WebAppBodyName,
|
|
69
|
-
slot: "Root"
|
|
70
|
-
})(({ spacing, theme, mobileScrollingBreakpoint = "sm", variant }) => {
|
|
71
|
-
const scrollable = variant === "scrollable";
|
|
72
|
-
return theme.unstable_sx({
|
|
73
|
-
alignItems: "stretch",
|
|
74
|
-
gap: 1,
|
|
75
|
-
justifyContent: "flex-start",
|
|
76
|
-
overflowX: "visible",
|
|
77
|
-
overflowY: scrollable ? "scroll" : "hidden",
|
|
78
|
-
paddingY: spacing,
|
|
79
|
-
[theme.breakpoints.down(mobileScrollingBreakpoint)]: {
|
|
80
|
-
overflowY: "scroll"
|
|
81
|
-
}
|
|
82
|
-
});
|
|
83
|
-
});
|
|
84
|
-
var WebAppBodyBreadcrumb = (0, import_material.styled)(import_react_flexbox.FlexRow, {
|
|
85
|
-
...defaultStyledOptions,
|
|
86
|
-
name: WebAppBodyName,
|
|
87
|
-
slot: "Breadcrumb"
|
|
88
|
-
})(
|
|
89
|
-
({ theme, disableBreadcrumbGutter, spacing }) => theme.unstable_sx({
|
|
90
|
-
justifyContent: "start",
|
|
91
|
-
marginX: disableBreadcrumbGutter ? 0 : spacing
|
|
92
|
-
})
|
|
93
|
-
);
|
|
94
|
-
var WebAppBodyScrollableWrapper = (0, import_material.styled)(import_react_flexbox.FlexGrowCol, {
|
|
95
|
-
name: WebAppBodyName,
|
|
96
|
-
slot: "ScrollableWrapper"
|
|
97
|
-
})(() => ({
|
|
98
|
-
alignItems: "stretch"
|
|
99
|
-
}));
|
|
100
|
-
var WebAppBodyScrollable = (0, import_material.styled)(import_react_flexbox.FlexGrowCol, {
|
|
101
|
-
...defaultStyledOptions,
|
|
102
|
-
name: WebAppBodyName,
|
|
103
|
-
slot: "Scrollable"
|
|
104
|
-
})(({ theme, mobileScrollingBreakpoint = "sm", variant }) => {
|
|
105
|
-
const props = variant === "scrollable" ? scrollableContent : fixedContent;
|
|
106
|
-
return {
|
|
107
|
-
...props,
|
|
108
|
-
alignItems: "stretch",
|
|
109
|
-
justifyContent: "start",
|
|
110
|
-
[theme.breakpoints.down(mobileScrollingBreakpoint)]: {
|
|
111
|
-
inset: "unset",
|
|
112
|
-
position: "relative"
|
|
113
|
-
}
|
|
114
|
-
};
|
|
115
|
-
});
|
|
116
|
-
var WebAppBody = ({
|
|
117
|
-
children,
|
|
118
|
-
breadcrumbs,
|
|
119
|
-
disableBreadcrumbGutter,
|
|
120
|
-
mobileScrollingBreakpoint,
|
|
121
|
-
spacing = 1,
|
|
122
|
-
variant,
|
|
123
|
-
...props
|
|
124
|
-
}) => {
|
|
125
|
-
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(WebAppBodyRoot, { mobileScrollingBreakpoint, spacing, variant, ...props, children: [
|
|
126
|
-
breadcrumbs ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(WebAppBodyBreadcrumb, { disableBreadcrumbGutter, spacing, children: breadcrumbs }) : null,
|
|
127
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(WebAppBodyScrollableWrapper, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(WebAppBodyScrollable, { mobileScrollingBreakpoint, variant, children }) })
|
|
128
|
-
] });
|
|
129
|
-
};
|
|
130
|
-
|
|
131
|
-
// src/components/Page.tsx
|
|
132
|
-
var import_jsx_runtime2 = require("react/jsx-runtime");
|
|
133
|
-
var WebAppPageRoot = (0, import_material2.styled)(import_react_flexbox2.FlexGrowCol, {
|
|
134
|
-
name: "WebAppPage",
|
|
135
|
-
shouldForwardProp: (propName) => propName !== "mobileScrollingBreakpoint" && propName !== "variant",
|
|
136
|
-
slot: "Root"
|
|
137
|
-
})(({ theme, mobileScrollingBreakpoint = "sm", variant }) => {
|
|
138
|
-
const props = variant === "scrollable" ? scrollableWrap : fixedWrap;
|
|
139
|
-
return {
|
|
140
|
-
...props,
|
|
141
|
-
alignItems: "stretch",
|
|
142
|
-
justifyContent: "start",
|
|
143
|
-
maxWidth: "100vw",
|
|
144
|
-
[theme.breakpoints.down(mobileScrollingBreakpoint)]: {
|
|
145
|
-
inset: 0,
|
|
146
|
-
position: "absolute"
|
|
147
|
-
}
|
|
148
|
-
};
|
|
149
|
-
});
|
|
150
|
-
var WebAppPage = ({
|
|
151
|
-
disableGutters,
|
|
152
|
-
disableBreadcrumbGutter,
|
|
153
|
-
title,
|
|
154
|
-
container,
|
|
155
|
-
children,
|
|
156
|
-
breadcrumbs,
|
|
157
|
-
mobileScrollingBreakpoint,
|
|
158
|
-
variant = "scrollable",
|
|
159
|
-
...props
|
|
160
|
-
}) => {
|
|
161
|
-
const userEvents = (0, import_react_pixel.useUserEvents)();
|
|
162
|
-
const { pathname } = (0, import_react_router_dom.useLocation)();
|
|
163
|
-
(0, import_react_async_effect.useAsyncEffect)(
|
|
164
|
-
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
165
|
-
async () => {
|
|
166
|
-
await userEvents?.viewContent({ name: title ?? "NodeBasePage", path: location.pathname });
|
|
167
|
-
},
|
|
168
|
-
[pathname, title, userEvents]
|
|
169
|
-
);
|
|
170
|
-
return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(WebAppPageRoot, { mobileScrollingBreakpoint, variant, ...props, children: [
|
|
171
|
-
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_helmet.Helmet, { title }),
|
|
172
|
-
container && container !== "none" ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
173
|
-
import_material2.Container,
|
|
174
|
-
{
|
|
175
|
-
disableGutters,
|
|
176
|
-
style: { alignItems: "stretch", display: "flex", flexDirection: "column", flexGrow: 1, justifyContent: "flex-start" },
|
|
177
|
-
maxWidth: container,
|
|
178
|
-
children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
179
|
-
WebAppBody,
|
|
180
|
-
{
|
|
181
|
-
disableBreadcrumbGutter,
|
|
182
|
-
breadcrumbs,
|
|
183
|
-
mobileScrollingBreakpoint,
|
|
184
|
-
variant,
|
|
185
|
-
...props,
|
|
186
|
-
children
|
|
187
|
-
}
|
|
188
|
-
)
|
|
189
|
-
}
|
|
190
|
-
) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
191
|
-
WebAppBody,
|
|
192
|
-
{
|
|
193
|
-
disableBreadcrumbGutter,
|
|
194
|
-
breadcrumbs,
|
|
195
|
-
mobileScrollingBreakpoint,
|
|
196
|
-
paddingX: disableGutters ? 0 : 1,
|
|
197
|
-
variant,
|
|
198
|
-
...props,
|
|
199
|
-
children
|
|
200
|
-
}
|
|
201
|
-
)
|
|
202
|
-
] });
|
|
203
|
-
};
|
|
204
|
-
|
|
205
|
-
// src/components/NotFoundPage/Page.tsx
|
|
206
|
-
var import_jsx_runtime3 = require("react/jsx-runtime");
|
|
207
|
-
var WebAppNotFoundPage = ({ title, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(WebAppPage, { title: title ?? "Sorry! Page Not Found", ...props, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_shared.NotFound, {}) });
|
|
208
|
-
var NotFoundPage = WebAppNotFoundPage;
|
|
209
|
-
//# sourceMappingURL=index.cjs.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/components/NotFoundPage/index.ts","../../../../src/components/NotFoundPage/Page.tsx","../../../../src/components/Page.tsx","../../../../src/components/Body.tsx","../../../../src/components/lib/cssValues.ts"],"sourcesContent":["export * from './Page'\n","import { NotFound } from '@xyo-network/react-shared'\n\nimport { WebAppPage, WebAppPageProps } from '../Page'\n\nexport const WebAppNotFoundPage: React.FC<WebAppPageProps> = ({ title, ...props }) => (\n <WebAppPage title={title ?? 'Sorry! Page Not Found'} {...props}>\n <NotFound />\n </WebAppPage>\n)\n\n/** @deprecated use WebAppNotFoundPage instead */\nexport const NotFoundPage = WebAppNotFoundPage\n","import { Container, ContainerProps, styled } from '@mui/material'\nimport { useAsyncEffect } from '@xylabs/react-async-effect'\nimport { FlexBoxProps, FlexGrowCol } from '@xylabs/react-flexbox'\nimport { useUserEvents } from '@xylabs/react-pixel'\nimport { WithChildren } from '@xylabs/react-shared'\nimport { Helmet } from 'react-helmet'\nimport { useLocation } from 'react-router-dom'\n\nimport { WebAppBody, WebAppBodyProps } from './Body'\nimport { fixedWrap, scrollableWrap } from './lib'\n\nconst WebAppPageRoot = styled(FlexGrowCol, {\n name: 'WebAppPage',\n shouldForwardProp: (propName) => propName !== 'mobileScrollingBreakpoint' && propName !== 'variant',\n slot: 'Root',\n})<WebAppPageProps>(({ theme, mobileScrollingBreakpoint = 'sm', variant }) => {\n const props = variant === 'scrollable' ? scrollableWrap : fixedWrap\n return {\n ...props,\n alignItems: 'stretch',\n justifyContent: 'start',\n maxWidth: '100vw',\n [theme.breakpoints.down(mobileScrollingBreakpoint)]: {\n inset: 0,\n position: 'absolute',\n },\n }\n})\n\nexport interface WebAppPageProps extends WebAppBodyProps, FlexBoxProps {\n container?: ContainerProps['maxWidth'] | 'none'\n disableGutters?: boolean\n}\n\nexport const WebAppPage: React.FC<WithChildren<WebAppPageProps>> = ({\n disableGutters,\n disableBreadcrumbGutter,\n title,\n container,\n children,\n breadcrumbs,\n mobileScrollingBreakpoint,\n variant = 'scrollable',\n ...props\n}) => {\n const userEvents = useUserEvents()\n const { pathname } = useLocation()\n\n useAsyncEffect(\n // eslint-disable-next-line react-hooks/exhaustive-deps\n async () => {\n await userEvents?.viewContent({ name: title ?? 'NodeBasePage', path: location.pathname })\n },\n [pathname, title, userEvents],\n )\n\n return (\n <WebAppPageRoot mobileScrollingBreakpoint={mobileScrollingBreakpoint} variant={variant} {...props}>\n <Helmet title={title} />\n {container && container !== 'none' ? (\n <Container\n disableGutters={disableGutters}\n style={{ alignItems: 'stretch', display: 'flex', flexDirection: 'column', flexGrow: 1, justifyContent: 'flex-start' }}\n maxWidth={container}\n >\n <WebAppBody\n disableBreadcrumbGutter={disableBreadcrumbGutter}\n breadcrumbs={breadcrumbs}\n mobileScrollingBreakpoint={mobileScrollingBreakpoint}\n variant={variant}\n {...props}\n >\n {children}\n </WebAppBody>\n </Container>\n ) : (\n <WebAppBody\n disableBreadcrumbGutter={disableBreadcrumbGutter}\n breadcrumbs={breadcrumbs}\n mobileScrollingBreakpoint={mobileScrollingBreakpoint}\n paddingX={disableGutters ? 0 : 1}\n variant={variant}\n {...props}\n >\n {children}\n </WebAppBody>\n )}\n </WebAppPageRoot>\n )\n}\n\n/** @deprecated use WebAppPagePage instead */\nexport const FlexPage = WebAppPage\n","import { Breakpoint, styled } from '@mui/material'\nimport { FlexBoxProps, FlexGrowCol, FlexRow } from '@xylabs/react-flexbox'\nimport React, { ReactNode } from 'react'\n\nimport { fixedContent, scrollableContent } from './lib'\n\nconst WebAppBodyName = 'WebAppBody'\nconst propsNotForwarded = ['mobileScrollingBreakpoint', 'variant', 'spacing', 'disableBreadcrumbGutter']\nconst defaultStyledOptions = {\n shouldForwardProp: (prop: string) => !propsNotForwarded.includes(prop),\n}\n\nconst WebAppBodyRoot = styled(FlexGrowCol, {\n ...defaultStyledOptions,\n name: WebAppBodyName,\n slot: 'Root',\n})<WebAppBodyProps>(({ spacing, theme, mobileScrollingBreakpoint = 'sm', variant }) => {\n const scrollable = variant === 'scrollable'\n return theme.unstable_sx({\n alignItems: 'stretch',\n gap: 1,\n justifyContent: 'flex-start',\n overflowX: 'visible',\n overflowY: scrollable ? 'scroll' : 'hidden',\n paddingY: spacing,\n [theme.breakpoints.down(mobileScrollingBreakpoint)]: {\n overflowY: 'scroll',\n },\n })\n})\n\nconst WebAppBodyBreadcrumb = styled(FlexRow, {\n ...defaultStyledOptions,\n name: WebAppBodyName,\n slot: 'Breadcrumb',\n})<WebAppBodyProps>(({ theme, disableBreadcrumbGutter, spacing }) =>\n theme.unstable_sx({\n justifyContent: 'start',\n marginX: disableBreadcrumbGutter ? 0 : spacing,\n }),\n)\n\nconst WebAppBodyScrollableWrapper = styled(FlexGrowCol, {\n name: WebAppBodyName,\n slot: 'ScrollableWrapper',\n})<WebAppBodyProps>(() => ({\n alignItems: 'stretch',\n}))\n\nconst WebAppBodyScrollable = styled(FlexGrowCol, {\n ...defaultStyledOptions,\n name: WebAppBodyName,\n slot: 'Scrollable',\n})<WebAppBodyProps>(({ theme, mobileScrollingBreakpoint = 'sm', variant }) => {\n const props = variant === 'scrollable' ? scrollableContent : fixedContent\n return {\n ...props,\n alignItems: 'stretch',\n justifyContent: 'start',\n [theme.breakpoints.down(mobileScrollingBreakpoint)]: {\n inset: 'unset',\n position: 'relative',\n },\n }\n})\n\nexport interface WebAppBodyProps extends FlexBoxProps {\n breadcrumbs?: ReactNode\n disableBreadcrumbGutter?: boolean\n mobileScrollingBreakpoint?: Breakpoint\n spacing?: string | number\n variant?: 'scrollable' | 'fixed'\n}\n\nexport const WebAppBody: React.FC<WebAppBodyProps> = ({\n children,\n breadcrumbs,\n disableBreadcrumbGutter,\n mobileScrollingBreakpoint,\n spacing = 1,\n variant,\n ...props\n}) => {\n return (\n <WebAppBodyRoot mobileScrollingBreakpoint={mobileScrollingBreakpoint} spacing={spacing} variant={variant} {...props}>\n {breadcrumbs ? (\n <WebAppBodyBreadcrumb disableBreadcrumbGutter={disableBreadcrumbGutter} spacing={spacing}>\n {breadcrumbs}\n </WebAppBodyBreadcrumb>\n ) : null}\n <WebAppBodyScrollableWrapper>\n <WebAppBodyScrollable mobileScrollingBreakpoint={mobileScrollingBreakpoint} variant={variant}>\n {children}\n </WebAppBodyScrollable>\n </WebAppBodyScrollableWrapper>\n </WebAppBodyRoot>\n )\n}\n","import { CSSProperties } from 'react'\n\nexport const scrollableWrap: CSSProperties = {\n inset: 0,\n position: 'absolute',\n} as const\n\nexport const fixedWrap: CSSProperties = {\n inset: 'unset',\n position: 'relative',\n} as const\n\n// Making a scrollable vs fixed wrapper and content is an inversion of the wrap and content styles\nexport const scrollableContent: CSSProperties = {\n ...fixedWrap,\n} as const\n\nexport const fixedContent: CSSProperties = {\n ...scrollableWrap,\n} as const\n"],"mappings":"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","names":["import_material","import_react_flexbox","import_jsx_runtime","import_jsx_runtime"]}
|
|
@@ -1,186 +0,0 @@
|
|
|
1
|
-
// src/components/NotFoundPage/Page.tsx
|
|
2
|
-
import { NotFound } from "@xyo-network/react-shared";
|
|
3
|
-
|
|
4
|
-
// src/components/Page.tsx
|
|
5
|
-
import { Container, styled as styled2 } from "@mui/material";
|
|
6
|
-
import { useAsyncEffect } from "@xylabs/react-async-effect";
|
|
7
|
-
import { FlexGrowCol as FlexGrowCol2 } from "@xylabs/react-flexbox";
|
|
8
|
-
import { useUserEvents } from "@xylabs/react-pixel";
|
|
9
|
-
import { Helmet } from "react-helmet";
|
|
10
|
-
import { useLocation } from "react-router-dom";
|
|
11
|
-
|
|
12
|
-
// src/components/Body.tsx
|
|
13
|
-
import { styled } from "@mui/material";
|
|
14
|
-
import { FlexGrowCol, FlexRow } from "@xylabs/react-flexbox";
|
|
15
|
-
|
|
16
|
-
// src/components/lib/cssValues.ts
|
|
17
|
-
var scrollableWrap = {
|
|
18
|
-
inset: 0,
|
|
19
|
-
position: "absolute"
|
|
20
|
-
};
|
|
21
|
-
var fixedWrap = {
|
|
22
|
-
inset: "unset",
|
|
23
|
-
position: "relative"
|
|
24
|
-
};
|
|
25
|
-
var scrollableContent = {
|
|
26
|
-
...fixedWrap
|
|
27
|
-
};
|
|
28
|
-
var fixedContent = {
|
|
29
|
-
...scrollableWrap
|
|
30
|
-
};
|
|
31
|
-
|
|
32
|
-
// src/components/Body.tsx
|
|
33
|
-
import { jsx, jsxs } from "react/jsx-runtime";
|
|
34
|
-
var WebAppBodyName = "WebAppBody";
|
|
35
|
-
var propsNotForwarded = ["mobileScrollingBreakpoint", "variant", "spacing", "disableBreadcrumbGutter"];
|
|
36
|
-
var defaultStyledOptions = {
|
|
37
|
-
shouldForwardProp: (prop) => !propsNotForwarded.includes(prop)
|
|
38
|
-
};
|
|
39
|
-
var WebAppBodyRoot = styled(FlexGrowCol, {
|
|
40
|
-
...defaultStyledOptions,
|
|
41
|
-
name: WebAppBodyName,
|
|
42
|
-
slot: "Root"
|
|
43
|
-
})(({ spacing, theme, mobileScrollingBreakpoint = "sm", variant }) => {
|
|
44
|
-
const scrollable = variant === "scrollable";
|
|
45
|
-
return theme.unstable_sx({
|
|
46
|
-
alignItems: "stretch",
|
|
47
|
-
gap: 1,
|
|
48
|
-
justifyContent: "flex-start",
|
|
49
|
-
overflowX: "visible",
|
|
50
|
-
overflowY: scrollable ? "scroll" : "hidden",
|
|
51
|
-
paddingY: spacing,
|
|
52
|
-
[theme.breakpoints.down(mobileScrollingBreakpoint)]: {
|
|
53
|
-
overflowY: "scroll"
|
|
54
|
-
}
|
|
55
|
-
});
|
|
56
|
-
});
|
|
57
|
-
var WebAppBodyBreadcrumb = styled(FlexRow, {
|
|
58
|
-
...defaultStyledOptions,
|
|
59
|
-
name: WebAppBodyName,
|
|
60
|
-
slot: "Breadcrumb"
|
|
61
|
-
})(
|
|
62
|
-
({ theme, disableBreadcrumbGutter, spacing }) => theme.unstable_sx({
|
|
63
|
-
justifyContent: "start",
|
|
64
|
-
marginX: disableBreadcrumbGutter ? 0 : spacing
|
|
65
|
-
})
|
|
66
|
-
);
|
|
67
|
-
var WebAppBodyScrollableWrapper = styled(FlexGrowCol, {
|
|
68
|
-
name: WebAppBodyName,
|
|
69
|
-
slot: "ScrollableWrapper"
|
|
70
|
-
})(() => ({
|
|
71
|
-
alignItems: "stretch"
|
|
72
|
-
}));
|
|
73
|
-
var WebAppBodyScrollable = styled(FlexGrowCol, {
|
|
74
|
-
...defaultStyledOptions,
|
|
75
|
-
name: WebAppBodyName,
|
|
76
|
-
slot: "Scrollable"
|
|
77
|
-
})(({ theme, mobileScrollingBreakpoint = "sm", variant }) => {
|
|
78
|
-
const props = variant === "scrollable" ? scrollableContent : fixedContent;
|
|
79
|
-
return {
|
|
80
|
-
...props,
|
|
81
|
-
alignItems: "stretch",
|
|
82
|
-
justifyContent: "start",
|
|
83
|
-
[theme.breakpoints.down(mobileScrollingBreakpoint)]: {
|
|
84
|
-
inset: "unset",
|
|
85
|
-
position: "relative"
|
|
86
|
-
}
|
|
87
|
-
};
|
|
88
|
-
});
|
|
89
|
-
var WebAppBody = ({
|
|
90
|
-
children,
|
|
91
|
-
breadcrumbs,
|
|
92
|
-
disableBreadcrumbGutter,
|
|
93
|
-
mobileScrollingBreakpoint,
|
|
94
|
-
spacing = 1,
|
|
95
|
-
variant,
|
|
96
|
-
...props
|
|
97
|
-
}) => {
|
|
98
|
-
return /* @__PURE__ */ jsxs(WebAppBodyRoot, { mobileScrollingBreakpoint, spacing, variant, ...props, children: [
|
|
99
|
-
breadcrumbs ? /* @__PURE__ */ jsx(WebAppBodyBreadcrumb, { disableBreadcrumbGutter, spacing, children: breadcrumbs }) : null,
|
|
100
|
-
/* @__PURE__ */ jsx(WebAppBodyScrollableWrapper, { children: /* @__PURE__ */ jsx(WebAppBodyScrollable, { mobileScrollingBreakpoint, variant, children }) })
|
|
101
|
-
] });
|
|
102
|
-
};
|
|
103
|
-
|
|
104
|
-
// src/components/Page.tsx
|
|
105
|
-
import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
|
|
106
|
-
var WebAppPageRoot = styled2(FlexGrowCol2, {
|
|
107
|
-
name: "WebAppPage",
|
|
108
|
-
shouldForwardProp: (propName) => propName !== "mobileScrollingBreakpoint" && propName !== "variant",
|
|
109
|
-
slot: "Root"
|
|
110
|
-
})(({ theme, mobileScrollingBreakpoint = "sm", variant }) => {
|
|
111
|
-
const props = variant === "scrollable" ? scrollableWrap : fixedWrap;
|
|
112
|
-
return {
|
|
113
|
-
...props,
|
|
114
|
-
alignItems: "stretch",
|
|
115
|
-
justifyContent: "start",
|
|
116
|
-
maxWidth: "100vw",
|
|
117
|
-
[theme.breakpoints.down(mobileScrollingBreakpoint)]: {
|
|
118
|
-
inset: 0,
|
|
119
|
-
position: "absolute"
|
|
120
|
-
}
|
|
121
|
-
};
|
|
122
|
-
});
|
|
123
|
-
var WebAppPage = ({
|
|
124
|
-
disableGutters,
|
|
125
|
-
disableBreadcrumbGutter,
|
|
126
|
-
title,
|
|
127
|
-
container,
|
|
128
|
-
children,
|
|
129
|
-
breadcrumbs,
|
|
130
|
-
mobileScrollingBreakpoint,
|
|
131
|
-
variant = "scrollable",
|
|
132
|
-
...props
|
|
133
|
-
}) => {
|
|
134
|
-
const userEvents = useUserEvents();
|
|
135
|
-
const { pathname } = useLocation();
|
|
136
|
-
useAsyncEffect(
|
|
137
|
-
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
138
|
-
async () => {
|
|
139
|
-
await userEvents?.viewContent({ name: title ?? "NodeBasePage", path: location.pathname });
|
|
140
|
-
},
|
|
141
|
-
[pathname, title, userEvents]
|
|
142
|
-
);
|
|
143
|
-
return /* @__PURE__ */ jsxs2(WebAppPageRoot, { mobileScrollingBreakpoint, variant, ...props, children: [
|
|
144
|
-
/* @__PURE__ */ jsx2(Helmet, { title }),
|
|
145
|
-
container && container !== "none" ? /* @__PURE__ */ jsx2(
|
|
146
|
-
Container,
|
|
147
|
-
{
|
|
148
|
-
disableGutters,
|
|
149
|
-
style: { alignItems: "stretch", display: "flex", flexDirection: "column", flexGrow: 1, justifyContent: "flex-start" },
|
|
150
|
-
maxWidth: container,
|
|
151
|
-
children: /* @__PURE__ */ jsx2(
|
|
152
|
-
WebAppBody,
|
|
153
|
-
{
|
|
154
|
-
disableBreadcrumbGutter,
|
|
155
|
-
breadcrumbs,
|
|
156
|
-
mobileScrollingBreakpoint,
|
|
157
|
-
variant,
|
|
158
|
-
...props,
|
|
159
|
-
children
|
|
160
|
-
}
|
|
161
|
-
)
|
|
162
|
-
}
|
|
163
|
-
) : /* @__PURE__ */ jsx2(
|
|
164
|
-
WebAppBody,
|
|
165
|
-
{
|
|
166
|
-
disableBreadcrumbGutter,
|
|
167
|
-
breadcrumbs,
|
|
168
|
-
mobileScrollingBreakpoint,
|
|
169
|
-
paddingX: disableGutters ? 0 : 1,
|
|
170
|
-
variant,
|
|
171
|
-
...props,
|
|
172
|
-
children
|
|
173
|
-
}
|
|
174
|
-
)
|
|
175
|
-
] });
|
|
176
|
-
};
|
|
177
|
-
|
|
178
|
-
// src/components/NotFoundPage/Page.tsx
|
|
179
|
-
import { jsx as jsx3 } from "react/jsx-runtime";
|
|
180
|
-
var WebAppNotFoundPage = ({ title, ...props }) => /* @__PURE__ */ jsx3(WebAppPage, { title: title ?? "Sorry! Page Not Found", ...props, children: /* @__PURE__ */ jsx3(NotFound, {}) });
|
|
181
|
-
var NotFoundPage = WebAppNotFoundPage;
|
|
182
|
-
export {
|
|
183
|
-
NotFoundPage,
|
|
184
|
-
WebAppNotFoundPage
|
|
185
|
-
};
|
|
186
|
-
//# sourceMappingURL=index.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/components/NotFoundPage/Page.tsx","../../../../src/components/Page.tsx","../../../../src/components/Body.tsx","../../../../src/components/lib/cssValues.ts"],"sourcesContent":["import { NotFound } from '@xyo-network/react-shared'\n\nimport { WebAppPage, WebAppPageProps } from '../Page'\n\nexport const WebAppNotFoundPage: React.FC<WebAppPageProps> = ({ title, ...props }) => (\n <WebAppPage title={title ?? 'Sorry! Page Not Found'} {...props}>\n <NotFound />\n </WebAppPage>\n)\n\n/** @deprecated use WebAppNotFoundPage instead */\nexport const NotFoundPage = WebAppNotFoundPage\n","import { Container, ContainerProps, styled } from '@mui/material'\nimport { useAsyncEffect } from '@xylabs/react-async-effect'\nimport { FlexBoxProps, FlexGrowCol } from '@xylabs/react-flexbox'\nimport { useUserEvents } from '@xylabs/react-pixel'\nimport { WithChildren } from '@xylabs/react-shared'\nimport { Helmet } from 'react-helmet'\nimport { useLocation } from 'react-router-dom'\n\nimport { WebAppBody, WebAppBodyProps } from './Body'\nimport { fixedWrap, scrollableWrap } from './lib'\n\nconst WebAppPageRoot = styled(FlexGrowCol, {\n name: 'WebAppPage',\n shouldForwardProp: (propName) => propName !== 'mobileScrollingBreakpoint' && propName !== 'variant',\n slot: 'Root',\n})<WebAppPageProps>(({ theme, mobileScrollingBreakpoint = 'sm', variant }) => {\n const props = variant === 'scrollable' ? scrollableWrap : fixedWrap\n return {\n ...props,\n alignItems: 'stretch',\n justifyContent: 'start',\n maxWidth: '100vw',\n [theme.breakpoints.down(mobileScrollingBreakpoint)]: {\n inset: 0,\n position: 'absolute',\n },\n }\n})\n\nexport interface WebAppPageProps extends WebAppBodyProps, FlexBoxProps {\n container?: ContainerProps['maxWidth'] | 'none'\n disableGutters?: boolean\n}\n\nexport const WebAppPage: React.FC<WithChildren<WebAppPageProps>> = ({\n disableGutters,\n disableBreadcrumbGutter,\n title,\n container,\n children,\n breadcrumbs,\n mobileScrollingBreakpoint,\n variant = 'scrollable',\n ...props\n}) => {\n const userEvents = useUserEvents()\n const { pathname } = useLocation()\n\n useAsyncEffect(\n // eslint-disable-next-line react-hooks/exhaustive-deps\n async () => {\n await userEvents?.viewContent({ name: title ?? 'NodeBasePage', path: location.pathname })\n },\n [pathname, title, userEvents],\n )\n\n return (\n <WebAppPageRoot mobileScrollingBreakpoint={mobileScrollingBreakpoint} variant={variant} {...props}>\n <Helmet title={title} />\n {container && container !== 'none' ? (\n <Container\n disableGutters={disableGutters}\n style={{ alignItems: 'stretch', display: 'flex', flexDirection: 'column', flexGrow: 1, justifyContent: 'flex-start' }}\n maxWidth={container}\n >\n <WebAppBody\n disableBreadcrumbGutter={disableBreadcrumbGutter}\n breadcrumbs={breadcrumbs}\n mobileScrollingBreakpoint={mobileScrollingBreakpoint}\n variant={variant}\n {...props}\n >\n {children}\n </WebAppBody>\n </Container>\n ) : (\n <WebAppBody\n disableBreadcrumbGutter={disableBreadcrumbGutter}\n breadcrumbs={breadcrumbs}\n mobileScrollingBreakpoint={mobileScrollingBreakpoint}\n paddingX={disableGutters ? 0 : 1}\n variant={variant}\n {...props}\n >\n {children}\n </WebAppBody>\n )}\n </WebAppPageRoot>\n )\n}\n\n/** @deprecated use WebAppPagePage instead */\nexport const FlexPage = WebAppPage\n","import { Breakpoint, styled } from '@mui/material'\nimport { FlexBoxProps, FlexGrowCol, FlexRow } from '@xylabs/react-flexbox'\nimport React, { ReactNode } from 'react'\n\nimport { fixedContent, scrollableContent } from './lib'\n\nconst WebAppBodyName = 'WebAppBody'\nconst propsNotForwarded = ['mobileScrollingBreakpoint', 'variant', 'spacing', 'disableBreadcrumbGutter']\nconst defaultStyledOptions = {\n shouldForwardProp: (prop: string) => !propsNotForwarded.includes(prop),\n}\n\nconst WebAppBodyRoot = styled(FlexGrowCol, {\n ...defaultStyledOptions,\n name: WebAppBodyName,\n slot: 'Root',\n})<WebAppBodyProps>(({ spacing, theme, mobileScrollingBreakpoint = 'sm', variant }) => {\n const scrollable = variant === 'scrollable'\n return theme.unstable_sx({\n alignItems: 'stretch',\n gap: 1,\n justifyContent: 'flex-start',\n overflowX: 'visible',\n overflowY: scrollable ? 'scroll' : 'hidden',\n paddingY: spacing,\n [theme.breakpoints.down(mobileScrollingBreakpoint)]: {\n overflowY: 'scroll',\n },\n })\n})\n\nconst WebAppBodyBreadcrumb = styled(FlexRow, {\n ...defaultStyledOptions,\n name: WebAppBodyName,\n slot: 'Breadcrumb',\n})<WebAppBodyProps>(({ theme, disableBreadcrumbGutter, spacing }) =>\n theme.unstable_sx({\n justifyContent: 'start',\n marginX: disableBreadcrumbGutter ? 0 : spacing,\n }),\n)\n\nconst WebAppBodyScrollableWrapper = styled(FlexGrowCol, {\n name: WebAppBodyName,\n slot: 'ScrollableWrapper',\n})<WebAppBodyProps>(() => ({\n alignItems: 'stretch',\n}))\n\nconst WebAppBodyScrollable = styled(FlexGrowCol, {\n ...defaultStyledOptions,\n name: WebAppBodyName,\n slot: 'Scrollable',\n})<WebAppBodyProps>(({ theme, mobileScrollingBreakpoint = 'sm', variant }) => {\n const props = variant === 'scrollable' ? scrollableContent : fixedContent\n return {\n ...props,\n alignItems: 'stretch',\n justifyContent: 'start',\n [theme.breakpoints.down(mobileScrollingBreakpoint)]: {\n inset: 'unset',\n position: 'relative',\n },\n }\n})\n\nexport interface WebAppBodyProps extends FlexBoxProps {\n breadcrumbs?: ReactNode\n disableBreadcrumbGutter?: boolean\n mobileScrollingBreakpoint?: Breakpoint\n spacing?: string | number\n variant?: 'scrollable' | 'fixed'\n}\n\nexport const WebAppBody: React.FC<WebAppBodyProps> = ({\n children,\n breadcrumbs,\n disableBreadcrumbGutter,\n mobileScrollingBreakpoint,\n spacing = 1,\n variant,\n ...props\n}) => {\n return (\n <WebAppBodyRoot mobileScrollingBreakpoint={mobileScrollingBreakpoint} spacing={spacing} variant={variant} {...props}>\n {breadcrumbs ? (\n <WebAppBodyBreadcrumb disableBreadcrumbGutter={disableBreadcrumbGutter} spacing={spacing}>\n {breadcrumbs}\n </WebAppBodyBreadcrumb>\n ) : null}\n <WebAppBodyScrollableWrapper>\n <WebAppBodyScrollable mobileScrollingBreakpoint={mobileScrollingBreakpoint} variant={variant}>\n {children}\n </WebAppBodyScrollable>\n </WebAppBodyScrollableWrapper>\n </WebAppBodyRoot>\n )\n}\n","import { CSSProperties } from 'react'\n\nexport const scrollableWrap: CSSProperties = {\n inset: 0,\n position: 'absolute',\n} as const\n\nexport const fixedWrap: CSSProperties = {\n inset: 'unset',\n position: 'relative',\n} as const\n\n// Making a scrollable vs fixed wrapper and content is an inversion of the wrap and content styles\nexport const scrollableContent: CSSProperties = {\n ...fixedWrap,\n} as const\n\nexport const fixedContent: CSSProperties = {\n ...scrollableWrap,\n} as const\n"],"mappings":"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","names":["styled","FlexGrowCol","jsx","jsxs","styled","FlexGrowCol","jsx"]}
|
|
@@ -1,200 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
var __defProp = Object.defineProperty;
|
|
3
|
-
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
|
-
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
5
|
-
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
6
|
-
var __export = (target, all) => {
|
|
7
|
-
for (var name in all)
|
|
8
|
-
__defProp(target, name, { get: all[name], enumerable: true });
|
|
9
|
-
};
|
|
10
|
-
var __copyProps = (to, from, except, desc) => {
|
|
11
|
-
if (from && typeof from === "object" || typeof from === "function") {
|
|
12
|
-
for (let key of __getOwnPropNames(from))
|
|
13
|
-
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
14
|
-
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
15
|
-
}
|
|
16
|
-
return to;
|
|
17
|
-
};
|
|
18
|
-
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
19
|
-
|
|
20
|
-
// src/components/Page.tsx
|
|
21
|
-
var Page_exports = {};
|
|
22
|
-
__export(Page_exports, {
|
|
23
|
-
FlexPage: () => FlexPage,
|
|
24
|
-
WebAppPage: () => WebAppPage
|
|
25
|
-
});
|
|
26
|
-
module.exports = __toCommonJS(Page_exports);
|
|
27
|
-
var import_material2 = require("@mui/material");
|
|
28
|
-
var import_react_async_effect = require("@xylabs/react-async-effect");
|
|
29
|
-
var import_react_flexbox2 = require("@xylabs/react-flexbox");
|
|
30
|
-
var import_react_pixel = require("@xylabs/react-pixel");
|
|
31
|
-
var import_react_helmet = require("react-helmet");
|
|
32
|
-
var import_react_router_dom = require("react-router-dom");
|
|
33
|
-
|
|
34
|
-
// src/components/Body.tsx
|
|
35
|
-
var import_material = require("@mui/material");
|
|
36
|
-
var import_react_flexbox = require("@xylabs/react-flexbox");
|
|
37
|
-
|
|
38
|
-
// src/components/lib/cssValues.ts
|
|
39
|
-
var scrollableWrap = {
|
|
40
|
-
inset: 0,
|
|
41
|
-
position: "absolute"
|
|
42
|
-
};
|
|
43
|
-
var fixedWrap = {
|
|
44
|
-
inset: "unset",
|
|
45
|
-
position: "relative"
|
|
46
|
-
};
|
|
47
|
-
var scrollableContent = {
|
|
48
|
-
...fixedWrap
|
|
49
|
-
};
|
|
50
|
-
var fixedContent = {
|
|
51
|
-
...scrollableWrap
|
|
52
|
-
};
|
|
53
|
-
|
|
54
|
-
// src/components/Body.tsx
|
|
55
|
-
var import_jsx_runtime = require("react/jsx-runtime");
|
|
56
|
-
var WebAppBodyName = "WebAppBody";
|
|
57
|
-
var propsNotForwarded = ["mobileScrollingBreakpoint", "variant", "spacing", "disableBreadcrumbGutter"];
|
|
58
|
-
var defaultStyledOptions = {
|
|
59
|
-
shouldForwardProp: (prop) => !propsNotForwarded.includes(prop)
|
|
60
|
-
};
|
|
61
|
-
var WebAppBodyRoot = (0, import_material.styled)(import_react_flexbox.FlexGrowCol, {
|
|
62
|
-
...defaultStyledOptions,
|
|
63
|
-
name: WebAppBodyName,
|
|
64
|
-
slot: "Root"
|
|
65
|
-
})(({ spacing, theme, mobileScrollingBreakpoint = "sm", variant }) => {
|
|
66
|
-
const scrollable = variant === "scrollable";
|
|
67
|
-
return theme.unstable_sx({
|
|
68
|
-
alignItems: "stretch",
|
|
69
|
-
gap: 1,
|
|
70
|
-
justifyContent: "flex-start",
|
|
71
|
-
overflowX: "visible",
|
|
72
|
-
overflowY: scrollable ? "scroll" : "hidden",
|
|
73
|
-
paddingY: spacing,
|
|
74
|
-
[theme.breakpoints.down(mobileScrollingBreakpoint)]: {
|
|
75
|
-
overflowY: "scroll"
|
|
76
|
-
}
|
|
77
|
-
});
|
|
78
|
-
});
|
|
79
|
-
var WebAppBodyBreadcrumb = (0, import_material.styled)(import_react_flexbox.FlexRow, {
|
|
80
|
-
...defaultStyledOptions,
|
|
81
|
-
name: WebAppBodyName,
|
|
82
|
-
slot: "Breadcrumb"
|
|
83
|
-
})(
|
|
84
|
-
({ theme, disableBreadcrumbGutter, spacing }) => theme.unstable_sx({
|
|
85
|
-
justifyContent: "start",
|
|
86
|
-
marginX: disableBreadcrumbGutter ? 0 : spacing
|
|
87
|
-
})
|
|
88
|
-
);
|
|
89
|
-
var WebAppBodyScrollableWrapper = (0, import_material.styled)(import_react_flexbox.FlexGrowCol, {
|
|
90
|
-
name: WebAppBodyName,
|
|
91
|
-
slot: "ScrollableWrapper"
|
|
92
|
-
})(() => ({
|
|
93
|
-
alignItems: "stretch"
|
|
94
|
-
}));
|
|
95
|
-
var WebAppBodyScrollable = (0, import_material.styled)(import_react_flexbox.FlexGrowCol, {
|
|
96
|
-
...defaultStyledOptions,
|
|
97
|
-
name: WebAppBodyName,
|
|
98
|
-
slot: "Scrollable"
|
|
99
|
-
})(({ theme, mobileScrollingBreakpoint = "sm", variant }) => {
|
|
100
|
-
const props = variant === "scrollable" ? scrollableContent : fixedContent;
|
|
101
|
-
return {
|
|
102
|
-
...props,
|
|
103
|
-
alignItems: "stretch",
|
|
104
|
-
justifyContent: "start",
|
|
105
|
-
[theme.breakpoints.down(mobileScrollingBreakpoint)]: {
|
|
106
|
-
inset: "unset",
|
|
107
|
-
position: "relative"
|
|
108
|
-
}
|
|
109
|
-
};
|
|
110
|
-
});
|
|
111
|
-
var WebAppBody = ({
|
|
112
|
-
children,
|
|
113
|
-
breadcrumbs,
|
|
114
|
-
disableBreadcrumbGutter,
|
|
115
|
-
mobileScrollingBreakpoint,
|
|
116
|
-
spacing = 1,
|
|
117
|
-
variant,
|
|
118
|
-
...props
|
|
119
|
-
}) => {
|
|
120
|
-
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(WebAppBodyRoot, { mobileScrollingBreakpoint, spacing, variant, ...props, children: [
|
|
121
|
-
breadcrumbs ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(WebAppBodyBreadcrumb, { disableBreadcrumbGutter, spacing, children: breadcrumbs }) : null,
|
|
122
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(WebAppBodyScrollableWrapper, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(WebAppBodyScrollable, { mobileScrollingBreakpoint, variant, children }) })
|
|
123
|
-
] });
|
|
124
|
-
};
|
|
125
|
-
|
|
126
|
-
// src/components/Page.tsx
|
|
127
|
-
var import_jsx_runtime2 = require("react/jsx-runtime");
|
|
128
|
-
var WebAppPageRoot = (0, import_material2.styled)(import_react_flexbox2.FlexGrowCol, {
|
|
129
|
-
name: "WebAppPage",
|
|
130
|
-
shouldForwardProp: (propName) => propName !== "mobileScrollingBreakpoint" && propName !== "variant",
|
|
131
|
-
slot: "Root"
|
|
132
|
-
})(({ theme, mobileScrollingBreakpoint = "sm", variant }) => {
|
|
133
|
-
const props = variant === "scrollable" ? scrollableWrap : fixedWrap;
|
|
134
|
-
return {
|
|
135
|
-
...props,
|
|
136
|
-
alignItems: "stretch",
|
|
137
|
-
justifyContent: "start",
|
|
138
|
-
maxWidth: "100vw",
|
|
139
|
-
[theme.breakpoints.down(mobileScrollingBreakpoint)]: {
|
|
140
|
-
inset: 0,
|
|
141
|
-
position: "absolute"
|
|
142
|
-
}
|
|
143
|
-
};
|
|
144
|
-
});
|
|
145
|
-
var WebAppPage = ({
|
|
146
|
-
disableGutters,
|
|
147
|
-
disableBreadcrumbGutter,
|
|
148
|
-
title,
|
|
149
|
-
container,
|
|
150
|
-
children,
|
|
151
|
-
breadcrumbs,
|
|
152
|
-
mobileScrollingBreakpoint,
|
|
153
|
-
variant = "scrollable",
|
|
154
|
-
...props
|
|
155
|
-
}) => {
|
|
156
|
-
const userEvents = (0, import_react_pixel.useUserEvents)();
|
|
157
|
-
const { pathname } = (0, import_react_router_dom.useLocation)();
|
|
158
|
-
(0, import_react_async_effect.useAsyncEffect)(
|
|
159
|
-
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
160
|
-
async () => {
|
|
161
|
-
await userEvents?.viewContent({ name: title ?? "NodeBasePage", path: location.pathname });
|
|
162
|
-
},
|
|
163
|
-
[pathname, title, userEvents]
|
|
164
|
-
);
|
|
165
|
-
return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(WebAppPageRoot, { mobileScrollingBreakpoint, variant, ...props, children: [
|
|
166
|
-
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_helmet.Helmet, { title }),
|
|
167
|
-
container && container !== "none" ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
168
|
-
import_material2.Container,
|
|
169
|
-
{
|
|
170
|
-
disableGutters,
|
|
171
|
-
style: { alignItems: "stretch", display: "flex", flexDirection: "column", flexGrow: 1, justifyContent: "flex-start" },
|
|
172
|
-
maxWidth: container,
|
|
173
|
-
children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
174
|
-
WebAppBody,
|
|
175
|
-
{
|
|
176
|
-
disableBreadcrumbGutter,
|
|
177
|
-
breadcrumbs,
|
|
178
|
-
mobileScrollingBreakpoint,
|
|
179
|
-
variant,
|
|
180
|
-
...props,
|
|
181
|
-
children
|
|
182
|
-
}
|
|
183
|
-
)
|
|
184
|
-
}
|
|
185
|
-
) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
186
|
-
WebAppBody,
|
|
187
|
-
{
|
|
188
|
-
disableBreadcrumbGutter,
|
|
189
|
-
breadcrumbs,
|
|
190
|
-
mobileScrollingBreakpoint,
|
|
191
|
-
paddingX: disableGutters ? 0 : 1,
|
|
192
|
-
variant,
|
|
193
|
-
...props,
|
|
194
|
-
children
|
|
195
|
-
}
|
|
196
|
-
)
|
|
197
|
-
] });
|
|
198
|
-
};
|
|
199
|
-
var FlexPage = WebAppPage;
|
|
200
|
-
//# sourceMappingURL=Page.cjs.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/Page.tsx","../../../src/components/Body.tsx","../../../src/components/lib/cssValues.ts"],"sourcesContent":["import { Container, ContainerProps, styled } from '@mui/material'\nimport { useAsyncEffect } from '@xylabs/react-async-effect'\nimport { FlexBoxProps, FlexGrowCol } from '@xylabs/react-flexbox'\nimport { useUserEvents } from '@xylabs/react-pixel'\nimport { WithChildren } from '@xylabs/react-shared'\nimport { Helmet } from 'react-helmet'\nimport { useLocation } from 'react-router-dom'\n\nimport { WebAppBody, WebAppBodyProps } from './Body'\nimport { fixedWrap, scrollableWrap } from './lib'\n\nconst WebAppPageRoot = styled(FlexGrowCol, {\n name: 'WebAppPage',\n shouldForwardProp: (propName) => propName !== 'mobileScrollingBreakpoint' && propName !== 'variant',\n slot: 'Root',\n})<WebAppPageProps>(({ theme, mobileScrollingBreakpoint = 'sm', variant }) => {\n const props = variant === 'scrollable' ? scrollableWrap : fixedWrap\n return {\n ...props,\n alignItems: 'stretch',\n justifyContent: 'start',\n maxWidth: '100vw',\n [theme.breakpoints.down(mobileScrollingBreakpoint)]: {\n inset: 0,\n position: 'absolute',\n },\n }\n})\n\nexport interface WebAppPageProps extends WebAppBodyProps, FlexBoxProps {\n container?: ContainerProps['maxWidth'] | 'none'\n disableGutters?: boolean\n}\n\nexport const WebAppPage: React.FC<WithChildren<WebAppPageProps>> = ({\n disableGutters,\n disableBreadcrumbGutter,\n title,\n container,\n children,\n breadcrumbs,\n mobileScrollingBreakpoint,\n variant = 'scrollable',\n ...props\n}) => {\n const userEvents = useUserEvents()\n const { pathname } = useLocation()\n\n useAsyncEffect(\n // eslint-disable-next-line react-hooks/exhaustive-deps\n async () => {\n await userEvents?.viewContent({ name: title ?? 'NodeBasePage', path: location.pathname })\n },\n [pathname, title, userEvents],\n )\n\n return (\n <WebAppPageRoot mobileScrollingBreakpoint={mobileScrollingBreakpoint} variant={variant} {...props}>\n <Helmet title={title} />\n {container && container !== 'none' ? (\n <Container\n disableGutters={disableGutters}\n style={{ alignItems: 'stretch', display: 'flex', flexDirection: 'column', flexGrow: 1, justifyContent: 'flex-start' }}\n maxWidth={container}\n >\n <WebAppBody\n disableBreadcrumbGutter={disableBreadcrumbGutter}\n breadcrumbs={breadcrumbs}\n mobileScrollingBreakpoint={mobileScrollingBreakpoint}\n variant={variant}\n {...props}\n >\n {children}\n </WebAppBody>\n </Container>\n ) : (\n <WebAppBody\n disableBreadcrumbGutter={disableBreadcrumbGutter}\n breadcrumbs={breadcrumbs}\n mobileScrollingBreakpoint={mobileScrollingBreakpoint}\n paddingX={disableGutters ? 0 : 1}\n variant={variant}\n {...props}\n >\n {children}\n </WebAppBody>\n )}\n </WebAppPageRoot>\n )\n}\n\n/** @deprecated use WebAppPagePage instead */\nexport const FlexPage = WebAppPage\n","import { Breakpoint, styled } from '@mui/material'\nimport { FlexBoxProps, FlexGrowCol, FlexRow } from '@xylabs/react-flexbox'\nimport React, { ReactNode } from 'react'\n\nimport { fixedContent, scrollableContent } from './lib'\n\nconst WebAppBodyName = 'WebAppBody'\nconst propsNotForwarded = ['mobileScrollingBreakpoint', 'variant', 'spacing', 'disableBreadcrumbGutter']\nconst defaultStyledOptions = {\n shouldForwardProp: (prop: string) => !propsNotForwarded.includes(prop),\n}\n\nconst WebAppBodyRoot = styled(FlexGrowCol, {\n ...defaultStyledOptions,\n name: WebAppBodyName,\n slot: 'Root',\n})<WebAppBodyProps>(({ spacing, theme, mobileScrollingBreakpoint = 'sm', variant }) => {\n const scrollable = variant === 'scrollable'\n return theme.unstable_sx({\n alignItems: 'stretch',\n gap: 1,\n justifyContent: 'flex-start',\n overflowX: 'visible',\n overflowY: scrollable ? 'scroll' : 'hidden',\n paddingY: spacing,\n [theme.breakpoints.down(mobileScrollingBreakpoint)]: {\n overflowY: 'scroll',\n },\n })\n})\n\nconst WebAppBodyBreadcrumb = styled(FlexRow, {\n ...defaultStyledOptions,\n name: WebAppBodyName,\n slot: 'Breadcrumb',\n})<WebAppBodyProps>(({ theme, disableBreadcrumbGutter, spacing }) =>\n theme.unstable_sx({\n justifyContent: 'start',\n marginX: disableBreadcrumbGutter ? 0 : spacing,\n }),\n)\n\nconst WebAppBodyScrollableWrapper = styled(FlexGrowCol, {\n name: WebAppBodyName,\n slot: 'ScrollableWrapper',\n})<WebAppBodyProps>(() => ({\n alignItems: 'stretch',\n}))\n\nconst WebAppBodyScrollable = styled(FlexGrowCol, {\n ...defaultStyledOptions,\n name: WebAppBodyName,\n slot: 'Scrollable',\n})<WebAppBodyProps>(({ theme, mobileScrollingBreakpoint = 'sm', variant }) => {\n const props = variant === 'scrollable' ? scrollableContent : fixedContent\n return {\n ...props,\n alignItems: 'stretch',\n justifyContent: 'start',\n [theme.breakpoints.down(mobileScrollingBreakpoint)]: {\n inset: 'unset',\n position: 'relative',\n },\n }\n})\n\nexport interface WebAppBodyProps extends FlexBoxProps {\n breadcrumbs?: ReactNode\n disableBreadcrumbGutter?: boolean\n mobileScrollingBreakpoint?: Breakpoint\n spacing?: string | number\n variant?: 'scrollable' | 'fixed'\n}\n\nexport const WebAppBody: React.FC<WebAppBodyProps> = ({\n children,\n breadcrumbs,\n disableBreadcrumbGutter,\n mobileScrollingBreakpoint,\n spacing = 1,\n variant,\n ...props\n}) => {\n return (\n <WebAppBodyRoot mobileScrollingBreakpoint={mobileScrollingBreakpoint} spacing={spacing} variant={variant} {...props}>\n {breadcrumbs ? (\n <WebAppBodyBreadcrumb disableBreadcrumbGutter={disableBreadcrumbGutter} spacing={spacing}>\n {breadcrumbs}\n </WebAppBodyBreadcrumb>\n ) : null}\n <WebAppBodyScrollableWrapper>\n <WebAppBodyScrollable mobileScrollingBreakpoint={mobileScrollingBreakpoint} variant={variant}>\n {children}\n </WebAppBodyScrollable>\n </WebAppBodyScrollableWrapper>\n </WebAppBodyRoot>\n )\n}\n","import { CSSProperties } from 'react'\n\nexport const scrollableWrap: CSSProperties = {\n inset: 0,\n position: 'absolute',\n} as const\n\nexport const fixedWrap: CSSProperties = {\n inset: 'unset',\n position: 'relative',\n} as const\n\n// Making a scrollable vs fixed wrapper and content is an inversion of the wrap and content styles\nexport const scrollableContent: CSSProperties = {\n ...fixedWrap,\n} as const\n\nexport const fixedContent: CSSProperties = {\n ...scrollableWrap,\n} as const\n"],"mappings":"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","names":["import_material","import_react_flexbox","import_jsx_runtime"]}
|