@cntrl-site/sdk-nextjs 1.8.11 → 1.8.12

package/src/components/Section/Section.tsx

@@ -1,164 +1,164 @@
-import { FC, ReactElement, useEffect, useId, useRef, useState, useContext } from 'react';
-import JSXStyle from 'styled-jsx/style';
-import {
-  getLayoutMediaQuery,
-  getLayoutStyles,
-  Section as TSection,
-  SectionHeight,
-  SectionHeightMode
-} from '@cntrl-site/sdk';
-import { useCntrlContext } from '../../provider/useCntrlContext';
-import { useSectionRegistry } from '../../utils/ArticleRectManager/useSectionRegistry';
-import { CntrlColor } from '@cntrl-site/color';
-import { useLayoutContext } from '../useLayoutContext';
-
-type SectionChild = ReactElement<any, any>;
-const DEFAULT_COLOR = 'rgba(0, 0, 0, 0)';
-
-interface Props {
-  section: TSection;
-  children: SectionChild[];
-  data?: any;
-}
-
-function isVideoUrl(url: string): boolean {
-  const videoExtensions = ['.mp4', '.webm', '.ogg'];
-  return videoExtensions.some(ext => url.toLowerCase().endsWith(ext));
-}
-
-export const Section: FC<Props> = ({ section, data, children }) => {
-  const id = useId();
-  const sectionRef = useRef<HTMLDivElement | null>(null);
-  const { layouts, customSections } = useCntrlContext();
-  const layout = useLayoutContext();
-  const layoutValues: Record<string, any>[] = [section.height, section.color, section.media ?? {}];
-  const SectionComponent = section.name ? customSections.getComponent(section.name) : undefined;
-  const isVideo = layout && section.media?.[layout]?.url ? isVideoUrl(String(section.media?.[layout]?.url)) : false;
-  const videoRef = useRef<HTMLVideoElement | null>(null);
-  useSectionRegistry(section.id, sectionRef.current);
-
-  const getSectionVisibilityStyles = () => {
-    return layouts
-      .sort((a, b) => a.startsWith - b.startsWith)
-      .reduce((acc, layout) => {
-        const isHidden = section.hidden[layout.id];
-        return `
-          ${acc}
-          ${getLayoutMediaQuery(layout.id, layouts)} {
-            .section-${section.id} {
-              display: ${isHidden ? 'none' : 'block'};
-            }
-          }`;
-      }, '');
-  };
-
-  useEffect(() => {
-    if (!isVideo || !sectionRef.current || !videoRef.current) return;
-    const video = videoRef.current;
-    const section = sectionRef.current;
-    const observer = new IntersectionObserver(
-      ([entry]) => {
-        if (entry.isIntersecting) {
-          video.style.display = 'block';
-          video.play().catch(() => {});
-        } else {
-          video.style.display = 'none';
-          video.pause();
-        }
-      },
-      {
-        root: null,
-        rootMargin: '50px',
-        threshold: 0
-      }
-    );
-    observer.observe(section);
-    return () => observer.disconnect();
-  }, [isVideo]);
-
-  if (SectionComponent) return <div ref={sectionRef}><SectionComponent data={data}>{children}</SectionComponent></div>;
-
-  return (
-    <>
-      <div
-        className={`section-${section.id}`}
-        id={section.name}
-        ref={sectionRef}
-      >
-        {layout && section.media?.[layout]?.url && section.media?.[layout]?.size !== 'none' && sectionRef.current && (
-          <div className={`section-background-overlay-${section.id}`}>
-            <div
-              key={`section-background-wrapper-${section.id}`}
-              className={`section-background-wrapper-${section.id}`}
-            >
-              {isVideo ? (
-                <video
-                  ref={videoRef}
-                  autoPlay
-                  loop
-                  muted
-                  playsInline
-                  preload="auto"
-                  className={`video-background-${section.id}`}
-                >
-                  <source src={section.media?.[layout]?.url ?? ''} />
-                </video>
-              ) : (
-                <img src={section.media?.[layout]?.url ?? ''} className={`image-background-${section.id}`} />
-              )}
-            </div>
-          </div>
-        )}
-        {children}
-      </div>
-      <JSXStyle id={id}>{`
-      ${
-    getLayoutStyles(layouts, layoutValues, ([height, color, media]) => (`
-         .section-${section.id} {
-            height: ${getSectionHeight(height)};
-            position: relative;
-            background-color: ${CntrlColor.parse(color ?? DEFAULT_COLOR).fmt('rgba')};
-         }
-         .section-background-overlay-${section.id} {
-            height: ${getSectionHeight(height)};
-            width: 100%;
-            position: relative;
-            overflow: clip;
-         }
-         .section-background-wrapper-${section.id} {
-            transform: ${media?.position === 'fixed' ? 'translateY(-100vh)' : 'unset'};
-            position: relative;
-            height: ${media?.position === 'fixed' ? `calc(${getSectionHeight(height)} + 200vh)` : getSectionHeight(height)};
-            width: 100%;
-         }
-         .video-background-${section.id} {
-            object-fit: ${media?.size ?? 'cover'};
-            width: ${media?.offsetX === null || media?.size === 'cover' ? '100%' : 'auto'};
-            height: ${media?.position === 'fixed' ? '100vh' : '100%'};
-            position: ${media?.position === 'fixed' ? 'sticky' : 'relative'};
-            top: ${media?.position === 'fixed' ? '100vh' : 'unset'};
-            ${media && media.offsetX !== null && media.size !== 'cover' ? `margin-left: ${media.offsetX * 100}vw;` : ''}
-         }
-         .image-background-${section.id} {
-            object-fit: ${media?.size};
-            width: ${media?.offsetX === null ? '100%' : 'auto'};
-            height: ${media?.position === 'fixed' ? '100vh' : '100%'};
-            position: ${media?.position === 'fixed' ? 'sticky' : 'relative'};
-            top: ${media?.position === 'fixed' ? '100vh' : 'unset'};
-            ${media && media.offsetX !== null && media.size !== 'cover' ? `margin-left: ${media.offsetX * 100}vw;` : ''}
-         }
-        `
-    ))
-    }
-      ${getSectionVisibilityStyles()}
-    `}</JSXStyle>
-    </>
-  );
-};
-
-export function getSectionHeight(heightData: SectionHeight): string {
-  const { units, vhUnits, mode } = heightData;
-  if (mode === SectionHeightMode.ViewportHeightUnits) return `${vhUnits}vh`;
-  if (mode === SectionHeightMode.ControlUnits) return `${units * 100}vw`;
-  return '0';
-}
+import { FC, ReactElement, useEffect, useId, useRef, useState, useContext } from 'react';
+import JSXStyle from 'styled-jsx/style';
+import {
+  getLayoutMediaQuery,
+  getLayoutStyles,
+  Section as TSection,
+  SectionHeight,
+  SectionHeightMode
+} from '@cntrl-site/sdk';
+import { useCntrlContext } from '../../provider/useCntrlContext';
+import { useSectionRegistry } from '../../utils/ArticleRectManager/useSectionRegistry';
+import { CntrlColor } from '@cntrl-site/color';
+import { useLayoutContext } from '../useLayoutContext';
+
+type SectionChild = ReactElement<any, any>;
+const DEFAULT_COLOR = 'rgba(0, 0, 0, 0)';
+
+interface Props {
+  section: TSection;
+  children: SectionChild[];
+  data?: any;
+}
+
+function isVideoUrl(url: string): boolean {
+  const videoExtensions = ['.mp4', '.webm', '.ogg'];
+  return videoExtensions.some(ext => url.toLowerCase().endsWith(ext));
+}
+
+export const Section: FC<Props> = ({ section, data, children }) => {
+  const id = useId();
+  const sectionRef = useRef<HTMLDivElement | null>(null);
+  const { layouts, customSections } = useCntrlContext();
+  const layout = useLayoutContext();
+  const layoutValues: Record<string, any>[] = [section.height, section.color, section.media ?? {}];
+  const SectionComponent = section.name ? customSections.getComponent(section.name) : undefined;
+  const isVideo = layout && section.media?.[layout]?.url ? isVideoUrl(String(section.media?.[layout]?.url)) : false;
+  const videoRef = useRef<HTMLVideoElement | null>(null);
+  useSectionRegistry(section.id, sectionRef.current);
+
+  const getSectionVisibilityStyles = () => {
+    return layouts
+      .sort((a, b) => a.startsWith - b.startsWith)
+      .reduce((acc, layout) => {
+        const isHidden = section.hidden[layout.id];
+        return `
+          ${acc}
+          ${getLayoutMediaQuery(layout.id, layouts)} {
+            .section-${section.id} {
+              display: ${isHidden ? 'none' : 'block'};
+            }
+          }`;
+      }, '');
+  };
+
+  useEffect(() => {
+    if (!isVideo || !sectionRef.current || !videoRef.current) return;
+    const video = videoRef.current;
+    const section = sectionRef.current;
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        if (entry.isIntersecting) {
+          video.style.display = 'block';
+          video.play().catch(() => {});
+        } else {
+          video.style.display = 'none';
+          video.pause();
+        }
+      },
+      {
+        root: null,
+        rootMargin: '50px',
+        threshold: 0
+      }
+    );
+    observer.observe(section);
+    return () => observer.disconnect();
+  }, [isVideo]);
+
+  if (SectionComponent) return <div ref={sectionRef}><SectionComponent data={data}>{children}</SectionComponent></div>;
+
+  return (
+    <>
+      <div
+        className={`section-${section.id}`}
+        id={section.name}
+        ref={sectionRef}
+      >
+        {layout && section.media?.[layout]?.url && section.media?.[layout]?.size !== 'none' && sectionRef.current && (
+          <div className={`section-background-overlay-${section.id}`}>
+            <div
+              key={`section-background-wrapper-${section.id}`}
+              className={`section-background-wrapper-${section.id}`}
+            >
+              {isVideo ? (
+                <video
+                  ref={videoRef}
+                  autoPlay
+                  loop
+                  muted
+                  playsInline
+                  preload="auto"
+                  className={`video-background-${section.id}`}
+                >
+                  <source src={section.media?.[layout]?.url ?? ''} />
+                </video>
+              ) : (
+                <img src={section.media?.[layout]?.url ?? ''} className={`image-background-${section.id}`} />
+              )}
+            </div>
+          </div>
+        )}
+        {children}
+      </div>
+      <JSXStyle id={id}>{`
+      ${
+    getLayoutStyles(layouts, layoutValues, ([height, color, media]) => (`
+         .section-${section.id} {
+            height: ${getSectionHeight(height)};
+            position: relative;
+            background-color: ${CntrlColor.parse(color ?? DEFAULT_COLOR).fmt('rgba')};
+         }
+         .section-background-overlay-${section.id} {
+            height: ${getSectionHeight(height)};
+            width: 100%;
+            position: relative;
+            overflow: clip;
+         }
+         .section-background-wrapper-${section.id} {
+            transform: ${media?.position === 'fixed' ? 'translateY(-100vh)' : 'unset'};
+            position: relative;
+            height: ${media?.position === 'fixed' ? `calc(${getSectionHeight(height)} + 200vh)` : getSectionHeight(height)};
+            width: 100%;
+         }
+         .video-background-${section.id} {
+            object-fit: ${media?.size ?? 'cover'};
+            width: ${media?.offsetX === null || media?.size === 'cover' ? '100%' : 'auto'};
+            height: ${media?.position === 'fixed' ? '100vh' : '100%'};
+            position: ${media?.position === 'fixed' ? 'sticky' : 'relative'};
+            top: ${media?.position === 'fixed' ? '100vh' : 'unset'};
+            ${media && media.offsetX !== null && media.size !== 'cover' ? `margin-left: ${media.offsetX * 100}vw;` : ''}
+         }
+         .image-background-${section.id} {
+            object-fit: ${media?.size};
+            width: ${media?.offsetX === null ? '100%' : 'auto'};
+            height: ${media?.position === 'fixed' ? '100vh' : '100%'};
+            position: ${media?.position === 'fixed' ? 'sticky' : 'relative'};
+            top: ${media?.position === 'fixed' ? '100vh' : 'unset'};
+            ${media && media.offsetX !== null && media.size !== 'cover' ? `margin-left: ${media.offsetX * 100}vw;` : ''}
+         }
+        `
+    ))
+    }
+      ${getSectionVisibilityStyles()}
+    `}</JSXStyle>
+    </>
+  );
+};
+
+export function getSectionHeight(heightData: SectionHeight): string {
+  const { units, vhUnits, mode } = heightData;
+  if (mode === SectionHeightMode.ViewportHeightUnits) return `${vhUnits}vh`;
+  if (mode === SectionHeightMode.ControlUnits) return `${units * 100}vw`;
+  return '0';
+}

