@cntrl-site/sdk-nextjs 0.7.0 → 0.7.1

package/lib/common/useCurrentLayout.js

@@ -25,6 +25,11 @@ const useCurrentLayout = () => {
         return layoutRanges.find(l => articleWidth >= l.start && articleWidth < l.end).layoutId;
     }, [layoutRanges]);
     const [layoutId, setLayoutId] = (0, react_1.useState)(getCurrentLayout(0));
+    (0, react_1.useEffect)(() => {
+        if (typeof window !== 'undefined') {
+            getCurrentLayout(window.innerWidth);
+        }
+    }, []);
     (0, react_1.useEffect)(() => {
         if (!articleRectObserver)
             return;

package/lib/components/items/useItemSticky.js

@@ -12,11 +12,17 @@ const useItemSticky = (top, parentOffsetTop, item) => {
     const articleRectObserver = (0, react_1.useContext)(ArticleRectContext_1.ArticleRectContext);
     const layoutId = (0, useCurrentLayout_1.useCurrentLayout)();
     const sticky = (0, react_1.useMemo)(() => item.layoutParams[layoutId].sticky, [layoutId]);
-    const stickyManager = (0, react_1.useMemo)(() => new StickyManager_1.StickyManager(sticky), []);
+    const stickyManager = (0, react_1.useMemo)(() => new StickyManager_1.StickyManager(sticky), [sticky]);
+    (0, react_1.useEffect)(() => {
+        setAdjustedTop(top);
+    }, [layoutId, top]);
     const handleSticky = (0, react_1.useCallback)((scroll) => {
         setIsFixed(stickyManager.getIsSticky(scroll));
         setAdjustedTop(stickyManager.getPosition(scroll, top, parentOffsetTop));
     }, [top, stickyManager, parentOffsetTop]);
+    (0, react_1.useEffect)(() => {
+        setAdjustedTop(top);
+    }, [top]);
     (0, react_1.useEffect)(() => {
         if (!articleRectObserver || !sticky)
             return;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cntrl-site/sdk-nextjs",
-  "version": "0.7.0",
+  "version": "0.7.1",
   "description": "SDK for Next.js",
   "main": "lib/index.js",
   "types": "src/index.js",

package/src/common/useCurrentLayout.ts

@@ -30,6 +30,12 @@ export const useCurrentLayout = () => {
   }, [layoutRanges]);
   const [layoutId, setLayoutId] = useState<string>(getCurrentLayout(0));
 
+  useEffect(() => {
+    if (typeof window !== 'undefined') {
+      getCurrentLayout(window.innerWidth);
+    }
+  }, []);
+
   useEffect(() => {
     if (!articleRectObserver) return;
     return articleRectObserver.on('resize', () => {

package/src/components/items/useItemSticky.ts

@@ -10,7 +10,11 @@ export const useItemSticky = (top: number, parentOffsetTop: number, item: TArtic
   const articleRectObserver = useContext(ArticleRectContext);
   const layoutId = useCurrentLayout();
   const sticky = useMemo(() => item.layoutParams[layoutId].sticky, [layoutId]);
-  const stickyManager = useMemo(() => new StickyManager(sticky), []);
+  const stickyManager = useMemo(() => new StickyManager(sticky), [sticky]);
+
+  useEffect(() => {
+    setAdjustedTop(top);
+  }, [layoutId, top]);
 
   const handleSticky = useCallback((scroll: number) => {
     setIsFixed(stickyManager.getIsSticky(scroll));
@@ -21,6 +25,10 @@ export const useItemSticky = (top: number, parentOffsetTop: number, item: TArtic
     ));
   }, [top, stickyManager, parentOffsetTop]);
 
+  useEffect(() => {
+    setAdjustedTop(top);
+  }, [top]);
+
   useEffect(() => {
     if (!articleRectObserver || !sticky) return;
     return articleRectObserver.on('scroll', () => {