@sendbird/react-uikit-message-template-view - npm Package Compare versions

Comparing version 0.0.1-alpha.29 to 0.0.1-alpha.30

CHANGELOG.md

@@ -6,2 +6,8 @@ # Change Log
 
+## 0.0.1-alpha.30 (2023-05-09)
+
+### Bug Fixes
+
+- **NOTI-763:** issues with template changes not reflecting correctly ([#37](https://github.com/sendbird/sendbird-uikit-core-ts/issues/37)) ([16cf5b2](https://github.com/sendbird/sendbird-uikit-core-ts/commit/16cf5b2bd1d317c661714229e98888215e72406b))
+
 ## 0.0.1-alpha.29 (2023-05-08)
@@ -8,0 +14,0 @@

dist/hook/useRecalculationSize.js

@@ -12,3 +12,3 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
-import { useEffect, useLayoutEffect, useRef, useState } from 'react';
+import { useEffect, useMemo } from 'react';
 import { Layout, defaultProperties, useSizeContext } from '@sendbird/uikit-message-template';
@@ -33,10 +33,5 @@ import { isSizeCompatibleWithOption } from '../util';
     const { updateSize, sizes } = useSizeContext();
-    const [currentStyle, setCurrentStyle] = useState(style || {});
-    const sizesRef = useRef(sizes);
     const { id, siblings, parentLayout } = props;
+    const { width, height, paddingWidth, paddingHeight, contentWidth, contentHeight } = size;
     useEffect(() => {
-        sizesRef.current = sizes;
-    }, [sizes]);
-    const { width, height, paddingWidth, paddingHeight, contentWidth, contentHeight } = size;
-    useLayoutEffect(() => {
         updateSize({
@@ -52,9 +47,9 @@ id: props.id,
     }, [props.id, width, height, paddingWidth, paddingHeight, contentWidth, contentHeight, updateSize]);
-    useEffect(() => {
+    const currentStyle = useMemo(() => {
         const sumViewSize = (acc = 0, view) => {
             var _a, _b, _c, _d;
             if (parentLayout === Layout.Row) {
-                return acc + ((_b = (_a = sizesRef.current[view.id]) === null || _a === void 0 ? void 0 : _a.width) !== null && _b !== void 0 ? _b : 0);
+                return acc + ((_b = (_a = sizes[view.id]) === null || _a === void 0 ? void 0 : _a.width) !== null && _b !== void 0 ? _b : 0);
             }
-            return acc + ((_d = (_c = sizesRef.current[view.id]) === null || _c === void 0 ? void 0 : _c.height) !== null && _d !== void 0 ? _d : 0);
+            return acc + ((_d = (_c = sizes[view.id]) === null || _c === void 0 ? void 0 : _c.height) !== null && _d !== void 0 ? _d : 0);
         };
@@ -92,11 +87,3 @@ const hasFillOption = isViewCompatibleWithSizeOption({
             })();
-            setCurrentStyle((prevStyle) => {
-                var _a, _b;
-                return (Object.assign(Object.assign({}, prevStyle), (isViewCompatibleWithSizeOption({
-                    width: props.width,
-                    height: props.height,
-                    parentLayout,
-                    option: 'fill',
-                }) && Object.assign(Object.assign(Object.assign({ display: 'flex' }, maxSizeOption), (((_a = sizesRef.current[id]) === null || _a === void 0 ? void 0 : _a.width) == 0 && { height: 0 })), (((_b = sizesRef.current[id]) === null || _b === void 0 ? void 0 : _b.height) == 0 && { width: 0 })))));
-            });
+            return Object.assign(Object.assign(Object.assign({}, style), maxSizeOption), (width == 0 && { height: 0 }));
         }
@@ -114,21 +101,12 @@ else {
                 .reduce(sumViewSize, 0);
-            const hasFillOption = isViewCompatibleWithSizeOption({
-                width: props.width,
-                height: props.height,
-                parentLayout,
-                option: 'fill',
-            });
-            setCurrentStyle((prevStyle) => {
-                var _a, _b;
-                return (Object.assign(Object.assign(Object.assign(Object.assign({}, prevStyle), (((_a = sizesRef.current[id]) === null || _a === void 0 ? void 0 : _a.contentWidth) === 0 && { height: 0 })), (((_b = sizesRef.current[id]) === null || _b === void 0 ? void 0 : _b.contentHeight) === 0 && { width: 0 })), (!hasFillOption && Object.assign({}, (parentLayout === Layout.Row
-                    ? {
-                        maxWidth: `calc(100% - ${forwardSiblingsSize}px)`,
-                    }
-                    : {
-                        maxHeight: `calc(100% - ${forwardSiblingsSize}px)`,
-                    })))));
-            });
+            return Object.assign(Object.assign(Object.assign({}, style), (width === 0 && { height: 0 })), (parentLayout === Layout.Row
+                ? {
+                    maxWidth: `calc(100% - ${forwardSiblingsSize}px)`,
+                }
+                : {
+                    maxHeight: `calc(100% - ${forwardSiblingsSize}px)`,
+                }));
         }
-    }, [id, sizes, parentLayout, props.height, props.width, siblings]);
+    }, [props.width, props.height, parentLayout, sizes, siblings, style, width, id]);
     return { recalculatedStyle: currentStyle, elemRef };
 }

package.json

 {
   "name": "@sendbird/react-uikit-message-template-view",
-  "version": "0.0.1-alpha.29",
+  "version": "0.0.1-alpha.30",
   "publishConfig": {
@@ -18,3 +18,3 @@ "registry": "https://registry.npmjs.org/",
   "dependencies": {
-    "@sendbird/uikit-message-template": "^0.0.1-alpha.29"
+    "@sendbird/uikit-message-template": "^0.0.1-alpha.30"
   },
@@ -35,3 +35,3 @@ "devDependencies": {
   },
-  "gitHead": "cf062dcd8d51eddab3c236847588567d5d0e8fba"
+  "gitHead": "16e43426862bf2c371dca31efa67dcc689c6df7d"
 }

src/hook/useRecalculationSize.ts

@@ -1,2 +0,2 @@
-import { useEffect, useLayoutEffect, useRef, useState } from 'react';
+import { useEffect, useMemo } from 'react';
 
@@ -38,14 +38,7 @@ import { Layout, SizeSpec, View, defaultProperties, useSizeContext } from '@sendbird/uikit-message-template';
 
-  const [currentStyle, setCurrentStyle] = useState(style || {});
-
-  const sizesRef = useRef(sizes);
   const { id, siblings, parentLayout } = props;
 
-  useEffect(() => {
-    sizesRef.current = sizes;
-  }, [sizes]);
-
   const { width, height, paddingWidth, paddingHeight, contentWidth, contentHeight } = size;
 
-  useLayoutEffect(() => {
+  useEffect(() => {
     updateSize({
@@ -62,9 +55,9 @@ id: props.id,
 
-  useEffect(() => {
+  const currentStyle = useMemo(() => {
     const sumViewSize = (acc = 0, view: View) => {
       if (parentLayout === Layout.Row) {
-        return acc + (sizesRef.current[view.id as string]?.width ?? 0);
+        return acc + (sizes[view.id as string]?.width ?? 0);
       }
 
-      return acc + (sizesRef.current[view.id as string]?.height ?? 0);
+      return acc + (sizes[view.id as string]?.height ?? 0);
     };
@@ -112,16 +105,7 @@
 
-      setCurrentStyle((prevStyle) => ({
-        ...prevStyle,
-        ...(isViewCompatibleWithSizeOption({
-          width: props.width,
-          height: props.height,
-          parentLayout,
-          option: 'fill',
-        }) && {
-          display: 'flex',
-          ...maxSizeOption,
-          ...(sizesRef.current[id as string]?.width == 0 && { height: 0 }),
-          ...(sizesRef.current[id as string]?.height == 0 && { width: 0 }),
-        }),
-      }));
+      return {
+        ...style,
+        ...maxSizeOption,
+        ...(width == 0 && { height: 0 }),
+      };
     } else {
@@ -140,29 +124,20 @@ const currentElemIdx = siblings.findIndex((sibling) => sibling.id === id);
         .reduce(sumViewSize, 0);
-      const hasFillOption = isViewCompatibleWithSizeOption({
-        width: props.width,
-        height: props.height,
-        parentLayout,
-        option: 'fill',
-      });
 
-      setCurrentStyle((prevStyle) => ({
-        ...prevStyle,
+      return {
+        ...style,
         // to hide any elements which's width is 0
         // This code is to hide when text is overflowed
-        ...(sizesRef.current[id as string]?.contentWidth === 0 && { height: 0 }),
-        ...(sizesRef.current[id as string]?.contentHeight === 0 && { width: 0 }),
-        ...(!hasFillOption && {
-          ...(parentLayout === Layout.Row
-            ? {
-                maxWidth: `calc(100% - ${forwardSiblingsSize}px)`,
-              }
-            : {
-                maxHeight: `calc(100% - ${forwardSiblingsSize}px)`,
-              }),
-        }),
-      }));
+        ...(width === 0 && { height: 0 }),
+        ...(parentLayout === Layout.Row
+          ? {
+              maxWidth: `calc(100% - ${forwardSiblingsSize}px)`,
+            }
+          : {
+              maxHeight: `calc(100% - ${forwardSiblingsSize}px)`,
+            }),
+      };
     }
-  }, [id, sizes, parentLayout, props.height, props.width, siblings]);
+  }, [props.width, props.height, parentLayout, sizes, siblings, style, width, id]);
 
   return { recalculatedStyle: currentStyle, elemRef };
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

260080

increased by106.95%

Lines of code

3399

increased by82.64%

Dependency changes

• Updated@sendbird/uikit-message-template@^0.0.1-alpha.30