@xyo-network/react-embed 7.0.0 → 7.0.2
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/dist/browser/components/embed-card/menu/EmbedMenu.d.ts.map +1 -1
- package/dist/browser/components/stories/XyoEmbedPlugin.examples.stories.d.ts +2 -2
- package/dist/browser/components/stories/XyoEmbedPlugin.examples.stories.d.ts.map +1 -1
- package/dist/browser/components/stories/XyoEmbedPlugin.states.stories.d.ts +7 -7
- package/dist/browser/components/stories/XyoEmbedPlugin.states.stories.d.ts.map +1 -1
- package/dist/browser/contexts/ValidatePayloadContext/Provider.stories.d.ts +3 -3
- package/dist/browser/contexts/ValidatePayloadContext/Provider.stories.d.ts.map +1 -1
- package/dist/browser/index.mjs +441 -370
- package/dist/browser/index.mjs.map +1 -1
- package/package.json +34 -31
- package/src/components/embed-card/menu/EmbedMenu.tsx +9 -2
package/dist/browser/index.mjs
CHANGED
@@ -1,21 +1,35 @@
|
|
1
|
-
var __defProp = Object.defineProperty;
|
2
|
-
var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
|
3
|
-
|
4
1
|
// src/components/embed-card/card/BusyCard.tsx
|
5
2
|
import { Card } from "@mui/material";
|
6
3
|
import { useBusyTiming } from "@xylabs/react-flexbox";
|
7
|
-
import {
|
8
|
-
|
9
|
-
|
4
|
+
import {
|
5
|
+
BusyCircularProgress,
|
6
|
+
BusyLinearProgress
|
7
|
+
} from "@xylabs/react-shared";
|
8
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
9
|
+
var BusyCard = ({
|
10
|
+
busy,
|
11
|
+
busyMinimum = 500,
|
12
|
+
busyVariant = "circular",
|
13
|
+
busyVariantProps,
|
14
|
+
children,
|
15
|
+
...props
|
16
|
+
}) => {
|
10
17
|
const internalBusy = useBusyTiming(busy, busyMinimum);
|
11
|
-
return /* @__PURE__ */
|
12
|
-
|
18
|
+
return /* @__PURE__ */ jsxs(Card, { ...props, children: [
|
19
|
+
children,
|
20
|
+
busyVariant === "circular" && internalBusy ? /* @__PURE__ */ jsx(BusyCircularProgress, { ...busyVariantProps }) : null,
|
21
|
+
busyVariant === "linear" && internalBusy ? /* @__PURE__ */ jsx(BusyLinearProgress, { ...busyVariantProps }) : null
|
22
|
+
] });
|
23
|
+
};
|
13
24
|
|
14
25
|
// src/components/embed-card/card/EmbedCardHeader.tsx
|
15
26
|
import { Refresh as RefreshIcon } from "@mui/icons-material";
|
16
|
-
import {
|
27
|
+
import {
|
28
|
+
Avatar,
|
29
|
+
CardHeader,
|
30
|
+
Chip as Chip2
|
31
|
+
} from "@mui/material";
|
17
32
|
import { FlexRow } from "@xylabs/react-flexbox";
|
18
|
-
import React8 from "react";
|
19
33
|
|
20
34
|
// src/contexts/EmbedPluginContext/Context.ts
|
21
35
|
import { createContextEx } from "@xylabs/react-shared";
|
@@ -23,53 +37,72 @@ var EmbedPluginContext = createContextEx();
|
|
23
37
|
|
24
38
|
// src/contexts/EmbedPluginContext/Provider.tsx
|
25
39
|
import { useResetState } from "@xylabs/react-hooks";
|
26
|
-
import
|
27
|
-
var EmbedPluginProvider =
|
40
|
+
import { jsx as jsx2 } from "react/jsx-runtime";
|
41
|
+
var EmbedPluginProvider = ({
|
42
|
+
children,
|
43
|
+
refreshTitle,
|
44
|
+
timestampLabel,
|
45
|
+
hideElementsConfig,
|
46
|
+
plugins,
|
47
|
+
embedPluginConfig
|
48
|
+
}) => {
|
28
49
|
const [activePlugin, setActivePlugin] = useResetState(plugins ? plugins[0] : void 0);
|
29
|
-
return /* @__PURE__ */
|
30
|
-
|
31
|
-
|
32
|
-
|
33
|
-
|
34
|
-
|
35
|
-
|
36
|
-
|
37
|
-
|
38
|
-
|
50
|
+
return /* @__PURE__ */ jsx2(
|
51
|
+
EmbedPluginContext,
|
52
|
+
{
|
53
|
+
value: {
|
54
|
+
activePlugin,
|
55
|
+
embedPluginConfig,
|
56
|
+
hideElementsConfig,
|
57
|
+
provided: true,
|
58
|
+
refreshTitle,
|
59
|
+
setActivePlugin,
|
60
|
+
timestampLabel
|
61
|
+
},
|
62
|
+
children
|
39
63
|
}
|
40
|
-
|
41
|
-
}
|
64
|
+
);
|
65
|
+
};
|
42
66
|
|
43
67
|
// src/contexts/EmbedPluginContext/use.ts
|
44
68
|
import { useContextEx } from "@xylabs/react-shared";
|
45
|
-
var useEmbedPluginState =
|
69
|
+
var useEmbedPluginState = () => useContextEx(EmbedPluginContext, "EmbedPlugin", true);
|
46
70
|
|
47
71
|
// src/contexts/RefreshPayloadContext/Provider.tsx
|
48
|
-
import
|
72
|
+
import { useState } from "react";
|
49
73
|
|
50
74
|
// src/contexts/RefreshPayloadContext/Context.ts
|
51
75
|
import { createContextEx as createContextEx2 } from "@xylabs/react-shared";
|
52
76
|
var RefreshPayloadContext = createContextEx2();
|
53
77
|
|
54
78
|
// src/contexts/RefreshPayloadContext/Provider.tsx
|
55
|
-
|
79
|
+
import { jsx as jsx3 } from "react/jsx-runtime";
|
80
|
+
var RefreshPayloadProvider = ({
|
81
|
+
children,
|
82
|
+
onRefresh,
|
83
|
+
refreshPayload
|
84
|
+
}) => {
|
56
85
|
const [localRefreshPayload, setRefreshPayload] = useState(refreshPayload);
|
57
86
|
return (
|
58
87
|
// eslint-disable-next-line @eslint-react/no-unstable-context-value
|
59
|
-
/* @__PURE__ */
|
60
|
-
|
61
|
-
|
62
|
-
|
63
|
-
|
64
|
-
|
88
|
+
/* @__PURE__ */ jsx3(
|
89
|
+
RefreshPayloadContext,
|
90
|
+
{
|
91
|
+
value: {
|
92
|
+
onRefresh,
|
93
|
+
provided: true,
|
94
|
+
refreshPayload: localRefreshPayload,
|
95
|
+
setRefreshPayload
|
96
|
+
},
|
97
|
+
children
|
65
98
|
}
|
66
|
-
|
99
|
+
)
|
67
100
|
);
|
68
|
-
}
|
101
|
+
};
|
69
102
|
|
70
103
|
// src/contexts/RefreshPayloadContext/use.ts
|
71
104
|
import { useContextEx as useContextEx2 } from "@xylabs/react-shared";
|
72
|
-
var useRefreshPayload =
|
105
|
+
var useRefreshPayload = () => useContextEx2(RefreshPayloadContext, "RefreshPayload", true);
|
73
106
|
|
74
107
|
// src/contexts/ResolvePayloadContext/Context.ts
|
75
108
|
import { createContextEx as createContextEx3 } from "@xylabs/react-shared";
|
@@ -80,474 +113,512 @@ import { delay } from "@xylabs/delay";
|
|
80
113
|
import { useAsyncEffect } from "@xylabs/react-async-effect";
|
81
114
|
import { Huri } from "@xyo-network/huri";
|
82
115
|
import { ModuleErrorSchema } from "@xyo-network/payload-model";
|
83
|
-
import
|
84
|
-
|
116
|
+
import { useEffect, useState as useState2 } from "react";
|
117
|
+
import { jsx as jsx4 } from "react/jsx-runtime";
|
118
|
+
var ResolvePayloadProvider = ({ children, huriPayload }) => {
|
85
119
|
const [payload, setPayload] = useState2();
|
86
120
|
const [huri, setHuri] = useState2();
|
87
|
-
const {
|
121
|
+
const {
|
122
|
+
refreshPayload,
|
123
|
+
setRefreshPayload,
|
124
|
+
onRefresh
|
125
|
+
} = useRefreshPayload();
|
88
126
|
useEffect(() => {
|
89
127
|
typeof huriPayload === "string" ? setHuri(huriPayload) : void 0;
|
90
128
|
if (typeof huriPayload === "object") {
|
91
129
|
setPayload(huriPayload);
|
92
130
|
setRefreshPayload?.(true);
|
93
131
|
}
|
94
|
-
}, [
|
95
|
-
huriPayload,
|
96
|
-
setRefreshPayload
|
97
|
-
]);
|
132
|
+
}, [huriPayload, setRefreshPayload]);
|
98
133
|
const [notFound, setNotFound] = useState2();
|
99
134
|
const [huriError, setHuriError] = useState2();
|
100
|
-
useAsyncEffect(
|
101
|
-
|
102
|
-
|
103
|
-
|
104
|
-
|
105
|
-
|
106
|
-
|
107
|
-
|
108
|
-
|
109
|
-
|
135
|
+
useAsyncEffect(
|
136
|
+
async (mounted) => {
|
137
|
+
if (huri && !refreshPayload) {
|
138
|
+
try {
|
139
|
+
const huriInstance = new Huri(huri);
|
140
|
+
const result = await huriInstance.fetch();
|
141
|
+
await delay(500);
|
142
|
+
if (mounted()) {
|
143
|
+
setNotFound(result === null);
|
144
|
+
setPayload(result);
|
145
|
+
setRefreshPayload?.(true);
|
146
|
+
}
|
147
|
+
} catch (e) {
|
148
|
+
const error = e;
|
149
|
+
setHuriError({
|
150
|
+
message: error.message,
|
151
|
+
schema: ModuleErrorSchema,
|
152
|
+
$sources: []
|
153
|
+
});
|
110
154
|
}
|
111
|
-
} catch (e) {
|
112
|
-
const error = e;
|
113
|
-
setHuriError({
|
114
|
-
message: error.message,
|
115
|
-
schema: ModuleErrorSchema,
|
116
|
-
$sources: []
|
117
|
-
});
|
118
155
|
}
|
119
|
-
}
|
120
|
-
|
121
|
-
|
122
|
-
|
123
|
-
refreshPayload,
|
124
|
-
setRefreshPayload
|
125
|
-
]);
|
126
|
-
const refreshHuri = /* @__PURE__ */ __name(() => {
|
156
|
+
},
|
157
|
+
[huri, payload, refreshPayload, setRefreshPayload]
|
158
|
+
);
|
159
|
+
const refreshHuri = () => {
|
127
160
|
onRefresh?.();
|
128
161
|
if (huri) {
|
129
162
|
setRefreshPayload?.(false);
|
130
163
|
}
|
131
|
-
}
|
164
|
+
};
|
132
165
|
return (
|
133
166
|
// eslint-disable-next-line @eslint-react/no-unstable-context-value
|
134
|
-
/* @__PURE__ */
|
135
|
-
|
136
|
-
|
137
|
-
|
138
|
-
|
139
|
-
|
140
|
-
|
141
|
-
|
142
|
-
|
167
|
+
/* @__PURE__ */ jsx4(
|
168
|
+
ResolvePayloadContext,
|
169
|
+
{
|
170
|
+
value: {
|
171
|
+
huri,
|
172
|
+
huriError,
|
173
|
+
notFound,
|
174
|
+
payload,
|
175
|
+
provided: true,
|
176
|
+
refreshHuri,
|
177
|
+
setPayload
|
178
|
+
},
|
179
|
+
children
|
143
180
|
}
|
144
|
-
|
181
|
+
)
|
145
182
|
);
|
146
|
-
}
|
183
|
+
};
|
147
184
|
|
148
185
|
// src/contexts/ResolvePayloadContext/use.ts
|
149
186
|
import { useContextEx as useContextEx3 } from "@xylabs/react-shared";
|
150
|
-
var useResolvePayload =
|
187
|
+
var useResolvePayload = () => useContextEx3(ResolvePayloadContext, "ResolvePayload", true);
|
151
188
|
|
152
189
|
// src/contexts/ValidatePayloadContext/Provider.tsx
|
153
190
|
import { Chip } from "@mui/material";
|
154
191
|
import { useAsyncEffect as useAsyncEffect2 } from "@xylabs/react-async-effect";
|
155
192
|
import { SchemaCache } from "@xyo-network/schema-cache";
|
156
|
-
import
|
193
|
+
import { useState as useState3 } from "react";
|
157
194
|
|
158
195
|
// src/contexts/ValidatePayloadContext/Context.ts
|
159
196
|
import { createContextEx as createContextEx4 } from "@xylabs/react-shared";
|
160
197
|
var ValidatePayloadContext = createContextEx4();
|
161
198
|
|
162
199
|
// src/contexts/ValidatePayloadContext/Provider.tsx
|
163
|
-
|
200
|
+
import { Fragment, jsx as jsx5 } from "react/jsx-runtime";
|
201
|
+
var ValidatePayloadProvider = ({ children, enabled = false }) => {
|
164
202
|
const { payload } = useResolvePayload();
|
165
203
|
const [initialized, setInitialized] = useState3(false);
|
166
204
|
const [valid, setValid] = useState3();
|
167
|
-
useAsyncEffect2(
|
168
|
-
|
169
|
-
|
170
|
-
|
171
|
-
|
172
|
-
|
173
|
-
|
205
|
+
useAsyncEffect2(
|
206
|
+
async () => {
|
207
|
+
if (payload && enabled) {
|
208
|
+
await SchemaCache.instance.get(payload.schema);
|
209
|
+
const possibleKnownSchema = payload.schema;
|
210
|
+
if (SchemaCache.instance.validators[possibleKnownSchema]) {
|
211
|
+
const validator = SchemaCache.instance.validators[possibleKnownSchema];
|
212
|
+
setValid(validator?.(payload));
|
213
|
+
}
|
214
|
+
setInitialized(true);
|
174
215
|
}
|
175
|
-
|
176
|
-
|
177
|
-
|
178
|
-
payload,
|
179
|
-
enabled
|
180
|
-
]);
|
216
|
+
},
|
217
|
+
[payload, enabled]
|
218
|
+
);
|
181
219
|
return (
|
182
220
|
// eslint-disable-next-line @eslint-react/no-unstable-context-value
|
183
|
-
/* @__PURE__ */
|
184
|
-
|
185
|
-
|
186
|
-
|
187
|
-
|
188
|
-
|
221
|
+
/* @__PURE__ */ jsx5(
|
222
|
+
ValidatePayloadContext,
|
223
|
+
{
|
224
|
+
value: {
|
225
|
+
enabled,
|
226
|
+
provided: true,
|
227
|
+
schema: payload?.schema,
|
228
|
+
validPayload: valid
|
229
|
+
},
|
230
|
+
children: enabled ? /* @__PURE__ */ jsx5(Fragment, { children: initialized ? children : /* @__PURE__ */ jsx5(Chip, { label: "Validating Payload..." }) }) : children
|
189
231
|
}
|
190
|
-
|
191
|
-
label: "Validating Payload..."
|
192
|
-
})) : children)
|
232
|
+
)
|
193
233
|
);
|
194
|
-
}
|
234
|
+
};
|
195
235
|
|
196
236
|
// src/contexts/ValidatePayloadContext/use.ts
|
197
237
|
import { useContextEx as useContextEx4 } from "@xylabs/react-shared";
|
198
|
-
var useValidatePayload =
|
238
|
+
var useValidatePayload = () => useContextEx4(ValidatePayloadContext, "ValidateSchema", true);
|
199
239
|
|
200
240
|
// src/components/embed-card/menu/EmbedMenu.tsx
|
201
241
|
import { MoreVert as MoreVertIcon } from "@mui/icons-material";
|
202
242
|
import { IconButton, Menu } from "@mui/material";
|
203
|
-
import
|
243
|
+
import { useState as useState4 } from "react";
|
204
244
|
|
205
245
|
// src/components/embed-card/menu/JsonMenuItem.tsx
|
206
246
|
import { OpenInNew as OpenInNewIcon } from "@mui/icons-material";
|
207
|
-
import {
|
208
|
-
|
209
|
-
|
247
|
+
import {
|
248
|
+
ListItemIcon,
|
249
|
+
ListItemText,
|
250
|
+
MenuItem
|
251
|
+
} from "@mui/material";
|
252
|
+
import { Fragment as Fragment2, jsx as jsx6, jsxs as jsxs2 } from "react/jsx-runtime";
|
253
|
+
var JsonMenuItem = (props) => {
|
210
254
|
const { huri } = useResolvePayload();
|
211
|
-
return /* @__PURE__ */
|
212
|
-
|
213
|
-
|
214
|
-
|
215
|
-
|
216
|
-
sx: {
|
217
|
-
mr: 1
|
218
|
-
}
|
219
|
-
}, "JSON"), /* @__PURE__ */ React6.createElement(ListItemIcon, {
|
220
|
-
sx: {
|
221
|
-
justifyContent: "end"
|
222
|
-
}
|
223
|
-
}, /* @__PURE__ */ React6.createElement(OpenInNewIcon, {
|
224
|
-
fontSize: "small"
|
225
|
-
}))) : null);
|
226
|
-
}, "JsonMenuItem");
|
255
|
+
return /* @__PURE__ */ jsx6(Fragment2, { children: huri ? /* @__PURE__ */ jsxs2(MenuItem, { title: "Source Payload JSON", onClick: () => window.open(huri, "_blank"), ...props, children: [
|
256
|
+
/* @__PURE__ */ jsx6(ListItemText, { sx: { mr: 1 }, children: "JSON" }),
|
257
|
+
/* @__PURE__ */ jsx6(ListItemIcon, { sx: { justifyContent: "end" }, children: /* @__PURE__ */ jsx6(OpenInNewIcon, { fontSize: "small" }) })
|
258
|
+
] }) : null });
|
259
|
+
};
|
227
260
|
|
228
261
|
// src/components/embed-card/menu/EmbedMenu.tsx
|
229
|
-
|
262
|
+
import { Fragment as Fragment3, jsx as jsx7, jsxs as jsxs3 } from "react/jsx-runtime";
|
263
|
+
var EmbedMenu = (props) => {
|
230
264
|
const [anchorEl, setAnchorEl] = useState4(null);
|
231
265
|
const open = Boolean(anchorEl);
|
232
|
-
const handleClick =
|
266
|
+
const handleClick = (event) => {
|
233
267
|
setAnchorEl(event.currentTarget);
|
234
|
-
}
|
235
|
-
const handleClose =
|
268
|
+
};
|
269
|
+
const handleClose = () => {
|
236
270
|
setAnchorEl(null);
|
237
|
-
}
|
238
|
-
return /* @__PURE__ */
|
239
|
-
onClick: handleClick,
|
240
|
-
|
241
|
-
|
242
|
-
|
243
|
-
|
244
|
-
|
245
|
-
|
246
|
-
|
247
|
-
|
248
|
-
|
249
|
-
|
250
|
-
|
251
|
-
|
252
|
-
|
271
|
+
};
|
272
|
+
return /* @__PURE__ */ jsxs3(Fragment3, { children: [
|
273
|
+
/* @__PURE__ */ jsx7(IconButton, { onClick: handleClick, ...props, children: /* @__PURE__ */ jsx7(MoreVertIcon, {}) }),
|
274
|
+
/* @__PURE__ */ jsx7(
|
275
|
+
Menu,
|
276
|
+
{
|
277
|
+
anchorEl,
|
278
|
+
open,
|
279
|
+
onClose: handleClose,
|
280
|
+
slotProps: {
|
281
|
+
paper: { variant: "elevation" },
|
282
|
+
list: { dense: true }
|
283
|
+
},
|
284
|
+
children: /* @__PURE__ */ jsx7(JsonMenuItem, {})
|
285
|
+
}
|
286
|
+
)
|
287
|
+
] });
|
288
|
+
};
|
253
289
|
|
254
290
|
// src/components/embed-card/card/EmbedCardHeader.tsx
|
255
|
-
|
291
|
+
import { Fragment as Fragment4, jsx as jsx8, jsxs as jsxs4 } from "react/jsx-runtime";
|
292
|
+
var EmbedCardHeader = () => {
|
256
293
|
const { refreshHuri, huri } = useResolvePayload();
|
257
|
-
const {
|
258
|
-
|
294
|
+
const {
|
295
|
+
activePlugin,
|
296
|
+
timestampLabel,
|
297
|
+
hideElementsConfig
|
298
|
+
} = useEmbedPluginState();
|
299
|
+
const {
|
300
|
+
hideAvatar,
|
301
|
+
hideTitle,
|
302
|
+
hideRefreshButton,
|
303
|
+
hideTimestamp,
|
304
|
+
hideCardActions
|
305
|
+
} = hideElementsConfig ?? {};
|
259
306
|
const timestamp = Date.now();
|
260
|
-
return /* @__PURE__ */
|
261
|
-
|
262
|
-
|
263
|
-
rowGap: 1
|
264
|
-
|
265
|
-
|
266
|
-
|
267
|
-
|
268
|
-
|
269
|
-
|
270
|
-
|
271
|
-
|
272
|
-
|
273
|
-
|
274
|
-
|
275
|
-
|
276
|
-
|
277
|
-
|
278
|
-
|
279
|
-
|
280
|
-
|
281
|
-
});
|
282
|
-
}, "EmbedCardHeader");
|
307
|
+
return /* @__PURE__ */ jsx8(
|
308
|
+
CardHeader,
|
309
|
+
{
|
310
|
+
sx: { flexWrap: "wrap", rowGap: 1 },
|
311
|
+
avatar: hideAvatar ? /* @__PURE__ */ jsx8(Fragment4, {}) : /* @__PURE__ */ jsx8(Avatar, { sx: { bgcolor: (theme) => theme.vars.palette.primary.main }, "aria-label": activePlugin?.name, children: activePlugin?.name?.charAt(0) }),
|
312
|
+
action: /* @__PURE__ */ jsxs4(FlexRow, { flexWrap: "wrap", columnGap: 0.5, children: [
|
313
|
+
timestamp ? hideTimestamp && hideRefreshButton ? "" : /* @__PURE__ */ jsx8(
|
314
|
+
Chip2,
|
315
|
+
{
|
316
|
+
avatar: hideRefreshButton ? /* @__PURE__ */ jsx8(Fragment4, {}) : /* @__PURE__ */ jsx8(RefreshIcon, {}),
|
317
|
+
clickable: hideRefreshButton ? false : true,
|
318
|
+
onClick: refreshHuri,
|
319
|
+
label: hideTimestamp ? "" : `${timestampLabel} ${new Date(timestamp).toLocaleString()}`
|
320
|
+
}
|
321
|
+
) : null,
|
322
|
+
hideCardActions || huri === void 0 ? null : /* @__PURE__ */ jsx8(EmbedMenu, {})
|
323
|
+
] }),
|
324
|
+
title: hideTitle ? "" : activePlugin?.name
|
325
|
+
}
|
326
|
+
);
|
327
|
+
};
|
283
328
|
|
284
329
|
// src/components/embed-card/card/EmbedPluginCard.tsx
|
285
330
|
import { CardContent } from "@mui/material";
|
286
331
|
import { FlexGrowRow } from "@xylabs/react-flexbox";
|
287
332
|
import { useListMode as useListMode2 } from "@xyo-network/react-shared";
|
288
|
-
import React12 from "react";
|
289
333
|
|
290
334
|
// src/components/controls/EmbedFormControl.tsx
|
291
335
|
import { FormControl, InputLabel } from "@mui/material";
|
292
|
-
import
|
293
|
-
var EmbedFormControl =
|
294
|
-
|
295
|
-
|
296
|
-
|
297
|
-
|
336
|
+
import { jsx as jsx9, jsxs as jsxs5 } from "react/jsx-runtime";
|
337
|
+
var EmbedFormControl = ({
|
338
|
+
formId,
|
339
|
+
formLabel,
|
340
|
+
children,
|
341
|
+
...props
|
342
|
+
}) => {
|
343
|
+
return /* @__PURE__ */ jsxs5(FormControl, { ...props, children: [
|
344
|
+
/* @__PURE__ */ jsx9(InputLabel, { id: formId, children: formLabel }),
|
345
|
+
children
|
346
|
+
] });
|
347
|
+
};
|
298
348
|
|
299
349
|
// src/components/controls/ListModeSelect.tsx
|
300
350
|
import { MenuItem as MenuItem2 } from "@mui/material";
|
301
351
|
import { SelectEx } from "@xylabs/react-select";
|
302
352
|
import { useListMode } from "@xyo-network/react-shared";
|
303
|
-
import
|
353
|
+
import { jsx as jsx10, jsxs as jsxs6 } from "react/jsx-runtime";
|
304
354
|
var listModeSelectId = "listmode-select-id";
|
305
355
|
var listModeSelectLabel = "List Mode";
|
306
|
-
var ListModeSelect =
|
356
|
+
var ListModeSelect = (props) => {
|
307
357
|
const { listMode, setListMode } = useListMode();
|
308
|
-
return /* @__PURE__ */
|
309
|
-
|
310
|
-
|
311
|
-
|
312
|
-
|
313
|
-
|
314
|
-
|
315
|
-
|
316
|
-
|
317
|
-
|
318
|
-
|
319
|
-
|
320
|
-
|
321
|
-
|
322
|
-
|
323
|
-
|
324
|
-
|
325
|
-
|
326
|
-
|
327
|
-
formId: listModeSelectId,
|
328
|
-
formLabel: listModeSelectLabel
|
329
|
-
}, /* @__PURE__ */ React10.createElement(ListModeSelect, {
|
330
|
-
size: "small",
|
331
|
-
label: listModeSelectLabel,
|
332
|
-
labelId: listModeSelectId,
|
333
|
-
...props
|
334
|
-
}));
|
335
|
-
}, "ListModeSelectFormControl");
|
358
|
+
return /* @__PURE__ */ jsxs6(
|
359
|
+
SelectEx,
|
360
|
+
{
|
361
|
+
value: listMode ?? "default",
|
362
|
+
onChange: (event) => {
|
363
|
+
setListMode?.(event.target.value);
|
364
|
+
},
|
365
|
+
...props,
|
366
|
+
children: [
|
367
|
+
/* @__PURE__ */ jsx10(MenuItem2, { value: "default", children: "Default" }, "default"),
|
368
|
+
/* @__PURE__ */ jsx10(MenuItem2, { value: "table", children: "Table" }, "table"),
|
369
|
+
/* @__PURE__ */ jsx10(MenuItem2, { value: "grid", children: "Grid" }, "grid")
|
370
|
+
]
|
371
|
+
}
|
372
|
+
);
|
373
|
+
};
|
374
|
+
var ListModeSelectFormControl = (props) => {
|
375
|
+
return /* @__PURE__ */ jsx10(EmbedFormControl, { formId: listModeSelectId, formLabel: listModeSelectLabel, children: /* @__PURE__ */ jsx10(ListModeSelect, { size: "small", label: listModeSelectLabel, labelId: listModeSelectId, ...props }) });
|
376
|
+
};
|
336
377
|
|
337
378
|
// src/components/controls/RenderSelect.tsx
|
338
379
|
import { MenuItem as MenuItem3 } from "@mui/material";
|
339
380
|
import { SelectEx as SelectEx2 } from "@xylabs/react-select";
|
340
|
-
import
|
381
|
+
import { jsx as jsx11 } from "react/jsx-runtime";
|
341
382
|
var renderSelectId = "render-select-id";
|
342
383
|
var renderSelectLabel = "Renderer";
|
343
|
-
var EmbedRenderSelect =
|
344
|
-
const {
|
345
|
-
|
346
|
-
|
347
|
-
|
348
|
-
}
|
349
|
-
|
350
|
-
|
351
|
-
...props
|
352
|
-
}, plugins?.map((plugin) => /* @__PURE__ */ React11.createElement(MenuItem3, {
|
353
|
-
value: plugin.name,
|
354
|
-
key: plugin.name,
|
355
|
-
onClick: /* @__PURE__ */ __name(() => setActivePlugin?.(plugin), "onClick")
|
356
|
-
}, plugin.name))));
|
357
|
-
}, "EmbedRenderSelect");
|
384
|
+
var EmbedRenderSelect = (props) => {
|
385
|
+
const {
|
386
|
+
activePlugin,
|
387
|
+
setActivePlugin,
|
388
|
+
plugins
|
389
|
+
} = useEmbedPluginState();
|
390
|
+
return /* @__PURE__ */ jsx11(EmbedFormControl, { formId: renderSelectId, formLabel: renderSelectLabel, children: /* @__PURE__ */ jsx11(SelectEx2, { size: "small", value: activePlugin?.name, ...props, children: plugins?.map((plugin) => /* @__PURE__ */ jsx11(MenuItem3, { value: plugin.name, onClick: () => setActivePlugin?.(plugin), children: plugin.name }, plugin.name)) }) });
|
391
|
+
};
|
358
392
|
|
359
393
|
// src/components/embed-card/card/EmbedPluginCard.tsx
|
360
|
-
|
394
|
+
import { jsx as jsx12, jsxs as jsxs7 } from "react/jsx-runtime";
|
395
|
+
var EmbedPluginCard = ({ ...props }) => {
|
361
396
|
const { payload } = useResolvePayload();
|
362
|
-
const {
|
397
|
+
const {
|
398
|
+
activePlugin: ActivePlugin,
|
399
|
+
plugins,
|
400
|
+
hideElementsConfig
|
401
|
+
} = useEmbedPluginState();
|
363
402
|
const { listMode } = useListMode2();
|
364
403
|
const supportsListMode = ActivePlugin?.components?.box?.listModes?.length ?? 0 > 1;
|
365
|
-
return /* @__PURE__ */
|
366
|
-
|
367
|
-
rowGap: 2,
|
368
|
-
|
369
|
-
|
370
|
-
|
371
|
-
sx: {
|
372
|
-
|
373
|
-
|
374
|
-
}, ActivePlugin ? /* @__PURE__ */ React12.createElement(ActivePlugin.components.box.detailsBox, {
|
375
|
-
payload,
|
376
|
-
...supportsListMode && {
|
377
|
-
listMode
|
378
|
-
}
|
379
|
-
}) : null));
|
380
|
-
}, "EmbedPluginCard");
|
404
|
+
return /* @__PURE__ */ jsxs7(BusyCard, { ...props, children: [
|
405
|
+
hideElementsConfig?.hideCardHeader ? null : /* @__PURE__ */ jsx12(EmbedCardHeader, {}),
|
406
|
+
plugins && plugins.length > 0 || supportsListMode ? /* @__PURE__ */ jsxs7(FlexGrowRow, { columnGap: 2, rowGap: 2, flexWrap: "wrap", pb: 1, children: [
|
407
|
+
plugins && plugins.length > 1 ? /* @__PURE__ */ jsx12(EmbedRenderSelect, {}) : null,
|
408
|
+
supportsListMode ? /* @__PURE__ */ jsx12(ListModeSelectFormControl, {}) : null
|
409
|
+
] }) : null,
|
410
|
+
/* @__PURE__ */ jsx12(CardContent, { sx: { height: "100%" }, children: ActivePlugin ? /* @__PURE__ */ jsx12(ActivePlugin.components.box.detailsBox, { payload, ...supportsListMode && { listMode } }) : null })
|
411
|
+
] });
|
412
|
+
};
|
381
413
|
|
382
414
|
// src/components/embed-card/EmbedPluginCard.tsx
|
383
415
|
import { useTheme } from "@mui/material";
|
384
|
-
import React19 from "react";
|
385
416
|
|
386
417
|
// src/components/EmbedPlugin.tsx
|
387
418
|
import { ErrorBoundary } from "@xylabs/react-error";
|
388
419
|
import { ListModeProvider } from "@xyo-network/react-shared";
|
389
|
-
import React16 from "react";
|
390
420
|
|
391
421
|
// src/components/EmbedResolver.tsx
|
392
422
|
import { LoadResult } from "@xyo-network/react-shared";
|
393
|
-
import
|
394
|
-
var EmbedResolver =
|
395
|
-
const {
|
396
|
-
|
397
|
-
|
398
|
-
|
399
|
-
|
400
|
-
|
401
|
-
}
|
423
|
+
import { jsx as jsx13 } from "react/jsx-runtime";
|
424
|
+
var EmbedResolver = ({ children }) => {
|
425
|
+
const {
|
426
|
+
payload,
|
427
|
+
notFound,
|
428
|
+
huriError
|
429
|
+
} = useResolvePayload();
|
430
|
+
return /* @__PURE__ */ jsx13(LoadResult, { searchResult: payload, notFound: !!notFound, error: !!huriError, children });
|
431
|
+
};
|
402
432
|
|
403
433
|
// src/components/validation-alerts/ValidatePayload.tsx
|
404
434
|
import { Alert } from "@mui/material";
|
405
|
-
import
|
406
|
-
var ValidatePayloadAlert =
|
407
|
-
const {
|
435
|
+
import { Fragment as Fragment5, jsx as jsx14, jsxs as jsxs8 } from "react/jsx-runtime";
|
436
|
+
var ValidatePayloadAlert = ({ children, ...props }) => {
|
437
|
+
const {
|
438
|
+
validPayload,
|
439
|
+
enabled,
|
440
|
+
schema
|
441
|
+
} = useValidatePayload();
|
408
442
|
if (enabled && validPayload === false) {
|
409
|
-
return /* @__PURE__ */
|
410
|
-
|
411
|
-
|
412
|
-
|
413
|
-
|
443
|
+
return /* @__PURE__ */ jsxs8(Alert, { severity: "error", title: "Invalid Payload!", ...props, children: [
|
444
|
+
"Payload schema claimed to be",
|
445
|
+
" ",
|
446
|
+
schema,
|
447
|
+
" ",
|
448
|
+
"but failed to validate."
|
449
|
+
] });
|
414
450
|
}
|
415
|
-
return /* @__PURE__ */
|
416
|
-
}
|
451
|
+
return /* @__PURE__ */ jsx14(Fragment5, { children });
|
452
|
+
};
|
417
453
|
|
418
454
|
// src/components/validation-alerts/ValidatePlugins.tsx
|
419
455
|
import { Alert as Alert2, AlertTitle } from "@mui/material";
|
420
|
-
import
|
421
|
-
var ValidatePluginsAlert =
|
456
|
+
import { Fragment as Fragment6, jsx as jsx15, jsxs as jsxs9 } from "react/jsx-runtime";
|
457
|
+
var ValidatePluginsAlert = ({ children, ...props }) => {
|
422
458
|
const { payload } = useResolvePayload();
|
423
459
|
const { plugins } = useEmbedPluginState();
|
424
460
|
if (payload && plugins?.length === 0) {
|
425
|
-
return /* @__PURE__ */
|
426
|
-
|
427
|
-
|
428
|
-
}
|
461
|
+
return /* @__PURE__ */ jsxs9(Alert2, { severity: "warning", ...props, children: [
|
462
|
+
/* @__PURE__ */ jsx15(AlertTitle, { children: "Missing plugins!" }),
|
463
|
+
"Payload found but no plugins were present."
|
464
|
+
] });
|
429
465
|
}
|
430
|
-
return /* @__PURE__ */
|
431
|
-
}
|
466
|
+
return /* @__PURE__ */ jsx15(Fragment6, { children });
|
467
|
+
};
|
432
468
|
|
433
469
|
// src/components/EmbedPlugin.tsx
|
434
|
-
|
435
|
-
|
436
|
-
|
437
|
-
|
438
|
-
|
439
|
-
|
440
|
-
|
441
|
-
|
442
|
-
|
443
|
-
|
444
|
-
|
445
|
-
|
446
|
-
|
447
|
-
|
448
|
-
|
449
|
-
|
450
|
-
|
451
|
-
|
452
|
-
|
453
|
-
|
454
|
-
|
455
|
-
|
456
|
-
}
|
457
|
-
|
458
|
-
|
459
|
-
|
460
|
-
|
461
|
-
|
470
|
+
import { jsx as jsx16 } from "react/jsx-runtime";
|
471
|
+
var EmbedPluginInner = ({
|
472
|
+
validateSchema,
|
473
|
+
plugins,
|
474
|
+
huriPayload,
|
475
|
+
refreshTitle = "",
|
476
|
+
timestampLabel = "Data From",
|
477
|
+
hideElementsConfig,
|
478
|
+
embedPluginConfig,
|
479
|
+
onRefresh,
|
480
|
+
children
|
481
|
+
}) => {
|
482
|
+
return /* @__PURE__ */ jsx16(ErrorBoundary, { children: /* @__PURE__ */ jsx16(
|
483
|
+
EmbedPluginProvider,
|
484
|
+
{
|
485
|
+
refreshTitle,
|
486
|
+
timestampLabel,
|
487
|
+
hideElementsConfig,
|
488
|
+
plugins,
|
489
|
+
embedPluginConfig,
|
490
|
+
children: /* @__PURE__ */ jsx16(WithResolvers, { onRefresh, huriPayload, children: /* @__PURE__ */ jsx16(WithValidators, { validateSchema, children: /* @__PURE__ */ jsx16(ListModeProvider, { defaultListMode: embedPluginConfig?.listMode, children }) }) })
|
491
|
+
}
|
492
|
+
) });
|
493
|
+
};
|
494
|
+
var WithResolvers = ({
|
495
|
+
children,
|
496
|
+
onRefresh,
|
497
|
+
huriPayload
|
498
|
+
}) => {
|
499
|
+
return /* @__PURE__ */ jsx16(RefreshPayloadProvider, { onRefresh, children: /* @__PURE__ */ jsx16(ResolvePayloadProvider, { huriPayload, children: /* @__PURE__ */ jsx16(EmbedResolver, { children }) }) });
|
500
|
+
};
|
501
|
+
var WithValidators = ({ children, validateSchema }) => {
|
502
|
+
return /* @__PURE__ */ jsx16(ValidatePayloadProvider, { enabled: validateSchema, children: /* @__PURE__ */ jsx16(ValidatePluginsAlert, { children: /* @__PURE__ */ jsx16(ValidatePayloadAlert, { children }) }) });
|
503
|
+
};
|
462
504
|
|
463
505
|
// src/components/embed-card/error-handling/EmbedCardApiErrorRenderer.tsx
|
464
506
|
import { ErrorAlert, ErrorRender } from "@xylabs/react-error";
|
465
|
-
import React18 from "react";
|
466
507
|
|
467
508
|
// src/components/embed-card/error-handling/EmbedErrorCard.tsx
|
468
|
-
import {
|
469
|
-
|
470
|
-
|
471
|
-
|
509
|
+
import {
|
510
|
+
Alert as Alert3,
|
511
|
+
AlertTitle as AlertTitle2,
|
512
|
+
Card as Card2,
|
513
|
+
CardContent as CardContent2,
|
514
|
+
Typography
|
515
|
+
} from "@mui/material";
|
516
|
+
import { Fragment as Fragment7, jsx as jsx17, jsxs as jsxs10 } from "react/jsx-runtime";
|
517
|
+
var EmbedErrorCard = (props) => {
|
518
|
+
const {
|
519
|
+
alertProps,
|
520
|
+
error,
|
521
|
+
scope,
|
522
|
+
hideErrorDetails = true,
|
523
|
+
children,
|
524
|
+
...cardProps
|
525
|
+
} = props;
|
472
526
|
const errorProps = {
|
473
527
|
alertProps,
|
474
528
|
error,
|
475
529
|
hideErrorDetails,
|
476
530
|
scope
|
477
531
|
};
|
478
|
-
return /* @__PURE__ */
|
479
|
-
}
|
480
|
-
var DefaultErrorAlert =
|
481
|
-
|
482
|
-
|
483
|
-
|
484
|
-
|
485
|
-
|
486
|
-
|
487
|
-
|
488
|
-
|
489
|
-
|
490
|
-
|
491
|
-
|
492
|
-
|
493
|
-
|
494
|
-
|
532
|
+
return /* @__PURE__ */ jsx17(Card2, { ...cardProps, children: /* @__PURE__ */ jsx17(CardContent2, { children: children ?? /* @__PURE__ */ jsx17(DefaultErrorAlert, { ...errorProps }) }) });
|
533
|
+
};
|
534
|
+
var DefaultErrorAlert = ({
|
535
|
+
alertProps,
|
536
|
+
scope,
|
537
|
+
hideErrorDetails,
|
538
|
+
error
|
539
|
+
}) => {
|
540
|
+
return /* @__PURE__ */ jsxs10(Alert3, { severity: "error", ...alertProps, children: [
|
541
|
+
/* @__PURE__ */ jsx17(AlertTitle2, { children: "Whoops! Something went wrong" }),
|
542
|
+
scope ? /* @__PURE__ */ jsxs10(Typography, { variant: "caption", children: [
|
543
|
+
"Scope:",
|
544
|
+
scope
|
545
|
+
] }) : null,
|
546
|
+
!hideErrorDetails && error ? /* @__PURE__ */ jsxs10(Fragment7, { children: [
|
547
|
+
/* @__PURE__ */ jsx17(Typography, { variant: "caption", children: "Error: " }),
|
548
|
+
/* @__PURE__ */ jsx17(Typography, { variant: "caption", children: error?.message })
|
549
|
+
] }) : /* @__PURE__ */ jsx17(Typography, { variant: "caption", fontSize: "small", children: "Error Loading Plugin" })
|
550
|
+
] });
|
551
|
+
};
|
495
552
|
|
496
553
|
// src/components/embed-card/error-handling/EmbedCardApiErrorRenderer.tsx
|
497
|
-
|
498
|
-
|
499
|
-
|
500
|
-
|
501
|
-
|
502
|
-
|
503
|
-
|
504
|
-
|
505
|
-
|
506
|
-
|
507
|
-
}
|
508
|
-
var CustomApiErrorCard = /* @__PURE__ */ __name(({ xyoError, ...props }) => {
|
509
|
-
return /* @__PURE__ */ React18.createElement(EmbedErrorCard, props, /* @__PURE__ */ React18.createElement(ErrorAlert, {
|
510
|
-
error: xyoError
|
511
|
-
}));
|
512
|
-
}, "CustomApiErrorCard");
|
554
|
+
import { jsx as jsx18 } from "react/jsx-runtime";
|
555
|
+
var EmbedCardApiErrorRenderer = ({
|
556
|
+
xyoError,
|
557
|
+
children,
|
558
|
+
...props
|
559
|
+
}) => {
|
560
|
+
return /* @__PURE__ */ jsx18(ErrorRender, { error: xyoError, noReAuth: true, noErrorDisplay: true, customError: /* @__PURE__ */ jsx18(CustomApiErrorCard, { xyoError, ...props }), children });
|
561
|
+
};
|
562
|
+
var CustomApiErrorCard = ({ xyoError, ...props }) => {
|
563
|
+
return /* @__PURE__ */ jsx18(EmbedErrorCard, { ...props, children: /* @__PURE__ */ jsx18(ErrorAlert, { error: xyoError }) });
|
564
|
+
};
|
513
565
|
|
514
566
|
// src/components/embed-card/EmbedPluginCard.tsx
|
515
|
-
|
516
|
-
|
517
|
-
|
518
|
-
|
519
|
-
|
567
|
+
import { jsx as jsx19, jsxs as jsxs11 } from "react/jsx-runtime";
|
568
|
+
var ApiEmbedPluginCard = ({ children, ...props }) => {
|
569
|
+
const {
|
570
|
+
validateSchema,
|
571
|
+
plugins = [],
|
520
572
|
huriPayload,
|
573
|
+
refreshTitle = "",
|
574
|
+
timestampLabel = "Data From",
|
575
|
+
hideElementsConfig,
|
576
|
+
embedPluginConfig,
|
521
577
|
onRefresh,
|
522
|
-
|
523
|
-
|
524
|
-
|
525
|
-
|
526
|
-
|
527
|
-
|
528
|
-
|
578
|
+
...busyCardProps
|
579
|
+
} = props;
|
580
|
+
return /* @__PURE__ */ jsxs11(
|
581
|
+
EmbedPluginInner,
|
582
|
+
{
|
583
|
+
...{
|
584
|
+
embedPluginConfig,
|
585
|
+
hideElementsConfig,
|
586
|
+
huriPayload,
|
587
|
+
onRefresh,
|
588
|
+
plugins,
|
589
|
+
refreshTitle,
|
590
|
+
timestampLabel,
|
591
|
+
validateSchema
|
592
|
+
},
|
593
|
+
children: [
|
594
|
+
/* @__PURE__ */ jsx19(EmbedPluginCardInner, { ...busyCardProps }),
|
595
|
+
children
|
596
|
+
]
|
597
|
+
}
|
598
|
+
);
|
599
|
+
};
|
600
|
+
var EmbedPluginCardInner = (props) => {
|
529
601
|
const { payload, huriError } = useResolvePayload();
|
530
602
|
const { refreshPayload } = useRefreshPayload();
|
531
603
|
const theme = useTheme();
|
532
|
-
return /* @__PURE__ */
|
533
|
-
|
534
|
-
|
535
|
-
|
536
|
-
|
537
|
-
|
538
|
-
|
539
|
-
|
540
|
-
|
541
|
-
|
542
|
-
|
543
|
-
|
544
|
-
|
545
|
-
|
546
|
-
|
547
|
-
}
|
548
|
-
|
549
|
-
|
550
|
-
}, "EmbedPluginCardInner");
|
604
|
+
return /* @__PURE__ */ jsx19(EmbedCardApiErrorRenderer, { xyoError: huriError, children: /* @__PURE__ */ jsx19(
|
605
|
+
EmbedPluginCard,
|
606
|
+
{
|
607
|
+
elevation: 3,
|
608
|
+
variant: "elevation",
|
609
|
+
busy: Boolean(!refreshPayload && payload),
|
610
|
+
busyVariantProps: {
|
611
|
+
style: {
|
612
|
+
alignItems: "start",
|
613
|
+
paddingTop: theme.spacing(2),
|
614
|
+
zIndex: 2
|
615
|
+
}
|
616
|
+
},
|
617
|
+
sx: { position: "relative" },
|
618
|
+
...props
|
619
|
+
}
|
620
|
+
) });
|
621
|
+
};
|
551
622
|
export {
|
552
623
|
ApiEmbedPluginCard,
|
553
624
|
BusyCard,
|