@cntrl-site/sdk-nextjs 1.9.92 → 1.9.93-1
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.
|
@@ -15,8 +15,9 @@ const useRegisterResize_1 = require("../../../common/useRegisterResize");
|
|
|
15
15
|
const getStyleFromItemStateAndParams_1 = require("../../../utils/getStyleFromItemStateAndParams");
|
|
16
16
|
const useLayoutContext_1 = require("../../useLayoutContext");
|
|
17
17
|
const useItemGeometry_1 = require("../../../ItemGeometry/useItemGeometry");
|
|
18
|
+
const LinkWrapper_1 = require("../LinkWrapper");
|
|
18
19
|
const ComponentItem = ({ item, sectionId, onResize, interactionCtrl }) => {
|
|
19
|
-
var _a, _b, _c, _d, _e, _f;
|
|
20
|
+
var _a, _b, _c, _d, _e, _f, _g, _h;
|
|
20
21
|
const sdk = (0, useCntrlContext_1.useCntrlContext)();
|
|
21
22
|
const { layouts } = sdk;
|
|
22
23
|
const itemAngle = (0, useItemAngle_1.useItemAngle)(item, sectionId);
|
|
@@ -37,26 +38,26 @@ const ComponentItem = ({ item, sectionId, onResize, interactionCtrl }) => {
|
|
|
37
38
|
const layoutParameters = effectiveLayout ? (_e = item.layoutParams[effectiveLayout]) === null || _e === void 0 ? void 0 : _e.parameters : undefined;
|
|
38
39
|
const commonParameters = item.commonParams.parameters;
|
|
39
40
|
const parameters = layoutParameters ? Object.assign(Object.assign({}, layoutParameters), { settings: Object.assign(Object.assign({}, layoutParameters.settings), commonParameters === null || commonParameters === void 0 ? void 0 : commonParameters.settings) }) : undefined;
|
|
40
|
-
return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: `custom-component-${item.id}`, ref: setRef, style: Object.assign(Object.assign(Object.assign(Object.assign({}, (opacity !== undefined
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
41
|
+
return ((0, jsx_runtime_1.jsx)(LinkWrapper_1.LinkWrapper, { url: (_f = item.link) === null || _f === void 0 ? void 0 : _f.url, target: (_g = item.link) === null || _g === void 0 ? void 0 : _g.target, pointerEvents: "none", children: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: `custom-component-${item.id}`, ref: setRef, style: Object.assign(Object.assign(Object.assign(Object.assign({}, (opacity !== undefined
|
|
42
|
+
? { opacity: layout == null ? 0 : opacity }
|
|
43
|
+
: layout == null ? { opacity: 0 } : {})), (angle !== undefined ? { transform: `rotate(${angle}deg)` } : {})), (blur !== undefined ? { filter: `blur(${blur * 100}vw)` } : {})), { willChange: blur !== 0 && blur !== undefined ? 'transform' : 'unset', transition: (_h = stateParams === null || stateParams === void 0 ? void 0 : stateParams.transition) !== null && _h !== void 0 ? _h : 'none' }), children: parameters && Element && ((0, jsx_runtime_1.jsx)(Element, Object.assign({ metadata: {
|
|
44
|
+
itemId: item.id,
|
|
45
|
+
submitUrl: sdk.getSubmitUrl(commonParameters === null || commonParameters === void 0 ? void 0 : commonParameters.pluginConfigId)
|
|
46
|
+
}, portalId: "component-portal", content: item.commonParams.content }, parameters))) }), (0, jsx_runtime_1.jsx)(style_1.default, { id: item.id, children: `
|
|
47
|
+
.custom-component-${item.id} {
|
|
48
|
+
width: 100%;
|
|
49
|
+
height: 100%;
|
|
50
|
+
pointer-events: none;
|
|
51
|
+
}
|
|
52
|
+
${(0, sdk_1.getLayoutStyles)(layouts, layoutValues, ([area, layoutParams]) => {
|
|
53
|
+
return (`
|
|
54
|
+
.custom-component-${item.id} {
|
|
55
|
+
transform: rotate(${area.angle}deg);
|
|
56
|
+
opacity: ${layoutParams.opacity};
|
|
57
|
+
filter: blur(${layoutParams.blur}vw);
|
|
58
|
+
${layoutParams.blur !== 0 ? 'will-change: transform;' : ''}
|
|
59
|
+
}
|
|
60
|
+
`);
|
|
61
|
+
})}` })] }) }));
|
|
61
62
|
};
|
|
62
63
|
exports.ComponentItem = ComponentItem;
|
|
@@ -2,10 +2,10 @@
|
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
3
|
exports.LinkWrapper = void 0;
|
|
4
4
|
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
5
|
-
const LinkWrapper = ({ url, children, target }) => {
|
|
5
|
+
const LinkWrapper = ({ url, children, target, pointerEvents }) => {
|
|
6
6
|
const validUrl = url && buildValidUrl(url);
|
|
7
7
|
const targetParams = target === '_blank' ? { target, rel: 'noreferrer' } : {};
|
|
8
|
-
return url ? ((0, jsx_runtime_1.jsx)("a", Object.assign({ href: validUrl }, targetParams, { children: children }))) : ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: children }));
|
|
8
|
+
return url ? ((0, jsx_runtime_1.jsx)("a", Object.assign({ href: validUrl }, targetParams, { style: pointerEvents !== undefined ? { pointerEvents } : undefined, children: children }))) : ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: children }));
|
|
9
9
|
};
|
|
10
10
|
exports.LinkWrapper = LinkWrapper;
|
|
11
11
|
function buildValidUrl(url) {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@cntrl-site/sdk-nextjs",
|
|
3
|
-
"version": "1.9.
|
|
3
|
+
"version": "1.9.93-1",
|
|
4
4
|
"description": "SDK for Next.js",
|
|
5
5
|
"author": "arsen@momdesign.nyc",
|
|
6
6
|
"license": "MIT",
|
|
@@ -31,7 +31,7 @@
|
|
|
31
31
|
"dependencies": {
|
|
32
32
|
"@antfu/eslint-config": "^3.8.0",
|
|
33
33
|
"@cntrl-site/color": "^1.0.0",
|
|
34
|
-
"@cntrl-site/components": "^1.0.
|
|
34
|
+
"@cntrl-site/components": "^1.0.43-alpha.3",
|
|
35
35
|
"@cntrl-site/effects": "^1.4.2",
|
|
36
36
|
"@cntrl-site/sdk": "^1.28.0",
|
|
37
37
|
"@types/vimeo__player": "^2.18.0",
|
|
@@ -9,6 +9,7 @@ import { useRegisterResize } from '../../../common/useRegisterResize';
|
|
|
9
9
|
import { getStyleFromItemStateAndParams } from '../../../utils/getStyleFromItemStateAndParams';
|
|
10
10
|
import { useLayoutContext } from '../../useLayoutContext';
|
|
11
11
|
import { useItemGeometry } from '../../../ItemGeometry/useItemGeometry';
|
|
12
|
+
import { LinkWrapper } from '../LinkWrapper';
|
|
12
13
|
|
|
13
14
|
export const ComponentItem: FC<ItemProps<TComponentItem>> = ({ item, sectionId, onResize, interactionCtrl }) => {
|
|
14
15
|
const sdk = useCntrlContext();
|
|
@@ -36,50 +37,52 @@ export const ComponentItem: FC<ItemProps<TComponentItem>> = ({ item, sectionId,
|
|
|
36
37
|
} : undefined;
|
|
37
38
|
|
|
38
39
|
return (
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
40
|
+
<LinkWrapper url={item.link?.url} target={item.link?.target} pointerEvents="none">
|
|
41
|
+
<>
|
|
42
|
+
<div
|
|
43
|
+
className={`custom-component-${item.id}`}
|
|
44
|
+
ref={setRef}
|
|
45
|
+
style={{
|
|
46
|
+
// preventing layout shift while supporting SSG for proper SEO
|
|
47
|
+
...(opacity !== undefined
|
|
48
|
+
? { opacity: layout == null ? 0 : opacity }
|
|
49
|
+
: layout == null ? { opacity: 0 } : {}),
|
|
50
|
+
...(angle !== undefined ? { transform: `rotate(${angle}deg)` } : {}),
|
|
51
|
+
...(blur !== undefined ? { filter: `blur(${blur * 100}vw)` } : {}),
|
|
52
|
+
willChange: blur !== 0 && blur !== undefined ? 'transform' : 'unset',
|
|
53
|
+
transition: stateParams?.transition ?? 'none'
|
|
54
|
+
}}
|
|
55
|
+
>
|
|
56
|
+
{parameters && Element && (
|
|
57
|
+
<Element
|
|
58
|
+
metadata={{
|
|
59
|
+
itemId: item.id,
|
|
60
|
+
submitUrl: sdk.getSubmitUrl(commonParameters?.pluginConfigId)
|
|
61
|
+
}}
|
|
62
|
+
portalId="component-portal"
|
|
63
|
+
content={item.commonParams.content}
|
|
64
|
+
{...parameters}
|
|
65
|
+
/>
|
|
66
|
+
)}
|
|
67
|
+
</div>
|
|
68
|
+
<JSXStyle id={item.id}>{`
|
|
69
|
+
.custom-component-${item.id} {
|
|
70
|
+
width: 100%;
|
|
71
|
+
height: 100%;
|
|
72
|
+
pointer-events: none;
|
|
73
|
+
}
|
|
74
|
+
${getLayoutStyles(layouts, layoutValues, ([area, layoutParams]) => {
|
|
75
|
+
return (`
|
|
76
|
+
.custom-component-${item.id} {
|
|
77
|
+
transform: rotate(${area.angle}deg);
|
|
78
|
+
opacity: ${layoutParams.opacity};
|
|
79
|
+
filter: blur(${layoutParams.blur}vw);
|
|
80
|
+
${layoutParams.blur !== 0 ? 'will-change: transform;' : ''}
|
|
81
|
+
}
|
|
82
|
+
`);
|
|
83
|
+
})}`}
|
|
84
|
+
</JSXStyle>
|
|
85
|
+
</>
|
|
86
|
+
</LinkWrapper>
|
|
84
87
|
);
|
|
85
88
|
};
|
|
@@ -1,18 +1,20 @@
|
|
|
1
|
-
import React, { ReactElement, ReactNode } from 'react';
|
|
1
|
+
import React, { CSSProperties, ReactElement, ReactNode } from 'react';
|
|
2
2
|
|
|
3
3
|
interface Props {
|
|
4
4
|
url?: string;
|
|
5
5
|
children: ReactElement | ReactNode[];
|
|
6
6
|
target?: string;
|
|
7
|
+
pointerEvents?: CSSProperties['pointerEvents'];
|
|
7
8
|
}
|
|
8
9
|
|
|
9
|
-
export const LinkWrapper: React.FC<Props> = ({ url, children, target }) => {
|
|
10
|
+
export const LinkWrapper: React.FC<Props> = ({ url, children, target, pointerEvents }) => {
|
|
10
11
|
const validUrl = url && buildValidUrl(url);
|
|
11
12
|
const targetParams = target === '_blank' ? { target, rel: 'noreferrer' } : {};
|
|
12
13
|
return url ? (
|
|
13
14
|
<a
|
|
14
15
|
href={validUrl}
|
|
15
16
|
{...targetParams}
|
|
17
|
+
style={pointerEvents !== undefined ? { pointerEvents } : undefined}
|
|
16
18
|
>
|
|
17
19
|
{children}
|
|
18
20
|
</a>
|