@cntrl-site/sdk-nextjs 0.8.2 → 0.8.4

package/lib/common/useKeyframeValue.js

@@ -19,7 +19,7 @@ const useKeyframeValue = (item, itemParamsGetter, animatorGetter, deps = emptyDe
     const articleRectObserver = (0, react_1.useContext)(ArticleRectContext_1.ArticleRectContext);
     const layoutId = (0, useCurrentLayout_1.useCurrentLayout)();
     const keyframesRepo = (0, react_1.useContext)(KeyframesContext_1.KeyframesContext);
-    const keyframes = keyframesRepo.getItemKeyframes(item.id);
+    const keyframes = (0, react_1.useMemo)(() => keyframesRepo.getItemKeyframes(item.id), [item.id, keyframesRepo]);
     const paramValue = (0, react_1.useMemo)(() => {
         return itemParamsGetterRef.current(item, layoutId);
     }, [item, layoutId, ...deps]);
@@ -38,29 +38,39 @@ const useKeyframeValue = (item, itemParamsGetter, animatorGetter, deps = emptyDe
         }));
         return new Animator_1.Animator(animationData);
     }, [keyframes, layoutId]);
+    const handleKeyframeValue = (0, react_1.useCallback)((scroll) => {
+        if (!animator)
+            return;
+        const newValue = animatorGetterRef.current(animator, scroll, paramValue);
+        if (!(0, lodash_isequal_1.default)(newValue, adjustedValueRef.current)) {
+            setAdjustedValue(newValue);
+        }
+    }, [animator, paramValue]);
     (0, react_1.useEffect)(() => {
         setAdjustedValue(paramValue);
     }, [paramValue]);
     (0, react_1.useEffect)(() => {
-        if (!animator || !articleRectObserver)
+        if (!articleRectObserver)
+            return;
+        const scroll = articleRectObserver.scroll;
+        handleKeyframeValue(scroll);
+    }, [articleRectObserver, handleKeyframeValue]);
+    (0, react_1.useEffect)(() => {
+        if (!articleRectObserver)
             return;
         return articleRectObserver.on('resize', () => {
             const scroll = articleRectObserver.scroll;
-            const newValue = animatorGetterRef.current(animator, scroll, paramValue);
-            setAdjustedValue(newValue);
+            handleKeyframeValue(scroll);
         });
-    }, [animator, articleRectObserver]);
+    }, [handleKeyframeValue, articleRectObserver]);
     (0, react_1.useEffect)(() => {
-        if (!animator || !articleRectObserver)
+        if (!articleRectObserver)
             return;
         return articleRectObserver.on('scroll', () => {
             const scroll = articleRectObserver.scroll;
-            const newValue = animatorGetterRef.current(animator, scroll, paramValue);
-            if (!(0, lodash_isequal_1.default)(newValue, adjustedValueRef.current)) {
-                setAdjustedValue(newValue);
-            }
+            handleKeyframeValue(scroll);
         });
-    }, [animator, articleRectObserver]);
+    }, [handleKeyframeValue, articleRectObserver]);
     return adjustedValue;
 };
 exports.useKeyframeValue = useKeyframeValue;

package/lib/components/items/useItemSticky.js

