@cntrl-site/sdk-nextjs 0.7.3 → 0.8.0

package/lib/components/Item.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Item = void 0;
+exports.isItemType = exports.Item = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const sdk_1 = require("@cntrl-site/sdk");
@@ -17,6 +17,7 @@ const useItemPosition_1 = require("./useItemPosition");
 const useItemDimensions_1 = require("./useItemDimensions");
 const useItemSticky_1 = require("./items/useItemSticky");
 const castObject_1 = require("../utils/castObject");
+const useCurrentLayout_1 = require("../common/useCurrentLayout");
 const itemsMap = {
     [sdk_1.ArticleItemType.Rectangle]: RectangleItem_1.RectangleItem,
     [sdk_1.ArticleItemType.Image]: ImageItem_1.ImageItem,
@@ -31,6 +32,7 @@ const Item = ({ item }) => {
     const { layouts } = (0, useCntrlContext_1.useCntrlContext)();
     const angle = (0, useItemAngle_1.useItemAngle)(item);
     const position = (0, useItemPosition_1.useItemPosition)(item);
+    const layout = (0, useCurrentLayout_1.useCurrentLayout)();
     const [ref, setRef] = (0, react_1.useState)(null);
     const [parentOffsetTop, setParentOffsetTop] = (0, react_1.useState)(0);
     const { top, isFixed } = (0, useItemSticky_1.useItemSticky)(position.top, parentOffsetTop, item);
@@ -40,7 +42,10 @@ const Item = ({ item }) => {
     if (item.layoutParams) {
         layoutValues.push(item.layoutParams);
     }
-    const sizingAxis = parseSizing(item.commonParams.sizing);
+    const sizing = isItemType(item, sdk_1.ArticleItemType.RichText)
+        ? item.layoutParams[layout].sizing
+        : undefined;
+    const sizingAxis = parseSizing(sizing);
     const ItemComponent = itemsMap[item.type] || noop;
     (0, react_1.useEffect)(() => {
         isInitialRef.current = false;
@@ -59,7 +64,9 @@ const Item = ({ item }) => {
         top
     };
     return ((0, jsx_runtime_1.jsxs)("div", { suppressHydrationWarning: true, className: `item-${item.id}`, ref: setRef, style: isInitialRef.current ? {} : { ...styles, position: isFixed ? 'fixed' : 'absolute' }, children: [(0, jsx_runtime_1.jsx)(ItemComponent, { item: item }), (0, jsx_runtime_1.jsx)("style", { jsx: true, children: `
-        ${(0, sdk_1.getLayoutStyles)(layouts, layoutValues, ([area]) => (`
+        ${(0, sdk_1.getLayoutStyles)(layouts, layoutValues, ([area, layoutParams]) => {
+                    const sizingAxis = parseSizing(layoutParams.sizing);
+                    return (`
            .item-${item.id} {
               position: absolute;
               z-index: ${area.zIndex};
@@ -70,14 +77,19 @@ const Item = ({ item }) => {
               z-index: ${area.zIndex};
               transform: rotate(${area.angle}deg);
             }
-        `))}
+          `);
+                })}
       ` })] }));
 };
 exports.Item = Item;
-function parseSizing(sizing) {
+function parseSizing(sizing = 'manual') {
     const axisSizing = sizing.split(' ');
     return {
         y: axisSizing[0],
         x: axisSizing[1] ? axisSizing[1] : axisSizing[0]
     };
 }
+function isItemType(item, itemType) {
+    return item.type === itemType;
+}
+exports.isItemType = isItemType;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cntrl-site/sdk-nextjs",
-  "version": "0.7.3",
+  "version": "0.8.0",
   "description": "SDK for Next.js",
   "main": "lib/index.js",
   "types": "src/index.js",
@@ -21,7 +21,7 @@
   },
   "homepage": "https://github.com/cntrl-site/sdk-nextjs#readme",
   "dependencies": {
-    "@cntrl-site/sdk": "^0.6.3",
+    "@cntrl-site/sdk": "^0.7.0",
     "html-react-parser": "^3.0.1",
     "styled-jsx": "^5.0.2"
   },

package/src/common/useCurrentLayout.ts

@@ -8,7 +8,7 @@ interface LayoutData {
   end: number;
 }
 
-export const useCurrentLayout = () => {
+export const useCurrentLayout = (): string => {
   const { layouts } = useCntrlContext();
   const articleRectObserver = useContext(ArticleRectContext);
   const layoutRanges = useMemo(() => {

package/src/components/Item.tsx

@@ -1,8 +1,9 @@
 import { ComponentType, FC, useEffect, useRef, useState } from 'react';
 import {
-  getLayoutStyles,
-  ArticleItemType,
   ArticleItemSizingType as SizingType,
+  ArticleItemType,
+  getLayoutStyles,
+  TArticleItem,
   TArticleItemAny
 } from '@cntrl-site/sdk';
 import { RectangleItem } from './items/RectangleItem';
@@ -18,6 +19,7 @@ import { useItemPosition } from './useItemPosition';
 import { useItemDimensions } from './useItemDimensions';
 import { getItemTopStyle, useItemSticky } from './items/useItemSticky';
 import { castObject } from '../utils/castObject';
+import { useCurrentLayout } from '../common/useCurrentLayout';
 
 export interface ItemProps<I extends TArticleItemAny> {
   item: I;
@@ -39,6 +41,7 @@ export const Item: FC<ItemProps<TArticleItemAny>> = ({ item }) => {
   const { layouts } = useCntrlContext();
   const angle = useItemAngle(item);
   const position = useItemPosition(item);
+  const layout = useCurrentLayout();
   const [ref, setRef] = useState<HTMLDivElement | null>(null);
   const [parentOffsetTop, setParentOffsetTop] = useState(0);
   const { top, isFixed } = useItemSticky(position.top, parentOffsetTop, item);
@@ -49,7 +52,10 @@ export const Item: FC<ItemProps<TArticleItemAny>> = ({ item }) => {
     layoutValues.push(item.layoutParams);
   }
 
-  const sizingAxis = parseSizing(item.commonParams.sizing);
+  const sizing = isItemType(item, ArticleItemType.RichText)
+    ? item.layoutParams[layout].sizing
+    : undefined;
+  const sizingAxis = parseSizing(sizing);
   const ItemComponent = itemsMap[item.type] || noop;
 
   useEffect(() => {
@@ -79,7 +85,9 @@ export const Item: FC<ItemProps<TArticleItemAny>> = ({ item }) => {
     >
       <ItemComponent item={item} />
       <style jsx>{`
-        ${getLayoutStyles(layouts, layoutValues, ([area]) => (`
+        ${getLayoutStyles(layouts, layoutValues, ([area, layoutParams]) => {
+          const sizingAxis = parseSizing(layoutParams.sizing);
+          return (`
            .item-${item.id} {
               position: absolute;
               z-index: ${area.zIndex};
@@ -90,13 +98,14 @@ export const Item: FC<ItemProps<TArticleItemAny>> = ({ item }) => {
               z-index: ${area.zIndex};
               transform: rotate(${area.angle}deg);
             }
-        `))}
+          `);
+        })}
       `}</style>
     </div>
   );
 };
 
-function parseSizing(sizing: string): Axis {
+function parseSizing(sizing: string = 'manual'): Axis {
   const axisSizing = sizing.split(' ');
   return {
     y: axisSizing[0],
@@ -108,3 +117,7 @@ interface Axis {
   x: SizingType;
   y: SizingType;
 }
+
+export function isItemType<T extends ArticleItemType>(item: TArticleItemAny, itemType: T): item is TArticleItem<T> {
+  return item.type === itemType;
+}