package/src/components/Section/useSectionColor.ts

@@ -1,19 +1,19 @@
-import { useMemo } from 'react';
-import { CntrlColor } from '@cntrl-site/color';
-import { useLayoutContext } from '../useLayoutContext';
-
-type LayoutIdentifier = string;
-const DEFAULT_COLOR = 'rgba(0, 0, 0, 0)';
-
-export const useSectionColor = (colorData: Record<LayoutIdentifier, string | null>): CntrlColor => {
-  const layoutId = useLayoutContext();
-   return useMemo(() => {
-     if (!layoutId) return CntrlColor.parse(DEFAULT_COLOR);
-     const layoutColor = colorData[layoutId];
-     return CntrlColor.parse(
-       !layoutColor
-         ? DEFAULT_COLOR
-         : layoutColor
-     );
-   }, [layoutId]);
-};
+import { useMemo } from 'react';
+import { CntrlColor } from '@cntrl-site/color';
+import { useLayoutContext } from '../useLayoutContext';
+
+type LayoutIdentifier = string;
+const DEFAULT_COLOR = 'rgba(0, 0, 0, 0)';
+
+export const useSectionColor = (colorData: Record<LayoutIdentifier, string | null>): CntrlColor => {
+  const layoutId = useLayoutContext();
+   return useMemo(() => {
+     if (!layoutId) return CntrlColor.parse(DEFAULT_COLOR);
+     const layoutColor = colorData[layoutId];
+     return CntrlColor.parse(
+       !layoutColor
+         ? DEFAULT_COLOR
+         : layoutColor
+     );
+   }, [layoutId]);
+};

