@cntrl-site/sdk-nextjs 1.9.92 → 1.9.93-0

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.
Files changed (3) hide show
  1. package/lib/components/items/ComponentItem/ComponentItem.js +23 -22
  2. package/package.json +2 -2
  3. package/src/components/items/ComponentItem/ComponentItem.tsx +48 -45
package/lib/components/items/ComponentItem/ComponentItem.js CHANGED
@@ -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
- ? { opacity: layout == null ? 0 : opacity }
42
- : 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: (_f = stateParams === null || stateParams === void 0 ? void 0 : stateParams.transition) !== null && _f !== void 0 ? _f : 'none' }), children: parameters && Element && ((0, jsx_runtime_1.jsx)(Element, Object.assign({ metadata: {
43
- itemId: item.id,
44
- submitUrl: sdk.getSubmitUrl(commonParameters === null || commonParameters === void 0 ? void 0 : commonParameters.pluginConfigId)
45
- }, portalId: "component-portal", content: item.commonParams.content }, parameters))) }), (0, jsx_runtime_1.jsx)(style_1.default, { id: item.id, children: `
46
- .custom-component-${item.id} {
47
- width: 100%;
48
- height: 100%;
49
- pointer-events: auto;
50
- }
51
- ${(0, sdk_1.getLayoutStyles)(layouts, layoutValues, ([area, layoutParams]) => {
52
- return (`
53
- .custom-component-${item.id} {
54
- transform: rotate(${area.angle}deg);
55
- opacity: ${layoutParams.opacity};
56
- filter: blur(${layoutParams.blur}vw);
57
- ${layoutParams.blur !== 0 ? 'will-change: transform;' : ''}
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, 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: auto;
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;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@cntrl-site/sdk-nextjs",
3
- "version": "1.9.92",
3
+ "version": "1.9.93-0",
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.40",
34
+ "@cntrl-site/components": "^1.0.43-alpha.2",
35
35
  "@cntrl-site/effects": "^1.4.2",
36
36
  "@cntrl-site/sdk": "^1.28.0",
37
37
  "@types/vimeo__player": "^2.18.0",
package/src/components/items/ComponentItem/ComponentItem.tsx CHANGED
@@ -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
- <div
41
- className={`custom-component-${item.id}`}
42
- ref={setRef}
43
- style={{
44
- // preventing layout shift while supporting SSG for proper SEO
45
- ...(opacity !== undefined
46
- ? { opacity: layout == null ? 0 : opacity }
47
- : layout == null ? { opacity: 0 } : {}),
48
- ...(angle !== undefined ? { transform: `rotate(${angle}deg)` } : {}),
49
- ...(blur !== undefined ? { filter: `blur(${blur * 100}vw)` } : {}),
50
- willChange: blur !== 0 && blur !== undefined ? 'transform' : 'unset',
51
- transition: stateParams?.transition ?? 'none'
52
- }}
53
- >
54
- {parameters && Element && (
55
- <Element
56
- metadata={{
57
- itemId: item.id,
58
- submitUrl: sdk.getSubmitUrl(commonParameters?.pluginConfigId)
59
- }}
60
- portalId="component-portal"
61
- content={item.commonParams.content}
62
- {...parameters}
63
- />
64
- )}
65
- </div>
66
- <JSXStyle id={item.id}>{`
67
- .custom-component-${item.id} {
68
- width: 100%;
69
- height: 100%;
70
- pointer-events: auto;
71
- }
72
- ${getLayoutStyles(layouts, layoutValues, ([area, layoutParams]) => {
73
- return (`
74
- .custom-component-${item.id} {
75
- transform: rotate(${area.angle}deg);
76
- opacity: ${layoutParams.opacity};
77
- filter: blur(${layoutParams.blur}vw);
78
- ${layoutParams.blur !== 0 ? 'will-change: transform;' : ''}
79
- }
80
- `);
81
- })}`}
82
- </JSXStyle>
83
- </>
40
+ <LinkWrapper url={item.link?.url} target={item.link?.target}>
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: auto;
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
  };