@subiz/widget-v4 4.0.78 → 4.0.81

package/assets/less/message.less

@@ -426,7 +426,7 @@ a.message_error {
 }
 
 .generic-attachment {
-	display: inline-block;
+	display: flex;
 	width: 100%;
 	overflow: hidden;
 	width: 100%;
@@ -436,6 +436,10 @@ a.message_error {
 	cursor: grab;
 }
 
+.generic-attachment--element-content {
+	flex: 1;
+}
+
 .generic-attachment--element {
 	border: 1px solid #d8d8d8;
 	background: white;
@@ -443,8 +447,10 @@ a.message_error {
 	overflow: hidden;
 	width: 220px;
 	margin-right: 10px;
-	display: inline-block;
 	vertical-align: top;
+	display: flex;
+	flex-direction: column;
+	flex-shrink: 0;
 
 	&:last-child {
 		margin-right: 0;
@@ -452,6 +458,7 @@ a.message_error {
 	.generic-attachment--element-img {
 		width: 100%;
 		height: 150px;
+		object-fit: cover;
 	}
 
 	.url-button-attachment:first-child {

package/compiled_src/chatbox/ButtonAttachments.js

@@ -36,7 +36,8 @@ class ButtonAttachments extends _common.Com {
 
     return (0, _preact.h)(_Buttons.default, {
       store: this.props.store,
-      buttons: buttons
+      buttons: buttons,
+      t: this.props.t
     });
   }
 

package/compiled_src/chatbox/Event.js

@@ -183,7 +183,8 @@ class Event extends _common.Com {
         ev: ev
       }), (0, _preact.h)(_ButtonAttachments.default, {
         store: this.props.store,
-        ev: ev
+        ev: ev,
+        t: this.props.t
       }), (0, _preact.h)(_FormAttachments.default, {
         store: this.props.store,
         onSubmit: this.props.onFormSubmit,
@@ -273,7 +274,8 @@ class Event extends _common.Com {
       ev: ev
     }), (0, _preact.h)(_ButtonAttachments.default, {
       store: this.props.store,
-      ev: ev
+      ev: ev,
+      t: this.props.t
     }), (0, _preact.h)(_FormAttachments.default, {
       store: this.props.store,
       onSubmit: this.props.onFormSubmit,

package/compiled_src/chatbox/GenericTemplateAttachments.js

@@ -34,7 +34,10 @@ class GenericTemplateAttachments extends _common.Com {
     this.setState({
       focusing: eleindex
     });
-    this.galleryRef.current.scrollLeft = 190 * eleindex - 20;
+    this.galleryRef.current.scrollTo({
+      left: 220 * eleindex,
+      behavior: 'smooth'
+    });
   }
 
   render() {
@@ -64,7 +67,9 @@ class GenericTemplateAttachments extends _common.Com {
           alt: "generic attachment element",
           class: "generic-attachment--element-img",
           src: this.props.store.replaceFileUrl(ele.image_url)
-        })), $title, $subtitle, (0, _preact.h)(_Buttons.default, {
+        })), (0, _preact.h)("div", {
+          class: "generic-attachment--element-content"
+        }, $title, $subtitle), (0, _preact.h)(_Buttons.default, {
           buttons: ele.buttons,
           onSelect: button => this.props.onSelect(button),
           t: this.props.t

package/compiled_src/popup/popup.js

@@ -1012,6 +1012,16 @@ class Popup extends _common.Com {
       if (com.type === 'image') return this.renderImageComponent(com, i);
     });
 
+    let formComponents = _index.default.filter(page.components, com => com.type !== 'image');
+
+    if (!formComponents.length) {
+      formcss.background = 'transparent';
+      formcss.padding_top = '0';
+      formcss.padding_bottom = '0';
+      formcss.padding_left = '0';
+      formcss.padding_right = '0';
+    }
+
     return (0, _preact.h)("div", {
       class: "overlay",
       style: overlaystyle

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@subiz/widget-v4",
-	"version": "4.0.78",
+	"version": "4.0.81",
 	"main": "./compiled_src/lib.js",
 	"scripts": {
 		"dev": "npx webpack serve --config webpack.dev.js",

package/src/chatbox/ButtonAttachments.js

@@ -21,6 +21,6 @@ export default class ButtonAttachments extends Com {
 			sb.each(sb.get(att, 'buttons') || [], btn => buttons.push(btn))
 		})
 
-		return <Buttons store={this.props.store} buttons={buttons} />
+		return <Buttons store={this.props.store} buttons={buttons} t={this.props.t}/>
 	}
 }

package/src/chatbox/Event.js

@@ -130,7 +130,7 @@ export default class Event extends Com {
 					<AudioAttachments store={this.props.store} ev={ev} />
 					<VideoAttachments store={this.props.store} ev={ev} />
 					<FileAttachments store={this.props.store} ev={ev} />
-					<ButtonAttachments store={this.props.store} ev={ev} />
+					<ButtonAttachments store={this.props.store} ev={ev} t={this.props.t}/>
 					<FormAttachments
 						store={this.props.store}
 						onSubmit={this.props.onFormSubmit}
@@ -182,7 +182,7 @@ export default class Event extends Com {
 					<AudioAttachments store={this.props.store} ev={ev} />
 					<VideoAttachments store={this.props.store} ev={ev} />
 					<FileAttachments store={this.props.store} ev={ev} />
-					<ButtonAttachments store={this.props.store} ev={ev} />
+					<ButtonAttachments store={this.props.store} ev={ev} t={this.props.t}/>
 					<FormAttachments store={this.props.store} onSubmit={this.props.onFormSubmit} ref={this.refForm} ev={ev} />
 					<ProductAttachments t={this.props.t} store={this.props.store} ev={ev} />
 					<FormSubmitAttachments store={this.props.store} ev={ev} />

package/src/chatbox/GenericTemplateAttachments.js

@@ -21,8 +21,8 @@ export default class GenericTemplateAttachments extends Com {
 
 	focus(eleindex) {
 		this.setState({focusing: eleindex})
-		// this.galleryRef.current.scrollTo({ left: 190 * eleindex - 20, behavior: 'smooth' })
-		this.galleryRef.current.scrollLeft = 190 * eleindex - 20
+		this.galleryRef.current.scrollTo({left: 220 * eleindex, behavior: 'smooth'})
+		//this.galleryRef.current.scrollLeft = 220 * eleindex - 20
 	}
 
 	render() {
@@ -51,8 +51,10 @@ export default class GenericTemplateAttachments extends Com {
 								src={this.props.store.replaceFileUrl(ele.image_url)}
 							/>
 						</div>
-						{$title}
-						{$subtitle}
+						<div class='generic-attachment--element-content'>
+							{$title}
+							{$subtitle}
+						</div>
 						<Buttons buttons={ele.buttons} onSelect={(button) => this.props.onSelect(button)} t={this.props.t} />
 					</div>
 				)

package/src/popup/popup.js

@@ -918,6 +918,17 @@ export default class Popup extends Com {
 		let $imgs = sb.map(page.components, (com, i) => {
 			if (com.type === 'image') return this.renderImageComponent(com, i)
 		})
+
+    // fix bug image only popup has white block
+		let formComponents = sb.filter(page.components, (com) => com.type !== 'image')
+		if (!formComponents.length) {
+			formcss.background = 'transparent'
+			formcss.padding_top = '0'
+			formcss.padding_bottom = '0'
+			formcss.padding_left = '0'
+			formcss.padding_right = '0'
+		}
+
 		return (
 			<div class='overlay' style={overlaystyle}>
 				<div class={animation} style={this.js2css(containercss)} onClick={(e) => e.stopPropagation()}>