Skip to content

Commit

Permalink
feat(message-list): loading more loader at the bottom
Browse files Browse the repository at this point in the history
Loading more loader can be placed at the bottom of the MessageList
New properties were added to MessageList:
- loadingMorePosition
- autoScrollToBottom
- onYReachEnd
  • Loading branch information
supersnager committed Mar 21, 2021
1 parent 9948992 commit e540cbc
Show file tree
Hide file tree
Showing 2 changed files with 40 additions and 6 deletions.
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -74,7 +74,7 @@
"watch": "chokidar 'src/**/*.*' -c 'yarn run build:esm'"
},
"dependencies": {
"@chatscope/chat-ui-kit-styles": "^1.1.0",
"@chatscope/chat-ui-kit-styles": "^1.2.0",
"@fortawesome/fontawesome-free": "^5.12.1",
"@fortawesome/fontawesome-svg-core": "^1.2.26",
"@fortawesome/free-solid-svg-icons": "^5.12.0",
Expand Down
44 changes: 39 additions & 5 deletions src/components/MessageList/MessageList.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -122,6 +122,10 @@ class MessageListInner extends React.Component {
}

componentDidUpdate(prevProps, prevState, snapshot) {
const {
props: { autoScrollToBottom },
} = this;

if (typeof snapshot !== "undefined") {
const list = this.containerRef.current;

Expand All @@ -141,7 +145,9 @@ class MessageListInner extends React.Component {
}

if (snapshot.sticky === true) {
this.scrollToEnd(this.props.scrollBehavior);
if (autoScrollToBottom === true) {
this.scrollToEnd(this.props.scrollBehavior);
}
this.preventScrollTop = true;
} else {
if (snapshot.clientHeight < this.lastClientHeight) {
Expand All @@ -153,8 +159,10 @@ class MessageListInner extends React.Component {
list.scrollHeight + 1 === sHeight ||
list.scrollHeight - 1 === sHeight
) {
this.scrollToEnd(this.props.scrollBehavior);
this.preventScrollTop = true;
if (autoScrollToBottom === true) {
this.scrollToEnd(this.props.scrollBehavior);
this.preventScrollTop = true;
}
} else {
this.preventScrollTop = false;
}
Expand Down Expand Up @@ -238,9 +246,12 @@ class MessageListInner extends React.Component {
typingIndicator,
loading,
loadingMore,
loadingMorePosition,
onYReachStart,
onYReachEnd,
className,
scrollBehavior, // Just to remove rest
autoScrollToBottom, // Just to remove rest
...rest
},
} = this;
Expand All @@ -252,7 +263,12 @@ class MessageListInner extends React.Component {
return (
<div {...rest} className={classNames(cName, className)}>
{loadingMore && (
<div className={`${cName}__loading-more`}>
<div
className={classNames(`${cName}__loading-more`, {
[`${cName}__loading-more--bottom`]:
loadingMorePosition === "bottom",
})}
>
<Loader />
</div>
)}
Expand All @@ -263,6 +279,7 @@ class MessageListInner extends React.Component {
)}
<PerfectScrollbar
onYReachStart={onYReachStart}
onYReachEnd={onYReachEnd}
className={`${cName}__scroll-wrapper`}
ref={this.scrollRef}
containerRef={(ref) => (this.containerRef.current = ref)}
Expand Down Expand Up @@ -316,6 +333,7 @@ MessageList.propTypes = {
* * &lt;Message /&gt;
* * &lt;MessageGroup /&gt;
* * &lt;MessageSeparator /&gt;
* * &lt;MessageListContent /&gt;
*/
children: allowedChildren([
Message,
Expand All @@ -333,12 +351,26 @@ MessageList.propTypes = {
/** Loading more flag for infinity scroll. */
loadingMore: PropTypes.bool,

/** Loading more loader position. */
loadingMorePosition: PropTypes.oneOf(["top", "bottom"]),

/**
* This is fired when the scrollbar reaches the beginning on the x axis.<br/>
* This is fired when the scrollbar reaches the beginning on the y axis.<br/>
* It can be used to load previous messages using the infinite scroll.
*/
onYReachStart: PropTypes.func,

/**
* This is fired when the scrollbar reaches the end on the y axis.<br/>
* It can be used to load next messages using the infinite scroll.
*/
onYReachEnd: PropTypes.func,

/**
* Auto scroll to bottom
*/
autoScrollToBottom: PropTypes.bool,

/**
* Scroll behavior
* https://developer.mozilla.org/en-US/docs/Web/API/ScrollToOptions/behavior
Expand All @@ -353,6 +385,8 @@ MessageList.defaultProps = {
typingIndicator: undefined,
loading: false,
loadingMore: false,
loadingMorePosition: "top",
autoScrollToBottom: true,
scrollBehavior: "auto",
};

Expand Down

0 comments on commit e540cbc

Please sign in to comment.