mirror of
https://github.com/cinnyapp/cinny.git
synced 2025-02-13 17:10:06 +00:00
add option to drop typing status
This commit is contained in:
parent
22f45fd505
commit
8a57dfc83b
src/app/organisms/room
|
@ -22,3 +22,6 @@ export const RoomViewTyping = style([
|
||||||
animation: `${SlideUpAnime} 100ms ease-in-out`,
|
animation: `${SlideUpAnime} 100ms ease-in-out`,
|
||||||
},
|
},
|
||||||
]);
|
]);
|
||||||
|
export const TypingText = style({
|
||||||
|
flexGrow: 1,
|
||||||
|
});
|
||||||
|
|
|
@ -1,8 +1,8 @@
|
||||||
import React, { useMemo } from 'react';
|
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 { Room } from 'matrix-js-sdk';
|
||||||
import classNames from 'classnames';
|
import classNames from 'classnames';
|
||||||
import { useAtomValue } from 'jotai';
|
import { useAtomValue, useSetAtom } from 'jotai';
|
||||||
import { roomIdToTypingMembersAtom, selectRoomTypingMembersAtom } from '../../state/typingMembers';
|
import { roomIdToTypingMembersAtom, selectRoomTypingMembersAtom } from '../../state/typingMembers';
|
||||||
import { TypingIndicator } from '../../components/typing-indicator';
|
import { TypingIndicator } from '../../components/typing-indicator';
|
||||||
import { getMemberDisplayName } from '../../utils/room';
|
import { getMemberDisplayName } from '../../utils/room';
|
||||||
|
@ -15,6 +15,7 @@ export type RoomViewTypingProps = {
|
||||||
};
|
};
|
||||||
export const RoomViewTyping = as<'div', RoomViewTypingProps>(
|
export const RoomViewTyping = as<'div', RoomViewTypingProps>(
|
||||||
({ className, room, ...props }, ref) => {
|
({ className, room, ...props }, ref) => {
|
||||||
|
const setTypingMembers = useSetAtom(roomIdToTypingMembersAtom);
|
||||||
const mx = useMatrixClient();
|
const mx = useMatrixClient();
|
||||||
const typingMembers = useAtomValue(
|
const typingMembers = useAtomValue(
|
||||||
useMemo(() => selectRoomTypingMembersAtom(room.roomId, roomIdToTypingMembersAtom), [room])
|
useMemo(() => selectRoomTypingMembersAtom(room.roomId, roomIdToTypingMembersAtom), [room])
|
||||||
|
@ -29,6 +30,18 @@ export const RoomViewTyping = as<'div', RoomViewTypingProps>(
|
||||||
return null;
|
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 (
|
return (
|
||||||
<Box
|
<Box
|
||||||
className={classNames(css.RoomViewTyping, className)}
|
className={classNames(css.RoomViewTyping, className)}
|
||||||
|
@ -38,7 +51,7 @@ export const RoomViewTyping = as<'div', RoomViewTypingProps>(
|
||||||
ref={ref}
|
ref={ref}
|
||||||
>
|
>
|
||||||
<TypingIndicator />
|
<TypingIndicator />
|
||||||
<Text size="T300" truncate>
|
<Text className={css.TypingText} size="T300" truncate>
|
||||||
{typingNames.length === 1 && (
|
{typingNames.length === 1 && (
|
||||||
<>
|
<>
|
||||||
<b>{typingNames[0]}</b>
|
<b>{typingNames[0]}</b>
|
||||||
|
@ -96,6 +109,9 @@ export const RoomViewTyping = as<'div', RoomViewTypingProps>(
|
||||||
</>
|
</>
|
||||||
)}
|
)}
|
||||||
</Text>
|
</Text>
|
||||||
|
<IconButton title="Drop Typing Status" size="300" radii="Pill" onClick={handleDropAll}>
|
||||||
|
<Icon size="50" src={Icons.Cross} />
|
||||||
|
</IconButton>
|
||||||
</Box>
|
</Box>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in a new issue