@cntrl-site/sdk-nextjs 1.7.0-alpha.8 → 1.7.0

package/lib/components/items/ComponentItem/ComponentItem.js

@@ -5,12 +5,12 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ComponentItem = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const style_1 = __importDefault(require("styled-jsx/style"));
 const sdk_1 = require("@cntrl-site/sdk");
 const react_1 = require("react");
 const useCntrlContext_1 = require("../../../provider/useCntrlContext");
 const useComponentItem_1 = require("./useComponentItem");
 const useItemAngle_1 = require("../useItemAngle");
-const style_1 = __importDefault(require("styled-jsx/style"));
 const useRegisterResize_1 = require("../../../common/useRegisterResize");
 const getStyleFromItemStateAndParams_1 = require("../../../utils/getStyleFromItemStateAndParams");
 const useLayoutContext_1 = require("../../useLayoutContext");
@@ -28,23 +28,20 @@ const ComponentItem = ({ item, sectionId, onResize, interactionCtrl }) => {
     const stateParams = interactionCtrl === null || interactionCtrl === void 0 ? void 0 : interactionCtrl.getState(['opacity', 'angle']);
     const angle = (0, getStyleFromItemStateAndParams_1.getStyleFromItemStateAndParams)((_a = stateParams === null || stateParams === void 0 ? void 0 : stateParams.styles) === null || _a === void 0 ? void 0 : _a.angle, itemAngle);
     const opacity = (0, getStyleFromItemStateAndParams_1.getStyleFromItemStateAndParams)((_b = stateParams === null || stateParams === void 0 ? void 0 : stateParams.styles) === null || _b === void 0 ? void 0 : _b.opacity, itemOpacity);
-    if (!component || !layout)
-        return null;
-    const Element = component.element;
-    const parameters = item.layoutParams[layout].parameters;
-    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({}, (opacity !== undefined ? { opacity } : {})), (angle !== undefined ? { transform: `rotate(${angle}deg)` } : {})), { transition: (_c = stateParams === null || stateParams === void 0 ? void 0 : stateParams.transition) !== null && _c !== void 0 ? _c : 'none' }), children: (0, jsx_runtime_1.jsx)(Element, Object.assign({ content: item.commonParams.content }, parameters)) }), (0, jsx_runtime_1.jsx)(style_1.default, { id: item.id, children: `
+    const Element = component ? component.element : undefined;
+    const parameters = layout ? item.layoutParams[layout].parameters : undefined;
+    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({}, (opacity !== undefined ? { opacity } : {})), (angle !== undefined ? { transform: `rotate(${angle}deg)` } : {})), { transition: (_c = stateParams === null || stateParams === void 0 ? void 0 : stateParams.transition) !== null && _c !== void 0 ? _c : 'none' }), children: parameters && Element && ((0, jsx_runtime_1.jsx)(Element, Object.assign({ content: item.commonParams.content }, parameters))) }), (0, jsx_runtime_1.jsx)(style_1.default, { id: item.id, children: `
+      .custom-component-${item.id} {
+        width: 100%;
+        height: 100%;
+      }
+      ${(0, sdk_1.getLayoutStyles)(layouts, layoutValues, ([area, layoutParams]) => {
+                    return (`
           .custom-component-${item.id} {
-            width: 100%;
-            height: 100%;
+            transform: rotate(${area.angle}deg);
+            opacity: ${layoutParams.opacity};
           }
-          ${(0, sdk_1.getLayoutStyles)(layouts, layoutValues, ([area, layoutParams]) => {
-                    return (`
-              .custom-component-${item.id} {
-                transform: rotate(${area.angle}deg);
-                opacity: ${layoutParams.opacity};
-              }
-            `);
-                })}
-        ` })] }));
+        `);
+                })}` })] }));
 };
 exports.ComponentItem = ComponentItem;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cntrl-site/sdk-nextjs",
-  "version": "1.7.0-alpha.8",
+  "version": "1.7.0",
   "description": "SDK for Next.js",
   "author": "arsen@momdesign.nyc",
   "license": "MIT",
