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

Comparing version 0.0.1-alpha.19 to 0.0.1-alpha.20

CHANGELOG.md

@@ -6,2 +6,8 @@ # Change Log
 
+## 0.0.1-alpha.20 (2023-03-13)
+
+### Bug Fixes
+
+- **UIKIT-3348:** fixed to correct size is applied to the React component ([#13](https://github.com/sendbird/sendbird-uikit-core-ts/issues/13)) ([72a68f5](https://github.com/sendbird/sendbird-uikit-core-ts/commit/72a68f5c7e28cff38a1e8e2198a964399af51212))
+
 ## 0.0.1-alpha.19 (2023-03-10)
@@ -8,0 +14,0 @@

dist/components/ReactMessageTemplateImage/index.canvas.js

@@ -54,3 +54,3 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
-    }, [props.src, imageSize]);
+    }, [props.src, imageSize, tintColor]);
     return {
@@ -57,0 +57,0 @@ canvasRef,

dist/styles/index.d.ts

 import type { CSSProperties } from 'react';
-import { Align, Image, ImageButton, ImageStyle, Layout, Text, TextButton, TextStyle, View, ViewStyle } from '@sendbird/uikit-message-template';
+import { Align, ComponentsUnion, Image, ImageButton, ImageStyle, Layout, Text, TextButton, TextStyle, ViewStyle } from '@sendbird/uikit-message-template';
 export type ReactParsedProperties = CSSProperties;
 export declare function getDefaultStyles(overrides?: ReactParsedProperties): ReactParsedProperties;
-export declare function setViewProps(styles: ReactParsedProperties, view: View): void;
+export declare function setViewProps(styles: ReactParsedProperties, props: ComponentsUnion['properties'], parentLayout: Layout): void;
 export declare function setViewStyle(styles: ReactParsedProperties, viewStyle?: ViewStyle): void;
-export declare function setViewSize(styles: ReactParsedProperties, view: View): void;
+export declare function setViewSize(styles: ReactParsedProperties, props: ComponentsUnion['properties'], parentLayout: Layout): void;
 export declare function setAlign(styles: ReactParsedProperties, layout?: Layout, align?: Align): void;
@@ -9,0 +9,0 @@ export declare function setImageStyle(styles: ReactParsedProperties, imageStyle?: ImageStyle): void;

dist/styles/index.js

@@ -1,8 +0,8 @@
-import { AlignValue, FlexSizeSpecValue, Layout, MediaContentMode, } from '@sendbird/uikit-message-template';
+import { ComponentType, FlexSizeSpecValue, Layout, MediaContentMode, alignInFlex, defaultProperties, } from '@sendbird/uikit-message-template';
 export function getDefaultStyles(overrides) {
-    return Object.assign({ display: 'flex', overflow: 'hidden' }, overrides);
+    return Object.assign({ display: 'flex', overflow: 'hidden', boxSizing: 'border-box' }, overrides);
 }
-export function setViewProps(styles, view) {
-    setViewSize(styles, view);
-    setViewStyle(styles, view.viewStyle);
+export function setViewProps(styles, props, parentLayout) {
+    setViewSize(styles, props, parentLayout);
+    setViewStyle(styles, props.viewStyle);
 }
@@ -12,17 +12,17 @@ export function setViewStyle(styles, viewStyle) {
     if ((_a = viewStyle === null || viewStyle === void 0 ? void 0 : viewStyle.padding) === null || _a === void 0 ? void 0 : _a.top)
-        styles['paddingTop'] = viewStyle.padding.top;
+        styles['paddingTop'] = Number(viewStyle.padding.top);
     if ((_b = viewStyle === null || viewStyle === void 0 ? void 0 : viewStyle.padding) === null || _b === void 0 ? void 0 : _b.bottom)
-        styles['paddingBottom'] = viewStyle.padding.bottom;
+        styles['paddingBottom'] = Number(viewStyle.padding.bottom);
     if ((_c = viewStyle === null || viewStyle === void 0 ? void 0 : viewStyle.padding) === null || _c === void 0 ? void 0 : _c.left)
-        styles['paddingLeft'] = viewStyle.padding.left;
+        styles['paddingLeft'] = Number(viewStyle.padding.left);
     if ((_d = viewStyle === null || viewStyle === void 0 ? void 0 : viewStyle.padding) === null || _d === void 0 ? void 0 : _d.right)
-        styles['paddingRight'] = viewStyle.padding.right;
+        styles['paddingRight'] = Number(viewStyle.padding.right);
     if ((_e = viewStyle === null || viewStyle === void 0 ? void 0 : viewStyle.margin) === null || _e === void 0 ? void 0 : _e.top)
-        styles['marginTop'] = viewStyle.margin.top;
+        styles['marginTop'] = Number(viewStyle.margin.top);
     if ((_f = viewStyle === null || viewStyle === void 0 ? void 0 : viewStyle.margin) === null || _f === void 0 ? void 0 : _f.bottom)
-        styles['marginBottom'] = viewStyle.margin.bottom;
+        styles['marginBottom'] = Number(viewStyle.margin.bottom);
     if ((_g = viewStyle === null || viewStyle === void 0 ? void 0 : viewStyle.margin) === null || _g === void 0 ? void 0 : _g.left)
-        styles['marginLeft'] = viewStyle.margin.left;
+        styles['marginLeft'] = Number(viewStyle.margin.left);
     if ((_h = viewStyle === null || viewStyle === void 0 ? void 0 : viewStyle.margin) === null || _h === void 0 ? void 0 : _h.right)
-        styles['marginRight'] = viewStyle.margin.right;
+        styles['marginRight'] = Number(viewStyle.margin.right);
     if (viewStyle === null || viewStyle === void 0 ? void 0 : viewStyle.backgroundColor)
@@ -34,63 +34,51 @@ styles['backgroundColor'] = viewStyle.backgroundColor;
     if (viewStyle === null || viewStyle === void 0 ? void 0 : viewStyle.radius)
-        styles['borderRadius'] = viewStyle.radius;
+        styles['borderRadius'] = Number(viewStyle.radius);
     if (viewStyle === null || viewStyle === void 0 ? void 0 : viewStyle.borderWidth)
-        styles['borderWidth'] = viewStyle.borderWidth;
+        styles['borderWidth'] = Number(viewStyle.borderWidth);
     if (viewStyle === null || viewStyle === void 0 ? void 0 : viewStyle.borderColor)
         styles['borderColor'] = viewStyle.borderColor;
-    // set border style to solid if border width or color is set
-    if ((viewStyle === null || viewStyle === void 0 ? void 0 : viewStyle.borderColor) || (viewStyle === null || viewStyle === void 0 ? void 0 : viewStyle.borderWidth))
+    // set border style to solid if border width and color are set
+    if ((viewStyle === null || viewStyle === void 0 ? void 0 : viewStyle.borderColor) && (viewStyle === null || viewStyle === void 0 ? void 0 : viewStyle.borderWidth))
         styles['borderStyle'] = 'solid';
 }
-export function setViewSize(styles, view) {
-    var _a, _b;
-    {
-        const { type = 'flex', value = FlexSizeSpecValue.FillParent } = (_a = view.width) !== null && _a !== void 0 ? _a : {};
-        if (type === 'flex' && value === FlexSizeSpecValue.FillParent)
-            styles['flex'] = 1;
-        if (type === 'fixed' && value)
-            styles['width'] = value;
+function getViewSizeStyle(width, height, parentLayout) {
+    const style = {};
+    if (width.type === 'flex' && width.value == FlexSizeSpecValue.FillParent) {
+        style['width'] = '100%';
+        if (parentLayout === Layout.Row) {
+            style['flex'] = 1;
+        }
     }
-    {
-        const { type = 'flex', value = FlexSizeSpecValue.WrapContent } = (_b = view.height) !== null && _b !== void 0 ? _b : {};
-        if (type === 'flex' && value === FlexSizeSpecValue.FillParent)
-            styles['flex'] = 1;
-        if (type === 'fixed' && value)
-            styles['height'] = value;
+    else if (width.type === 'fixed' && width.value) {
+        style['width'] = Number(width.value);
     }
+    if (height.type === 'flex' && height.value == FlexSizeSpecValue.FillParent) {
+        style['height'] = '100%';
+        if (parentLayout === Layout.Column) {
+            style['flex'] = 1;
+        }
+    }
+    else if (height.type === 'fixed' && height.value) {
+        style['height'] = Number(height.value);
+    }
+    return style;
 }
-export function setAlign(styles, layout = Layout.Row, align = { vertical: AlignValue.Top, horizontal: AlignValue.Left }) {
+export function setViewSize(styles, props, parentLayout) {
+    var _a, _b;
+    const isImage = [ComponentType.Image, ComponentType.ImageButton].some((it) => it === props.type);
+    const defaultSize = defaultProperties.view.size[isImage ? 'image' : 'default'];
+    const sizeStyle = getViewSizeStyle((_a = props.width) !== null && _a !== void 0 ? _a : defaultSize, (_b = props.height) !== null && _b !== void 0 ? _b : defaultSize, parentLayout);
+    Object.assign(styles, sizeStyle);
+}
+export function setAlign(styles, layout = defaultProperties.box.layout, align = defaultProperties.box.align) {
     if (layout === Layout.Row) {
         styles['flexDirection'] = 'row';
+        styles['alignItems'] = alignInFlex(align.vertical);
+        styles['justifyContent'] = alignInFlex(align.horizontal);
     }
     if (layout === Layout.Column) {
         styles['flexDirection'] = 'column';
+        styles['alignItems'] = alignInFlex(align.horizontal);
+        styles['justifyContent'] = alignInFlex(align.vertical);
     }
-    if (align.horizontal) {
-        const styleKey = layout === Layout.Row ? 'justifyContent' : 'alignItems';
-        switch (align.horizontal) {
-            case AlignValue.Center:
-                styles[styleKey] = 'center';
-                break;
-            case AlignValue.Left:
-                // styles[styleKey] = 'flex-start';
-                break;
-            case AlignValue.Right:
-                styles[styleKey] = 'flex-end';
-                break;
-        }
-    }
-    if (align === null || align === void 0 ? void 0 : align.vertical) {
-        const styleKey = layout === Layout.Row ? 'alignItems' : 'justifyContent';
-        switch (align.vertical) {
-            case AlignValue.Center:
-                styles[styleKey] = 'center';
-                break;
-            case AlignValue.Top:
-                // styles[styleKey] = 'flex-start';
-                break;
-            case AlignValue.Bottom:
-                styles[styleKey] = 'flex-end';
-                break;
-        }
-    }
 }
@@ -113,3 +101,3 @@ export function setImageStyle(styles, imageStyle) {
 }
-// uses image meta-data to render images that doesnt break the UI
+// uses image meta-data to render images that doesn't break the UI
 // https://sendbird.atlassian.net/wiki/spaces/UK/pages/2008220608/Message+template+-+Image+policy
@@ -152,3 +140,3 @@ export function setImageAspectRatio(styles, props) {
     Object.assign(styles, {
-        display: 'block',
+        display: 'flex',
         textOverflow: 'ellipsis',
@@ -163,5 +151,8 @@ overflow: 'hidden',
     const { size, color, weight = 'normal' } = textStyle || {};
-    styles['fontSize'] = size;
-    styles['color'] = color;
-    styles['fontWeight'] = weight;
+    if (size)
+        styles['fontSize'] = Number(size);
+    if (color)
+        styles['color'] = color;
+    if (weight)
+        styles['fontWeight'] = weight;
 }

dist/ui/index.d.ts

@@ -5,2 +5,2 @@ import React from 'react';
 export declare const parser: import("@sendbird/uikit-message-template").Parser<React.CSSProperties>;
-export declare const MessageTemplate: (props: import("@sendbird/uikit-message-template").MessageTemplateProps) => JSX.Element;
+export declare const MessageTemplate: ({ parentLayout, templateItems }: import("@sendbird/uikit-message-template").MessageTemplateProps) => JSX.Element;

dist/ui/index.js

@@ -80,12 +80,12 @@ import React from 'react';
 export const parser = createParser({
-    mapBoxProps(props) {
+    mapBoxProps(props, parentLayout) {
         const styles = getDefaultStyles();
-        setViewProps(styles, props);
+        setViewProps(styles, props, parentLayout);
         setAlign(styles, props.layout, props.align);
         return styles;
     },
-    mapTextProps(props) {
+    mapTextProps(props, parentLayout) {
         const styles = getDefaultStyles();
         // Better not set flex 1 to text
-        setViewProps(styles, props);
+        setViewProps(styles, props, parentLayout);
         setTextMaxLines(styles, props);
@@ -96,5 +96,5 @@ setTextStyle(styles, props.textStyle);
     },
-    mapImageProps(props) {
+    mapImageProps(props, parentLayout) {
         const styles = getDefaultStyles();
-        setViewProps(styles, props);
+        setViewProps(styles, props, parentLayout);
         setImageStyle(styles, props.imageStyle);
@@ -104,5 +104,5 @@ setImageAspectRatio(styles, props);
     },
-    mapTextButtonProps(props) {
+    mapTextButtonProps(props, parentLayout) {
         const styles = getDefaultStyles({ alignItems: 'center', justifyContent: 'center' });
-        setViewProps(styles, props);
+        setViewProps(styles, props, parentLayout);
         setTextMaxLines(styles, props);
@@ -112,5 +112,5 @@ setTextStyle(styles, Object.assign({ weight: 500 }, props.textStyle));
     },
-    mapImageButtonProps(props) {
+    mapImageButtonProps(props, parentLayout) {
         const styles = getDefaultStyles();
-        setViewProps(styles, props);
+        setViewProps(styles, props, parentLayout);
         setImageStyle(styles, props.imageStyle);
@@ -117,0 +117,0 @@ setImageAspectRatio(styles, props);

package.json

 {
   "name": "@sendbird/react-uikit-message-template-view",
-  "version": "0.0.1-alpha.19",
+  "version": "0.0.1-alpha.20",
   "publishConfig": {
@@ -18,3 +18,3 @@ "registry": "https://registry.npmjs.org/",
   "dependencies": {
-    "@sendbird/uikit-message-template": "^0.0.1-alpha.19"
+    "@sendbird/uikit-message-template": "^0.0.1-alpha.20"
   },
@@ -35,3 +35,3 @@ "devDependencies": {
   },
-  "gitHead": "04a4336d5ef1b83dd9ea090c722153ec01bdaef2"
+  "gitHead": "4ca51fc9ee2b8dbf65fb8fe335016d664c2319a8"
 }

src/styles/index.ts

@@ -5,3 +5,4 @@ import type { CSSProperties } from 'react';
   Align,
-  AlignValue,
+  ComponentType,
+  ComponentsUnion,
   FlexSizeSpecValue,
@@ -13,7 +14,9 @@ Image,
   MediaContentMode,
+  SizeSpec,
   Text,
   TextButton,
   TextStyle,
-  View,
   ViewStyle,
+  alignInFlex,
+  defaultProperties,
 } from '@sendbird/uikit-message-template';
@@ -27,2 +30,3 @@
     overflow: 'hidden',
+    boxSizing: 'border-box',
     ...overrides,
@@ -32,17 +36,21 @@ };
 
-export function setViewProps(styles: ReactParsedProperties, view: View) {
-  setViewSize(styles, view);
-  setViewStyle(styles, view.viewStyle);
+export function setViewProps(
+  styles: ReactParsedProperties,
+  props: ComponentsUnion['properties'],
+  parentLayout: Layout,
+) {
+  setViewSize(styles, props, parentLayout);
+  setViewStyle(styles, props.viewStyle);
 }
 
 export function setViewStyle(styles: ReactParsedProperties, viewStyle?: ViewStyle) {
-  if (viewStyle?.padding?.top) styles['paddingTop'] = viewStyle.padding.top;
-  if (viewStyle?.padding?.bottom) styles['paddingBottom'] = viewStyle.padding.bottom;
-  if (viewStyle?.padding?.left) styles['paddingLeft'] = viewStyle.padding.left;
-  if (viewStyle?.padding?.right) styles['paddingRight'] = viewStyle.padding.right;
+  if (viewStyle?.padding?.top) styles['paddingTop'] = Number(viewStyle.padding.top);
+  if (viewStyle?.padding?.bottom) styles['paddingBottom'] = Number(viewStyle.padding.bottom);
+  if (viewStyle?.padding?.left) styles['paddingLeft'] = Number(viewStyle.padding.left);
+  if (viewStyle?.padding?.right) styles['paddingRight'] = Number(viewStyle.padding.right);
 
-  if (viewStyle?.margin?.top) styles['marginTop'] = viewStyle.margin.top;
-  if (viewStyle?.margin?.bottom) styles['marginBottom'] = viewStyle.margin.bottom;
-  if (viewStyle?.margin?.left) styles['marginLeft'] = viewStyle.margin.left;
-  if (viewStyle?.margin?.right) styles['marginRight'] = viewStyle.margin.right;
+  if (viewStyle?.margin?.top) styles['marginTop'] = Number(viewStyle.margin.top);
+  if (viewStyle?.margin?.bottom) styles['marginBottom'] = Number(viewStyle.margin.bottom);
+  if (viewStyle?.margin?.left) styles['marginLeft'] = Number(viewStyle.margin.left);
+  if (viewStyle?.margin?.right) styles['marginRight'] = Number(viewStyle.margin.right);
 
@@ -54,30 +62,49 @@ if (viewStyle?.backgroundColor) styles['backgroundColor'] = viewStyle.backgroundColor;
 
-  if (viewStyle?.radius) styles['borderRadius'] = viewStyle.radius;
-  if (viewStyle?.borderWidth) styles['borderWidth'] = viewStyle.borderWidth;
+  if (viewStyle?.radius) styles['borderRadius'] = Number(viewStyle.radius);
+  if (viewStyle?.borderWidth) styles['borderWidth'] = Number(viewStyle.borderWidth);
   if (viewStyle?.borderColor) styles['borderColor'] = viewStyle.borderColor;
-  // set border style to solid if border width or color is set
-  if (viewStyle?.borderColor || viewStyle?.borderWidth) styles['borderStyle'] = 'solid';
+  // set border style to solid if border width and color are set
+  if (viewStyle?.borderColor && viewStyle?.borderWidth) styles['borderStyle'] = 'solid';
 }
 
-export function setViewSize(styles: ReactParsedProperties, view: View) {
-  {
-    const { type = 'flex', value = FlexSizeSpecValue.FillParent } = view.width ?? {};
-    if (type === 'flex' && value === FlexSizeSpecValue.FillParent) styles['flex'] = 1;
-    if (type === 'fixed' && value) styles['width'] = value;
+function getViewSizeStyle(width: SizeSpec, height: SizeSpec, parentLayout: Layout) {
+  const style: CSSProperties = {};
+
+  if (width.type === 'flex' && width.value == FlexSizeSpecValue.FillParent) {
+    style['width'] = '100%';
+    if (parentLayout === Layout.Row) {
+      style['flex'] = 1;
+    }
+  } else if (width.type === 'fixed' && width.value) {
+    style['width'] = Number(width.value);
   }
 
-  {
-    const { type = 'flex', value = FlexSizeSpecValue.WrapContent } = view.height ?? {};
-    if (type === 'flex' && value === FlexSizeSpecValue.FillParent) styles['flex'] = 1;
-    if (type === 'fixed' && value) styles['height'] = value;
+  if (height.type === 'flex' && height.value == FlexSizeSpecValue.FillParent) {
+    style['height'] = '100%';
+    if (parentLayout === Layout.Column) {
+      style['flex'] = 1;
+    }
+  } else if (height.type === 'fixed' && height.value) {
+    style['height'] = Number(height.value);
   }
+
+  return style;
 }
 
+export function setViewSize(styles: ReactParsedProperties, props: ComponentsUnion['properties'], parentLayout: Layout) {
+  const isImage = [ComponentType.Image, ComponentType.ImageButton].some((it) => it === props.type);
+  const defaultSize = defaultProperties.view.size[isImage ? 'image' : 'default'];
+  const sizeStyle = getViewSizeStyle(props.width ?? defaultSize, props.height ?? defaultSize, parentLayout);
+  Object.assign(styles, sizeStyle);
+}
+
 export function setAlign(
   styles: ReactParsedProperties,
-  layout: Layout = Layout.Row,
-  align: Align = { vertical: AlignValue.Top, horizontal: AlignValue.Left },
+  layout: Layout = defaultProperties.box.layout,
+  align: Align = defaultProperties.box.align,
 ) {
   if (layout === Layout.Row) {
     styles['flexDirection'] = 'row';
+    styles['alignItems'] = alignInFlex(align.vertical);
+    styles['justifyContent'] = alignInFlex(align.horizontal);
   }
@@ -87,33 +114,5 @@
     styles['flexDirection'] = 'column';
+    styles['alignItems'] = alignInFlex(align.horizontal);
+    styles['justifyContent'] = alignInFlex(align.vertical);
   }
-
-  if (align.horizontal) {
-    const styleKey = layout === Layout.Row ? 'justifyContent' : 'alignItems';
-    switch (align.horizontal) {
-      case AlignValue.Center:
-        styles[styleKey] = 'center';
-        break;
-      case AlignValue.Left:
-        // styles[styleKey] = 'flex-start';
-        break;
-      case AlignValue.Right:
-        styles[styleKey] = 'flex-end';
-        break;
-    }
-  }
-
-  if (align?.vertical) {
-    const styleKey = layout === Layout.Row ? 'alignItems' : 'justifyContent';
-    switch (align.vertical) {
-      case AlignValue.Center:
-        styles[styleKey] = 'center';
-        break;
-      case AlignValue.Top:
-        // styles[styleKey] = 'flex-start';
-        break;
-      case AlignValue.Bottom:
-        styles[styleKey] = 'flex-end';
-        break;
-    }
-  }
 }
@@ -139,3 +138,3 @@
 
-// uses image meta-data to render images that doesnt break the UI
+// uses image meta-data to render images that doesn't break the UI
 // https://sendbird.atlassian.net/wiki/spaces/UK/pages/2008220608/Message+template+-+Image+policy
@@ -185,3 +184,3 @@ export function setImageAspectRatio(styles: ReactParsedProperties, props: Image | ImageButton) {
   Object.assign(styles, {
-    display: 'block',
+    display: 'flex',
     textOverflow: 'ellipsis',
@@ -198,5 +197,5 @@ overflow: 'hidden',
 
-  styles['fontSize'] = size as number;
-  styles['color'] = color as string;
-  styles['fontWeight'] = weight;
+  if (size) styles['fontSize'] = Number(size);
+  if (color) styles['color'] = color;
+  if (weight) styles['fontWeight'] = weight;
 }

No alert changes

Improved metrics

Total package byte prevSize

90053

increased by1.52%

Worsened metrics

Lines of code

1150

decreased by-0.95%

Dependency changes

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