@cntrl-site/sdk-nextjs 0.2.13 → 0.4.0

package/src/components/Item.tsx

@@ -1,11 +1,9 @@
-import { ComponentType, FC } from 'react';
+import { ComponentType, FC, useEffect, useRef } from 'react';
 import {
   getLayoutStyles,
   ArticleItemType,
   ArticleItemSizingType as SizingType,
-  TArticleItemAny,
-  TLayout,
-  AnchorSide
+  TArticleItemAny
 } from '@cntrl-site/sdk';
 import { RectangleItem } from './items/RectangleItem';
 import { ImageItem } from './items/ImageItem';
@@ -14,9 +12,12 @@ import { RichTextItem } from './items/RichTextItem';
 import { VimeoEmbedItem } from './items/VimeoEmbed';
 import { YoutubeEmbedItem } from './items/YoutubeEmbed';
 import { CustomItem } from './items/CustomItem';
+import { useCntrlContext } from '../provider/useCntrlContext';
+import { useItemAngle } from './useItemAngle';
+import { getItemTopStyle, useItemPosition } from './useItemPosition';
+import { useItemDimensions } from './useItemDimensions';
 
 export interface ItemProps<I extends TArticleItemAny> {
-  layouts: TLayout[];
   item: I;
 }
 
@@ -32,8 +33,13 @@ const itemsMap: Record<ArticleItemType, ComponentType<ItemProps<any>>> = {
 
 const noop = () => null;
 
-export const Item: FC<ItemProps<TArticleItemAny>> = ({ item, layouts }) => {
+export const Item: FC<ItemProps<TArticleItemAny>> = ({ item }) => {
+  const { layouts } = useCntrlContext();
+  const angle = useItemAngle(item);
+  const { top, left } = useItemPosition(item);
+  const { width, height } = useItemDimensions(item);
   const layoutValues: Record<string, any>[] = [item.area];
+  const isInitialRef = useRef(true);
   if (item.layoutParams) {
     layoutValues.push(item.layoutParams);
   }
@@ -41,13 +47,30 @@ export const Item: FC<ItemProps<TArticleItemAny>> = ({ item, layouts }) => {
   const sizingAxis = parseSizing(item.commonParams.sizing);
   const ItemComponent = itemsMap[item.type] || noop;
 
+  useEffect(() => {
+    isInitialRef.current = false;
+  }, []);
+
+  const styles = {
+    transform: `rotate(${angle}deg)`,
+    left: `${left * 100}vw`,
+    width: `${sizingAxis.x === SizingType.Manual ? `${width * 100}vw` : 'max-content'}`,
+    height: `${sizingAxis.y === SizingType.Manual ? `${height * 100}vw` : 'unset'}`,
+    top
+  };
+
   return (
-    <div className={`item-${item.id}`}>
-      <ItemComponent item={item} layouts={layouts} />
+    <div
+      suppressHydrationWarning={true}
+      className={`item-${item.id}`}
+      style={isInitialRef.current ? {} : styles }
+    >
+      <ItemComponent item={item} />
       <style jsx>{`
         ${getLayoutStyles(layouts, layoutValues, ([area]) => (`
            .item-${item.id} {
               position: absolute;
+              z-index: ${area.zIndex};
               top: ${getItemTopStyle(area.top, area.anchorSide)};
               left: ${area.left * 100}vw;
               width: ${sizingAxis.x === SizingType.Manual ? `${area.width * 100}vw` : 'max-content'};
@@ -61,19 +84,6 @@ export const Item: FC<ItemProps<TArticleItemAny>> = ({ item, layouts }) => {
   );
 };
 
-function getItemTopStyle(top: number, anchorSide: AnchorSide) {
-  const defaultValue = `${top * 100}vw`;
-  if (!anchorSide) return defaultValue;
-  switch (anchorSide) {
-    case AnchorSide.Top:
-      return defaultValue;
-    case AnchorSide.Center:
-      return `calc(50% + ${top * 100}vw)`;
-    case AnchorSide.Bottom:
-      return `calc(100% + ${top * 100}vw)`;
-  }
-}
-
 function parseSizing(sizing: string): Axis {
   const axisSizing = sizing.split(' ');
   return {

package/src/components/Page.tsx

@@ -1,24 +1,36 @@
-import React, { FC } from 'react';
+import React, { FC, useMemo } from 'react';
 import HTMLReactParser from 'html-react-parser';
-import { TArticle, TProject, TMeta } from '@cntrl-site/sdk';
+import { TArticle, TProject, TMeta, TKeyframeAny } from '@cntrl-site/sdk';
 import { Article } from './Article';
+import { KeyframesContext } from '../provider/KeyframesContext';
 import { CNTRLHead } from './Head';
+import { useCntrlContext } from '../provider/useCntrlContext';
+import { generateTypePresetStyles } from '../utils/generateTypePresetStyles/generateTypePresetStyles';
+import { Keyframes } from '../provider/Keyframes';
 
 interface Props {
   article: TArticle;
   project: TProject;
   meta: TMeta;
+  keyframes: TKeyframeAny[];
 }
 
-export const Page: FC<Props> = ({ article, project, meta }) => {
+export const Page: FC<Props> = ({ article, project, meta, keyframes }) => {
   const afterBodyOpen = HTMLReactParser(project.html.afterBodyOpen);
   const beforeBodyClose = HTMLReactParser(project.html.beforeBodyClose);
+  const keyframesRepo = useMemo(() => new Keyframes(keyframes), [keyframes]);
+  const { typePresets, layouts } = useCntrlContext();
   return (
     <>
       <CNTRLHead project={project} meta={meta} />
       {afterBodyOpen}
-      <Article article={article} layouts={project.layouts} />
+      <KeyframesContext.Provider value={keyframesRepo}>
+        <Article article={article} />
+      </KeyframesContext.Provider>
       {beforeBodyClose}
+      {typePresets && typePresets.presets.length > 0 && (
+        <style>{generateTypePresetStyles(typePresets, layouts)}</style>
+      )}
     </>
   );
 };

package/src/components/Section.tsx

@@ -1,15 +1,16 @@
 import { FC, ReactElement } from 'react';
-import { getLayoutMediaQuery, getLayoutStyles, TArticleSection, TLayout, TSectionHeight, SectionHeightMode } from '@cntrl-site/sdk';
+import { getLayoutMediaQuery, getLayoutStyles, TArticleSection, TSectionHeight, SectionHeightMode } from '@cntrl-site/sdk';
+import { useCntrlContext } from '../provider/useCntrlContext';
 
 type SectionChild = ReactElement<any, any>;
 
 interface Props {
   section: TArticleSection;
-  layouts: TLayout[];
   children: SectionChild[];
 }
 
-export const Section: FC<Props> = ({ section, layouts, children }) => {
+export const Section: FC<Props> = ({ section, children }) => {
+  const { layouts } = useCntrlContext();
   const getSectionVisibilityStyles = () => {
     return layouts
       .sort((a, b) => a.startsWith - b.startsWith)

package/src/components/items/ImageItem.tsx

@@ -2,15 +2,25 @@ import { FC } from 'react';
 import { getLayoutStyles, TImageItem } from '@cntrl-site/sdk';
 import { ItemProps } from '../Item';
 import { LinkWrapper } from '../LinkWrapper';
+import { useCntrlContext } from '../../provider/useCntrlContext';
+import { useFileItem } from './useFileItem';
 
-export const ImageItem: FC<ItemProps<TImageItem>> = ({ item, layouts }) => (
-  <LinkWrapper url={item.link?.url}>
-    <>
-      <div className={`image-wrapper-${item.id}`}>
-        <img className="image" src={item.commonParams.url} />
-      </div>
-      <style jsx>{`
-        ${getLayoutStyles(layouts, [item.layoutParams], ([{ strokeColor, radius, strokeWidth, opacity }]) => (`
+export const ImageItem: FC<ItemProps<TImageItem>> = ({ item }) => {
+  const { layouts } = useCntrlContext();
+  const { radius, strokeWidth } = useFileItem(item);
+  return (
+    <LinkWrapper url={item.link?.url}>
+      <>
+        <div className={`image-wrapper-${item.id}`}
+          style={{
+            borderRadius: `${radius * 100}vw`,
+            borderWidth: `${strokeWidth * 100}vw`
+          }}
+        >
+          <img className="image" src={item.commonParams.url} />
+        </div>
+        <style jsx>{`
+        ${getLayoutStyles(layouts, [item.layoutParams], ([{ strokeColor, opacity }]) => (`
            .image-wrapper-${item.id} {
               position: absolute;
               overflow: hidden;
@@ -19,11 +29,9 @@ export const ImageItem: FC<ItemProps<TImageItem>> = ({ item, layouts }) => (
               border-style: solid;
               box-sizing: border-box;
               border-color: ${strokeColor};
-              border-radius: ${radius * 100}vw;
               opacity: ${opacity};
-              border-width: ${strokeWidth * 100}vw;
             }`
-          ))
+        ))
         }
         .image {
           width: 100%;
@@ -33,6 +41,7 @@ export const ImageItem: FC<ItemProps<TImageItem>> = ({ item, layouts }) => (
           pointer-events: none;
         }
       `}</style>
-    </>
-  </LinkWrapper>
-);
+      </>
+    </LinkWrapper>
+  );
+};

package/src/components/items/RectangleItem.tsx

@@ -2,13 +2,24 @@ import { FC } from 'react';
 import { TRectangleItem, getLayoutStyles } from '@cntrl-site/sdk';
 import { ItemProps } from '../Item';
 import { LinkWrapper } from '../LinkWrapper';
+import { useCntrlContext } from '../../provider/useCntrlContext';
+import { useRectangleItem } from './useRectangleItem';
 
-export const RectangleItem: FC<ItemProps<TRectangleItem>> = ({ item, layouts }) => (
-  <LinkWrapper url={item.link?.url}>
-    <>
-      <div className={`rectangle-${item.id}`} />
-      <style jsx>{`
-      ${getLayoutStyles(layouts, [item.layoutParams], ([{ strokeColor, fillColor, radius, strokeWidth }]) => (`
+export const RectangleItem: FC<ItemProps<TRectangleItem>> = ({ item }) => {
+  const { layouts } = useCntrlContext();
+  const { fillColor, radius, strokeWidth } = useRectangleItem(item);
+  return (
+    <LinkWrapper url={item.link?.url}>
+      <>
+        <div className={`rectangle-${item.id}`}
+          style={{
+            backgroundColor: `${fillColor}`,
+            borderRadius: `${radius * 100}vw`,
+            borderWidth: `${strokeWidth * 100}vw`
+          }}
+        />
+        <style jsx>{`
+      ${getLayoutStyles(layouts, [item.layoutParams], ([{ strokeColor }]) => (`
          .rectangle-${item.id} {
             position: absolute;
             width: 100%;
@@ -16,12 +27,10 @@ export const RectangleItem: FC<ItemProps<TRectangleItem>> = ({ item, layouts })
             border-style: solid;
             box-sizing: border-box;
             border-color: ${strokeColor};
-            background-color: ${fillColor};
-            border-radius: ${radius * 100}vw;
-            border-width: ${strokeWidth * 100}vw;
           }`
         ))}
       `}</style>
-    </>
-  </LinkWrapper>
-);
+      </>
+    </LinkWrapper>
+  );
+};

package/src/components/items/RichTextItem.tsx

@@ -1,20 +1,31 @@
-import { FC } from 'react';
+import { FC, createElement } from 'react';
 import { TRichTextItem } from '@cntrl-site/sdk';
 //@ts-ignore
 import JSXStyle from 'styled-jsx/style';
 import { ItemProps } from '../Item';
-import { RichTextConverter } from '../../utils/RichTextConverter';
+import { RichTextConverter } from '../../utils/RichTextConverter/RichTextConverter';
+import { useCntrlContext } from '../../provider/useCntrlContext';
 
 const richTextConv = new RichTextConverter();
 
-export const RichTextItem: FC<ItemProps<TRichTextItem>> = ({ item, layouts }) => {
-  const [content, styles] = richTextConv.toHtml(item, layouts);
-  return (
-    <>
-      <div className="rich-text">{content}</div>
-      <JSXStyle id={item.id}>
-        {styles}
-      </JSXStyle>
-    </>
+export const RichTextItem: FC<ItemProps<TRichTextItem>> = ({ item }) => {
+  const { layouts, typePresets } = useCntrlContext();
+  const preset = item.commonParams.preset
+    ? typePresets?.presets.find(p => p.id === item.commonParams.preset)
+    : null;
+  const [content, styles] = richTextConv.toHtml(item, layouts, !!preset);
+  return createElement(
+    preset?.tag ?? 'div',
+    {
+      className: preset ? `cntrl-preset-${preset.id}` : undefined
+    },
+    (
+      <>
+        {content}
+        <JSXStyle id={item.id}>
+          {styles}
+        </JSXStyle>
+      </>
+    )
   );
 };

package/src/components/items/VideoItem.tsx

@@ -3,39 +3,46 @@ import { TVideoItem } from '@cntrl-site/sdk';
 import { ItemProps } from '../Item';
 import { LinkWrapper } from '../LinkWrapper';
 import { getLayoutStyles } from '@cntrl-site/sdk';
+import { useCntrlContext } from '../../provider/useCntrlContext';
+import { useFileItem } from './useFileItem';
 
-export const VideoItem: FC<ItemProps<TVideoItem>> = ({ item, layouts }) => (
-  <LinkWrapper url={item.link?.url}>
-    <>
-      <div className={`video-wrapper-${item.id}`}>
+export const VideoItem: FC<ItemProps<TVideoItem>> = ({ item }) => {
+  const { layouts } = useCntrlContext();
+  const { radius, strokeWidth } = useFileItem(item);
+  return (
+    <LinkWrapper url={item.link?.url}>
+      <div className={`video-wrapper-${item.id}`}
+         style={{
+           borderRadius: `${radius * 100}vw`,
+           borderWidth: `${strokeWidth * 100}vw`
+         }}
+      >
         <video autoPlay muted loop playsInline className="video">
           <source src={item.commonParams.url} />
         </video>
       </div>
       <style jsx>{`
-        ${getLayoutStyles(layouts, [item.layoutParams], ([{ strokeColor, radius, strokeWidth, opacity }]) => (`
-           .video-wrapper-${item.id} {
-              position: absolute;
-              overflow: hidden;
-              width: 100%;
-              height: 100%;
-              border-style: solid;
-              box-sizing: border-box;
-              border-color: ${strokeColor};
-              border-radius: ${radius * 100}vw;
-              border-width: ${strokeWidth * 100}vw;
-              opacity: ${opacity};
-            }`
-          ))
-        }
-        .video {
-          width: 100%;
-          height: 100%;
-          opacity: 1;
-          object-fit: cover;
-          pointer-events: none;
-        }
-      `}</style>
-    </>
-  </LinkWrapper>
-);
+      ${getLayoutStyles(layouts, [item.layoutParams], ([{ strokeColor, opacity }]) => (`
+         .video-wrapper-${item.id} {
+            position: absolute;
+            overflow: hidden;
+            width: 100%;
+            height: 100%;
+            border-style: solid;
+            box-sizing: border-box;
+            border-color: ${strokeColor};
+            opacity: ${opacity};
+          }`
+      ))
+      }
+      .video {
+        width: 100%;
+        height: 100%;
+        opacity: 1;
+        object-fit: cover;
+        pointer-events: none;
+      }
+    `}</style>
+    </LinkWrapper>
+  );
+};

package/src/components/items/VimeoEmbed.tsx

@@ -1,11 +1,12 @@
 import { FC } from 'react';
-import { getLayoutStyles } from '@cntrl-site/sdk';
 import { TVimeoEmbedItem } from '@cntrl-site/core';
 import { ItemProps } from '../Item';
 import { LinkWrapper } from '../LinkWrapper';
+import { useEmbedVideoItem } from './useEmbedVideoItem';
 
-export const VimeoEmbedItem: FC<ItemProps<TVimeoEmbedItem>> = ({ item, layouts }) => {
- const { autoplay, controls, loop, muted, pictureInPicture, url } = item.commonParams;
+export const VimeoEmbedItem: FC<ItemProps<TVimeoEmbedItem>> = ({ item }) => {
+  const { radius } = useEmbedVideoItem(item);
+  const { autoplay, controls, loop, muted, pictureInPicture, url } = item.commonParams;
   const getValidVimeoUrl = (url: string): string => {
     const validURL = new URL(url);
     validURL.searchParams.append('controls', String(controls));
@@ -24,7 +25,11 @@ export const VimeoEmbedItem: FC<ItemProps<TVimeoEmbedItem>> = ({ item, layouts }
 
   return (
     <LinkWrapper url={item.link?.url}>
-        <div className={`embed-video-wrapper-${item.id}`}>
+        <div className={`embed-video-wrapper-${item.id}`}
+          style={{
+            borderRadius: `${radius * 100}vw`
+          }}
+        >
           <iframe
             className="embedVideo"
             src={validUrl || ''}
@@ -33,18 +38,15 @@ export const VimeoEmbedItem: FC<ItemProps<TVimeoEmbedItem>> = ({ item, layouts }
           />
         </div>
         <style jsx>{`
-        ${getLayoutStyles(layouts, [item.layoutParams], ([{ radius }]) => (`
-          .embed-video-wrapper-${item.id} {
-            position: absolute;
-            overflow: hidden;
-            width: 100%;
-            height: 100%;
-            top: 50%;
-            left: 50%;
-            transform: translate(-50%, -50%);
-            border-radius: ${radius * 100}vw;
-          }`
-        ))}
+        .embed-video-wrapper-${item.id} {
+          position: absolute;
+          overflow: hidden;
+          width: 100%;
+          height: 100%;
+          top: 50%;
+          left: 50%;
+          transform: translate(-50%, -50%);
+        }
         .embedVideo {
           width: 100%;
           height: 100%;
@@ -53,5 +55,5 @@ export const VimeoEmbedItem: FC<ItemProps<TVimeoEmbedItem>> = ({ item, layouts }
         }
       `}</style>
     </LinkWrapper>
-  )
+  );
 };

package/src/components/items/YoutubeEmbed.tsx

@@ -1,12 +1,13 @@
 import { FC } from 'react';
-import { getLayoutStyles } from '@cntrl-site/sdk';
 import { TYoutubeEmbedItem } from '@cntrl-site/core';
 import { ItemProps } from '../Item';
 import { LinkWrapper } from '../LinkWrapper';
 import { getYoutubeId } from '../../utils/getValidYoutubeUrl';
+import { useEmbedVideoItem } from './useEmbedVideoItem';
 
-export const YoutubeEmbedItem: FC<ItemProps<TYoutubeEmbedItem>> = ({ item, layouts }) => {
+export const YoutubeEmbedItem: FC<ItemProps<TYoutubeEmbedItem>> = ({ item }) => {
   const { autoplay, controls, url } = item.commonParams;
+  const { radius } = useEmbedVideoItem(item);
 
   const getValidYoutubeUrl = (url: string): string => {
     const newUrl = new URL(url);
@@ -22,7 +23,11 @@ export const YoutubeEmbedItem: FC<ItemProps<TYoutubeEmbedItem>> = ({ item, layou
 
   return (
     <LinkWrapper url={item.link?.url}>
-      <div className={`embed-youtube-video-wrapper-${item.id}`}>
+      <div className={`embed-youtube-video-wrapper-${item.id}`}
+         style={{
+           borderRadius: `${radius * 100}vw`
+         }}
+      >
         <iframe
           className="embedYoutubeVideo"
           src={validUrl || ''}
@@ -31,18 +36,15 @@ export const YoutubeEmbedItem: FC<ItemProps<TYoutubeEmbedItem>> = ({ item, layou
         />
       </div>
       <style jsx>{`
-        ${getLayoutStyles(layouts, [item.layoutParams], ([{ radius }]) => (`
-          .embed-youtube-video-wrapper-${item.id} {
-            position: absolute;
-            overflow: hidden;
-            width: 100%;
-            height: 100%;
-            top: 50%;
-            left: 50%;
-            transform: translate(-50%, -50%);
-            border-radius: ${radius * 100}vw;
-          }`
-        ))}
+        .embed-youtube-video-wrapper-${item.id} {
+          position: absolute;
+          overflow: hidden;
+          width: 100%;
+          height: 100%;
+          top: 50%;
+          left: 50%;
+          transform: translate(-50%, -50%);
+        }
         .embedYoutubeVideo {
           width: 100%;
           height: 100%;

package/src/components/items/useEmbedVideoItem.ts

@@ -0,0 +1,19 @@
+import { TVimeoEmbedItem, TYoutubeEmbedItem } from '@cntrl-site/core';
+import { useCurrentLayout } from '../../common/useCurrentLayout';
+import { useKeyframeValue } from '../../common/useKeyframeValue';
+
+export const useEmbedVideoItem = (item: TVimeoEmbedItem | TYoutubeEmbedItem) => {
+  const layoutId = useCurrentLayout();
+  const radius = useKeyframeValue(
+    item,
+    (item, layoutId) => {
+      if (!layoutId) return 0;
+      const layoutParams = item.layoutParams[layoutId];
+      return  'radius' in layoutParams ? layoutParams.radius : 0;
+    },
+    (animator, scroll, value) => animator.getRadius({ radius: value }, scroll).radius,
+    [layoutId]
+  );
+
+  return { radius };
+};

package/src/components/items/useFileItem.ts

@@ -0,0 +1,29 @@
+import { TImageItem, TVideoItem } from '@cntrl-site/sdk';
+import { useKeyframeValue } from '../../common/useKeyframeValue';
+import { useCurrentLayout } from '../../common/useCurrentLayout';
+
+export const useFileItem = (item: TImageItem | TVideoItem) => {
+  const layoutId = useCurrentLayout();
+  const radius = useKeyframeValue(
+    item,
+    (item, layoutId) => {
+      if (!layoutId) return 0;
+      const layoutParams = item.layoutParams[layoutId];
+      return  'radius' in layoutParams ? layoutParams.radius : 0;
+    },
+    (animator, scroll, value) => animator.getRadius({ radius: value }, scroll).radius,
+    [layoutId]
+  );
+  const strokeWidth = useKeyframeValue(
+    item,
+    (item, layoutId) => {
+      if (!layoutId) return 0;
+      const layoutParams = item.layoutParams[layoutId];
+      return 'strokeWidth' in layoutParams ? layoutParams.strokeWidth : 0;
+    },
+    (animator, scroll, value) => animator.getBorderWidth({ borderWidth: value }, scroll).borderWidth,
+    [layoutId]
+  );
+
+  return { radius, strokeWidth };
+};

package/src/components/items/useRectangleItem.ts

@@ -0,0 +1,40 @@
+import { TRectangleItem } from '@cntrl-site/sdk';
+import { useKeyframeValue } from '../../common/useKeyframeValue';
+import { useCurrentLayout } from '../../common/useCurrentLayout';
+
+const defaultColor = 'rgba(0, 0, 0, 1)';
+
+export const useRectangleItem = (item: TRectangleItem) => {
+  const layoutId = useCurrentLayout();
+  const radius = useKeyframeValue(
+    item,
+    (item, layoutId) => {
+      if (!layoutId) return 0;
+      const layoutParams = item.layoutParams[layoutId];
+      return  'radius' in layoutParams ? layoutParams.radius : 0;
+    },
+    (animator, scroll, value) => animator.getRadius({ radius: value }, scroll).radius,
+    [layoutId]
+  );
+  const strokeWidth = useKeyframeValue(
+    item,
+    (item, layoutId) => {
+      if (!layoutId) return 0;
+      const layoutParams = item.layoutParams[layoutId];
+      return 'strokeWidth' in layoutParams ? layoutParams.strokeWidth : 0;
+    },
+    (animator, scroll, value) => animator.getBorderWidth({ borderWidth: value }, scroll).borderWidth,
+    [layoutId]
+  );
+  const fillColor = useKeyframeValue(
+    item,
+    (item, layoutId) => {
+      if (!layoutId) return defaultColor;
+      const layoutParams = item.layoutParams[layoutId];
+      return 'fillColor' in layoutParams ? layoutParams.fillColor : defaultColor;
+    },
+    (animator, scroll, value) => animator.getColor({ color: value }, scroll).color
+  );
+
+  return { fillColor, strokeWidth, radius };
+};

package/src/components/useItemAngle.ts

@@ -0,0 +1,12 @@
+import { TArticleItemAny } from '@cntrl-site/sdk';
+import { useKeyframeValue } from '../common/useKeyframeValue';
+
+export const useItemAngle = (item: TArticleItemAny) => {
+  const { angle } = useKeyframeValue(
+    item,
+    (item, layoutId) => ({ angle: layoutId ? item.area[layoutId].angle : 0 }),
+    (animator, scroll, value) => animator.getRotation(value, scroll)
+  );
+  return angle;
+};
+

package/src/components/useItemDimensions.ts

@@ -0,0 +1,23 @@
+import { TArticleItemAny } from '@cntrl-site/sdk';
+import { useCurrentLayout } from '../common/useCurrentLayout';
+import { useKeyframeValue } from '../common/useKeyframeValue';
+
+const defaultArea = {
+  left: 0,
+  top: 0,
+  width: 0,
+  height: 0,
+  angle: 0,
+  zIndex: 0
+};
+
+export const useItemDimensions = (item: TArticleItemAny) => {
+  const layoutId = useCurrentLayout();
+  const { width, height } = useKeyframeValue<{ width: number; height: number }>(
+    item,
+    (item, layoutId) => layoutId ? item.area[layoutId] : defaultArea,
+    (animator, scroll, value) => animator.getDimensions(value, scroll),
+    [layoutId]
+  );
+  return { width, height };
+};