Add dropzone for attachment, paste attachment from clipboard
Maksim Eltyshev
6 years ago
parent
e1364925ed
commit
246eb17249
Binary file not shown.
|
Before Width: | Height: | Size: 17 KiB After Width: | Height: | Size: 103 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3.3 KiB After Width: | Height: | Size: 2.6 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 5.4 KiB After Width: | Height: | Size: 5.2 KiB |
@ -0,0 +1,23 @@
|
|||||||
|
import React, { useCallback } from 'react';
|
||||||
|
import PropTypes from 'prop-types';
|
||||||
|
import { FilePicker } from '../../lib/custom-ui';
|
||||||
|
|
||||||
|
const AddAttachment = React.memo(({ children, onCreate }) => {
|
||||||
|
const handleFileSelect = useCallback(
|
||||||
|
(file) => {
|
||||||
|
onCreate({
|
||||||
|
file,
|
||||||
|
});
|
||||||
|
},
|
||||||
|
[onCreate],
|
||||||
|
);
|
||||||
|
|
||||||
|
return <FilePicker onSelect={handleFileSelect}>{children}</FilePicker>;
|
||||||
|
});
|
||||||
|
|
||||||
|
AddAttachment.propTypes = {
|
||||||
|
children: PropTypes.element.isRequired,
|
||||||
|
onCreate: PropTypes.func.isRequired,
|
||||||
|
};
|
||||||
|
|
||||||
|
export default AddAttachment;
|
||||||
@ -0,0 +1,108 @@
|
|||||||
|
import React, { useCallback, useEffect } from 'react';
|
||||||
|
import PropTypes from 'prop-types';
|
||||||
|
import { useDropzone } from 'react-dropzone';
|
||||||
|
import { useTranslation } from 'react-i18next';
|
||||||
|
import { closePopup } from '../../../lib/popup';
|
||||||
|
|
||||||
|
import { useModal } from '../../../hooks';
|
||||||
|
import AddTextFileModal from './AddTextFileModal';
|
||||||
|
|
||||||
|
import styles from './AddAttachmentZone.module.css';
|
||||||
|
|
||||||
|
const AddAttachmentZone = React.memo(({ children, onCreate }) => {
|
||||||
|
const [t] = useTranslation();
|
||||||
|
const [modal, openModal, handleModalClose] = useModal();
|
||||||
|
|
||||||
|
const submit = useCallback(
|
||||||
|
(file) => {
|
||||||
|
onCreate({
|
||||||
|
file,
|
||||||
|
});
|
||||||
|
},
|
||||||
|
[onCreate],
|
||||||
|
);
|
||||||
|
|
||||||
|
const handleDropAccepted = useCallback(
|
||||||
|
(files) => {
|
||||||
|
submit(files[0]);
|
||||||
|
},
|
||||||
|
[submit],
|
||||||
|
);
|
||||||
|
|
||||||
|
const { getRootProps, getInputProps, isDragActive } = useDropzone({
|
||||||
|
multiple: false,
|
||||||
|
noClick: true,
|
||||||
|
noKeyboard: true,
|
||||||
|
onDropAccepted: handleDropAccepted,
|
||||||
|
});
|
||||||
|
|
||||||
|
const handleFileCreate = useCallback(
|
||||||
|
(file) => {
|
||||||
|
submit(file);
|
||||||
|
},
|
||||||
|
[submit],
|
||||||
|
);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const handlePaste = (event) => {
|
||||||
|
const item = event.clipboardData && event.clipboardData.items[0];
|
||||||
|
|
||||||
|
if (!item) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (item.kind === 'file') {
|
||||||
|
submit(item.getAsFile());
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (
|
||||||
|
['input', 'textarea'].includes(event.target.tagName.toLowerCase()) &&
|
||||||
|
event.target === document.activeElement
|
||||||
|
) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
closePopup();
|
||||||
|
event.preventDefault();
|
||||||
|
|
||||||
|
item.getAsString((content) => {
|
||||||
|
openModal({
|
||||||
|
content,
|
||||||
|
});
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
window.addEventListener('paste', handlePaste);
|
||||||
|
|
||||||
|
return () => {
|
||||||
|
window.removeEventListener('paste', handlePaste);
|
||||||
|
};
|
||||||
|
}, [openModal, submit]);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
{/* eslint-disable-next-line react/jsx-props-no-spreading */}
|
||||||
|
<div {...getRootProps()}>
|
||||||
|
{isDragActive && <div className={styles.dropzone}>{t('common.dropFileToUpload')}</div>}
|
||||||
|
{children}
|
||||||
|
</div>
|
||||||
|
{modal && (
|
||||||
|
<AddTextFileModal
|
||||||
|
content={modal.content}
|
||||||
|
onCreate={handleFileCreate}
|
||||||
|
onClose={handleModalClose}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
{/* eslint-disable-next-line react/jsx-props-no-spreading */}
|
||||||
|
<input {...getInputProps()} />
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
AddAttachmentZone.propTypes = {
|
||||||
|
children: PropTypes.element.isRequired,
|
||||||
|
onCreate: PropTypes.func.isRequired,
|
||||||
|
};
|
||||||
|
|
||||||
|
export default AddAttachmentZone;
|
||||||
@ -0,0 +1,13 @@
|
|||||||
|
.dropzone {
|
||||||
|
background: white;
|
||||||
|
font-size: 20px;
|
||||||
|
font-weight: 700;
|
||||||
|
height: 100%;
|
||||||
|
line-height: 30px;
|
||||||
|
opacity: 0.7;
|
||||||
|
padding: 200px 50px;
|
||||||
|
position: absolute;
|
||||||
|
text-align: center;
|
||||||
|
width: 100%;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
@ -0,0 +1,83 @@
|
|||||||
|
import React, { useCallback, useEffect, useRef } from 'react';
|
||||||
|
import PropTypes from 'prop-types';
|
||||||
|
import { useTranslation } from 'react-i18next';
|
||||||
|
import { Button, Form, Header, Modal } from 'semantic-ui-react';
|
||||||
|
import { Input } from '../../../lib/custom-ui';
|
||||||
|
|
||||||
|
import { useForm } from '../../../hooks';
|
||||||
|
|
||||||
|
import styles from './AddTextFileModal.module.css';
|
||||||
|
|
||||||
|
const AddTextFileModal = React.memo(({ content, onCreate, onClose }) => {
|
||||||
|
const [t] = useTranslation();
|
||||||
|
|
||||||
|
const [data, handleFieldChange] = useForm(() => ({
|
||||||
|
name: '',
|
||||||
|
}));
|
||||||
|
|
||||||
|
const nameField = useRef(null);
|
||||||
|
|
||||||
|
const handleSubmit = useCallback(() => {
|
||||||
|
const cleanData = {
|
||||||
|
...data,
|
||||||
|
name: data.name.trim(),
|
||||||
|
};
|
||||||
|
|
||||||
|
if (!cleanData.name) {
|
||||||
|
nameField.current.select();
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const file = new File([content], `${cleanData.name}.txt`, {
|
||||||
|
type: 'plain/text',
|
||||||
|
});
|
||||||
|
|
||||||
|
onCreate(file);
|
||||||
|
onClose();
|
||||||
|
}, [content, onCreate, onClose, data]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
nameField.current.select();
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Modal open basic centered closeIcon size="tiny" onClose={onClose}>
|
||||||
|
<Modal.Content>
|
||||||
|
<Header inverted size="huge">
|
||||||
|
{t('common.createTextFile', {
|
||||||
|
context: 'title',
|
||||||
|
})}
|
||||||
|
</Header>
|
||||||
|
<p>{t('common.enterFilename')}</p>
|
||||||
|
<Form onSubmit={handleSubmit}>
|
||||||
|
<Input
|
||||||
|
fluid
|
||||||
|
inverted
|
||||||
|
ref={nameField}
|
||||||
|
name="name"
|
||||||
|
value={data.name}
|
||||||
|
label=".txt"
|
||||||
|
labelPosition="right"
|
||||||
|
className={styles.field}
|
||||||
|
onChange={handleFieldChange}
|
||||||
|
/>
|
||||||
|
<Button
|
||||||
|
inverted
|
||||||
|
color="green"
|
||||||
|
icon="checkmark"
|
||||||
|
content={t('action.createFile')}
|
||||||
|
floated="right"
|
||||||
|
/>
|
||||||
|
</Form>
|
||||||
|
</Modal.Content>
|
||||||
|
</Modal>
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
AddTextFileModal.propTypes = {
|
||||||
|
content: PropTypes.string.isRequired,
|
||||||
|
onCreate: PropTypes.func.isRequired,
|
||||||
|
onClose: PropTypes.func.isRequired,
|
||||||
|
};
|
||||||
|
|
||||||
|
export default AddTextFileModal;
|
||||||
@ -0,0 +1,3 @@
|
|||||||
|
.field {
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
@ -0,0 +1,3 @@
|
|||||||
|
import AddAttachmentZone from './AddAttachmentZone';
|
||||||
|
|
||||||
|
export default AddAttachmentZone;
|
||||||
@ -1,6 +1,7 @@
|
|||||||
import useField from './use-field';
|
import useField from './use-field';
|
||||||
import useForm from './use-form';
|
import useForm from './use-form';
|
||||||
import useSteps from './use-steps';
|
import useSteps from './use-steps';
|
||||||
|
import useModal from './use-modal';
|
||||||
import useClosableForm from './use-closable-form';
|
import useClosableForm from './use-closable-form';
|
||||||
|
|
||||||
export { useField, useForm, useSteps, useClosableForm };
|
export { useField, useForm, useSteps, useModal, useClosableForm };
|
||||||
|
|||||||
@ -0,0 +1,15 @@
|
|||||||
|
import { useCallback, useState } from 'react';
|
||||||
|
|
||||||
|
export default (initialParams) => {
|
||||||
|
const [modal, setModal] = useState(() => initialParams);
|
||||||
|
|
||||||
|
const open = useCallback((params) => {
|
||||||
|
setModal(params);
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const handleClose = useCallback(() => {
|
||||||
|
setModal(null);
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
return [modal, open, handleClose];
|
||||||
|
};
|
||||||
Loading…
Reference in New Issue