@pushframe/sdk 0.1.2 → 0.1.4
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/index.js +58 -43
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +58 -43
- package/dist/index.mjs.map +1 -1
- package/package.json +15 -11
package/dist/index.js
CHANGED
|
@@ -42,7 +42,7 @@ var ScrollView = React4.forwardRef(function ScrollView2({ if: _if, actions: _act
|
|
|
42
42
|
return /* @__PURE__ */ jsxRuntime.jsx(reactNative.ScrollView, { ref, ...rest });
|
|
43
43
|
});
|
|
44
44
|
function Image({ if: _if, actions: _actions, src, source, ...rest }) {
|
|
45
|
-
const resolvedSource = src ? { uri: src } : source
|
|
45
|
+
const resolvedSource = src ? { uri: src } : source != null ? source : { uri: "" };
|
|
46
46
|
return /* @__PURE__ */ jsxRuntime.jsx(reactNative.Image, { source: resolvedSource, ...rest });
|
|
47
47
|
}
|
|
48
48
|
function Pressable({ if: _if, actions: _actions, ...rest }) {
|
|
@@ -166,7 +166,8 @@ var ComponentRegistry = class {
|
|
|
166
166
|
* Returns null if no component is registered for the type.
|
|
167
167
|
*/
|
|
168
168
|
resolve(type) {
|
|
169
|
-
|
|
169
|
+
var _a;
|
|
170
|
+
return (_a = this.components.get(type)) != null ? _a : null;
|
|
170
171
|
}
|
|
171
172
|
/**
|
|
172
173
|
* Returns all registered type strings (useful for debugging).
|
|
@@ -182,6 +183,7 @@ var TYPE_COLORS = {
|
|
|
182
183
|
warning: "#f59e0b"
|
|
183
184
|
};
|
|
184
185
|
var ToastHost = React4.forwardRef(function ToastHost2(_props, ref) {
|
|
186
|
+
var _a, _b;
|
|
185
187
|
const [toast, setToast] = React4.useState(null);
|
|
186
188
|
const opacity = React4.useRef(new reactNative.Animated.Value(0)).current;
|
|
187
189
|
const idRef = React4.useRef(0);
|
|
@@ -212,12 +214,13 @@ var ToastHost = React4.forwardRef(function ToastHost2(_props, ref) {
|
|
|
212
214
|
ref,
|
|
213
215
|
() => ({
|
|
214
216
|
show(payload) {
|
|
217
|
+
var _a2, _b2;
|
|
215
218
|
idRef.current += 1;
|
|
216
219
|
setToast({
|
|
217
220
|
id: idRef.current,
|
|
218
221
|
message: payload.message,
|
|
219
|
-
duration: payload.duration
|
|
220
|
-
type: payload.type
|
|
222
|
+
duration: (_a2 = payload.duration) != null ? _a2 : 3e3,
|
|
223
|
+
type: (_b2 = payload.type) != null ? _b2 : "info"
|
|
221
224
|
});
|
|
222
225
|
opacity.setValue(0);
|
|
223
226
|
}
|
|
@@ -225,7 +228,7 @@ var ToastHost = React4.forwardRef(function ToastHost2(_props, ref) {
|
|
|
225
228
|
[opacity]
|
|
226
229
|
);
|
|
227
230
|
if (!toast) return null;
|
|
228
|
-
const backgroundColor = TYPE_COLORS[toast.type
|
|
231
|
+
const backgroundColor = (_b = TYPE_COLORS[(_a = toast.type) != null ? _a : "info"]) != null ? _b : TYPE_COLORS.info;
|
|
229
232
|
return /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles.container, pointerEvents: "none", children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Animated.View, { style: [styles.toast, { backgroundColor, opacity }], children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles.message, children: toast.message }) }) });
|
|
230
233
|
});
|
|
231
234
|
var styles = reactNative.StyleSheet.create({
|
|
@@ -275,7 +278,7 @@ var BottomSheetHost = React4.forwardRef(
|
|
|
275
278
|
duration: 250,
|
|
276
279
|
useNativeDriver: true
|
|
277
280
|
}).start(() => {
|
|
278
|
-
onDone
|
|
281
|
+
onDone == null ? void 0 : onDone();
|
|
279
282
|
});
|
|
280
283
|
},
|
|
281
284
|
[translateY]
|
|
@@ -382,7 +385,7 @@ function resolveValue(value, context) {
|
|
|
382
385
|
return value;
|
|
383
386
|
}
|
|
384
387
|
const fullMatch = FULL_BINDING_RE.exec(value);
|
|
385
|
-
if (fullMatch
|
|
388
|
+
if ((fullMatch == null ? void 0 : fullMatch[1]) !== void 0) {
|
|
386
389
|
return evaluateExpression(fullMatch[1].trim(), context);
|
|
387
390
|
}
|
|
388
391
|
if (INLINE_BINDING_RE.test(value)) {
|
|
@@ -572,13 +575,16 @@ function PushFrameProvider({
|
|
|
572
575
|
const toastRef = React4.useRef(null);
|
|
573
576
|
const bottomSheetRef = React4.useRef(null);
|
|
574
577
|
const showToast = React4.useCallback((payload) => {
|
|
575
|
-
|
|
578
|
+
var _a;
|
|
579
|
+
(_a = toastRef.current) == null ? void 0 : _a.show(payload);
|
|
576
580
|
}, []);
|
|
577
581
|
const showBottomSheet = React4.useCallback((payload) => {
|
|
578
|
-
|
|
582
|
+
var _a;
|
|
583
|
+
(_a = bottomSheetRef.current) == null ? void 0 : _a.show(payload);
|
|
579
584
|
}, []);
|
|
580
585
|
const dismissBottomSheet = React4.useCallback(() => {
|
|
581
|
-
|
|
586
|
+
var _a;
|
|
587
|
+
(_a = bottomSheetRef.current) == null ? void 0 : _a.dismiss();
|
|
582
588
|
}, []);
|
|
583
589
|
const renderBottomSheetContent = React4.useCallback(
|
|
584
590
|
(schema, sheetContext) => {
|
|
@@ -592,7 +598,7 @@ function PushFrameProvider({
|
|
|
592
598
|
showToast(payload);
|
|
593
599
|
return;
|
|
594
600
|
}
|
|
595
|
-
onAction
|
|
601
|
+
onAction == null ? void 0 : onAction(action, payload);
|
|
596
602
|
};
|
|
597
603
|
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
598
604
|
RecursiveRenderer,
|
|
@@ -644,6 +650,7 @@ function PushFrameProvider({
|
|
|
644
650
|
] });
|
|
645
651
|
}
|
|
646
652
|
async function fetchSchema(baseUrl, apiKey, path) {
|
|
653
|
+
var _a;
|
|
647
654
|
const url = new URL(path, baseUrl + "/").toString();
|
|
648
655
|
const headers = {
|
|
649
656
|
Accept: "application/json",
|
|
@@ -655,7 +662,7 @@ async function fetchSchema(baseUrl, apiKey, path) {
|
|
|
655
662
|
throw new Error(`[PushFrame] HTTP ${res.status} fetching "${path}"`);
|
|
656
663
|
}
|
|
657
664
|
const envelope = await res.json();
|
|
658
|
-
return envelope.schema
|
|
665
|
+
return (_a = envelope.schema) != null ? _a : envelope;
|
|
659
666
|
}
|
|
660
667
|
function PushFrameComponentInternal({
|
|
661
668
|
id,
|
|
@@ -684,7 +691,7 @@ function PushFrameComponentInternal({
|
|
|
684
691
|
const [schema, setSchema] = React4.useState(null);
|
|
685
692
|
const [fetchError, setFetchError] = React4.useState(null);
|
|
686
693
|
const [isFetching, setIsFetching] = React4.useState(true);
|
|
687
|
-
const fetchPath = `${resourceType}/${encodeURIComponent(id)}/${encodeURIComponent(appVersion
|
|
694
|
+
const fetchPath = `${resourceType}/${encodeURIComponent(id)}/${encodeURIComponent(appVersion != null ? appVersion : "null")}`;
|
|
688
695
|
const mergedContext = slotContext ? { ...globalContext, ...slotContext } : globalContext;
|
|
689
696
|
const loadingUI = slotLoading !== void 0 ? slotLoading : providerLoading;
|
|
690
697
|
const fallbackUI = slotFallback !== void 0 ? slotFallback : providerFallback;
|
|
@@ -703,7 +710,7 @@ function PushFrameComponentInternal({
|
|
|
703
710
|
const error = err instanceof Error ? err : new Error(String(err));
|
|
704
711
|
setFetchError(error);
|
|
705
712
|
setIsFetching(false);
|
|
706
|
-
onError
|
|
713
|
+
onError == null ? void 0 : onError(error);
|
|
707
714
|
}
|
|
708
715
|
});
|
|
709
716
|
return () => {
|
|
@@ -727,18 +734,18 @@ function PushFrameComponentInternal({
|
|
|
727
734
|
if (action === "scroll-to") {
|
|
728
735
|
return;
|
|
729
736
|
}
|
|
730
|
-
const stopped = slotOnAction
|
|
737
|
+
const stopped = slotOnAction == null ? void 0 : slotOnAction(action, payload);
|
|
731
738
|
if (stopped) return;
|
|
732
|
-
providerOnAction
|
|
739
|
+
providerOnAction == null ? void 0 : providerOnAction(action, payload);
|
|
733
740
|
},
|
|
734
741
|
[showToast, showBottomSheet, dismissBottomSheet, slotOnAction, providerOnAction]
|
|
735
742
|
);
|
|
736
743
|
const isShowingLoader = externalLoading || isFetching;
|
|
737
744
|
if (isShowingLoader) {
|
|
738
|
-
return loadingUI
|
|
745
|
+
return loadingUI != null ? loadingUI : null;
|
|
739
746
|
}
|
|
740
747
|
if (fetchError || !schema) {
|
|
741
|
-
return fallbackUI
|
|
748
|
+
return fallbackUI != null ? fallbackUI : null;
|
|
742
749
|
}
|
|
743
750
|
const rendered = /* @__PURE__ */ jsxRuntime.jsx(
|
|
744
751
|
RecursiveRenderer,
|
|
@@ -930,14 +937,15 @@ function resolveAccessibilityProps(props) {
|
|
|
930
937
|
return out;
|
|
931
938
|
}
|
|
932
939
|
function buildFrameStyle(props, parentDirection) {
|
|
940
|
+
var _a, _b, _c, _d;
|
|
933
941
|
const style = {};
|
|
934
|
-
const frameType = props.type
|
|
942
|
+
const frameType = (_a = props.type) != null ? _a : "stack";
|
|
935
943
|
if (frameType === "grid") {
|
|
936
|
-
if (props.align) style.alignItems = ALIGN_MAP[props.align]
|
|
944
|
+
if (props.align) style.alignItems = (_b = ALIGN_MAP[props.align]) != null ? _b : props.align;
|
|
937
945
|
} else {
|
|
938
946
|
style.flexDirection = props.direction === "horizontal" ? "row" : "column";
|
|
939
|
-
if (props.align) style.alignItems = ALIGN_MAP[props.align]
|
|
940
|
-
if (props.distribute) style.justifyContent = DISTRIBUTE_MAP[props.distribute]
|
|
947
|
+
if (props.align) style.alignItems = (_c = ALIGN_MAP[props.align]) != null ? _c : props.align;
|
|
948
|
+
if (props.distribute) style.justifyContent = (_d = DISTRIBUTE_MAP[props.distribute]) != null ? _d : props.distribute;
|
|
941
949
|
if (props.gap !== void 0 && props.gap !== 0) style.gap = props.gap;
|
|
942
950
|
if (props.wrap === "yes") style.flexWrap = "wrap";
|
|
943
951
|
}
|
|
@@ -1057,9 +1065,10 @@ function transformScreen(id, raw, children) {
|
|
|
1057
1065
|
return node;
|
|
1058
1066
|
}
|
|
1059
1067
|
function transformFrame(id, raw, children, parentDirection) {
|
|
1068
|
+
var _a, _b;
|
|
1060
1069
|
const { actions, condition } = extractMeta(raw);
|
|
1061
1070
|
const p = stripBridgeKeys(raw);
|
|
1062
|
-
const isGrid = (p.type
|
|
1071
|
+
const isGrid = ((_a = p.type) != null ? _a : "stack") === "grid";
|
|
1063
1072
|
const isScrollable = p.scrollable === true;
|
|
1064
1073
|
const isPressable = p.pressable === true;
|
|
1065
1074
|
const direction = p.direction === "horizontal" ? "horizontal" : "vertical";
|
|
@@ -1086,7 +1095,7 @@ function transformFrame(id, raw, children, parentDirection) {
|
|
|
1086
1095
|
type: "view",
|
|
1087
1096
|
props: {
|
|
1088
1097
|
...Object.keys(gridStyle).length ? { style: gridStyle } : {},
|
|
1089
|
-
numColumns: p.columns
|
|
1098
|
+
numColumns: (_b = p.columns) != null ? _b : 2,
|
|
1090
1099
|
...access,
|
|
1091
1100
|
...hasSafeArea || isPressable ? {} : vis
|
|
1092
1101
|
},
|
|
@@ -1210,6 +1219,7 @@ function transformFrame(id, raw, children, parentDirection) {
|
|
|
1210
1219
|
});
|
|
1211
1220
|
}
|
|
1212
1221
|
function transformText(id, raw, parentDirection) {
|
|
1222
|
+
var _a, _b;
|
|
1213
1223
|
const { actions, condition } = extractMeta(raw);
|
|
1214
1224
|
const props = stripBridgeKeys(raw);
|
|
1215
1225
|
const style = {};
|
|
@@ -1225,7 +1235,7 @@ function transformText(id, raw, parentDirection) {
|
|
|
1225
1235
|
}
|
|
1226
1236
|
if (props.color) style.color = props.color;
|
|
1227
1237
|
if (props.fontSize !== void 0) style.fontSize = props.fontSize;
|
|
1228
|
-
if (props.fontWeight) style.fontWeight = FONT_WEIGHT_MAP[props.fontWeight]
|
|
1238
|
+
if (props.fontWeight) style.fontWeight = (_a = FONT_WEIGHT_MAP[props.fontWeight]) != null ? _a : props.fontWeight;
|
|
1229
1239
|
if (props.fontFamily) style.fontFamily = props.fontFamily;
|
|
1230
1240
|
if (props.fontStyle) style.fontStyle = props.fontStyle;
|
|
1231
1241
|
if (props.lineHeight !== void 0) style.lineHeight = props.lineHeight;
|
|
@@ -1252,7 +1262,7 @@ function transformText(id, raw, parentDirection) {
|
|
|
1252
1262
|
props: {
|
|
1253
1263
|
// SDK contract: text content lives in the `value` prop.
|
|
1254
1264
|
// The Craft editor stores text in `content`; map it to `value` here.
|
|
1255
|
-
value: props.content
|
|
1265
|
+
value: (_b = props.content) != null ? _b : "",
|
|
1256
1266
|
...Object.keys(style).length ? { style } : {},
|
|
1257
1267
|
...textProps,
|
|
1258
1268
|
...resolveAccessibilityProps(props),
|
|
@@ -1264,6 +1274,7 @@ function transformText(id, raw, parentDirection) {
|
|
|
1264
1274
|
return node;
|
|
1265
1275
|
}
|
|
1266
1276
|
function transformImage(id, raw, children, parentDirection) {
|
|
1277
|
+
var _a, _b;
|
|
1267
1278
|
const { actions, condition } = extractMeta(raw);
|
|
1268
1279
|
const props = stripBridgeKeys(raw);
|
|
1269
1280
|
const style = {};
|
|
@@ -1277,7 +1288,7 @@ function transformImage(id, raw, children, parentDirection) {
|
|
|
1277
1288
|
if (props.src) imageProps.source = { uri: props.src };
|
|
1278
1289
|
if (props.placeholder) imageProps.defaultSource = { uri: props.placeholder };
|
|
1279
1290
|
if (props.fallback) imageProps.fallback = { uri: props.fallback };
|
|
1280
|
-
imageProps.resizeMode = FIT_TO_RESIZE_MODE[props.fit
|
|
1291
|
+
imageProps.resizeMode = (_b = FIT_TO_RESIZE_MODE[(_a = props.fit) != null ? _a : "cover"]) != null ? _b : "cover";
|
|
1281
1292
|
if (props.background === true) imageProps.background = true;
|
|
1282
1293
|
if (props.decorative) {
|
|
1283
1294
|
imageProps.accessible = false;
|
|
@@ -1302,14 +1313,15 @@ function transformImage(id, raw, children, parentDirection) {
|
|
|
1302
1313
|
return node;
|
|
1303
1314
|
}
|
|
1304
1315
|
function transformInput(id, raw, parentDirection) {
|
|
1316
|
+
var _a, _b, _c, _d, _e, _f, _g;
|
|
1305
1317
|
const { actions, condition } = extractMeta(raw);
|
|
1306
1318
|
const props = stripBridgeKeys(raw);
|
|
1307
1319
|
const style = {};
|
|
1308
|
-
resolveSizeModeRN(props.width
|
|
1320
|
+
resolveSizeModeRN((_a = props.width) != null ? _a : "fill", "width", style, parentDirection);
|
|
1309
1321
|
Object.assign(style, resolvePaddingRN(props.padding));
|
|
1310
1322
|
if (props.opacity !== void 0) style.opacity = props.opacity / 100;
|
|
1311
1323
|
Object.assign(style, resolvePositionRN(props));
|
|
1312
|
-
const inputTypeDefaults = INPUT_TYPE_MAP[props.inputType
|
|
1324
|
+
const inputTypeDefaults = (_c = INPUT_TYPE_MAP[(_b = props.inputType) != null ? _b : "text"]) != null ? _c : INPUT_TYPE_MAP.text;
|
|
1313
1325
|
const node = {
|
|
1314
1326
|
id,
|
|
1315
1327
|
type: "textinput",
|
|
@@ -1322,12 +1334,12 @@ function transformInput(id, raw, parentDirection) {
|
|
|
1322
1334
|
...props.errorText !== void 0 ? { errorText: props.errorText } : {},
|
|
1323
1335
|
...inputTypeDefaults,
|
|
1324
1336
|
...props.autoCapitalize ? { autoCapitalize: props.autoCapitalize } : {},
|
|
1325
|
-
returnKeyType: props.returnKey
|
|
1326
|
-
multiline: props.multiline
|
|
1337
|
+
returnKeyType: (_d = props.returnKey) != null ? _d : "done",
|
|
1338
|
+
multiline: (_e = props.multiline) != null ? _e : false,
|
|
1327
1339
|
...props.multiline && props.minLines ? { numberOfLines: props.minLines } : {},
|
|
1328
1340
|
...props.multiline && props.maxLines ? { maxNumberOfLines: props.maxLines } : {},
|
|
1329
|
-
variant: props.variant
|
|
1330
|
-
size: props.size
|
|
1341
|
+
variant: (_f = props.variant) != null ? _f : "outline",
|
|
1342
|
+
size: (_g = props.size) != null ? _g : "md",
|
|
1331
1343
|
...props.leadingIcon ? { leadingIcon: props.leadingIcon } : {},
|
|
1332
1344
|
...props.trailingIcon ? { trailingIcon: props.trailingIcon } : {},
|
|
1333
1345
|
...resolveAccessibilityProps(props),
|
|
@@ -1339,9 +1351,10 @@ function transformInput(id, raw, parentDirection) {
|
|
|
1339
1351
|
return node;
|
|
1340
1352
|
}
|
|
1341
1353
|
function transformList(id, raw, children, parentDirection) {
|
|
1354
|
+
var _a, _b, _c;
|
|
1342
1355
|
const { actions, condition } = extractMeta(raw);
|
|
1343
1356
|
const props = stripBridgeKeys(raw);
|
|
1344
|
-
const listType = props.type
|
|
1357
|
+
const listType = (_a = props.type) != null ? _a : "stack";
|
|
1345
1358
|
const direction = props.direction === "horizontal" ? "horizontal" : "vertical";
|
|
1346
1359
|
const edges = safeAreaEdges(props.safeArea);
|
|
1347
1360
|
const hasSafeArea = edges.length > 0;
|
|
@@ -1363,8 +1376,8 @@ function transformList(id, raw, children, parentDirection) {
|
|
|
1363
1376
|
// `data` holds the binding expression for the list items array.
|
|
1364
1377
|
// RecursiveRenderer resolves it and passes items to the FlatList primitive.
|
|
1365
1378
|
data: props.data,
|
|
1366
|
-
keyExtractor: props.keyExtractor
|
|
1367
|
-
...listType === "grid" ? { numColumns: props.columns
|
|
1379
|
+
keyExtractor: (_b = props.keyExtractor) != null ? _b : "id",
|
|
1380
|
+
...listType === "grid" ? { numColumns: (_c = props.columns) != null ? _c : 2 } : {},
|
|
1368
1381
|
...listType === "grid" && props.columnGap ? { columnGap: props.columnGap } : {},
|
|
1369
1382
|
...listType === "grid" && props.rowGap ? { rowGap: props.rowGap } : {},
|
|
1370
1383
|
horizontal: direction === "horizontal",
|
|
@@ -1396,6 +1409,7 @@ function transformList(id, raw, children, parentDirection) {
|
|
|
1396
1409
|
return savNode;
|
|
1397
1410
|
}
|
|
1398
1411
|
function transformIcon(id, raw) {
|
|
1412
|
+
var _a, _b;
|
|
1399
1413
|
const { actions, condition } = extractMeta(raw);
|
|
1400
1414
|
const props = stripBridgeKeys(raw);
|
|
1401
1415
|
const style = {};
|
|
@@ -1406,8 +1420,8 @@ function transformIcon(id, raw) {
|
|
|
1406
1420
|
type: "icon",
|
|
1407
1421
|
props: {
|
|
1408
1422
|
name: props.name,
|
|
1409
|
-
set: props.set
|
|
1410
|
-
size: props.size
|
|
1423
|
+
set: (_a = props.set) != null ? _a : "default",
|
|
1424
|
+
size: (_b = props.size) != null ? _b : 24,
|
|
1411
1425
|
...props.color ? { color: props.color } : {},
|
|
1412
1426
|
...Object.keys(style).length ? { style } : {},
|
|
1413
1427
|
...resolveAccessibilityProps(props),
|
|
@@ -1419,18 +1433,19 @@ function transformIcon(id, raw) {
|
|
|
1419
1433
|
return node;
|
|
1420
1434
|
}
|
|
1421
1435
|
function buildNodeFromSchema(nodeId, schema, customComponents, visited, parentId) {
|
|
1436
|
+
var _a, _b, _c, _d, _e;
|
|
1422
1437
|
if (visited.has(nodeId)) {
|
|
1423
1438
|
throw new Error(`Circular reference detected at node ${nodeId}`);
|
|
1424
1439
|
}
|
|
1425
1440
|
visited.add(nodeId);
|
|
1426
1441
|
const node = schema[nodeId];
|
|
1427
1442
|
if (!node) throw new Error(`Node not found: ${nodeId}`);
|
|
1428
|
-
const resolvedName = node.type
|
|
1443
|
+
const resolvedName = (_a = node.type) == null ? void 0 : _a.resolvedName;
|
|
1429
1444
|
if (!resolvedName) throw new Error(`Invalid node type at ${nodeId}`);
|
|
1430
|
-
const raw = node.props
|
|
1431
|
-
const parentDirection = parentId ? schema[parentId]
|
|
1445
|
+
const raw = (_b = node.props) != null ? _b : {};
|
|
1446
|
+
const parentDirection = parentId ? ((_d = (_c = schema[parentId]) == null ? void 0 : _c.props) == null ? void 0 : _d["direction"]) === "horizontal" ? "horizontal" : "vertical" : "vertical";
|
|
1432
1447
|
const outputId = nodeId === "ROOT" ? "root" : nodeId;
|
|
1433
|
-
const childNodes = (node.nodes
|
|
1448
|
+
const childNodes = ((_e = node.nodes) != null ? _e : []).map(
|
|
1434
1449
|
(childId) => buildNodeFromSchema(childId, schema, customComponents, visited, nodeId)
|
|
1435
1450
|
);
|
|
1436
1451
|
switch (resolvedName) {
|
|
@@ -1458,7 +1473,7 @@ function resolveCustomComponent(id, raw, parentDirection, customComponents) {
|
|
|
1458
1473
|
const { actions, condition } = extractMeta(raw);
|
|
1459
1474
|
const props = stripBridgeKeys(raw);
|
|
1460
1475
|
const { componentId, componentKey, propValues, ...frameProps } = props;
|
|
1461
|
-
const key = componentKey
|
|
1476
|
+
const key = componentKey != null ? componentKey : componentId;
|
|
1462
1477
|
const def = key ? customComponents[key] : void 0;
|
|
1463
1478
|
const wrapperStyle = buildFrameStyle(frameProps, parentDirection);
|
|
1464
1479
|
const vis = props.visible !== void 0 && props.visible !== true ? { visible: props.visible } : {};
|