@cntrl-site/sdk-nextjs 1.8.13 → 1.8.15

package/src/components/items/GroupItem/GroupItem.tsx

@@ -1,79 +1,79 @@
-import React, { FC, useEffect, useId, useState } from 'react';
-import { Item, ItemProps } from '../Item';
-import JSXStyle from 'styled-jsx/style';
-import { getLayoutStyles, GroupItem as TGroupItem } from '@cntrl-site/sdk';
-import { LinkWrapper } from '../LinkWrapper';
-import { useRegisterResize } from '../../../common/useRegisterResize';
-import { useCntrlContext } from '../../../provider/useCntrlContext';
-import { useItemAngle } from '../useItemAngle';
-import { useGroupItem } from './useGroupItem';
-import { getStyleFromItemStateAndParams } from '../../../utils/getStyleFromItemStateAndParams';
-import { CompoundChild } from '../CompoundItem/CompoundChild';
-
-export const GroupItem: FC<ItemProps<TGroupItem>> = ({ item, sectionId, onResize, interactionCtrl, onVisibilityChange, isInCompound }) => {
-  const id = useId();
-  const { items } = item;
-  const itemAngle = useItemAngle(item, sectionId);
-  const { layouts } = useCntrlContext();
-  const { opacity: itemOpacity, blur: itemBlur } = useGroupItem(item, sectionId);
-  const layoutValues: Record<string, any>[] = [item.area, item.layoutParams];
-  const [ref, setRef] = useState<HTMLDivElement | null>(null);
-  useRegisterResize(ref, onResize);
-  const stateParams = interactionCtrl?.getState(['opacity', 'angle', 'blur']);
-  const angle = getStyleFromItemStateAndParams(stateParams?.styles?.angle, itemAngle);
-  const opacity = getStyleFromItemStateAndParams(stateParams?.styles?.opacity, itemOpacity);
-  const blur = getStyleFromItemStateAndParams(stateParams?.styles?.blur, itemBlur);
-  const isInteractive = opacity !== 0 && opacity !== undefined;
-  useEffect(() => {
-    onVisibilityChange?.(isInteractive);
-  }, [isInteractive, onVisibilityChange]);
-  return (
-    <LinkWrapper url={item.link?.url} target={item.link?.target}>
-      <>
-        <div
-          className={`group-${item.id}`}
-          ref={setRef}
-          style={{
-            ...(opacity !== undefined ? { opacity } : {}),
-            ...(angle !== undefined ? { transform: `rotate(${angle}deg)` } : {}),
-            ...(blur !== undefined ? { filter: `blur(${blur * 100}vw)` } : {}),
-            transition: stateParams?.transition ?? 'none'
-          }}
-        >
-          {items && items.map(item => isInCompound ? (
-            <CompoundChild
-              item={item}
-              key={item.id}
-              sectionId={sectionId}
-              isParentVisible={isInteractive}
-            />
-          ) : (
-            <Item
-              item={item}
-              key={item.id}
-              sectionId={sectionId}
-              isParentVisible={isInteractive}
-              isInGroup
-            />
-          ))}
-        </div>
-        <JSXStyle id={id}>{`
-        .group-${item.id} {
-          position: absolute;
-          width: 100%;
-          height: 100%;
-          box-sizing: border-box;
-        }
-        ${getLayoutStyles(layouts, layoutValues, ([area, layoutParams]) => {
-      return (`
-            .group-${item.id} {
-              opacity: ${layoutParams.opacity};
-              transform: rotate(${area.angle}deg);
-            }
-          `);
-    })}
-      `}</JSXStyle>
-      </>
-    </LinkWrapper>
-  );
-};
+import React, { FC, useEffect, useId, useState } from 'react';
+import { Item, ItemProps } from '../Item';
+import JSXStyle from 'styled-jsx/style';
+import { getLayoutStyles, GroupItem as TGroupItem } from '@cntrl-site/sdk';
+import { LinkWrapper } from '../LinkWrapper';
+import { useRegisterResize } from '../../../common/useRegisterResize';
+import { useCntrlContext } from '../../../provider/useCntrlContext';
+import { useItemAngle } from '../useItemAngle';
+import { useGroupItem } from './useGroupItem';
+import { getStyleFromItemStateAndParams } from '../../../utils/getStyleFromItemStateAndParams';
+import { CompoundChild } from '../CompoundItem/CompoundChild';
+
+export const GroupItem: FC<ItemProps<TGroupItem>> = ({ item, sectionId, onResize, interactionCtrl, onVisibilityChange, isInCompound }) => {
+  const id = useId();
+  const { items } = item;
+  const itemAngle = useItemAngle(item, sectionId);
+  const { layouts } = useCntrlContext();
+  const { opacity: itemOpacity, blur: itemBlur } = useGroupItem(item, sectionId);
+  const layoutValues: Record<string, any>[] = [item.area, item.layoutParams];
+  const [ref, setRef] = useState<HTMLDivElement | null>(null);
+  useRegisterResize(ref, onResize);
+  const stateParams = interactionCtrl?.getState(['opacity', 'angle', 'blur']);
+  const angle = getStyleFromItemStateAndParams(stateParams?.styles?.angle, itemAngle);
+  const opacity = getStyleFromItemStateAndParams(stateParams?.styles?.opacity, itemOpacity);
+  const blur = getStyleFromItemStateAndParams(stateParams?.styles?.blur, itemBlur);
+  const isInteractive = opacity !== 0 && opacity !== undefined;
+  useEffect(() => {
+    onVisibilityChange?.(isInteractive);
+  }, [isInteractive, onVisibilityChange]);
+  return (
+    <LinkWrapper url={item.link?.url} target={item.link?.target}>
+      <>
+        <div
+          className={`group-${item.id}`}
+          ref={setRef}
+          style={{
+            ...(opacity !== undefined ? { opacity } : {}),
+            ...(angle !== undefined ? { transform: `rotate(${angle}deg) translateZ(0)` } : {}),
+            ...(blur !== undefined ? { filter: `blur(${blur * 100}vw)` } : {}),
+            transition: stateParams?.transition ?? 'none'
+          }}
+        >
+          {items && items.map(item => isInCompound ? (
+            <CompoundChild
+              item={item}
+              key={item.id}
+              sectionId={sectionId}
+              isParentVisible={isInteractive}
+            />
+          ) : (
+            <Item
+              item={item}
+              key={item.id}
+              sectionId={sectionId}
+              isParentVisible={isInteractive}
+              isInGroup
+            />
+          ))}
+        </div>
+        <JSXStyle id={id}>{`
+        .group-${item.id} {
+          position: absolute;
+          width: 100%;
+          height: 100%;
+          box-sizing: border-box;
+        }
+        ${getLayoutStyles(layouts, layoutValues, ([area, layoutParams]) => {
+      return (`
+            .group-${item.id} {
+              opacity: ${layoutParams.opacity};
+              transform: rotate(${area.angle}deg) translateZ(0);
+            }
+          `);
+    })}
+      `}</JSXStyle>
+      </>
+    </LinkWrapper>
+  );
+};

