317 lines
10 KiB
TypeScript
317 lines
10 KiB
TypeScript
import { useAtomValue } from 'jotai';
|
|
import React, { ChangeEventHandler, useCallback, useMemo, useRef, useState } from 'react';
|
|
import { useVirtualizer } from '@tanstack/react-virtual';
|
|
import FocusTrap from 'focus-trap-react';
|
|
import {
|
|
Avatar,
|
|
Box,
|
|
Button,
|
|
Header,
|
|
Icon,
|
|
IconButton,
|
|
Icons,
|
|
Input,
|
|
MenuItem,
|
|
Modal,
|
|
Overlay,
|
|
OverlayBackdrop,
|
|
OverlayCenter,
|
|
Scroll,
|
|
Text,
|
|
config,
|
|
} from 'folds';
|
|
import { useMatrixClient } from '../hooks/useMatrixClient';
|
|
import { useAllJoinedRoomsSet, useGetRoom } from '../hooks/useGetRoom';
|
|
import { allRoomsAtom } from '../state/room-list/roomList';
|
|
import { mDirectAtom } from '../state/mDirectList';
|
|
import { useDirects, useRooms } from '../state/hooks/roomList';
|
|
import { getDirectRoomAvatarUrl, getRoomAvatarUrl } from '../utils/room';
|
|
import { RoomAvatar, RoomIcon } from '../components/room-avatar';
|
|
import { nameInitials } from '../utils/common';
|
|
import { useMediaAuthentication } from '../hooks/useMediaAuthentication';
|
|
import { factoryRoomIdByActivity } from '../utils/sort';
|
|
import {
|
|
SearchItemStrGetter,
|
|
useAsyncSearch,
|
|
UseAsyncSearchOptions,
|
|
} from '../hooks/useAsyncSearch';
|
|
import { VirtualTile } from '../components/virtualizer';
|
|
import { AndroidSharePayload } from '../utils/androidShare';
|
|
import { stopPropagation } from '../utils/keyboard';
|
|
|
|
const SEARCH_OPTS: UseAsyncSearchOptions = {
|
|
limit: 200,
|
|
matchOptions: {
|
|
contain: true,
|
|
},
|
|
};
|
|
|
|
type ShareRoomPickerProps = {
|
|
/** The pending share payload to display a preview of. */
|
|
share: AndroidSharePayload;
|
|
/** Called when the user picks a room. */
|
|
onPick: (roomId: string) => void;
|
|
/** Called when the user dismisses without picking. */
|
|
onDismiss: () => void;
|
|
};
|
|
|
|
/**
|
|
* Full-screen modal that lets the user pick a room to send
|
|
* an incoming Android share intent into.
|
|
*/
|
|
export function ShareRoomPicker({ share, onPick, onDismiss }: ShareRoomPickerProps) {
|
|
const mx = useMatrixClient();
|
|
const useAuthentication = useMediaAuthentication();
|
|
const scrollRef = useRef<HTMLDivElement>(null);
|
|
const [confirmRoomId, setConfirmRoomId] = useState<string | null>(null);
|
|
|
|
const mDirects = useAtomValue(mDirectAtom);
|
|
const allRoomsSet = useAllJoinedRoomsSet();
|
|
const getRoom = useGetRoom(allRoomsSet);
|
|
const rooms = useRooms(mx, allRoomsAtom, mDirects);
|
|
const directs = useDirects(mx, allRoomsAtom, mDirects);
|
|
|
|
const allItems = useMemo(
|
|
() => [...rooms, ...directs].sort(factoryRoomIdByActivity(mx)),
|
|
[mx, rooms, directs]
|
|
);
|
|
|
|
const getRoomNameStr: SearchItemStrGetter<string> = useCallback(
|
|
(rId) => getRoom(rId)?.name ?? rId,
|
|
[getRoom]
|
|
);
|
|
|
|
const [searchResult, searchRoom, resetSearch] = useAsyncSearch(
|
|
allItems,
|
|
getRoomNameStr,
|
|
SEARCH_OPTS
|
|
);
|
|
|
|
const items = searchResult ? searchResult.items : allItems;
|
|
|
|
const virtualizer = useVirtualizer({
|
|
count: items.length,
|
|
getScrollElement: () => scrollRef.current,
|
|
estimateSize: () => 48,
|
|
overscan: 8,
|
|
});
|
|
const vItems = virtualizer.getVirtualItems();
|
|
|
|
const handleSearchChange: ChangeEventHandler<HTMLInputElement> = (evt) => {
|
|
const value = evt.currentTarget.value.trim();
|
|
if (!value) {
|
|
resetSearch();
|
|
return;
|
|
}
|
|
searchRoom(value);
|
|
};
|
|
|
|
const handleRoomClick: React.MouseEventHandler<HTMLButtonElement> = (evt) => {
|
|
const roomId = evt.currentTarget.getAttribute('data-room-id');
|
|
if (roomId) {
|
|
setConfirmRoomId(roomId);
|
|
}
|
|
};
|
|
|
|
const handleConfirm = useCallback(() => {
|
|
if (confirmRoomId) {
|
|
onPick(confirmRoomId);
|
|
}
|
|
}, [confirmRoomId, onPick]);
|
|
|
|
const handleCancelConfirm = useCallback(() => {
|
|
setConfirmRoomId(null);
|
|
}, []);
|
|
|
|
const previewText = share.text?.slice(0, 80) ?? share.subject?.slice(0, 80);
|
|
const fileCount = share.files.length;
|
|
|
|
return (
|
|
<>
|
|
<Overlay open>
|
|
<FocusTrap
|
|
focusTrapOptions={{
|
|
initialFocus: false,
|
|
clickOutsideDeactivates: true,
|
|
onDeactivate: onDismiss,
|
|
escapeDeactivates: stopPropagation,
|
|
}}
|
|
>
|
|
<Box
|
|
grow="Yes"
|
|
direction="Column"
|
|
style={{
|
|
position: 'fixed',
|
|
inset: 0,
|
|
zIndex: 999,
|
|
backgroundColor: '#1a1d23',
|
|
paddingTop: '60px',
|
|
}}
|
|
>
|
|
<Header
|
|
size="500"
|
|
style={{ padding: config.space.S400 }}
|
|
>
|
|
<Box grow="Yes" direction="Column" gap="100" style={{ minWidth: 0, maxWidth: '80%' }}>
|
|
<Text size="H4">Share to Room</Text>
|
|
{(previewText || fileCount > 0) && (
|
|
<Text size="T200" priority="300" style={{ opacity: 0.7, wordBreak: 'break-word', whiteSpace: 'normal' }}>
|
|
{previewText
|
|
? `"${previewText}${(share.text?.length ?? 0) > 80 ? '…' : ''}"`
|
|
: `${fileCount} file${fileCount !== 1 ? 's' : ''}`}
|
|
</Text>
|
|
)}
|
|
</Box>
|
|
<Box shrink="No">
|
|
<IconButton size="300" radii="300" onClick={onDismiss}>
|
|
<Icon src={Icons.Cross} />
|
|
</IconButton>
|
|
</Box>
|
|
</Header>
|
|
|
|
<Box
|
|
style={{
|
|
padding: config.space.S200,
|
|
paddingTop: config.space.S300,
|
|
}}
|
|
>
|
|
<Input
|
|
onChange={handleSearchChange}
|
|
before={<Icon size="200" src={Icons.Search} />}
|
|
placeholder="Search rooms…"
|
|
size="400"
|
|
variant="Background"
|
|
outlined
|
|
autoFocus
|
|
style={{ width: '100%' }}
|
|
/>
|
|
</Box>
|
|
|
|
<Scroll ref={scrollRef} size="300" hideTrack style={{ flex: 1, minHeight: 0 }}>
|
|
<Box style={{ padding: config.space.S300 }} direction="Column">
|
|
{vItems.length === 0 && (
|
|
<Box
|
|
style={{ padding: `${config.space.S700} 0` }}
|
|
alignItems="Center"
|
|
justifyContent="Center"
|
|
direction="Column"
|
|
gap="100"
|
|
>
|
|
<Text size="H6" align="Center">
|
|
{searchResult ? 'No Match Found' : 'No Rooms'}
|
|
</Text>
|
|
<Text size="T200" align="Center" priority="300">
|
|
{searchResult
|
|
? `No rooms found for "${searchResult.query}".`
|
|
: 'You have no rooms to share into.'}
|
|
</Text>
|
|
</Box>
|
|
)}
|
|
<Box style={{ position: 'relative', height: virtualizer.getTotalSize() }}>
|
|
{vItems.map((vItem) => {
|
|
const roomId = items[vItem.index];
|
|
const room = getRoom(roomId);
|
|
if (!room) return null;
|
|
const isDm = mDirects.has(roomId);
|
|
|
|
const avatarSrc = isDm
|
|
? getDirectRoomAvatarUrl(mx, room, 96, useAuthentication)
|
|
: getRoomAvatarUrl(mx, room, 96, useAuthentication);
|
|
|
|
return (
|
|
<VirtualTile
|
|
virtualItem={vItem}
|
|
style={{ paddingBottom: config.space.S100 }}
|
|
ref={virtualizer.measureElement}
|
|
key={roomId}
|
|
>
|
|
<MenuItem
|
|
data-room-id={roomId}
|
|
onClick={handleRoomClick}
|
|
variant="Surface"
|
|
size="400"
|
|
radii="400"
|
|
before={
|
|
<Avatar size="300" radii={isDm ? '400' : '300'}>
|
|
{avatarSrc ? (
|
|
<RoomAvatar
|
|
roomId={roomId}
|
|
src={avatarSrc}
|
|
alt={room.name}
|
|
renderFallback={() => (
|
|
<Text as="span" size="H6">
|
|
{nameInitials(room.name)}
|
|
</Text>
|
|
)}
|
|
/>
|
|
) : (
|
|
<RoomIcon room={room} size="200" filled />
|
|
)}
|
|
</Avatar>
|
|
}
|
|
>
|
|
<Box grow="Yes" direction="Column">
|
|
<Text size="B400" truncate>
|
|
{room.name}
|
|
</Text>
|
|
</Box>
|
|
</MenuItem>
|
|
</VirtualTile>
|
|
);
|
|
})}
|
|
</Box>
|
|
</Box>
|
|
</Scroll>
|
|
</Box>
|
|
</FocusTrap>
|
|
</Overlay>
|
|
|
|
{confirmRoomId && (() => {
|
|
const room = getRoom(confirmRoomId);
|
|
const roomName = room?.name ?? confirmRoomId;
|
|
const isDm = mDirects.has(confirmRoomId);
|
|
return (
|
|
<Overlay open backdrop={<OverlayBackdrop />}>
|
|
<OverlayCenter>
|
|
<FocusTrap
|
|
focusTrapOptions={{
|
|
initialFocus: false,
|
|
onDeactivate: handleCancelConfirm,
|
|
escapeDeactivates: stopPropagation,
|
|
}}
|
|
>
|
|
<Modal size="300" style={{ maxWidth: '280px', maxHeight: 'fit-content' }}>
|
|
<Box direction="Column" gap="100" style={{ padding: config.space.S300 }}>
|
|
<Box direction="Column" gap="100">
|
|
<Text size="H4">Share to {isDm ? 'Person' : 'Room'}?</Text>
|
|
<Text size="T300" priority="300">
|
|
Send to <strong>{roomName}</strong>?
|
|
</Text>
|
|
</Box>
|
|
<Box gap="200" justifyContent="End">
|
|
<Button
|
|
onClick={handleCancelConfirm}
|
|
variant="Secondary"
|
|
size="400"
|
|
>
|
|
<Text size="B400">Cancel</Text>
|
|
</Button>
|
|
<Button
|
|
onClick={handleConfirm}
|
|
variant="Primary"
|
|
size="400"
|
|
>
|
|
<Text size="B400">Share</Text>
|
|
</Button>
|
|
</Box>
|
|
</Box>
|
|
</Modal>
|
|
</FocusTrap>
|
|
</OverlayCenter>
|
|
</Overlay>
|
|
);
|
|
})()}
|
|
</>
|
|
);
|
|
}
|