From fde0f3088412f63e75c5ca47905c079cb6a678d7 Mon Sep 17 00:00:00 2001 From: Antonio Date: Wed, 14 Nov 2018 12:05:48 +0100 Subject: [PATCH] photo message fix #2 --- .../pages/demos/messages/SimpleMessageList.js | 4 +- .../demos/messages/SimplePhotoMessage.js | 41 ++++++++++- packages/material-ui-icons/package.json | 2 +- packages/material-ui/package.json | 2 +- .../material-ui/src/MessageBox/MessageBox.js | 2 +- .../MessageBox/PhotoMessage/PhotoMessage.js | 51 +++++--------- .../src/MessageList/MessageList.js | 68 +++++++++++-------- 7 files changed, 100 insertions(+), 70 deletions(-) diff --git a/docs/src/pages/demos/messages/SimpleMessageList.js b/docs/src/pages/demos/messages/SimpleMessageList.js index d140e4b2e45cfb..a575b93640ab33 100644 --- a/docs/src/pages/demos/messages/SimpleMessageList.js +++ b/docs/src/pages/demos/messages/SimpleMessageList.js @@ -35,9 +35,9 @@ function SimpleMessageList(props) {
nuovi messaggi
} dataSource={[ { position: 'right', diff --git a/docs/src/pages/demos/messages/SimplePhotoMessage.js b/docs/src/pages/demos/messages/SimplePhotoMessage.js index b704f4faa3fba4..9fa4a30a4c576d 100644 --- 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 index 4f118e08b63680..1c143b93e38aca 100644 --- 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 index 5e0dd05cc7ff08..33f28bb6622535 100644 --- 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 index f2d3f9fd3164d1..2596d7d2b1e743 100644 --- 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 index 05c8820a786dd2..bff0e01fef483b 100644 --- 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 && ( -
- {!this.props.data.status.click && ( - - )} - {typeof this.props.data.status.loading === 'number' && - this.props.data.status.loading !== 0 && ( - - )} -
- )} + {this.props.data.status &&( +
+ {this.props.data.status === 'loading' && ( + + )} +
+ )} {this.props.text && {this.props.text}} diff --git a/packages/material-ui/src/MessageList/MessageList.js b/packages/material-ui/src/MessageList/MessageList.js index 621499e1152aab..4f66fb6be89566 100644 --- 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,7 +155,7 @@ export class MessageList extends Component { } render() { - const { classes, dataSource, ...other } = this.props; + const { classes, dataSource, newMessagesComp, newMessagesIndex, ...other } = this.props; return (
- {dataSource.map((x, i) => ( - 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 ( + + {hasNewMessageLabel && newMessagesComp} + 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))} + /> + + ); + }) + }
{this.props.downButton === true && this.state.downButton && @@ -199,9 +206,15 @@ 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, @@ -209,6 +222,7 @@ MessageList.defaultProps = { onOpen: null, onDownload: null, dataSource: [], + disableAutoScroll: false, lockable: false, toBottomHeight: 300, downButton: true,