package/src/components/items/GroupItem/useGroupItem.ts

@@ -1,34 +1,34 @@
-import { useKeyframeValue } from '../../../common/useKeyframeValue';
-import { GroupItem, KeyframeType } from '@cntrl-site/sdk';
-import { useLayoutContext } from '../../useLayoutContext';
-
-export function useGroupItem(item: GroupItem, 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]
-  );
-
-  const blur = useKeyframeValue(
-    item,
-    KeyframeType.Blur,
-    (item, layoutId) => {
-      if (!layoutId) return;
-      const layoutParams = item.layoutParams[layoutId];
-      return 'blur' in layoutParams ? layoutParams.blur : 0;
-    },
-    (animator, scroll, value) => value !== undefined ? animator.getBlur({ blur: value }, scroll).blur : undefined,
-    sectionId,
-    [layoutId]
-  );
-
-  return { opacity, blur };
-}
+import { useKeyframeValue } from '../../../common/useKeyframeValue';
+import { GroupItem, KeyframeType } from '@cntrl-site/sdk';
+import { useLayoutContext } from '../../useLayoutContext';
+
+export function useGroupItem(item: GroupItem, 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]
+  );
+
+  const blur = useKeyframeValue(
+    item,
+    KeyframeType.Blur,
+    (item, layoutId) => {
+      if (!layoutId) return;
+      const layoutParams = item.layoutParams[layoutId];
+      return 'blur' in layoutParams ? layoutParams.blur : 0;
+    },
+    (animator, scroll, value) => value !== undefined ? animator.getBlur({ blur: value }, scroll).blur : undefined,
+    sectionId,
+    [layoutId]
+  );
+
+  return { opacity, blur };
+}