@@ -31,7 +31,7 @@
     "@antfu/eslint-config": "^3.8.0",
     "@cntrl-site/color": "^1.0.0",
     "@cntrl-site/effects": "^1.3.2",
-    "@cntrl-site/sdk": "^1.21.0-alpha.8",
+    "@cntrl-site/sdk": "^1.21.1",
     "@types/vimeo__player": "^2.18.0",
     "@vimeo/player": "^2.25.0",
     "html-react-parser": "^3.0.1",

package/src/components/items/ComponentItem/ComponentItem.tsx

@@ -1,10 +1,10 @@
+import JSXStyle from 'styled-jsx/style';
 import { ItemProps } from '../Item';
 import { ComponentItem as TComponentItem, getLayoutStyles } from '@cntrl-site/sdk';
-import { FC, useState } from 'react';
+import { FC, useId, useState } from 'react';
 import { useCntrlContext } from '../../../provider/useCntrlContext';
 import { useComponentItem } from './useComponentItem';
 import { useItemAngle } from '../useItemAngle';
-import JSXStyle from 'styled-jsx/style';
 import { useRegisterResize } from '../../../common/useRegisterResize';
 import { getStyleFromItemStateAndParams } from '../../../utils/getStyleFromItemStateAndParams';
 import { useLayoutContext } from '../../useLayoutContext';
@@ -22,9 +22,8 @@ export const ComponentItem: FC<ItemProps<TComponentItem>> = ({ item, sectionId,
   const stateParams = interactionCtrl?.getState(['opacity', 'angle']);
   const angle = getStyleFromItemStateAndParams(stateParams?.styles?.angle, itemAngle);
   const opacity = getStyleFromItemStateAndParams(stateParams?.styles?.opacity, itemOpacity);
-  if (!component || !layout) return null;
-  const Element = component.element;
-  const parameters = item.layoutParams[layout].parameters;
+  const Element = component ? component.element : undefined;
+  const parameters = layout ? item.layoutParams[layout].parameters : undefined;
   return (
     <>
       <div
@@ -36,26 +35,26 @@ export const ComponentItem: FC<ItemProps<TComponentItem>> = ({ item, sectionId,
           transition: stateParams?.transition ?? 'none'
         }}
       >
-        <Element
-          content={item.commonParams.content}
-          {...parameters}
-        />
+        {parameters && Element && (
+          <Element
+            content={item.commonParams.content}
+            {...parameters}
+          />
+        )}
       </div>
-      <JSXStyle id={item.id}>
-        {`
+      <JSXStyle id={item.id}>{`
+      .custom-component-${item.id} {
+        width: 100%;
+        height: 100%;
+      }
+      ${getLayoutStyles(layouts, layoutValues, ([area, layoutParams]) => {
+      return (`
           .custom-component-${item.id} {
-            width: 100%;
-            height: 100%;
+            transform: rotate(${area.angle}deg);
+            opacity: ${layoutParams.opacity};
           }
-          ${getLayoutStyles(layouts, layoutValues, ([area, layoutParams]) => {
-      return (`
-              .custom-component-${item.id} {
-                transform: rotate(${area.angle}deg);
-                opacity: ${layoutParams.opacity};
-              }
-            `);
-    })}
-        `}
+        `);
+    })}`}
       </JSXStyle>
     </>
   );

package/src/components/items/CompoundItem/CompoundItem.tsx

@@ -6,8 +6,7 @@ import { getStyleFromItemStateAndParams } from '../../../utils/getStyleFromItemS
 import { LinkWrapper } from '../LinkWrapper';
 import { ItemProps } from '../Item';
 import JSXStyle from 'styled-jsx/style';
-import { getLayoutStyles } from '@cntrl-site/sdk';
-import { CompoundItem as TCompoundItem } from '@cntrl-site/sdk';
+import { getLayoutStyles, CompoundItem as TCompoundItem } from '@cntrl-site/sdk';
 import { CompoundChild } from './CompoundChild';
 import { useCompoundItem } from './useCompoundItem';