ztr/TelegramPWA
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Message List: Avoid redundant FAB animation

Browse Source
This commit is contained in:
Alexander Zinchuk 2021-05-15 02:46:10 +03:00
parent ba865e6a68
commit de502bc70b
3 changed files with 14 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/components/middle/MessageScroll.tsx
View File

@ -100,7 +100,7 @@ const MessageScroll: FC<OwnProps> = ({
if (target.className === 'backwards-trigger') { if (target.className === 'backwards-trigger') {
resetScroll(containerRef.current!); resetScroll(containerRef.current!);
loadMoreBackwards(); loadMoreBackwards();
} else if (target.className === 'forwards-trigger' && (target as HTMLDivElement).dataset.isActive) { } else if (target.className === 'forwards-trigger') {
resetScroll(containerRef.current!); resetScroll(containerRef.current!);
loadMoreForwards(); loadMoreForwards();
} }
@ -116,10 +116,8 @@ const MessageScroll: FC<OwnProps> = ({
} = useIntersectionObserver({ } = useIntersectionObserver({
rootRef: containerRef, rootRef: containerRef,
margin: FAB_THRESHOLD, margin: FAB_THRESHOLD,
}, ([{ target }]) => { }, () => {
if ((target as HTMLDivElement).dataset.isActive) { updateFabVisibility();
updateFabVisibility();
}
}); });
useOnIntersect(fabTriggerRef, observeIntersectionForFab); useOnIntersect(fabTriggerRef, observeIntersectionForFab);
@ -175,13 +173,11 @@ const MessageScroll: FC<OwnProps> = ({
ref={forwardsTriggerRef} ref={forwardsTriggerRef}
key="forwards-trigger" key="forwards-trigger"
className="forwards-trigger" className="forwards-trigger"
data-is-active={!isViewportNewest}
/> />
<div <div
ref={fabTriggerRef} ref={fabTriggerRef}
key="fab-trigger" key="fab-trigger"
className="fab-trigger" className="fab-trigger"
data-is-active={isViewportNewest}
/> />
</div> </div>
); );

9
src/components/middle/MiddleColumn.tsx
View File

@ -100,7 +100,7 @@ const MiddleColumn: FC<StateProps & DispatchProps> = ({
const { width: windowWidth } = useWindowSize(); const { width: windowWidth } = useWindowSize();
const [dropAreaState, setDropAreaState] = useState(DropAreaState.None); const [dropAreaState, setDropAreaState] = useState(DropAreaState.None);
const [isFabShown, setIsFabShown] = useState(false); const [isFabShown, setIsFabShown] = useState<boolean | undefined>();
const [isUnpinModalOpen, setIsUnpinModalOpen] = useState(false); const [isUnpinModalOpen, setIsUnpinModalOpen] = useState(false);
const hasTools = hasPinnedOrAudioMessage && ( const hasTools = hasPinnedOrAudioMessage && (
@ -119,6 +119,7 @@ const MiddleColumn: FC<StateProps & DispatchProps> = ({
const renderingMessageListType = usePrevDuringAnimation(messageListType, CLOSE_ANIMATION_DURATION); const renderingMessageListType = usePrevDuringAnimation(messageListType, CLOSE_ANIMATION_DURATION);
const renderingCanPost = usePrevDuringAnimation(canPost, CLOSE_ANIMATION_DURATION); const renderingCanPost = usePrevDuringAnimation(canPost, CLOSE_ANIMATION_DURATION);
const renderingHasTools = usePrevDuringAnimation(hasTools, CLOSE_ANIMATION_DURATION); const renderingHasTools = usePrevDuringAnimation(hasTools, CLOSE_ANIMATION_DURATION);
const renderingIsFabShown = usePrevDuringAnimation(isFabShown, CLOSE_ANIMATION_DURATION);
useEffect(() => { useEffect(() => {
return chatId return chatId
@ -130,6 +131,7 @@ const MiddleColumn: FC<StateProps & DispatchProps> = ({
useEffect(() => { useEffect(() => {
setDropAreaState(DropAreaState.None); setDropAreaState(DropAreaState.None);
setIsFabShown(undefined);
}, [chatId]); }, [chatId]);
useEffect(() => { useEffect(() => {
@ -282,7 +284,10 @@ const MiddleColumn: FC<StateProps & DispatchProps> = ({
)} )}
</Transition> </Transition>
<ScrollDownButton isShown={isFabShown} /> <ScrollDownButton
isShown={renderingIsFabShown}
canPost={renderingCanPost}
/>
</div> </div>
{IS_MOBILE_SCREEN && <MobileSearch isActive={Boolean(isMobileSearchActive)} />} {IS_MOBILE_SCREEN && <MobileSearch isActive={Boolean(isMobileSearchActive)} />}
</> </>

11
src/components/middle/ScrollDownButton.tsx
View File

@ -7,7 +7,6 @@ import { GlobalActions, MessageListType } from '../../global/types';
import { MAIN_THREAD_ID } from '../../api/types'; import { MAIN_THREAD_ID } from '../../api/types';
import { selectChat, selectCurrentMessageList } from '../../modules/selectors'; import { selectChat, selectCurrentMessageList } from '../../modules/selectors';
import { getCanPostInChat } from '../../modules/helpers';
import { formatIntegerCompact } from '../../util/textFormat'; import { formatIntegerCompact } from '../../util/textFormat';
import buildClassName from '../../util/buildClassName'; import buildClassName from '../../util/buildClassName';
import { pick } from '../../util/iteratees'; import { pick } from '../../util/iteratees';
@ -19,11 +18,11 @@ import './ScrollDownButton.scss';
type OwnProps = { type OwnProps = {
isShown: boolean; isShown: boolean;
canPost?: boolean;
}; };
type StateProps = { type StateProps = {
messageListType?: MessageListType; messageListType?: MessageListType;
canPost?: boolean;
unreadCount?: number; unreadCount?: number;
}; };
@ -33,8 +32,8 @@ const FOCUS_MARGIN = 20;
const ScrollDownButton: FC<OwnProps & StateProps & DispatchProps> = ({ const ScrollDownButton: FC<OwnProps & StateProps & DispatchProps> = ({
isShown, isShown,
messageListType,
canPost, canPost,
messageListType,
unreadCount, unreadCount,
focusLastMessage, focusLastMessage,
}) => { }) => {
@ -50,8 +49,8 @@ const ScrollDownButton: FC<OwnProps & StateProps & DispatchProps> = ({
focusLastMessage(); focusLastMessage();
} else { } else {
const messagesContainer = elementRef.current!.parentElement!.querySelector<HTMLDivElement>('.MessageList')!; const messagesContainer = elementRef.current!.parentElement!.querySelector<HTMLDivElement>('.MessageList')!;
const messsageElements = messagesContainer.querySelectorAll<HTMLDivElement>('.message-list-item'); const messageElements = messagesContainer.querySelectorAll<HTMLDivElement>('.message-list-item');
const lastMessageElement = messsageElements[messsageElements.length - 1]; const lastMessageElement = messageElements[messageElements.length - 1];
if (!lastMessageElement) { if (!lastMessageElement) {
return; return;
} }
@ -94,11 +93,9 @@ export default memo(withGlobal<OwnProps>(
const { chatId, threadId, type: messageListType } = currentMessageList; const { chatId, threadId, type: messageListType } = currentMessageList;
const chat = selectChat(global, chatId); const chat = selectChat(global, chatId);
const canPost = chat && getCanPostInChat(chat, threadId);
return { return {
messageListType, messageListType,
canPost,
unreadCount: chat && threadId === MAIN_THREAD_ID && messageListType === 'thread' ? chat.unreadCount : undefined, unreadCount: chat && threadId === MAIN_THREAD_ID && messageListType === 'thread' ? chat.unreadCount : undefined,
}; };
}, },