@@ -18,8 +18,10 @@ const useItemSticky = (top, parentOffsetTop, item) => {
         setAdjustedTop(stickyManager.getPosition(scroll, top, parentOffsetTop));
     }, [top, stickyManager, parentOffsetTop]);
     (0, react_1.useEffect)(() => {
-        setAdjustedTop(top);
-    }, [top]);
+        if (!articleRectObserver)
+            return;
+        handleSticky(articleRectObserver.scroll);
+    }, [handleSticky, articleRectObserver]);
     (0, react_1.useEffect)(() => {
         if (!articleRectObserver || !sticky)
             return;

package/lib/utils/ArticleRectManager/ArticleRectObserver.js

@@ -19,6 +19,7 @@ class ArticleRectObserver extends EventEmitter_1.EventEmitter {
             if (!(element instanceof HTMLElement))
                 return;
             this.notify(element);
+            this.setScroll(window.scrollY / this.articleWidth);
             this.emit('resize', undefined);
         };
         this.resizeObserver = new ResizeObserver(this.handleResize);

package/lib/utils/RichTextConverter/RichTextConverter.js

@@ -54,13 +54,14 @@ class RichTextConverter {
                 const kids = [];
                 layouts.forEach(l => {
                     const ta = richText.layoutParams[l.id].textAlign;
+                    const whiteSpace = ta === sdk_1.TextAlign.Right ? 'normal' : 'pre-wrap';
                     styleRules[l.id].push(`
             .${blockClass} {
               display: ${group.some(g => g.layout === l.id) ? 'block' : 'none'};
               text-align: ${ta};
-              white-space: normal;
+              white-space: ${whiteSpace};
               overflow-wrap: break-word;
-              ${!hasPreset && 'line-height: 0;'}
+              ${!hasPreset ? 'line-height: 0;' : ''}
             }
           `);
                 });

package/package.json

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

package/src/common/useKeyframeValue.ts

@@ -25,7 +25,7 @@ export const useKeyframeValue = <T>(
   const articleRectObserver = useContext(ArticleRectContext);
   const layoutId = useCurrentLayout();
   const keyframesRepo = useContext(KeyframesContext);
-  const keyframes = keyframesRepo.getItemKeyframes(item.id);
+  const keyframes = useMemo(() => keyframesRepo.getItemKeyframes(item.id), [item.id, keyframesRepo]);
   const paramValue = useMemo<T>(() => {
     return itemParamsGetterRef.current(item, layoutId);
   }, [item, layoutId, ...deps]);
@@ -46,29 +46,39 @@ export const useKeyframeValue = <T>(
     return new Animator(animationData);
   }, [keyframes, layoutId]);
 
+  const handleKeyframeValue = useCallback((scroll: number) => {
+    if (!animator) return;
+    const newValue = animatorGetterRef.current(animator, scroll, paramValue);
+    if (!isEqual(newValue, adjustedValueRef.current)) {
+      setAdjustedValue(newValue);
+    }
+  }, [animator, paramValue]);
+
   useEffect(() => {
     setAdjustedValue(paramValue);
   }, [paramValue]);
 
   useEffect(() => {
-    if (!animator || !articleRectObserver) return;
+    if (!articleRectObserver) return;
+    const scroll = articleRectObserver.scroll;
+    handleKeyframeValue(scroll);
+  }, [articleRectObserver, handleKeyframeValue])
+
+  useEffect(() => {
+    if (!articleRectObserver) return;
     return articleRectObserver.on('resize', () => {
       const scroll = articleRectObserver.scroll;
-      const newValue = animatorGetterRef.current(animator, scroll, paramValue);
-      setAdjustedValue(newValue);
+      handleKeyframeValue(scroll);
     });
-  }, [animator, articleRectObserver]);
+  }, [handleKeyframeValue, articleRectObserver]);
 
   useEffect(() => {
-    if (!animator || !articleRectObserver) return;
+    if (!articleRectObserver) return;
     return articleRectObserver.on('scroll', () => {
       const scroll = articleRectObserver.scroll;
-      const newValue = animatorGetterRef.current(animator, scroll, paramValue);
-      if (!isEqual(newValue, adjustedValueRef.current)) {
-        setAdjustedValue(newValue);
-      }
+      handleKeyframeValue(scroll);
     });
-  }, [animator, articleRectObserver]);
+  }, [handleKeyframeValue, articleRectObserver]);
   return adjustedValue;
 };
 

package/src/components/items/useItemSticky.ts

@@ -22,8 +22,9 @@ export const useItemSticky = (top: number, parentOffsetTop: number, item: TArtic
   }, [top, stickyManager, parentOffsetTop]);
 
   useEffect(() => {
-    setAdjustedTop(top);
-  }, [top]);
+    if (!articleRectObserver) return;
+      handleSticky(articleRectObserver.scroll);
+  }, [handleSticky, articleRectObserver]);
 
   useEffect(() => {
     if (!articleRectObserver || !sticky) return;

package/src/utils/ArticleRectManager/ArticleRectObserver.ts

@@ -59,6 +59,7 @@ export class ArticleRectObserver extends EventEmitter<EventMap> {
     const element = entry.target;
     if (!(element instanceof HTMLElement)) return;
     this.notify(element);
+    this.setScroll(window.scrollY / this.articleWidth);
     this.emit('resize', undefined);
   };
 

package/src/utils/RichTextConverter/RichTextConverter.tsx

@@ -6,7 +6,8 @@ import {
   TextTransform,
   TLayout,
   TRichTextItem,
-  VerticalAlign
+  VerticalAlign,
+  TextAlign
 } from '@cntrl-site/sdk';
 import { LinkWrapper } from '../../components/LinkWrapper';
 
@@ -84,13 +85,14 @@ export class RichTextConverter {
         const kids: ReactNode[] = [];
         layouts.forEach(l => {
           const ta = richText.layoutParams[l.id].textAlign;
+          const whiteSpace = ta === TextAlign.Right ? 'normal' : 'pre-wrap';
           styleRules[l.id].push(`
             .${blockClass} {
               display: ${group.some(g => g.layout === l.id) ? 'block' : 'none'};
               text-align: ${ta};
-              white-space: normal;
+              white-space: ${whiteSpace};
               overflow-wrap: break-word;
-              ${!hasPreset && 'line-height: 0;'}
+              ${!hasPreset ? 'line-height: 0;' : ''}
             }
           `);
         });

package/.idea/inspectionProfiles/Project_Default.xml

@@ -1,15 +0,0 @@
-<component name="InspectionProjectProfileManager">
-  <profile version="1.0">
-    <option name="myName" value="Project Default" />
-    <inspection_tool class="HtmlUnknownAttribute" enabled="true" level="WARNING" enabled_by_default="true">
-      <option name="myValues">
-        <value>
-          <list size="1">
-            <item index="0" class="java.lang.String" itemvalue="jsx" />
-          </list>
-        </value>
-      </option>
-      <option name="myCustomValuesEnabled" value="true" />
-    </inspection_tool>
-  </profile>
-</component>