Prepare for collection board type, refactoring, update dependencies

client/src/components/CardModal/AttachmentAddZone/AttachmentAddZone.jsx

@@ -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 TextFileAddModal from './TextFileAddModal';
+
+import styles from './AttachmentAddZone.module.scss';
+
+const AttachmentAddZone = 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()} className={styles.wrapper}>
+        {isDragActive && <div className={styles.dropzone}>{t('common.dropFileToUpload')}</div>}
+        {children}
+        {/* eslint-disable-next-line react/jsx-props-no-spreading */}
+        <input {...getInputProps()} />
+      </div>
+      {modal && (
+        <TextFileAddModal
+          content={modal.content}
+          onCreate={handleFileCreate}
+          onClose={handleModalClose}
+        />
+      )}
+    </>
+  );
+});
+
+AttachmentAddZone.propTypes = {
+  children: PropTypes.element.isRequired,
+  onCreate: PropTypes.func.isRequired,
+};
+
+export default AttachmentAddZone;

client/src/components/CardModal/AttachmentAddZone/AttachmentAddZone.module.scss

@@ -0,0 +1,19 @@
+:global(#app) {
+  .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;
+  }
+
+  .wrapper {
+    overflow: hidden;
+  }
+}

client/src/components/CardModal/AttachmentAddZone/TextFileAddModal.jsx

@@ -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 './TextFileAddModal.module.scss';
+
+const TextFileAddModal = 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>
+  );
+});
+
+TextFileAddModal.propTypes = {
+  content: PropTypes.string.isRequired,
+  onCreate: PropTypes.func.isRequired,
+  onClose: PropTypes.func.isRequired,
+};
+
+export default TextFileAddModal;

client/src/components/CardModal/AttachmentAddZone/TextFileAddModal.module.scss

@@ -0,0 +1,5 @@
+:global(#app) {
+  .field {
+    margin-bottom: 20px;
+  }
+}

client/src/components/CardModal/AttachmentAddZone/index.js

@@ -0,0 +1,3 @@
+import AttachmentAddZone from './AttachmentAddZone';
+
+export default AttachmentAddZone;