package/src/components/Section/useSectionHeightMap.ts

@@ -1,19 +1,19 @@
-import { useContext } from 'react';
-import { CntrlContext } from '../../provider/CntrlContext';
-import { Layout, SectionHeight } from '@cntrl-site/sdk';
-import { getSectionHeight } from './Section';
-
-export const useSectionHeightData = (sectionId: string): Record<string, string> => {
-  const sectionHeightContext = useContext(CntrlContext);
-  const layouts = sectionHeightContext.layouts;
-  const sectionHeightData = sectionHeightContext.getSectionHeightData(sectionId);
-  return sectionHeightData ? getSectionHeightMap(sectionHeightData) : getDefaultHeightData(layouts);
-};
-
-export function getSectionHeightMap(sectionHeight: Record<string, SectionHeight>): Record<string, string> {
-  return Object.fromEntries(Object.entries(sectionHeight).map(([sectionId, heightData]) => [sectionId, getSectionHeight(heightData)]));
-}
-
-function getDefaultHeightData(layouts: Layout[]) {
-  return layouts.reduce((acc, layout) => ({...acc, [layout.id]: '0'}), {});
-}
+import { useContext } from 'react';
+import { CntrlContext } from '../../provider/CntrlContext';
+import { Layout, SectionHeight } from '@cntrl-site/sdk';
+import { getSectionHeight } from './Section';
+
+export const useSectionHeightData = (sectionId: string): Record<string, string> => {
+  const sectionHeightContext = useContext(CntrlContext);
+  const layouts = sectionHeightContext.layouts;
+  const sectionHeightData = sectionHeightContext.getSectionHeightData(sectionId);
+  return sectionHeightData ? getSectionHeightMap(sectionHeightData) : getDefaultHeightData(layouts);
+};
+
+export function getSectionHeightMap(sectionHeight: Record<string, SectionHeight>): Record<string, string> {
+  return Object.fromEntries(Object.entries(sectionHeight).map(([sectionId, heightData]) => [sectionId, getSectionHeight(heightData)]));
+}
+
+function getDefaultHeightData(layouts: Layout[]) {
+  return layouts.reduce((acc, layout) => ({...acc, [layout.id]: '0'}), {});
+}