This commit is contained in:
Rafael 2022-02-07 17:37:22 -03:00 committed by Thomas Zarebczan
parent 59a06dbc3b
commit ba5d96bb71
2 changed files with 26 additions and 17 deletions

View file

@ -78,17 +78,10 @@ export class FormField extends React.PureComponent<Props, State> {
}
componentDidMount() {
const { autoFocus } = this.props;
const { autoFocus, showSelectors, slimInput } = this.props;
const input = this.input.current;
if (input && autoFocus) input.focus();
}
componentDidUpdate() {
const { showSelectors, slimInput } = this.props;
const input = this.input.current;
// Opened selectors (emoji/sticker) -> blur input and hide keyboard
if (slimInput && showSelectors && showSelectors.open && input) input.blur();
}
@ -267,16 +260,17 @@ export class FormField extends React.PureComponent<Props, State> {
</div>
);
case 'textarea':
const closeSelector =
setShowSelectors && showSelectors
? () => setShowSelectors({ tab: showSelectors.tab || undefined, open: false })
: () => {};
return (
<fieldset-section>
<TextareaWrapper
isDrawerOpen={Boolean(this.state.drawerOpen)}
toggleDrawer={() => this.setState({ drawerOpen: !this.state.drawerOpen })}
closeSelector={
setShowSelectors && showSelectors
? () => setShowSelectors({ tab: showSelectors.tab || undefined, open: false })
: () => {}
}
closeSelector={closeSelector}
commentSelectorsProps={commentSelectorsProps}
showSelectors={Boolean(showSelectors && showSelectors.open)}
slimInput={slimInput}
@ -319,6 +313,7 @@ export class FormField extends React.PureComponent<Props, State> {
handleSubmit={() => {
if (handleSubmit) handleSubmit();
if (slimInput) this.setState({ drawerOpen: false });
closeSelector();
}}
claimIsMine={commentSelectorsProps && commentSelectorsProps.claimIsMine}
{...inputProps}

View file

@ -73,6 +73,7 @@ export default function LivestreamChatLayout(props: Props) {
const discussionElement = isMobile ? mobileElement : webElement;
const allCommentsElem = document.querySelectorAll('.livestream__comment');
const lastCommentElem = allCommentsElem && allCommentsElem[allCommentsElem.length - 1];
const secondLastCommentElem = allCommentsElem && allCommentsElem[allCommentsElem.length - 2];
const [viewMode, setViewMode] = React.useState(VIEW_MODES.CHAT);
const [scrollPos, setScrollPos] = React.useState(0);
@ -155,7 +156,12 @@ export default function LivestreamChatLayout(props: Props) {
}
if (isMobile) {
const pos = lastCommentElem && bottomScrollTop - lastCommentElem.getBoundingClientRect().height;
const pos =
lastCommentElem &&
secondLastCommentElem &&
bottomScrollTop -
lastCommentElem.getBoundingClientRect().height -
secondLastCommentElem.getBoundingClientRect().height;
if (!minScrollHeight || minScrollHeight !== pos) {
setMinScrollHeight(pos);
@ -168,7 +174,15 @@ export default function LivestreamChatLayout(props: Props) {
discussionElement.addEventListener('scroll', handleScroll);
return () => discussionElement.removeEventListener('scroll', handleScroll);
}
}, [bottomScrollTop, discussionElement, isMobile, lastCommentElem, minScrollHeight, scrollPos]);
}, [
bottomScrollTop,
discussionElement,
isMobile,
lastCommentElem,
secondLastCommentElem,
minScrollHeight,
scrollPos,
]);
// Retain scrollPos=0 when receiving new messages.
React.useEffect(() => {
@ -260,7 +274,7 @@ export default function LivestreamChatLayout(props: Props) {
</div>
);
}
console.log(hasRecentComments);
return (
<div className={classnames('card livestream__chat', { 'livestream__chat--popout': isPopoutWindow })}>
{!hideHeader && (
@ -353,7 +367,7 @@ export default function LivestreamChatLayout(props: Props) {
uri={uri}
commentsToDisplay={commentsToDisplay}
isMobile={isMobile}
restoreScrollPos={!hasRecentComments && restoreScrollPos}
restoreScrollPos={!hasRecentComments && isMobile && restoreScrollPos}
/>
)}