135 lines
4.1 KiB
TypeScript
135 lines
4.1 KiB
TypeScript
import type { FC } from '../../lib/teact/teact';
|
|
import React, { memo, useRef, useCallback } from '../../lib/teact/teact';
|
|
|
|
import { CHAT_HEIGHT_PX } from '../../config';
|
|
import useInfiniteScroll from '../../hooks/useInfiniteScroll';
|
|
import useLang from '../../hooks/useLang';
|
|
import useKeyboardListNavigation from '../../hooks/useKeyboardListNavigation';
|
|
import useInputFocusOnOpen from '../../hooks/useInputFocusOnOpen';
|
|
import { isUserId } from '../../global/helpers';
|
|
|
|
import Loading from '../ui/Loading';
|
|
import Modal from '../ui/Modal';
|
|
import InputText from '../ui/InputText';
|
|
import Button from '../ui/Button';
|
|
import InfiniteScroll from '../ui/InfiniteScroll';
|
|
import ListItem from '../ui/ListItem';
|
|
import GroupChatInfo from './GroupChatInfo';
|
|
import PrivateChatInfo from './PrivateChatInfo';
|
|
|
|
import './ChatOrUserPicker.scss';
|
|
|
|
export type OwnProps = {
|
|
currentUserId?: string;
|
|
chatOrUserIds: string[];
|
|
isOpen: boolean;
|
|
searchPlaceholder: string;
|
|
search: string;
|
|
loadMore?: NoneToVoidFunction;
|
|
onSearchChange: (search: string) => void;
|
|
onSelectChatOrUser: (chatOrUserId: string) => void;
|
|
onClose: NoneToVoidFunction;
|
|
onCloseAnimationEnd?: NoneToVoidFunction;
|
|
};
|
|
|
|
const ChatOrUserPicker: FC<OwnProps> = ({
|
|
isOpen,
|
|
currentUserId,
|
|
chatOrUserIds,
|
|
search,
|
|
searchPlaceholder,
|
|
loadMore,
|
|
onSearchChange,
|
|
onSelectChatOrUser,
|
|
onClose,
|
|
onCloseAnimationEnd,
|
|
}) => {
|
|
const lang = useLang();
|
|
const [viewportIds, getMore] = useInfiniteScroll(loadMore, chatOrUserIds, Boolean(search));
|
|
// eslint-disable-next-line no-null/no-null
|
|
const searchRef = useRef<HTMLInputElement>(null);
|
|
|
|
const resetSearch = useCallback(() => {
|
|
onSearchChange('');
|
|
}, [onSearchChange]);
|
|
useInputFocusOnOpen(searchRef, isOpen, resetSearch);
|
|
|
|
// eslint-disable-next-line no-null/no-null
|
|
const containerRef = useRef<HTMLDivElement>(null);
|
|
const handleSearchChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
|
|
onSearchChange(e.currentTarget.value);
|
|
}, [onSearchChange]);
|
|
const handleKeyDown = useKeyboardListNavigation(containerRef, isOpen, (index) => {
|
|
if (viewportIds && viewportIds.length > 0) {
|
|
onSelectChatOrUser(viewportIds[index === -1 ? 0 : index]);
|
|
}
|
|
}, '.ListItem-button', true);
|
|
|
|
const modalHeader = (
|
|
<div className="modal-header" dir={lang.isRtl ? 'rtl' : undefined}>
|
|
<Button
|
|
round
|
|
color="translucent"
|
|
size="smaller"
|
|
ariaLabel={lang('Close')}
|
|
onClick={onClose}
|
|
>
|
|
<i className="icon-close" />
|
|
</Button>
|
|
<InputText
|
|
ref={searchRef}
|
|
value={search}
|
|
onChange={handleSearchChange}
|
|
onKeyDown={handleKeyDown}
|
|
placeholder={searchPlaceholder}
|
|
/>
|
|
</div>
|
|
);
|
|
|
|
const viewportOffset = chatOrUserIds!.indexOf(viewportIds![0]);
|
|
|
|
return (
|
|
<Modal
|
|
isOpen={isOpen}
|
|
className="ChatOrUserPicker"
|
|
header={modalHeader}
|
|
onClose={onClose}
|
|
onCloseAnimationEnd={onCloseAnimationEnd}
|
|
>
|
|
{viewportIds?.length ? (
|
|
<InfiniteScroll
|
|
ref={containerRef}
|
|
className="picker-list custom-scroll"
|
|
items={viewportIds}
|
|
onLoadMore={getMore}
|
|
withAbsolutePositioning
|
|
maxHeight={chatOrUserIds!.length * CHAT_HEIGHT_PX}
|
|
onKeyDown={handleKeyDown}
|
|
>
|
|
{viewportIds.map((id, i) => (
|
|
<ListItem
|
|
key={id}
|
|
className="chat-item-clickable force-rounded-corners"
|
|
style={`top: ${(viewportOffset + i) * CHAT_HEIGHT_PX}px;`}
|
|
// eslint-disable-next-line react/jsx-no-bind
|
|
onClick={() => onSelectChatOrUser(id)}
|
|
>
|
|
{isUserId(id) ? (
|
|
<PrivateChatInfo status={id === currentUserId ? lang('SavedMessagesInfo') : undefined} userId={id} />
|
|
) : (
|
|
<GroupChatInfo chatId={id} />
|
|
)}
|
|
</ListItem>
|
|
))}
|
|
</InfiniteScroll>
|
|
) : viewportIds && !viewportIds.length ? (
|
|
<p className="no-results">{lang('lng_blocked_list_not_found')}</p>
|
|
) : (
|
|
<Loading />
|
|
)}
|
|
</Modal>
|
|
);
|
|
};
|
|
|
|
export default memo(ChatOrUserPicker);
|