85 lines
2.6 KiB
TypeScript
85 lines
2.6 KiB
TypeScript
import React, { FC, memo, useCallback } from '../../../lib/teact/teact';
|
|
|
|
import { CONTENT_TYPES_WITH_PREVIEW } from '../../../config';
|
|
import { IS_TOUCH_ENV } from '../../../util/environment';
|
|
import { openSystemFilesDialog } from '../../../util/systemFilesDialog';
|
|
import useMouseInside from '../../../hooks/useMouseInside';
|
|
import useLang from '../../../hooks/useLang';
|
|
|
|
import Menu from '../../ui/Menu';
|
|
import MenuItem from '../../ui/MenuItem';
|
|
|
|
import './AttachMenu.scss';
|
|
|
|
export type OwnProps = {
|
|
isOpen: boolean;
|
|
canAttachMedia: boolean;
|
|
canAttachPolls: boolean;
|
|
onFileSelect: (files: File[], isQuick: boolean) => void;
|
|
onPollCreate: () => void;
|
|
onClose: () => void;
|
|
};
|
|
|
|
const AttachMenu: FC<OwnProps> = ({
|
|
isOpen, canAttachMedia, canAttachPolls, onFileSelect, onPollCreate, onClose,
|
|
}) => {
|
|
const [handleMouseEnter, handleMouseLeave] = useMouseInside(isOpen, onClose);
|
|
|
|
const handleFileSelect = useCallback((e: Event, isQuick: boolean) => {
|
|
const { files } = e.target as HTMLInputElement;
|
|
|
|
if (files && files.length > 0) {
|
|
onFileSelect(Array.from(files), isQuick);
|
|
}
|
|
}, [onFileSelect]);
|
|
|
|
const handleQuickSelect = useCallback(() => {
|
|
openSystemFilesDialog(
|
|
Array.from(CONTENT_TYPES_WITH_PREVIEW).join(','),
|
|
(e) => handleFileSelect(e, true),
|
|
);
|
|
}, [handleFileSelect]);
|
|
|
|
const handleDocumentSelect = useCallback(() => {
|
|
openSystemFilesDialog('*', (e) => handleFileSelect(e, false));
|
|
}, [handleFileSelect]);
|
|
|
|
const lang = useLang();
|
|
|
|
return (
|
|
<Menu
|
|
isOpen={isOpen}
|
|
autoClose
|
|
positionX="right"
|
|
positionY="bottom"
|
|
onClose={onClose}
|
|
className="AttachMenu fluid"
|
|
onCloseAnimationEnd={onClose}
|
|
onMouseEnter={!IS_TOUCH_ENV ? handleMouseEnter : undefined}
|
|
onMouseLeave={!IS_TOUCH_ENV ? handleMouseLeave : undefined}
|
|
noCloseOnBackdrop={!IS_TOUCH_ENV}
|
|
>
|
|
{/*
|
|
** Using ternary operator here causes some attributes from first clause
|
|
** transferring to the fragment content in the second clause
|
|
*/}
|
|
{!canAttachMedia && (
|
|
<MenuItem className="media-disabled" disabled>Posting media content is not allowed in this group.</MenuItem>
|
|
)}
|
|
{canAttachMedia && (
|
|
<>
|
|
<MenuItem icon="photo" onClick={handleQuickSelect}>
|
|
{lang('AttachmentMenu.PhotoOrVideo')}
|
|
</MenuItem>
|
|
<MenuItem icon="document" onClick={handleDocumentSelect}>{lang('AttachDocument')}</MenuItem>
|
|
</>
|
|
)}
|
|
{canAttachPolls && (
|
|
<MenuItem icon="poll" onClick={onPollCreate}>{lang('Poll')}</MenuItem>
|
|
)}
|
|
</Menu>
|
|
);
|
|
};
|
|
|
|
export default memo(AttachMenu);
|