@gxpl/sdk 0.0.25 → 0.0.26
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.
|
@@ -11,11 +11,10 @@ const Scene = ({ children, id, styles: sceneStyles }) => {
|
|
|
11
11
|
const layoutDeviationStyle = { '--layout-deviation': layoutDeviation };
|
|
12
12
|
const sceneRef = (0, react_1.useRef)(null);
|
|
13
13
|
const actorRef = TransitionMachineContext_1.TransitionMachineContext.useActorRef();
|
|
14
|
-
const { isControlledTransitioning, isSettling, isInstantTransitioning
|
|
14
|
+
const { isControlledTransitioning, isSettling, isInstantTransitioning } = TransitionMachineContext_1.TransitionMachineContext.useSelector((state) => ({
|
|
15
15
|
isControlledTransitioning: state.matches('transitioning'),
|
|
16
16
|
isSettling: state.matches('settling'),
|
|
17
|
-
isInstantTransitioning: state.matches('instant_transitioning')
|
|
18
|
-
stateValue: state.value
|
|
17
|
+
isInstantTransitioning: state.matches('instant_transitioning')
|
|
19
18
|
}));
|
|
20
19
|
const type = TransitionMachineContext_1.TransitionMachineContext.useSelector((state) => {
|
|
21
20
|
const { transition } = state.context;
|
|
@@ -137,7 +136,8 @@ const Scene = ({ children, id, styles: sceneStyles }) => {
|
|
|
137
136
|
}, [isTransitioning, actorRef, id]);
|
|
138
137
|
const isFixed = isControlledTransitioning || isSettling || isInstantTransitioning;
|
|
139
138
|
const transitionStyle = type === 'slide' ? 'transform' : 'opacity';
|
|
140
|
-
return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)("div", { ref: sceneRef, className: "article-wrapper", style: Object.assign(Object.assign({}, layoutDeviationStyle), { width: '100vw', height: '100%', position: isFixed ? 'fixed' : 'absolute', transform:
|
|
139
|
+
return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)("div", { ref: sceneRef, className: "article-wrapper", style: Object.assign(Object.assign({}, layoutDeviationStyle), { width: '100vw', height: '100%', position: isFixed ? 'fixed' : 'absolute', transform: sceneStyles && (sceneStyles.x !== 0 || sceneStyles.y !== 0) ? `translate(${sceneStyles.x}px, ${sceneStyles.y}px)` : 'none', transition: isSettling || isInstantTransitioning ? `${transitionStyle} 0.25s ease-out` : 'none', overflowY: isFixed ? 'hidden' : 'scroll', opacity: (_a = sceneStyles === null || sceneStyles === void 0 ? void 0 : sceneStyles.opacity) !== null && _a !== void 0 ? _a : 1, 'WebkitOverflowScrolling': 'touch' // prevent glitch on Safari (fast scroll to top/bottom sides)
|
|
140
|
+
}), children: children }) }));
|
|
141
141
|
};
|
|
142
142
|
exports.Scene = Scene;
|
|
143
143
|
function isTransitionDisabled(transitionReady) {
|
|
@@ -26,6 +26,7 @@ const useItemArea_1 = require("./useItemArea");
|
|
|
26
26
|
const useDraggable_1 = require("./useDraggable");
|
|
27
27
|
const ArticleItemType_1 = require("../../../sdk/types/article/ArticleItemType");
|
|
28
28
|
const ItemArea_1 = require("../../../sdk/types/article/ItemArea");
|
|
29
|
+
const TransitionMachineContext_1 = require("../../provider/TransitionMachineContext");
|
|
29
30
|
const stickyFix = `
|
|
30
31
|
-webkit-transform: translate3d(0, 0, 0);
|
|
31
32
|
transform: translate3d(0, 0, 0);
|
|
@@ -60,6 +61,7 @@ const Item = ({ item, sectionId, articleHeight, isParentVisible = true, isInGrou
|
|
|
60
61
|
const ItemComponent = itemsMap_1.itemsMap[item.type] || noop;
|
|
61
62
|
const sectionTop = rectObserver ? rectObserver.getSectionTop(sectionId) : 0;
|
|
62
63
|
const isDraggable = 'isDraggable' in item.params ? item.params.isDraggable : false;
|
|
64
|
+
const isSceneTransitioning = TransitionMachineContext_1.TransitionMachineContext.useSelector((s) => s.matches('transitioning') || s.matches('settling') || s.matches('instant_transitioning'));
|
|
63
65
|
(0, useDraggable_1.useDraggable)({ draggableRef: itemInnerRef.current, isEnabled: isDraggable !== null && isDraggable !== void 0 ? isDraggable : false }, ({ startX, startY, currentX, currentY, lastX, lastY, drag }) => {
|
|
64
66
|
const item = itemInnerRef.current;
|
|
65
67
|
if (!item)
|
|
@@ -96,11 +98,15 @@ const Item = ({ item, sectionId, articleHeight, isParentVisible = true, isInGrou
|
|
|
96
98
|
const isScreenBasedBottom = positionType === ItemArea_1.PositionType.ScreenBased && anchorSide === ItemArea_1.AnchorSide.Bottom;
|
|
97
99
|
const scale = (_k = (_j = innerStateProps === null || innerStateProps === void 0 ? void 0 : innerStateProps.styles) === null || _j === void 0 ? void 0 : _j.scale) !== null && _k !== void 0 ? _k : itemScale;
|
|
98
100
|
const hasClickTriggers = (_l = interactionCtrl === null || interactionCtrl === void 0 ? void 0 : interactionCtrl.getHasTrigger(item.id, 'click')) !== null && _l !== void 0 ? _l : false;
|
|
101
|
+
const scroll = rectObserver === null || rectObserver === void 0 ? void 0 : rectObserver.scroll;
|
|
102
|
+
const realTop = item.area.positionType === ItemArea_1.PositionType.ScreenBased && isSceneTransitioning && scroll !== undefined
|
|
103
|
+
? top + scroll
|
|
104
|
+
: top;
|
|
99
105
|
return ((0, jsx_runtime_1.jsxs)("div", { className: `item-wrapper-${item.id}`, ref: itemWrapperRef, onTransitionEnd: (e) => {
|
|
100
106
|
var _a;
|
|
101
107
|
e.stopPropagation();
|
|
102
108
|
(_a = interactionCtrl === null || interactionCtrl === void 0 ? void 0 : interactionCtrl.handleTransitionEnd) === null || _a === void 0 ? void 0 : _a.call(interactionCtrl, e.propertyName);
|
|
103
|
-
}, style: Object.assign(Object.assign({ top: isScreenBasedBottom ? 'unset' : (0, getItemTopStyle_1.getItemTopStyle)(
|
|
109
|
+
}, style: Object.assign(Object.assign({ top: isScreenBasedBottom ? 'unset' : (0, getItemTopStyle_1.getItemTopStyle)(realTop, anchorSide), left: `${left * 100}vw`, bottom: isScreenBasedBottom ? `${-realTop * 100}vw` : 'unset' }, (wrapperHeight !== undefined ? { height: `${wrapperHeight * 100}vw` } : {})), { transition: (_m = wrapperStateProps === null || wrapperStateProps === void 0 ? void 0 : wrapperStateProps.transition) !== null && _m !== void 0 ? _m : 'none' }), children: [(0, jsx_runtime_1.jsx)("div", { suppressHydrationWarning: true, className: `item-${item.id}`, style: {
|
|
104
110
|
top: item.sticky ? (0, getAnchoredItemTop_1.getAnchoredItemTop)(stickyTop, sectionHeight, anchorSide) : 0,
|
|
105
111
|
height: isRichText && itemHeight !== undefined ? `${itemHeight * 100}vw` : 'unset'
|
|
106
112
|
}, children: (0, jsx_runtime_1.jsx)(RichTextWrapper_1.RichTextWrapper, { isRichText: isRichText, children: (0, jsx_runtime_1.jsx)("div", Object.assign({ className: `item-${item.id}-inner`, ref: itemInnerRef, style: Object.assign(Object.assign(Object.assign({ top: `${position.y}px`, left: `${position.x}px` }, ((width !== undefined && height !== undefined)
|