@cntrl-site/sdk-nextjs 1.6.11-alpha.0 → 1.6.11
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/{cntrl-site-sdk-nextjs-1.6.9.tgz → cntrl-site-sdk-nextjs-1.6.11-alpha.0.tgz} +0 -0
- package/lib/components/items/CompoundItem/CompoundChild.js +9 -8
- package/package.json +1 -1
- package/src/components/items/CompoundItem/CompoundChild.tsx +9 -7
- package/cntrl-site-sdk-nextjs-1.6.8-alpha.0.tgz +0 -0
- package/cntrl-site-sdk-nextjs-1.6.8.tgz +0 -0
|
Binary file
|
|
@@ -24,7 +24,7 @@ const useItemPointerEvents_1 = require("../useItemPointerEvents");
|
|
|
24
24
|
const useItemArea_1 = require("../useItemArea");
|
|
25
25
|
const noop = () => null;
|
|
26
26
|
const CompoundChild = ({ item, sectionId, isParentVisible = true }) => {
|
|
27
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
|
|
27
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
|
|
28
28
|
const id = (0, react_1.useId)();
|
|
29
29
|
const { layouts } = (0, useCntrlContext_1.useCntrlContext)();
|
|
30
30
|
const layout = (0, useLayoutContext_1.useLayoutContext)();
|
|
@@ -33,13 +33,14 @@ const CompoundChild = ({ item, sectionId, isParentVisible = true }) => {
|
|
|
33
33
|
const itemScale = (0, useItemScale_1.useItemScale)(item, sectionId);
|
|
34
34
|
const interactionCtrl = (0, useItemInteractionCtrl_1.useItemInteractionCtrl)(item.id);
|
|
35
35
|
const triggers = (0, useItemTriggers_1.useItemTriggers)(interactionCtrl);
|
|
36
|
-
const
|
|
36
|
+
const wrapperStateProps = interactionCtrl === null || interactionCtrl === void 0 ? void 0 : interactionCtrl.getState(['top', 'left', 'width', 'height']);
|
|
37
|
+
const innerStateProps = interactionCtrl === null || interactionCtrl === void 0 ? void 0 : interactionCtrl.getState(['scale']);
|
|
37
38
|
const compoundSettings = layout && item.compoundSettings ? item.compoundSettings[layout] : undefined;
|
|
38
39
|
const { width, height, top, left } = (0, useItemArea_1.useItemArea)(item, sectionId, {
|
|
39
|
-
top: (_c =
|
|
40
|
-
left: (_d =
|
|
41
|
-
width: (_e =
|
|
42
|
-
height: (_f =
|
|
40
|
+
top: (_c = wrapperStateProps === null || wrapperStateProps === void 0 ? void 0 : wrapperStateProps.styles) === null || _c === void 0 ? void 0 : _c.top,
|
|
41
|
+
left: (_d = wrapperStateProps === null || wrapperStateProps === void 0 ? void 0 : wrapperStateProps.styles) === null || _d === void 0 ? void 0 : _d.left,
|
|
42
|
+
width: (_e = wrapperStateProps === null || wrapperStateProps === void 0 ? void 0 : wrapperStateProps.styles) === null || _e === void 0 ? void 0 : _e.width,
|
|
43
|
+
height: (_f = wrapperStateProps === null || wrapperStateProps === void 0 ? void 0 : wrapperStateProps.styles) === null || _f === void 0 ? void 0 : _f.height
|
|
43
44
|
});
|
|
44
45
|
const isInitialRef = (0, react_1.useRef)(true);
|
|
45
46
|
const sizingAxis = (0, useSizing_1.useSizing)(item);
|
|
@@ -49,7 +50,7 @@ const CompoundChild = ({ item, sectionId, isParentVisible = true }) => {
|
|
|
49
50
|
}, []);
|
|
50
51
|
const transformOrigin = compoundSettings ? ScaleAnchorMap_1.ScaleAnchorMap[compoundSettings.positionAnchor] : 'top left';
|
|
51
52
|
const isRichText = (0, isItemType_1.isItemType)(item, sdk_1.ArticleItemType.RichText);
|
|
52
|
-
const scale = (_h = (_g =
|
|
53
|
+
const scale = (_h = (_g = innerStateProps === null || innerStateProps === void 0 ? void 0 : innerStateProps.styles) === null || _g === void 0 ? void 0 : _g.scale) !== null && _h !== void 0 ? _h : itemScale;
|
|
53
54
|
const hasClickTriggers = (_j = interactionCtrl === null || interactionCtrl === void 0 ? void 0 : interactionCtrl.getHasTrigger(item.id, 'click')) !== null && _j !== void 0 ? _j : false;
|
|
54
55
|
if (!item.compoundSettings)
|
|
55
56
|
return null;
|
|
@@ -69,7 +70,7 @@ const CompoundChild = ({ item, sectionId, isParentVisible = true }) => {
|
|
|
69
70
|
? { height: `${sizingAxis.y === 'manual'
|
|
70
71
|
? (0, getCompoundBondaryStyles_1.getCompoundHeight)(compoundSettings, height)
|
|
71
72
|
: 'unset'}` }
|
|
72
|
-
: {})), (compoundSettings ? { transform: `${(0, getCompoundBondaryStyles_1.getCompoundTransform)(compoundSettings)}` } : {})), { transition: (_k =
|
|
73
|
+
: {})), (compoundSettings ? { transform: `${(0, getCompoundBondaryStyles_1.getCompoundTransform)(compoundSettings)}` } : {})), { transition: (_k = wrapperStateProps === null || wrapperStateProps === void 0 ? void 0 : wrapperStateProps.transition) !== null && _k !== void 0 ? _k : 'none', cursor: hasClickTriggers ? 'pointer' : 'unset', pointerEvents: allowPointerEvents ? 'auto' : 'none' }) }, triggers, { children: [(0, jsx_runtime_1.jsx)("div", { className: `item-${item.id}-inner`, style: Object.assign({ transition: (_l = innerStateProps === null || innerStateProps === void 0 ? void 0 : innerStateProps.transition) !== null && _l !== void 0 ? _l : 'none' }, (scale !== undefined ? { transform: `scale(${scale})` } : {})), children: (0, jsx_runtime_1.jsx)(RichTextWrapper_1.RichTextWrapper, { isRichText: isRichText, transformOrigin: transformOrigin, children: (0, jsx_runtime_1.jsx)(ItemComponent, { item: item, sectionId: sectionId, interactionCtrl: interactionCtrl, onVisibilityChange: handleVisibilityChange, isInCompound: true }) }) }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
|
|
73
74
|
${(0, sdk_1.getLayoutStyles)(layouts, layoutValues, ([area, hidden, compoundSettings, layoutParams]) => {
|
|
74
75
|
const sizingAxis = (0, useSizing_1.parseSizing)(layoutParams.sizing);
|
|
75
76
|
const scaleAnchor = area.scaleAnchor;
|
package/package.json
CHANGED
|
@@ -47,13 +47,14 @@ export const CompoundChild: FC<ChildItemProps> = ({ item, sectionId, isParentVis
|
|
|
47
47
|
const itemScale = useItemScale(item, sectionId);
|
|
48
48
|
const interactionCtrl = useItemInteractionCtrl(item.id);
|
|
49
49
|
const triggers = useItemTriggers(interactionCtrl);
|
|
50
|
-
const
|
|
50
|
+
const wrapperStateProps = interactionCtrl?.getState(['top', 'left', 'width', 'height']);
|
|
51
|
+
const innerStateProps = interactionCtrl?.getState(['scale']);
|
|
51
52
|
const compoundSettings = layout && item.compoundSettings ? item.compoundSettings[layout] : undefined;
|
|
52
53
|
const { width, height, top, left } = useItemArea(item, sectionId, {
|
|
53
|
-
top:
|
|
54
|
-
left:
|
|
55
|
-
width:
|
|
56
|
-
height:
|
|
54
|
+
top: wrapperStateProps?.styles?.top as number,
|
|
55
|
+
left: wrapperStateProps?.styles?.left as number,
|
|
56
|
+
width: wrapperStateProps?.styles?.width as number,
|
|
57
|
+
height: wrapperStateProps?.styles?.height as number
|
|
57
58
|
});
|
|
58
59
|
const isInitialRef = useRef(true);
|
|
59
60
|
const sizingAxis = useSizing(item);
|
|
@@ -65,7 +66,7 @@ export const CompoundChild: FC<ChildItemProps> = ({ item, sectionId, isParentVis
|
|
|
65
66
|
|
|
66
67
|
const transformOrigin = compoundSettings ? ScaleAnchorMap[compoundSettings.positionAnchor] : 'top left';
|
|
67
68
|
const isRichText = isItemType(item, ArticleItemType.RichText);
|
|
68
|
-
const scale =
|
|
69
|
+
const scale = innerStateProps?.styles?.scale ?? itemScale;
|
|
69
70
|
const hasClickTriggers = interactionCtrl?.getHasTrigger(item.id, 'click') ?? false;
|
|
70
71
|
if (!item.compoundSettings) return null;
|
|
71
72
|
const layoutValues: Record<string, any>[] = [item.area, item.hidden, item.compoundSettings];
|
|
@@ -93,7 +94,7 @@ export const CompoundChild: FC<ChildItemProps> = ({ item, sectionId, isParentVis
|
|
|
93
94
|
: 'unset'}` }
|
|
94
95
|
: {}),
|
|
95
96
|
...(compoundSettings ? { transform: `${getCompoundTransform(compoundSettings)}` } : {}),
|
|
96
|
-
transition:
|
|
97
|
+
transition: wrapperStateProps?.transition ?? 'none',
|
|
97
98
|
cursor: hasClickTriggers ? 'pointer' : 'unset',
|
|
98
99
|
pointerEvents: allowPointerEvents ? 'auto' : 'none'
|
|
99
100
|
}}
|
|
@@ -102,6 +103,7 @@ export const CompoundChild: FC<ChildItemProps> = ({ item, sectionId, isParentVis
|
|
|
102
103
|
<div
|
|
103
104
|
className={`item-${item.id}-inner`}
|
|
104
105
|
style={{
|
|
106
|
+
transition: innerStateProps?.transition ?? 'none',
|
|
105
107
|
...(scale !== undefined ? { transform: `scale(${scale})` } : {}),
|
|
106
108
|
}}
|
|
107
109
|
>
|
|
Binary file
|
|
Binary file
|