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

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

CHANGELOG.md

@@ -6,2 +6,8 @@ # Change Log
 
+## 0.0.1-alpha.19 (2023-03-10)
+
+### Bug Fixes
+
+- **NOTI-363:** fix viewStyle.backgroundImageUrl for React ([#12](https://github.com/sendbird/sendbird-uikit-core-ts/issues/12)) ([9223c05](https://github.com/sendbird/sendbird-uikit-core-ts/commit/9223c058b759b1a8b9588510b3e7095fdc149010))
+
 ## 0.0.1-alpha.18 (2023-03-07)
@@ -8,0 +14,0 @@

dist/styles/index.d.ts

@@ -1,3 +0,4 @@
-import { Align, Image, ImageButton, ImageStyle, Layout, TextStyle, View, ViewStyle } from '@sendbird/uikit-message-template';
-export type ReactParsedProperties = Record<string, string | number>;
+import type { CSSProperties } from 'react';
+import { Align, Image, ImageButton, ImageStyle, Layout, Text, TextButton, TextStyle, View, ViewStyle } from '@sendbird/uikit-message-template';
+export type ReactParsedProperties = CSSProperties;
 export declare function getDefaultStyles(overrides?: ReactParsedProperties): ReactParsedProperties;
@@ -10,2 +11,5 @@ export declare function setViewProps(styles: ReactParsedProperties, view: View): void;
 export declare function setImageAspectRatio(styles: ReactParsedProperties, props: Image | ImageButton): void;
+export declare function shouldWrapTextWithWebkitBox(view: Text | TextButton): number | boolean;
+export declare function webkitLineClampStyles(numberOfLines: number): CSSProperties;
+export declare function setTextMaxLines(styles: ReactParsedProperties, view: Text | TextButton): void;
 export declare function setTextStyle(styles: ReactParsedProperties, textStyle?: TextStyle): void;

dist/styles/index.js

@@ -29,4 +29,5 @@ import { AlignValue, FlexSizeSpecValue, Layout, MediaContentMode, } from '@sendbird/uikit-message-template';
         styles['backgroundColor'] = viewStyle.backgroundColor;
+    // use JSON.stringify to escape special characters in image URL
     if (viewStyle === null || viewStyle === void 0 ? void 0 : viewStyle.backgroundImageUrl)
-        styles['backgroundImageUrl'] = viewStyle.backgroundImageUrl;
+        styles['backgroundImage'] = `url(${JSON.stringify(viewStyle.backgroundImageUrl)})`;
     if (viewStyle === null || viewStyle === void 0 ? void 0 : viewStyle.radius)
@@ -124,2 +125,34 @@ styles['borderRadius'] = viewStyle.radius;
 }
+export function shouldWrapTextWithWebkitBox(view) {
+    var _a, _b;
+    const { maxTextLines, viewStyle } = view;
+    // if maxTextLines > 1 and the view has padding-bottom, --webkit-line-clamp should be applied to
+    // a text wrapper child div element because otherwise, the text will be visible over the padding.
+    return typeof maxTextLines === 'number' && maxTextLines > 1 && ((_b = (_a = viewStyle === null || viewStyle === void 0 ? void 0 : viewStyle.padding) === null || _a === void 0 ? void 0 : _a.bottom) !== null && _b !== void 0 ? _b : 0 > 0);
+}
+export function webkitLineClampStyles(numberOfLines) {
+    return {
+        WebkitLineClamp: numberOfLines,
+        WebkitBoxOrient: 'vertical',
+        display: '-webkit-box',
+        overflow: 'hidden',
+    };
+}
+export function setTextMaxLines(styles, view) {
+    const { maxTextLines } = view;
+    if (maxTextLines == null) {
+        return;
+    }
+    if (maxTextLines > 1) {
+        Object.assign(styles, shouldWrapTextWithWebkitBox(view) ? { display: 'block' } : webkitLineClampStyles(maxTextLines));
+        return;
+    }
+    Object.assign(styles, {
+        display: 'block',
+        textOverflow: 'ellipsis',
+        overflow: 'hidden',
+        whiteSpace: 'nowrap',
+    });
+    return;
+}
 export function setTextStyle(styles, textStyle) {
@@ -126,0 +159,0 @@ // TODO: Change default as design

dist/ui/index.d.ts

@@ -1,6 +0,5 @@
-/// <reference types="react" />
+import React from 'react';
 import '../index.css';
-import { ReactParsedProperties } from '../styles';
-export declare const renderer: import("@sendbird/uikit-message-template").Renderer<ReactParsedProperties>;
-export declare const parser: import("@sendbird/uikit-message-template").Parser<ReactParsedProperties>;
+export declare const renderer: import("@sendbird/uikit-message-template").Renderer<React.CSSProperties>;
+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;

dist/ui/index.js

@@ -6,3 +6,3 @@ import React from 'react';
 import '../index.css';
-import { getDefaultStyles, setAlign, setImageAspectRatio, setImageStyle, setTextStyle, setViewProps, } from '../styles';
+import { getDefaultStyles, setAlign, setImageAspectRatio, setImageStyle, setTextMaxLines, setTextStyle, setViewProps, shouldWrapTextWithWebkitBox, webkitLineClampStyles, } from '../styles';
 const hasValidUrlProtocol = (url = '') => ['http://', 'https://', 'ftp://'].some((protocol) => url.startsWith(protocol));
@@ -49,2 +49,9 @@ /**
 };
+function renderText(view) {
+    const { text, maxTextLines } = view;
+    if (shouldWrapTextWithWebkitBox(view) && maxTextLines) {
+        return React.createElement("div", { style: webkitLineClampStyles(maxTextLines) }, text);
+    }
+    return text;
+}
 export const renderer = createRenderer({
@@ -56,3 +63,3 @@ views: {
         text(props) {
-            return (React.createElement(ActionHandler, { className: "sb-message-template__text", elementId: props.elementId, style: props.parsedProperties, props: props }, props.text));
+            return (React.createElement(ActionHandler, { className: "sb-message-template__text", elementId: props.elementId, style: props.parsedProperties, props: props }, renderText(props)));
         },
@@ -66,3 +73,3 @@ image(props) {
         textButton(props) {
-            return (React.createElement(ActionHandler, { className: "sb-message-template__text-button", elementId: props.elementId, style: props.parsedProperties, props: props }, props.text));
+            return (React.createElement(ActionHandler, { className: "sb-message-template__text-button", elementId: props.elementId, style: props.parsedProperties, props: props }, renderText(props)));
         },
@@ -87,2 +94,3 @@ imageButton(props) {
         setViewProps(styles, props);
+        setTextMaxLines(styles, props);
         setTextStyle(styles, props.textStyle);
@@ -102,2 +110,3 @@ setAlign(styles, Layout.Row, props.align);
         setViewProps(styles, props);
+        setTextMaxLines(styles, props);
         setTextStyle(styles, Object.assign({ weight: 500 }, props.textStyle));
@@ -104,0 +113,0 @@ return styles;

package.json

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

src/styles/index.ts

@@ -0,1 +1,3 @@
+import type { CSSProperties } from 'react';
+
 import {
@@ -10,2 +12,4 @@ Align,
   MediaContentMode,
+  Text,
+  TextButton,
   TextStyle,
@@ -16,3 +20,3 @@ View,
 
-export type ReactParsedProperties = Record<string, string | number>;
+export type ReactParsedProperties = CSSProperties;
 
@@ -44,3 +48,6 @@ export function getDefaultStyles(overrides?: ReactParsedProperties): ReactParsedProperties {
   if (viewStyle?.backgroundColor) styles['backgroundColor'] = viewStyle.backgroundColor;
-  if (viewStyle?.backgroundImageUrl) styles['backgroundImageUrl'] = viewStyle.backgroundImageUrl;
+
+  // use JSON.stringify to escape special characters in image URL
+  if (viewStyle?.backgroundImageUrl) styles['backgroundImage'] = `url(${JSON.stringify(viewStyle.backgroundImageUrl)})`;
+
   if (viewStyle?.radius) styles['borderRadius'] = viewStyle.radius;
@@ -142,2 +149,42 @@ if (viewStyle?.borderWidth) styles['borderWidth'] = viewStyle.borderWidth;
 
+export function shouldWrapTextWithWebkitBox(view: Text | TextButton) {
+  const { maxTextLines, viewStyle } = view;
+  // if maxTextLines > 1 and the view has padding-bottom, --webkit-line-clamp should be applied to
+  // a text wrapper child div element because otherwise, the text will be visible over the padding.
+  return typeof maxTextLines === 'number' && maxTextLines > 1 && (viewStyle?.padding?.bottom ?? 0 > 0);
+}
+
+export function webkitLineClampStyles(numberOfLines: number): CSSProperties {
+  return {
+    WebkitLineClamp: numberOfLines,
+    WebkitBoxOrient: 'vertical',
+    display: '-webkit-box',
+    overflow: 'hidden',
+  };
+}
+
+export function setTextMaxLines(styles: ReactParsedProperties, view: Text | TextButton) {
+  const { maxTextLines } = view;
+
+  if (maxTextLines == null) {
+    return;
+  }
+
+  if (maxTextLines > 1) {
+    Object.assign(
+      styles,
+      shouldWrapTextWithWebkitBox(view) ? { display: 'block' } : webkitLineClampStyles(maxTextLines),
+    );
+    return;
+  }
+
+  Object.assign(styles, {
+    display: 'block',
+    textOverflow: 'ellipsis',
+    overflow: 'hidden',
+    whiteSpace: 'nowrap',
+  });
+  return;
+}
+
 export function setTextStyle(styles: ReactParsedProperties, textStyle?: TextStyle) {
@@ -144,0 +191,0 @@ // TODO: Change default as design

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

88703

increased by4.71%

Lines of code

1161

increased by8.91%

Dependency changes

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