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 useForm from './use-form';
|
||||
import useSteps from './use-steps';
|
||||
import useModal from './use-modal';
|
||||
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