Merge pull request #50 from Detaysoft/next

Next version 0.8.0

README.md

@@ -168,6 +168,9 @@ import { MessageList } from 'react-chat-elements'
 | onDownload | none | function | message list item on download (file or photo) (message(object) is returned) |
 | onScroll | none | function | message list onScroll event |
 | onForwardClick | none | function | message list item onForwardClick event |
+| downButton | true | boolean | message list scroll to bottom button |
+| downButtonBadge | none | boolean | message list downButton badge content |
+| onDownButtonClick | none | function | message list onDownButtonClick |
 
 
 ## ChatList Component

example/App.js

@@ -221,6 +221,7 @@ export class App extends Component {
                     <MessageList
                         className='message-list'
                         lockable={true}
+                        downButtonBadge={10}
                         dataSource={this.state.messageList} />
 
                     <Input

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-chat-elements",
-  "version": "0.7.2",
+  "version": "0.8.0",
   "description": "Reactjs chat components",
   "author": "Avare Kodcu <[email protected]>",
   "main": "dist/main.js",

src/MessageList/MessageList.css

@@ -1,4 +1,49 @@
 .rce-container-mlist {
+    position: relative;
+    display: flex;
+}
+
+.rce-mlist {
     display: block;
     overflow: auto;
+    position: relative;
+    flex: 1;
+}
+
+.rce-mlist-down-button {
+    position: absolute;
+    right: 10px;
+    bottom: 15px;
+    width: 40px;
+    height: 40px;
+    background: #fff;
+    box-shadow: 0 1px 1px 0 rgba(0,0,0,0.05), 0 2px 5px 0 rgba(0,0,0,0.1);
+    border-radius: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    color: #333;
+    cursor: pointer;
+    transition: 200ms;
+}
+
+.rce-mlist-down-button:hover {
+    opacity: 0.7;
+}
+
+.rce-mlist-down-button--badge {
+    position: absolute;
+    right: -5px;
+    top: -5px;
+    background: red;
+    width: 20px;
+    height: 20px;
+    border-radius: 100%;
+    font-size: 12px;
+    display: flex;
+    text-align: center;
+    align-items: center;
+    justify-content: center;
+    color: #fff;
+    font-weight: 700;
 }

src/MessageList/MessageList.js

@@ -3,6 +3,8 @@ import './MessageList.css';
 
 import MessageBox from '../MessageBox/MessageBox';
 
+import FaChevronDown from 'react-icons/lib/fa/chevron-down';
+
 const classNames = require('classnames');
 
 export class MessageList extends Component {
@@ -11,16 +13,16 @@ export class MessageList extends Component {
         super(props);
         this.state = {
             scrollBottom: 0,
+            downButton: false,
         };
     }
 
-    componentDidUpdate() {
+    checkScroll() {
         var e = this.mlistRef;
         if (!e)
             return;
 
-        var bottom = this.getBottom(e);
-        if (this.props.toBottomHeight === '100%' || bottom < this.props.toBottomHeight) {
+        if (this.props.toBottomHeight === '100%' || this.state.scrollBottom < this.props.toBottomHeight) {
             // scroll to bottom
             e.scrollTop = e.scrollHeight;
         } else {
@@ -35,7 +37,7 @@ export class MessageList extends Component {
             return;
         this.setState({
             scrollBottom: this.getBottom(this.mlistRef),
-        });
+        }, this.checkScroll.bind(this));
     }
 
     getBottom(e) {
@@ -73,23 +75,74 @@ export class MessageList extends Component {
             this.props.cmpRef(ref);
     }
 
+    onScroll(e) {
+        var 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,
+                })
+            }
+        }
+    }
+
+    toBottom(e) {
+        if(!this.mlistRef)
+            return;
+        this.mlistRef.scrollTop = this.mlistRef.scrollHeight;
+        if (this.props.onDownButtonClick instanceof Function) {
+            this.props.onDownButtonClick(e);
+        }
+    }
+
     render() {
         return (
             <div
-                ref={this.loadRef.bind(this)}
-                onScroll={this.props.onScroll}
                 className={classNames(['rce-container-mlist', this.props.className])}>
+                <div
+                    ref={this.loadRef.bind(this)}
+                    onScroll={this.onScroll.bind(this)}
+                    className='rce-mlist'>
+                    {
+                        this.props.dataSource.map((x, i) => (
+                            <MessageBox
+                                key={i}
+                                {...x}
+                                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))}/>
+                        ))
+                    }
+                </div>
                 {
-                    this.props.dataSource.map((x, i) => (
-                        <MessageBox
-                            key={i}
-                            {...x}
-                            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))}/>
-                    ))
+                    this.props.downButton === true &&
+                    this.state.downButton &&
+                    this.props.toBottomHeight !== '100%' &&
+                    <div
+                        className='rce-mlist-down-button'
+                        onClick={this.toBottom.bind(this)}>
+                        <FaChevronDown/>
+                        {
+                            this.props.downButtonBadge &&
+                            <span
+                                className='rce-mlist-down-button--badge'>
+                                {this.props.downButtonBadge}
+                            </span>
+                        }
+                    </div>
                 }
             </div>
         );
@@ -100,11 +153,14 @@ MessageList.defaultProps = {
     onClick: null,
     onTitleClick: null,
     onForwardClick: null,
+    onDownButtonClick: null,
     onOpen: null,
     onDownload: null,
     dataSource: [],
     lockable: false,
     toBottomHeight: 300,
+    downButton: true,
+    downButtonBadge: null,
 };
 
 export default MessageList;

src/MessageList/__tests__/MessageList.js

@@ -10,4 +10,4 @@ describe('MessageList component', () => {
     expect(component.length).toBe(1);
     expect(toJson(component)).toMatchSnapshot();
   });
-});
+});

src/MessageList/__tests__/__snapshots__/MessageList.js.snap

@@ -3,5 +3,10 @@
 exports[`MessageList component should render without issues 1`] = `
 <div
   className="rce-container-mlist"
-/>
+>
+  <div
+    className="rce-mlist"
+    onScroll={[Function]}
+  />
+</div>
 `;