@cntrl-site/sdk-nextjs 1.9.93-3 → 1.9.94

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 (5) hide show
  1. package/lib/components/items/ComponentItem/ComponentItem.js +22 -27
  2. package/lib/components/items/LinkWrapper.js +2 -2
  3. package/package.json +2 -2
  4. package/src/components/items/ComponentItem/ComponentItem.tsx +45 -56
  5. package/src/components/items/LinkWrapper.tsx +2 -4
package/lib/components/items/ComponentItem/ComponentItem.js CHANGED
@@ -15,9 +15,8 @@ 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");
19
18
  const ComponentItem = ({ item, sectionId, onResize, interactionCtrl }) => {
20
- var _a, _b, _c, _d, _e, _f, _g, _h, _j;
19
+ var _a, _b, _c, _d, _e, _f;
21
20
  const sdk = (0, useCntrlContext_1.useCntrlContext)();
22
21
  const { layouts } = sdk;
23
22
  const itemAngle = (0, useItemAngle_1.useItemAngle)(item, sectionId);
@@ -38,30 +37,26 @@ const ComponentItem = ({ item, sectionId, onResize, interactionCtrl }) => {
38
37
  const layoutParameters = effectiveLayout ? (_e = item.layoutParams[effectiveLayout]) === null || _e === void 0 ? void 0 : _e.parameters : undefined;
39
38
  const commonParameters = item.commonParams.parameters;
40
39
  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;
41
- const hasLink = Boolean((_f = item.link) === null || _f === void 0 ? void 0 : _f.url);
42
- return ((0, jsx_runtime_1.jsx)(LinkWrapper_1.LinkWrapper, { url: (_g = item.link) === null || _g === void 0 ? void 0 : _g.url, target: (_h = item.link) === null || _h === void 0 ? void 0 : _h.target,
43
- // Let the component define its own hit area (e.g. rounded button),
44
- // so empty space around it does not activate the link.
45
- style: hasLink ? { pointerEvents: 'none' } : undefined, 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
46
- ? { opacity: layout == null ? 0 : opacity }
47
- : 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: (_j = stateParams === null || stateParams === void 0 ? void 0 : stateParams.transition) !== null && _j !== void 0 ? _j : 'none' }), children: parameters && Element && ((0, jsx_runtime_1.jsx)(Element, Object.assign({ metadata: {
48
- itemId: item.id,
49
- submitUrl: sdk.getSubmitUrl(commonParameters === null || commonParameters === void 0 ? void 0 : commonParameters.pluginConfigId)
50
- }, portalId: "component-portal", content: item.commonParams.content }, parameters))) }), (0, jsx_runtime_1.jsx)(style_1.default, { id: item.id, children: `
51
- .custom-component-${item.id} {
52
- width: 100%;
53
- height: 100%;
54
- pointer-events: ${hasLink ? 'none' : 'auto'};
55
- }
56
- ${(0, sdk_1.getLayoutStyles)(layouts, layoutValues, ([area, layoutParams]) => {
57
- return (`
58
- .custom-component-${item.id} {
59
- transform: rotate(${area.angle}deg);
60
- opacity: ${layoutParams.opacity};
61
- filter: blur(${layoutParams.blur}vw);
62
- ${layoutParams.blur !== 0 ? 'will-change: transform;' : ''}
63
- }
64
- `);
65
- })}` })] }) }));
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
+ })}` })] }));
66
61
  };
67
62
  exports.ComponentItem = ComponentItem;
package/lib/components/items/LinkWrapper.js CHANGED
@@ -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, style }) => {
5
+ const LinkWrapper = ({ url, children, target }) => {
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, style: style }, 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, { 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.93-3",
3
+ "version": "1.9.94",
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.43-alpha.3",
34
+ "@cntrl-site/components": "^1.0.43",
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,7 +9,6 @@ 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';
13
12
 
14
13
  export const ComponentItem: FC<ItemProps<TComponentItem>> = ({ item, sectionId, onResize, interactionCtrl }) => {
15
14
  const sdk = useCntrlContext();
@@ -36,61 +35,51 @@ export const ComponentItem: FC<ItemProps<TComponentItem>> = ({ item, sectionId,
36
35
  settings: { ...layoutParameters.settings, ...commonParameters?.settings }
37
36
  } : undefined;
38
37
 
39
- const hasLink = Boolean(item.link?.url);
40
-
41
38
  return (
42
- <LinkWrapper
43
- url={item.link?.url}
44
- target={item.link?.target}
45
- // Let the component define its own hit area (e.g. rounded button),
46
- // so empty space around it does not activate the link.
47
- style={hasLink ? { pointerEvents: 'none' } : undefined}
48
- >
49
- <>
50
- <div
51
- className={`custom-component-${item.id}`}
52
- ref={setRef}
53
- style={{
54
- // preventing layout shift while supporting SSG for proper SEO
55
- ...(opacity !== undefined
56
- ? { opacity: layout == null ? 0 : opacity }
57
- : layout == null ? { opacity: 0 } : {}),
58
- ...(angle !== undefined ? { transform: `rotate(${angle}deg)` } : {}),
59
- ...(blur !== undefined ? { filter: `blur(${blur * 100}vw)` } : {}),
60
- willChange: blur !== 0 && blur !== undefined ? 'transform' : 'unset',
61
- transition: stateParams?.transition ?? 'none'
62
- }}
63
- >
64
- {parameters && Element && (
65
- <Element
66
- metadata={{
67
- itemId: item.id,
68
- submitUrl: sdk.getSubmitUrl(commonParameters?.pluginConfigId)
69
- }}
70
- portalId="component-portal"
71
- content={item.commonParams.content}
72
- {...parameters}
73
- />
74
- )}
75
- </div>
76
- <JSXStyle id={item.id}>{`
77
- .custom-component-${item.id} {
78
- width: 100%;
79
- height: 100%;
80
- pointer-events: ${hasLink ? 'none' : 'auto'};
81
- }
82
- ${getLayoutStyles(layouts, layoutValues, ([area, layoutParams]) => {
83
- return (`
84
- .custom-component-${item.id} {
85
- transform: rotate(${area.angle}deg);
86
- opacity: ${layoutParams.opacity};
87
- filter: blur(${layoutParams.blur}vw);
88
- ${layoutParams.blur !== 0 ? 'will-change: transform;' : ''}
89
- }
90
- `);
91
- })}`}
92
- </JSXStyle>
93
- </>
94
- </LinkWrapper>
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
+ </>
95
84
  );
96
85
  };
package/src/components/items/LinkWrapper.tsx CHANGED
@@ -1,19 +1,17 @@
1
- import React, { CSSProperties, ReactElement, ReactNode } from 'react';
1
+ import React, { ReactElement, ReactNode } from 'react';
2
2
 
3
3
  interface Props {
4
4
  url?: string;
5
5
  children: ReactElement | ReactNode[];
6
6
  target?: string;
7
- style?: CSSProperties;
8
7
  }
9
8
 
10
- export const LinkWrapper: React.FC<Props> = ({ url, children, target, style }) => {
9
+ export const LinkWrapper: React.FC<Props> = ({ url, children, target }) => {
11
10
  const validUrl = url && buildValidUrl(url);
12
11
  const targetParams = target === '_blank' ? { target, rel: 'noreferrer' } : {};
13
12
  return url ? (
14
13
  <a
15
14
  href={validUrl}
16
- style={style}
17
15
  {...targetParams}
18
16
  >
19
17
  {children}