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

Comparing version 0.0.1-alpha.25 to 0.0.1-alpha.27

CHANGELOG.md

@@ -6,2 +6,24 @@ # Change Log
 
+## 0.0.1-alpha.27 (2023-04-25)
+
+**Note:** Version bump only for package @sendbird/uikit-message-template
+
+## [0.0.1-alpha.27](https://github.com/sendbird/sendbird-uikit-core-ts/compare/v0.0.1-alpha.26...v0.0.1-alpha.27) (2023-04-25)
+
+**Note:** Version bump only for package @sendbird/uikit-message-template
+
+## 0.0.1-alpha.26 (2023-04-25)
+
+**Note:** Version bump only for package @sendbird/uikit-message-template
+
+## [0.0.1-alpha.26](https://github.com/sendbird/sendbird-uikit-core-ts/compare/v0.0.1-alpha.25...v0.0.1-alpha.26) (2023-04-25)
+
+### Bug Fixes
+
+- **NOTI-709:** exception handling for two wrapped text components ([#29](https://github.com/sendbird/sendbird-uikit-core-ts/issues/29)) ([f861c5a](https://github.com/sendbird/sendbird-uikit-core-ts/commit/f861c5a58b96ff3f9e06b967b802db882bb1463d))
+
+### Features
+
+- **NOTI-682:** Hide text that overflows into padding-area([#25](https://github.com/sendbird/sendbird-uikit-core-ts/issues/25)) ([0df42fd](https://github.com/sendbird/sendbird-uikit-core-ts/commit/0df42fd134f577ecba67dd9936ce9674a64f696a))
+
 ## 0.0.1-alpha.25 (2023-04-17)
@@ -8,0 +30,0 @@

dist/core/messageTemplate.js

 import React from 'react';
+import { SizeContextProvider } from '../context/SizeProvider';
 import { ComponentType } from '../types/components';
+import { setTemplateItemId } from '../utils/templateItemId';
 import { defaultProperties } from './defaultValues';
@@ -15,4 +17,4 @@ import { createParser } from './parser';
         const parentLayout = (_a = props.parentLayout) !== null && _a !== void 0 ? _a : defaultProperties.box.layout;
-        return (React.createElement(React.Fragment, null, renderItems.map((item, index) => {
-            const { properties } = parser.parse(item, parentLayout);
+        return (React.createElement(React.Fragment, null, renderItems.map((item, index, siblings) => {
+            const { properties } = parser.parse(item, { parentLayout, elemIdx: index, siblings });
             const props = {
@@ -22,2 +24,3 @@ key: index,
                 parsedProperties: properties,
+                siblings,
             };
@@ -49,6 +52,10 @@ switch (item.type) {
     return {
-        MessageTemplate: ({ parentLayout = defaultProperties.rootLayout, templateItems }) => (React.createElement(Container, null,
-            React.createElement(MessageTemplateBase, { parentLayout: parentLayout, templateItems: templateItems }))),
+        MessageTemplate: ({ parentLayout = defaultProperties.rootLayout, templateItems }) => {
+            const items = setTemplateItemId(templateItems);
+            return (React.createElement(SizeContextProvider, null,
+                React.createElement(Container, null,
+                    React.createElement(MessageTemplateBase, { parentLayout: parentLayout, templateItems: items }))));
+        },
         MessageTemplateBase,
     };
 };

dist/core/parser.d.ts

 import { Box, ComponentsUnion, Image, ImageButton, Text, TextButton } from '../types/components';
 import type { Layout } from '../types/styles';
+export type Options = {
+    parentLayout: Layout;
+    elemIdx?: number;
+    siblings?: Array<ComponentsUnion['properties']>;
+};
 interface ParserOptions<ParsedProperties> {
     defaultMapper?(...args: any[]): any;
-    mapBoxProps?(properties: Box, parentLayout: Layout): ParsedProperties;
-    mapTextProps?(properties: Text, parentLayout: Layout): ParsedProperties;
-    mapImageProps?(properties: Image, parentLayout: Layout): ParsedProperties;
-    mapTextButtonProps?(properties: TextButton, parentLayout: Layout): ParsedProperties;
-    mapImageButtonProps?(properties: ImageButton, parentLayout: Layout): ParsedProperties;
+    mapBoxProps?(properties: Box, options: Options): ParsedProperties;
+    mapTextProps?(properties: Text, options: Options): ParsedProperties;
+    mapImageProps?(properties: Image, options: Options): ParsedProperties;
+    mapTextButtonProps?(properties: TextButton, options: Options): ParsedProperties;
+    mapImageButtonProps?(properties: ImageButton, options: Options): ParsedProperties;
 }
 export interface Parser<ParsedProperties> {
-    parse(properties: ComponentsUnion['properties'], parentLayout: Layout): {
+    parse(properties: ComponentsUnion['properties'], options: Options): {
         properties: ParsedProperties | undefined;
@@ -14,0 +19,0 @@ };

dist/core/parser.js

@@ -15,18 +15,18 @@ // -------- Set property mapper
     return {
-        parse(item, parentLayout) {
+        parse(item, options) {
             switch (item.type) {
                 case ComponentType.Box: {
-                    return { properties: mapper.mapBoxProps(item, parentLayout) };
+                    return { properties: mapper.mapBoxProps(item, options) };
                 }
                 case ComponentType.Text: {
-                    return { properties: mapper.mapTextProps(item, parentLayout) };
+                    return { properties: mapper.mapTextProps(item, options) };
                 }
                 case ComponentType.Image: {
-                    return { properties: mapper.mapImageProps(item, parentLayout) };
+                    return { properties: mapper.mapImageProps(item, options) };
                 }
                 case ComponentType.TextButton: {
-                    return { properties: mapper.mapTextButtonProps(item, parentLayout) };
+                    return { properties: mapper.mapTextButtonProps(item, options) };
                 }
                 case ComponentType.ImageButton: {
-                    return { properties: mapper.mapImageButtonProps(item, parentLayout) };
+                    return { properties: mapper.mapImageButtonProps(item, options) };
                 }
@@ -33,0 +33,0 @@ default:

dist/index.d.ts

@@ -10,2 +10,4 @@ export * from './core/parser';
 export * from './utils';
+export * from './utils/templateItemId';
 export * from './test/data';
+export * from './context/SizeProvider';

dist/index.js

@@ -10,2 +10,4 @@ export * from './core/parser';
 export * from './utils';
+export * from './utils/templateItemId';
 export * from './test/data';
+export * from './context/SizeProvider';

dist/types/components.d.ts

@@ -36,2 +36,9 @@ import type React from 'react';
 export interface View {
+    /**
+     * this id will be generated by setTemplateItemId
+     * to save each elements' size updated by SizeProvider,
+     * and used only for internal purpose
+     * @link https://github.com/sendbird/sendbird-uikit-core-ts/pull/29#discussion_r1175482926
+     */
+    id?: string;
     type: ComponentType;
@@ -38,0 +45,0 @@ action?: Action;

package.json

 {
   "name": "@sendbird/uikit-message-template",
-  "version": "0.0.1-alpha.25",
+  "version": "0.0.1-alpha.27",
   "publishConfig": {
@@ -27,3 +27,3 @@ "registry": "https://registry.npmjs.org/",
   },
-  "gitHead": "31104d8222aca84ab1c61c8a8a462698aa2c7976"
+  "gitHead": "1132d6547f37a47834651a333df2d08b26ea8fd8"
 }

src/core/parser.ts

@@ -5,9 +5,14 @@ // -------- Set property mapper
 
+export type Options = {
+  parentLayout: Layout;
+  elemIdx?: number;
+  siblings?: Array<ComponentsUnion['properties']>;
+};
 interface ParserOptions<ParsedProperties> {
   defaultMapper?(...args: any[]): any;
-  mapBoxProps?(properties: Box, parentLayout: Layout): ParsedProperties;
-  mapTextProps?(properties: Text, parentLayout: Layout): ParsedProperties;
-  mapImageProps?(properties: Image, parentLayout: Layout): ParsedProperties;
-  mapTextButtonProps?(properties: TextButton, parentLayout: Layout): ParsedProperties;
-  mapImageButtonProps?(properties: ImageButton, parentLayout: Layout): ParsedProperties;
+  mapBoxProps?(properties: Box, options: Options): ParsedProperties;
+  mapTextProps?(properties: Text, options: Options): ParsedProperties;
+  mapImageProps?(properties: Image, options: Options): ParsedProperties;
+  mapTextButtonProps?(properties: TextButton, options: Options): ParsedProperties;
+  mapImageButtonProps?(properties: ImageButton, options: Options): ParsedProperties;
 }
@@ -18,3 +23,3 @@
     properties: ComponentsUnion['properties'],
-    parentLayout: Layout,
+    options: Options,
   ): {
@@ -41,18 +46,18 @@ properties: ParsedProperties | undefined;
   return {
-    parse(item, parentLayout) {
+    parse(item, options) {
       switch (item.type) {
         case ComponentType.Box: {
-          return { properties: mapper.mapBoxProps(item, parentLayout) };
+          return { properties: mapper.mapBoxProps(item, options) };
         }
         case ComponentType.Text: {
-          return { properties: mapper.mapTextProps(item, parentLayout) };
+          return { properties: mapper.mapTextProps(item, options) };
         }
         case ComponentType.Image: {
-          return { properties: mapper.mapImageProps(item, parentLayout) };
+          return { properties: mapper.mapImageProps(item, options) };
         }
         case ComponentType.TextButton: {
-          return { properties: mapper.mapTextButtonProps(item, parentLayout) };
+          return { properties: mapper.mapTextButtonProps(item, options) };
         }
         case ComponentType.ImageButton: {
-          return { properties: mapper.mapImageButtonProps(item, parentLayout) };
+          return { properties: mapper.mapImageButtonProps(item, options) };
         }
@@ -59,0 +64,0 @@ default:

src/index.ts

@@ -12,3 +12,6 @@ export * from './core/parser';
 export * from './utils';
+export * from './utils/templateItemId';
 
 export * from './test/data';
+
+export * from './context/SizeProvider';

src/test/data.ts

@@ -1180,2 +1180,42 @@ import { ComponentType } from '../types/components';
 
-export const samples = [sample_1, sample_2, sample_3, sample_4, sample_5, sample_6, sample_for_inset_border];
+const sample_clipped_text__large_padding: any = {
+  'version': 1,
+  'body': {
+    'items': [
+      {
+        'type': 'text',
+        'height': {
+          'type': 'fixed',
+          'value': 120,
+        },
+        'width': {
+          'type': 'fixed',
+          'value': 150,
+        },
+        'maxTextLines': 2,
+        'viewStyle': {
+          'padding': {
+            'left': 50,
+            'right': 50,
+            'top': 50,
+            'bottom': 50,
+          },
+          borderWidth: 1,
+          borderColor: '#72723f',
+        },
+        'text': 'longtext long long longtext',
+      },
+    ],
+  },
+};
+
+export const samples = [
+  sample_1,
+  sample_2,
+  sample_3,
+  sample_4,
+  sample_5,
+  sample_6,
+  sample_for_inset_border,
+  sample_clipped_text__large_padding,
+];

src/types/components.ts

@@ -51,2 +51,9 @@ import type React from 'react';
 export interface View {
+  /**
+   * this id will be generated by setTemplateItemId
+   * to save each elements' size updated by SizeProvider,
+   * and used only for internal purpose
+   * @link https://github.com/sendbird/sendbird-uikit-core-ts/pull/29#discussion_r1175482926
+   */
+  id?: string;
   type: ComponentType;
@@ -53,0 +60,0 @@ action?: Action;

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

188721

increased by5.34%

Number of package files

45

increased by15.38%

Lines of code

3432

increased by8.4%

No dependency changes