@cntrl-site/sdk-nextjs 1.9.71-9 → 1.9.72

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

@@ -1,88 +1,88 @@
-import React, { FC, useContext, useEffect, useId, useState } from 'react';
-import { useItemAngle } from '../useItemAngle';
-import { useCntrlContext } from '../../../provider/useCntrlContext';
-import { useRegisterResize } from '../../../common/useRegisterResize';
-import { getStyleFromItemStateAndParams } from '../../../utils/getStyleFromItemStateAndParams';
-import { LinkWrapper } from '../LinkWrapper';
-import { ItemProps } from '../Item';
-import JSXStyle from 'styled-jsx/style';
-import { getLayoutStyles, CompoundItem as TCompoundItem } from '@cntrl-site/sdk';
-import { CompoundChild } from './CompoundChild';
-import { useCompoundItem } from './useCompoundItem';
-import { useItemGeometry } from '../../../ItemGeometry/useItemGeometry';
-import { ItemGeometryContext } from '../../../ItemGeometry/ItemGeometryContext';
-
-export const CompoundItem: FC<ItemProps<TCompoundItem>> = ({ item, sectionId, onResize, interactionCtrl, onVisibilityChange }) => {
-  const reactId = useId();
-  const id = `${reactId}-compounditem-${item.id}`;
-  const { items } = item;
-  const itemIds = items ? items.map(item => item.id) : [];
-  const itemAngle = useItemAngle(item, sectionId);
-  const { layouts } = useCntrlContext();
-  const { opacity: itemOpacity } = useCompoundItem(item, sectionId);
-  const layoutValues: Record<string, any>[] = [item.area, item.layoutParams];
-  const [ref, setRef] = useState<HTMLDivElement | null>(null);
-  useRegisterResize(ref, onResize);
-  useItemGeometry(item.id, ref);
-  const itemGeometryService = useContext(ItemGeometryContext);
-  const stateParams = interactionCtrl?.getState<number>(['opacity', 'angle']);
-  const angle = getStyleFromItemStateAndParams(stateParams?.styles?.angle, itemAngle);
-  const opacity = getStyleFromItemStateAndParams(stateParams?.styles?.opacity, itemOpacity);
-  const isInteractive = opacity !== 0 && opacity !== undefined;
-  useEffect(() => {
-    onVisibilityChange?.(isInteractive);
-  }, [isInteractive, onVisibilityChange]);
-  useEffect(() => {
-    // because on first render controllers not yet initialized
-    setTimeout(() => {
-      for (const id of itemIds) {
-        const hasItem = itemGeometryService.hasItem(id);
-        if (hasItem) {
-          const cntrl = itemGeometryService.getControllerById(id);
-          cntrl.setParentId(item.id);
-        }
-      }
-    }, 0);
-  }, [itemIds, item.id]);
-  return (
-    <LinkWrapper url={item.link?.url} target={item.link?.target}>
-      <>
-        <div
-          className={`compound-${item.id}`}
-          ref={setRef}
-          style={{
-            ...(opacity !== undefined ? { opacity } : {}),
-            ...(angle !== undefined ? { transform: `rotate(${angle}deg)` } : {}),
-            transition: stateParams?.transition ?? 'none'
-          }}
-        >
-          {items && items.map(item => (
-            <CompoundChild
-              item={item}
-              key={item.id}
-              sectionId={sectionId}
-              isParentVisible={isInteractive}
-            />
-          ))}
-        </div>
-        <JSXStyle id={id}>{`
-        .compound-${item.id} {
-          overflow: ${item.commonParams.overflow};
-          position: absolute;
-          width: 100%;
-          height: 100%;
-          box-sizing: border-box;
-        }
-        ${getLayoutStyles(layouts, layoutValues, ([area, layoutParams]) => {
-          return (`
-            .compound-${item.id} {
-              opacity: ${layoutParams.opacity};
-              transform: rotate(${area.angle}deg);
-            }
-          `);
-        })}
-      `}</JSXStyle>
-      </>
-    </LinkWrapper>
-  );
-};
+import React, { FC, useContext, useEffect, useId, useState } from 'react';
+import { useItemAngle } from '../useItemAngle';
+import { useCntrlContext } from '../../../provider/useCntrlContext';
+import { useRegisterResize } from '../../../common/useRegisterResize';
+import { getStyleFromItemStateAndParams } from '../../../utils/getStyleFromItemStateAndParams';
+import { LinkWrapper } from '../LinkWrapper';
+import { ItemProps } from '../Item';
+import JSXStyle from 'styled-jsx/style';
+import { getLayoutStyles, CompoundItem as TCompoundItem } from '@cntrl-site/sdk';
+import { CompoundChild } from './CompoundChild';
+import { useCompoundItem } from './useCompoundItem';
+import { useItemGeometry } from '../../../ItemGeometry/useItemGeometry';
+import { ItemGeometryContext } from '../../../ItemGeometry/ItemGeometryContext';
+
+export const CompoundItem: FC<ItemProps<TCompoundItem>> = ({ item, sectionId, onResize, interactionCtrl, onVisibilityChange }) => {
+  const reactId = useId();
+  const id = `${reactId}-compounditem-${item.id}`;
+  const { items } = item;
+  const itemIds = items ? items.map(item => item.id) : [];
+  const itemAngle = useItemAngle(item, sectionId);
+  const { layouts } = useCntrlContext();
+  const { opacity: itemOpacity } = useCompoundItem(item, sectionId);
+  const layoutValues: Record<string, any>[] = [item.area, item.layoutParams];
+  const [ref, setRef] = useState<HTMLDivElement | null>(null);
+  useRegisterResize(ref, onResize);
+  useItemGeometry(item.id, ref);
+  const itemGeometryService = useContext(ItemGeometryContext);
+  const stateParams = interactionCtrl?.getState<number>(['opacity', 'angle']);
+  const angle = getStyleFromItemStateAndParams(stateParams?.styles?.angle, itemAngle);
+  const opacity = getStyleFromItemStateAndParams(stateParams?.styles?.opacity, itemOpacity);
+  const isInteractive = opacity !== 0 && opacity !== undefined;
+  useEffect(() => {
+    onVisibilityChange?.(isInteractive);
+  }, [isInteractive, onVisibilityChange]);
+  useEffect(() => {
+    // because on first render controllers not yet initialized
+    setTimeout(() => {
+      for (const id of itemIds) {
+        const hasItem = itemGeometryService.hasItem(id);
+        if (hasItem) {
+          const cntrl = itemGeometryService.getControllerById(id);
+          cntrl.setParentId(item.id);
+        }
+      }
+    }, 0);
+  }, [itemIds, item.id]);
+  return (
+    <LinkWrapper url={item.link?.url} target={item.link?.target}>
+      <>
+        <div
+          className={`compound-${item.id}`}
+          ref={setRef}
+          style={{
+            ...(opacity !== undefined ? { opacity } : {}),
+            ...(angle !== undefined ? { transform: `rotate(${angle}deg)` } : {}),
+            transition: stateParams?.transition ?? 'none'
+          }}
+        >
+          {items && items.map(item => (
+            <CompoundChild
+              item={item}
+              key={item.id}
+              sectionId={sectionId}
+              isParentVisible={isInteractive}
+            />
+          ))}
+        </div>
+        <JSXStyle id={id}>{`
+        .compound-${item.id} {
+          overflow: ${item.commonParams.overflow};
+          position: absolute;
+          width: 100%;
+          height: 100%;
+          box-sizing: border-box;
+        }
+        ${getLayoutStyles(layouts, layoutValues, ([area, layoutParams]) => {
+          return (`
+            .compound-${item.id} {
+              opacity: ${layoutParams.opacity};
+              transform: rotate(${area.angle}deg);
+            }
+          `);
+        })}
+      `}</JSXStyle>
+      </>
+    </LinkWrapper>
+  );
+};

