photo message fix mui#2

Ubiatar · Nov 14, 2018 · fde0f30 · fde0f30
1 parent 9988640
commit fde0f30
Show file tree

Hide file tree

Showing 7 changed files with 100 additions and 70 deletions.
diff --git a/docs/src/pages/demos/messages/SimpleMessageList.js b/docs/src/pages/demos/messages/SimpleMessageList.js
@@ -35,9 +35,9 @@ function SimpleMessageList(props) {
       <div className={classes.container1}>
         <MessageList
           className='message-list'
-          lockable={true}
-          toBottomHeight={'100%'}
           avatar="/static/images/remy.jpg"
+          newMessagesIndex={7}
+          newMessagesComp={<div>nuovi messaggi</div>}
           dataSource={[
             {
               position: 'right',

diff --git a/docs/src/pages/demos/messages/SimplePhotoMessage.js b/docs/src/pages/demos/messages/SimplePhotoMessage.js
@@ -26,16 +26,51 @@ function SimplePhotoMessage(props) {
       toBottomHeight={'100%'}
       avatar="/static/images/remy.jpg"
       dataSource={[
+        {
+          position: 'right',
+          type: 'text',
+          text: 'Lorem ipsum dolor sit amet',
+          dateString: moment().format('h:mm'),
+          status: 'waiting',
+        },
+        {
+          position: 'left',
+          type: 'text',
+          text: 'Consectetur ',
+          date: new Date(),
+        },
         {
           position: 'right',
           type: 'photo',
           text: 'ok ok ok ',
           data: {
-          uri: "http://hdwpro.com/wp-content/uploads/2017/07/Widescreen-1080p-Image.jpg",
-          status: 'waiting'
+            uri: "https://corrieredelmezzogiorno.corriere.it/methode_image/2015/09/07/Campania/Foto/modella%20olandese.jpg?v=201509071110",
+            status: 'loading'
+          },
+          date: new Date()
         },
+        {
+          position: 'right',
+          type: 'photo',
+          text: 'ok ok ok ',
+          data: {
+            uri: "https://wallpapershome.com/images/wallpapers/marlen-alvarez-720x1280-portrait-4k-16305.jpg"
+          },
           date: new Date()
-        }
+        },
+        {
+          position: 'right',
+          type: 'text',
+          text: 'Lorem ipsum dolor sit amet',
+          dateString: moment().format('h:mm'),
+          status: 'waiting',
+        },
+        {
+          position: 'left',
+          type: 'text',
+          text: 'Consectetur ',
+          date: new Date(),
+        },
       ]}
     />
   );

diff --git a/packages/material-ui-icons/package.json b/packages/material-ui-icons/package.json
@@ -1,7 +1,7 @@
 {
   "name": "ubiatar-material-ui-icons",
   "author": "Material-UI Team",
-  "version": "1.0.0-beta.163",
+  "version": "1.0.0-beta.171",
   "description": "Material Design Svg Icons converted to Material-UI React components.",
   "main": "./build/index.js",
   "keywords": [

diff --git a/packages/material-ui/package.json b/packages/material-ui/package.json
@@ -1,7 +1,7 @@
 {
   "name": "ubiatar-material-ui",
   "author": "Material-UI Team",
-  "version": "1.0.0-beta.163",
+  "version": "1.0.0-beta.171",
   "description": "React components that implement Google's Material Design.",
   "keywords": [
     "react",

diff --git a/packages/material-ui/src/MessageBox/MessageBox.js b/packages/material-ui/src/MessageBox/MessageBox.js
@@ -62,7 +62,7 @@ export const styles = theme => {
     boxHasAfter: {
       borderBottomRightRadius: 4,
       borderBottomLeftRadius: 4,
-      marginBottom: 1,
+      marginBottom: 3,
     },
     boxHasBefore: {
       borderTopRightRadius: 4,

diff --git a/packages/material-ui/src/MessageBox/PhotoMessage/PhotoMessage.js b/packages/material-ui/src/MessageBox/PhotoMessage/PhotoMessage.js
@@ -11,8 +11,7 @@ export const styles = theme => {
       marginRight: -6,
       marginLeft: -6,
       padding: '6px 9px 8px 9px',
-      maxWidth: 300,
-      margin: 'auto'
+      margin: 'auto',
     },
     boxText: {
       padding: '5px 0px',
@@ -21,12 +20,10 @@ export const styles = theme => {
     },
     boxImg: {
       position: 'relative',
-      display: 'flex',
       overflow: 'hidden',
-      justifyContent: 'center',
-      flexDirection: 'column',
       borderRadius: 5,
-      height: 300,
+      maxHeight: 320,
+      maxWidth: 320,
     },
     boxImgBlock: {
       position: 'absolute',
@@ -37,17 +34,15 @@ export const styles = theme => {
       backgroundColor: 'rgba(0,0,0,0.5)',
       borderRadius: 5,
       display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
     },
     boxImgImg: {
-      height: '100%',
+      maxHeight: 320,
+      maxWidth: 320,
       userSelect: 'none',
-    },
-
-    boxImgBlockItem: {
-      margin: 'auto',
-      cursor: 'pointer',
-      width: 100,
-      height: 100,
+      borderRadius: 5,
+      display: 'block',
     },
     boxPhotoDownload: {
       color: '#efe',
@@ -110,27 +105,13 @@ export class PhotoMessage extends Component {
             onClick={this.props.onOpen}
             onLoad={this.props.onLoad}
           />
-          {this.props.data.status &&
-            !this.props.data.status.download && (
-              <div className={classNames(classes.boxImgBlock)}>
-                {!this.props.data.status.click && (
-                  <button
-                    onClick={this.props.onDownload}
-                    //className="rce-mbox-photo--img__block-item rce-mbox-photo--download">
-                    className={classNames([classes.boxImgBlockItem, classes.boxPhotoDownload])}
-                  >
-                    <FaCloudDownload />
-                  </button>
-                )}
-                {typeof this.props.data.status.loading === 'number' &&
-                  this.props.data.status.loading !== 0 && (
-                    <CircularProgress
-                      value={this.props.data.status.loading}
-                      className={classNames(classes.boxImgBlockItem)}
-                    />
-                  )}
-              </div>
-            )}
+          {this.props.data.status &&(
+            <div className={classNames(classes.boxImgBlock)}>
+              {this.props.data.status === 'loading' && (
+                <CircularProgress />
+              )}
+            </div>
+          )}
         </div>
         {this.props.text && <Typography className={classNames(classes.boxText)}>{this.props.text}</Typography>}
       </div>

diff --git a/packages/material-ui/src/MessageList/MessageList.js b/packages/material-ui/src/MessageList/MessageList.js
@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import React, { Component, Fragment } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import { KeyboardArrowDown } from 'ubiatar-material-ui-icons';
@@ -87,14 +87,16 @@ export class MessageList extends Component {
     const e = this.mlistRef;
     if (!e) return;
 
-    if (
-      this.props.toBottomHeight === '100%' ||
-      this.state.scrollBottom < this.props.toBottomHeight
-    ) {
-      // scroll to bottom
-      e.scrollTop = e.scrollHeight;
-    } else if (this.props.lockable === true) {
-      e.scrollTop = e.scrollHeight - e.offsetHeight - this.state.scrollBottom;
+    if (!this.props.disableAutoScroll) {
+      if (
+        this.props.toBottomHeight === '100%' ||
+        this.state.scrollBottom < this.props.toBottomHeight
+      ) {
+        // scroll to bottom
+        e.scrollTop = e.scrollHeight;
+      } else if (this.props.lockable === true) {
+        e.scrollTop = e.scrollHeight - e.offsetHeight - this.state.scrollBottom;
+      }
     }
   }
 
@@ -125,17 +127,14 @@ export class MessageList extends Component {
 
   onScroll(e) {
     const bottom = this.getBottom(e.target);
-    this.state.scrollBottom = bottom;
     if (this.props.toBottomHeight === '100%' || bottom > this.props.toBottomHeight) {
       if (this.state.downButton !== true) {
-        this.state.downButton = true;
         this.setState({
           downButton: true,
           scrollBottom: bottom,
         });
       }
     } else if (this.state.downButton !== false) {
-      this.state.downButton = false;
       this.setState({
         downButton: false,
         scrollBottom: bottom,
@@ -156,28 +155,36 @@ export class MessageList extends Component {
   }
 
   render() {
-    const { classes, dataSource, ...other } = this.props;
+    const { classes, dataSource, newMessagesComp, newMessagesIndex, ...other } = this.props;
     return (
       <div className={classNames([classes.container, this.props.className])}>
         <div
           ref={this.loadRef.bind(this)}
           onScroll={this.onScroll.bind(this)}
           className={classNames(classes.mList)}
         >
-          {dataSource.map((x, i) => (
-            <MessageBox
-              {...other}
-              key={x._id || i}
-              {...x}
-              hasAfter={dataSource[i + 1] && dataSource[i + 1].position === x.position}
-              hasBefore={dataSource[i - 1] && dataSource[i - 1].position === x.position}
-              onOpen={this.props.onOpen && (e => this.onOpen(x, i, e))}
-              onDownload={this.props.onDownload && (e => this.onDownload(x, i, e))}
-              onTitleClick={this.props.onDownload && (e => this.onTitleClick(x, i, e))}
-              onForwardClick={this.props.onForwardClick && (e => this.onForwardClick(x, i, e))}
-              onClick={this.props.onClick && (e => this.onClick(x, i, e))}
-            />
-          ))}
+          {
+            dataSource.map((x, i) => {
+              const hasNewMessageLabel = !!newMessagesIndex && newMessagesIndex === i
+              return (
+                <Fragment>
+                  {hasNewMessageLabel && newMessagesComp}
+                  <MessageBox
+                    {...other}
+                    key={x._id || i}
+                    {...x}
+                    hasAfter={dataSource[i + 1] && dataSource[i + 1].position === x.position}
+                    hasBefore={!hasNewMessageLabel && dataSource[i - 1] && dataSource[i - 1].position === x.position}
+                    onOpen={this.props.onOpen && (e => this.onOpen(x, i, e))}
+                    onDownload={this.props.onDownload && (e => this.onDownload(x, i, e))}
+                    onTitleClick={this.props.onDownload && (e => this.onTitleClick(x, i, e))}
+                    onForwardClick={this.props.onForwardClick && (e => this.onForwardClick(x, i, e))}
+                    onClick={this.props.onClick && (e => this.onClick(x, i, e))}
+                  />
+                </Fragment>
+              );
+            })
+          }
         </div>
         {this.props.downButton === true &&
           this.state.downButton &&
@@ -199,16 +206,23 @@ export class MessageList extends Component {
 MessageList.propTypes = {
   classes: PropTypes.object,
   className: PropTypes.string,
+  dataSource: PropTypes.array,
+  disableAutoScroll: PropTypes.bool,
+  newMessagesComp: PropTypes.element,
+  newMessagesIndex: PropTypes.number,
 };
 
 MessageList.defaultProps = {
+  newMessagesComp: null,
+  newMessagesIndex: null,
   onClick: null,
   onTitleClick: null,
   onForwardClick: null,
   onDownButtonClick: null,
   onOpen: null,
   onDownload: null,
   dataSource: [],
+  disableAutoScroll: false,
   lockable: false,
   toBottomHeight: 300,
   downButton: true,