Add param checks and pass params as prop

Author: dliuproduction

dev/src/index.html

@@ -18,7 +18,7 @@
       images: {
         dims: {
           width: null,
-          height: null,
+          height: 200
         }
       }
     }

src/components/Widget/components/Conversation/components/Messages/components/ImgReply/index.js

@@ -5,17 +5,20 @@ import './styles.scss';
 
 class ImgReply extends PureComponent {
   render() {
-    const message = this.props.message;
-    const title = message.get('title');
-    const image = message.get('image');
-    const params = message.get('params');
+    const { params: { images: { dims = {} } = {} } } = this.props;
+    const { width, height } = dims;
+    // Convert map to object
+    const message = [...this.props.message.entries()].reduce( (acc, e) => ( 
+      acc[e[0]] = e[1], 
+      acc), {});
+    const { title, image } = message;
     return (
       <div className="image">
         <b className="image-title">
           { title }
         </b>
-        <div className="image-details">
-          <img className="imageFrame" style={{ objectFit: "cover", width: params.dims.width, height: params.dims.height }} src={image} />
+        <div className="image-details" style={{ width, height }}>
+          <img className="image-frame" src={image} />
         </div>
       </div>
     );
@@ -26,4 +29,8 @@ ImgReply.propTypes = {
   message: PROP_TYPES.IMGREPLY
 };
 
+ImgReply.defaultProps = {
+  params: {}
+}
+
 export default ImgReply;

src/components/Widget/components/Conversation/components/Messages/components/ImgReply/styles.scss

@@ -1,8 +1,15 @@
 @import "variables.scss";
 @import "common.scss";
 
-.imageFrame {
-  object-fit: cover;
+.image-details {
+  object-fit: scale-down;
   max-width: 100%;
   margin-top: 10px;
 }
+
+.image-frame {
+  object-position: 0 0;
+  object-fit: cover;
+  width: 100%;
+  height: 100%;
+}

src/components/Widget/components/Conversation/components/Messages/index.js

@@ -20,11 +20,12 @@ class Messages extends Component {
   }
 
   getComponentToRender = (message, index, isLast) => {
+    const { params } = this.props;
     const ComponentToRender = message.get('component');
     if (message.get('type') === 'component') {
       return <ComponentToRender id={index} {...message.get('props')} isLast={isLast}/>;
     }
-    return <ComponentToRender id={index} message={message} isLast={isLast} />;
+    return <ComponentToRender id={index} params={params} message={message} isLast={isLast} />;
   };
 
   render() {

src/components/Widget/index.js

@@ -67,8 +67,7 @@ class Widget extends Component {
       const element = message.attachment.payload;
       this.props.dispatch(addImageSnippet({
         title: element.title,
-        image: element.src,
-        params: this.props.params.images
+        image: element.src
       }));
     }
   }

src/store/reducers/helper.js

@@ -47,7 +47,6 @@ export function createImageSnippet(image, sender) {
     component: Image,
     title: image.title,
     image: image.image,
-    params: image.params,
     sender,
     showAvatar: true
   });