package/src/components/items/CompoundItem/useCompoundItem.ts

@@ -1,21 +1,21 @@
-import { CompoundItem, KeyframeType } from '@cntrl-site/sdk';
-import { useLayoutContext } from '../../useLayoutContext';
-import { useKeyframeValue } from '../../../common/useKeyframeValue';
-
-export function useCompoundItem(item: CompoundItem, sectionId: string) {
-  const layoutId = useLayoutContext();
-  const opacity = useKeyframeValue(
-    item,
-    KeyframeType.Opacity,
-    (item, layoutId) => {
-      if (!layoutId) return;
-      const layoutParams = item.layoutParams[layoutId];
-      return 'opacity' in layoutParams ? layoutParams.opacity : 1;
-    },
-    (animator, scroll, value) => value !== undefined ? animator.getOpacity({ opacity: value }, scroll).opacity : undefined,
-    sectionId,
-    [layoutId]
-  );
-
-  return { opacity };
-}
+import { CompoundItem, KeyframeType } from '@cntrl-site/sdk';
+import { useLayoutContext } from '../../useLayoutContext';
+import { useKeyframeValue } from '../../../common/useKeyframeValue';
+
+export function useCompoundItem(item: CompoundItem, sectionId: string) {
+  const layoutId = useLayoutContext();
+  const opacity = useKeyframeValue(
+    item,
+    KeyframeType.Opacity,
+    (item, layoutId) => {
+      if (!layoutId) return;
+      const layoutParams = item.layoutParams[layoutId];
+      return 'opacity' in layoutParams ? layoutParams.opacity : 1;
+    },
+    (animator, scroll, value) => value !== undefined ? animator.getOpacity({ opacity: value }, scroll).opacity : undefined,
+    sectionId,
+    [layoutId]
+  );
+
+  return { opacity };
+}

