From 8a57dfc83b7ec2f65969c403007e0095c4daf1de Mon Sep 17 00:00:00 2001 From: Ajay Bura <32841439+ajbura@users.noreply.github.com> Date: Sat, 7 Oct 2023 11:04:45 +0530 Subject: [PATCH] add option to drop typing status --- src/app/organisms/room/RoomViewTyping.css.ts | 3 +++ src/app/organisms/room/RoomViewTyping.tsx | 22 +++++++++++++++++--- 2 files changed, 22 insertions(+), 3 deletions(-) diff --git a/src/app/organisms/room/RoomViewTyping.css.ts b/src/app/organisms/room/RoomViewTyping.css.ts index ef07316f..9def1aee 100644 --- a/src/app/organisms/room/RoomViewTyping.css.ts +++ b/src/app/organisms/room/RoomViewTyping.css.ts @@ -22,3 +22,6 @@ export const RoomViewTyping = style([ animation: `${SlideUpAnime} 100ms ease-in-out`, }, ]); +export const TypingText = style({ + flexGrow: 1, +}); diff --git a/src/app/organisms/room/RoomViewTyping.tsx b/src/app/organisms/room/RoomViewTyping.tsx index c7c15ea5..c393f3ae 100644 --- a/src/app/organisms/room/RoomViewTyping.tsx +++ b/src/app/organisms/room/RoomViewTyping.tsx @@ -1,8 +1,8 @@ import React, { useMemo } from 'react'; -import { Box, Text, as } from 'folds'; +import { Box, Icon, IconButton, Icons, Text, as } from 'folds'; import { Room } from 'matrix-js-sdk'; import classNames from 'classnames'; -import { useAtomValue } from 'jotai'; +import { useAtomValue, useSetAtom } from 'jotai'; import { roomIdToTypingMembersAtom, selectRoomTypingMembersAtom } from '../../state/typingMembers'; import { TypingIndicator } from '../../components/typing-indicator'; import { getMemberDisplayName } from '../../utils/room'; @@ -15,6 +15,7 @@ export type RoomViewTypingProps = { }; export const RoomViewTyping = as<'div', RoomViewTypingProps>( ({ className, room, ...props }, ref) => { + const setTypingMembers = useSetAtom(roomIdToTypingMembersAtom); const mx = useMatrixClient(); const typingMembers = useAtomValue( useMemo(() => selectRoomTypingMembersAtom(room.roomId, roomIdToTypingMembersAtom), [room]) @@ -29,6 +30,18 @@ export const RoomViewTyping = as<'div', RoomViewTypingProps>( return null; } + const handleDropAll = () => { + // some homeserver does not timeout typing status + // we have given option so user can drop their typing status + typingMembers.forEach((member) => + setTypingMembers({ + type: 'DELETE', + roomId: room.roomId, + member, + }) + ); + }; + return ( <Box className={classNames(css.RoomViewTyping, className)} @@ -38,7 +51,7 @@ export const RoomViewTyping = as<'div', RoomViewTypingProps>( ref={ref} > <TypingIndicator /> - <Text size="T300" truncate> + <Text className={css.TypingText} size="T300" truncate> {typingNames.length === 1 && ( <> <b>{typingNames[0]}</b> @@ -96,6 +109,9 @@ export const RoomViewTyping = as<'div', RoomViewTypingProps>( </> )} </Text> + <IconButton title="Drop Typing Status" size="300" radii="Pill" onClick={handleDropAll}> + <Icon size="50" src={Icons.Cross} /> + </IconButton> </Box> ); }