package/src/components/items/CustomItem/CustomItem.tsx

@@ -1,50 +1,50 @@
-import { getLayoutStyles, CustomItem as TCustomItem } from '@cntrl-site/sdk';
-import { FC, useState } from 'react';
-import { useCntrlContext } from '../../../provider/useCntrlContext';
-import { ItemProps } from '../Item';
-import JSXStyle from 'styled-jsx/style';
-import { useRegisterResize } from '../../../common/useRegisterResize';
-import { useItemAngle } from '../useItemAngle';
-import { useItemGeometry } from '../../../ItemGeometry/useItemGeometry';
-
-export const CustomItem: FC<ItemProps<TCustomItem>> = ({ item, onResize, sectionId, interactionCtrl }) => {
-  const sdk = useCntrlContext();
-  const { layouts } = useCntrlContext();
-  const itemAngle = useItemAngle(item, sectionId);
-  const component = sdk.customItems.get(item.commonParams.name);
-  const layoutValues: Record<string, any>[] = [item.area];
-  const [ref, setRef] = useState<HTMLDivElement | null>(null);
-  useRegisterResize(ref, onResize);
-  useItemGeometry(item.id, ref);
-  const stateParams = interactionCtrl?.getState<number>(['angle']);
-  const angle = stateParams?.styles?.angle ?? itemAngle;
-  if (!component) return null;
-  return (
-    <>
-      <div
-        className={`custom-component-${item.id}`}
-        ref={setRef}
-        style={{
-          ...(angle !== undefined ? { transform: `rotate(${angle}deg)` } : {}),
-          transition: stateParams?.transition ?? 'none'
-        }}
-      >
-        {component({})}
-      </div>
-      <JSXStyle id={item.id}>
-        {`${getLayoutStyles(layouts, layoutValues, ([area]) => {
-          return (`
-            .custom-component-${item.id} {
-              transform: rotate(${area.angle}deg);
-              height: 100%;
-              width: 100%;
-              position: absolute;
-              left: 0;
-              top: 0;
-            }
-          `);
-        })}`}
-      </JSXStyle>
-    </>
-  );
-};
+import { getLayoutStyles, CustomItem as TCustomItem } from '@cntrl-site/sdk';
+import { FC, useState } from 'react';
+import { useCntrlContext } from '../../../provider/useCntrlContext';
+import { ItemProps } from '../Item';
+import JSXStyle from 'styled-jsx/style';
+import { useRegisterResize } from '../../../common/useRegisterResize';
+import { useItemAngle } from '../useItemAngle';
+import { useItemGeometry } from '../../../ItemGeometry/useItemGeometry';
+
+export const CustomItem: FC<ItemProps<TCustomItem>> = ({ item, onResize, sectionId, interactionCtrl }) => {
+  const sdk = useCntrlContext();
+  const { layouts } = useCntrlContext();
+  const itemAngle = useItemAngle(item, sectionId);
+  const component = sdk.customItems.get(item.commonParams.name);
+  const layoutValues: Record<string, any>[] = [item.area];
+  const [ref, setRef] = useState<HTMLDivElement | null>(null);
+  useRegisterResize(ref, onResize);
+  useItemGeometry(item.id, ref);
+  const stateParams = interactionCtrl?.getState<number>(['angle']);
+  const angle = stateParams?.styles?.angle ?? itemAngle;
+  if (!component) return null;
+  return (
+    <>
+      <div
+        className={`custom-component-${item.id}`}
+        ref={setRef}
+        style={{
+          ...(angle !== undefined ? { transform: `rotate(${angle}deg)` } : {}),
+          transition: stateParams?.transition ?? 'none'
+        }}
+      >
+        {component({})}
+      </div>
+      <JSXStyle id={item.id}>
+        {`${getLayoutStyles(layouts, layoutValues, ([area]) => {
+          return (`
+            .custom-component-${item.id} {
+              transform: rotate(${area.angle}deg);
+              height: 100%;
+              width: 100%;
+              position: absolute;
+              left: 0;
+              top: 0;
+            }
+          `);
+        })}`}
+      </JSXStyle>
+    </>
+  );
+};