@manuscripts/style-guide 0.31.0 → 0.31.1

package/dist/cjs/components/FileManager/FileManager.js

@@ -34,6 +34,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.FileManager = exports.PermissionsContext = void 0;
 const react_1 = __importStar(require("react"));
 const react_tooltip_1 = __importDefault(require("react-tooltip"));
+const inlineFiles_1 = __importDefault(require("../../lib/inlineFiles"));
 const AlertMessage_1 = require("../AlertMessage");
 const Inspector_1 = require("../Inspector");
 const InspectorSection_1 = require("../InspectorSection");
@@ -74,13 +75,24 @@ const FileManager = ({ submissionId, attachments, modelMap, enableDragAndDrop, c
     const handleDownloadFile = (0, react_1.useCallback)((publicUrl) => {
         return handleDownload(publicUrl);
     }, [handleDownload]);
+    const inlineFiles = (0, react_1.useMemo)(() => (0, inlineFiles_1.default)(modelMap, attachments), [modelMap.values(), attachments]);
+    const inlineAttachmentsIds = (0, react_1.useMemo)(() => {
+        const attachmentsIDs = new Set();
+        inlineFiles.map(({ attachments }) => {
+            if (attachments) {
+                attachments.map((attachment) => attachmentsIDs.add(attachment.id));
+            }
+        });
+        return attachmentsIDs;
+    }, [inlineFiles]);
     const getFileSectionExternalFile = (fileSection) => {
         const isSupplementOrOtherFilesTab = fileSection === util_1.FileSectionType.Supplements ||
             fileSection === util_1.FileSectionType.OtherFile;
         const itemsData = attachments.filter((element) => {
             const designation = util_1.namesWithDesignationMap.get(element.type.label);
             return (designation !== undefined &&
-                util_1.designationWithFileSectionsMap.get(designation) === fileSection);
+                util_1.designationWithFileSectionsMap.get(designation) === fileSection &&
+                !inlineAttachmentsIds.has(element.id));
         });
         const itemsDataWithTitle = (0, util_1.generateAttachmentsTitles)(itemsData, fileSection);
         const filesItems = itemsDataWithTitle.map((element) => {
@@ -130,7 +142,7 @@ const FileManager = ({ submissionId, attachments, modelMap, enableDragAndDrop, c
                                 react_1.default.createElement("div", null, "Files excluded from the final submission.")))),
                     react_1.default.createElement(Inspector_1.InspectorTabPanels, { style: { overflowY: 'visible', position: 'relative' } },
                         react_1.default.createElement(Inspector_1.InspectorTabPanel, null,
-                            react_1.default.createElement(InlineFilesSection_1.InlineFilesSection, { modelMap: modelMap, attachments: attachments, submissionId: submissionId, handleReplace: handleReplace, handleDownload: handleDownload, isEditor: enableDragAndDrop, dispatch: dispatch })),
+                            react_1.default.createElement(InlineFilesSection_1.InlineFilesSection, { inlineFiles: inlineFiles, submissionId: submissionId, handleReplace: handleReplace, handleDownload: handleDownload, isEditor: enableDragAndDrop, dispatch: dispatch })),
                         react_1.default.createElement(Inspector_1.InspectorTabPanel, null,
                             react_1.default.createElement(FilesSection_1.FilesSection, { submissionId: submissionId, enableDragAndDrop: enableDragAndDrop, handleUpload: handleUploadFile, fileSection: util_1.FileSectionType.Supplements, filesItem: getFileSectionExternalFile(util_1.FileSectionType.Supplements), state: state, dispatch: dispatch })),
                         react_1.default.createElement(Inspector_1.InspectorTabPanel, null,

package/dist/cjs/components/FileManager/InlineFilesSection.js

@@ -26,14 +26,12 @@ exports.InlineFilesSection = void 0;
 const react_1 = __importStar(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
 const use_dropdown_1 = require("../../hooks/use-dropdown");
-const inlineFiles_1 = __importDefault(require("../../lib/inlineFiles"));
 const dots_icon_1 = __importDefault(require("../icons/dots-icon"));
 const FileInfo_1 = require("./FileSectionItem/FileInfo");
 const FileSectionItem_1 = require("./FileSectionItem/FileSectionItem");
 const ItemActions_1 = require("./FileSectionItem/ItemActions");
 const util_1 = require("./util");
-const InlineFilesSection = ({ submissionId, handleReplace, handleDownload, modelMap, attachments, isEditor, dispatch, }) => {
-    const inlineFiles = (0, react_1.useMemo)(() => (0, inlineFiles_1.default)(modelMap, attachments), [modelMap, attachments]);
+const InlineFilesSection = ({ submissionId, handleReplace, handleDownload, inlineFiles, isEditor, dispatch, }) => {
     const onElementClick = (0, react_1.useCallback)((e) => {
         if (!isEditor) {
             return;

package/dist/es/components/FileManager/FileManager.js

@@ -7,8 +7,9 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
-import React, { createContext, useCallback, useReducer } from 'react';
+import React, { createContext, useCallback, useMemo, useReducer } from 'react';
 import ReactTooltip from 'react-tooltip';
+import getInlineFiles from '../../lib/inlineFiles';
 import { AlertMessage, AlertMessageType } from '../AlertMessage';
 import { InspectorTab, InspectorTabList, InspectorTabPanel, InspectorTabPanels, InspectorTabs, } from '../Inspector';
 import { InspectorSection } from '../InspectorSection';
@@ -49,13 +50,24 @@ export const FileManager = ({ submissionId, attachments, modelMap, enableDragAnd
     const handleDownloadFile = useCallback((publicUrl) => {
         return handleDownload(publicUrl);
     }, [handleDownload]);
+    const inlineFiles = useMemo(() => getInlineFiles(modelMap, attachments), [modelMap.values(), attachments]);
+    const inlineAttachmentsIds = useMemo(() => {
+        const attachmentsIDs = new Set();
+        inlineFiles.map(({ attachments }) => {
+            if (attachments) {
+                attachments.map((attachment) => attachmentsIDs.add(attachment.id));
+            }
+        });
+        return attachmentsIDs;
+    }, [inlineFiles]);
     const getFileSectionExternalFile = (fileSection) => {
         const isSupplementOrOtherFilesTab = fileSection === FileSectionType.Supplements ||
             fileSection === FileSectionType.OtherFile;
         const itemsData = attachments.filter((element) => {
             const designation = namesWithDesignationMap.get(element.type.label);
             return (designation !== undefined &&
-                designationWithFileSectionsMap.get(designation) === fileSection);
+                designationWithFileSectionsMap.get(designation) === fileSection &&
+                !inlineAttachmentsIds.has(element.id));
         });
         const itemsDataWithTitle = generateAttachmentsTitles(itemsData, fileSection);
         const filesItems = itemsDataWithTitle.map((element) => {
@@ -105,7 +117,7 @@ export const FileManager = ({ submissionId, attachments, modelMap, enableDragAnd
                                 React.createElement("div", null, "Files excluded from the final submission.")))),
                     React.createElement(InspectorTabPanels, { style: { overflowY: 'visible', position: 'relative' } },
                         React.createElement(InspectorTabPanel, null,
-                            React.createElement(InlineFilesSection, { modelMap: modelMap, attachments: attachments, submissionId: submissionId, handleReplace: handleReplace, handleDownload: handleDownload, isEditor: enableDragAndDrop, dispatch: dispatch })),
+                            React.createElement(InlineFilesSection, { inlineFiles: inlineFiles, submissionId: submissionId, handleReplace: handleReplace, handleDownload: handleDownload, isEditor: enableDragAndDrop, dispatch: dispatch })),
                         React.createElement(InspectorTabPanel, null,
                             React.createElement(FilesSection, { submissionId: submissionId, enableDragAndDrop: enableDragAndDrop, handleUpload: handleUploadFile, fileSection: FileSectionType.Supplements, filesItem: getFileSectionExternalFile(FileSectionType.Supplements), state: state, dispatch: dispatch })),
                         React.createElement(InspectorTabPanel, null,

package/dist/es/components/FileManager/InlineFilesSection.js

@@ -1,14 +1,12 @@
-import React, { useCallback, useMemo } from 'react';
+import React, { useCallback } from 'react';
 import styled from 'styled-components';
 import { useDropdown } from '../../hooks/use-dropdown';
-import getInlineFiles from '../../lib/inlineFiles';
 import DotsIcon from '../icons/dots-icon';
 import { FileDescription, FileInfoContainer, FileNameTitleContainer, FileTitle, } from './FileSectionItem/FileInfo';
 import { ActionsIcon, Item, } from './FileSectionItem/FileSectionItem';
 import { ItemActions } from './FileSectionItem/ItemActions';
-import { extensionsWithFileTypesMap, fileTypesWithIconMap } from './util';
-export const InlineFilesSection = ({ submissionId, handleReplace, handleDownload, modelMap, attachments, isEditor, dispatch, }) => {
-    const inlineFiles = useMemo(() => getInlineFiles(modelMap, attachments), [modelMap, attachments]);
+import { extensionsWithFileTypesMap, fileTypesWithIconMap, } from './util';
+export const InlineFilesSection = ({ submissionId, handleReplace, handleDownload, inlineFiles, isEditor, dispatch, }) => {
     const onElementClick = useCallback((e) => {
         if (!isEditor) {
             return;

package/dist/types/components/FileManager/InlineFilesSection.d.ts

@@ -1,7 +1,7 @@
-import { Model } from '@manuscripts/manuscripts-json-schema';
 import React, { Dispatch } from 'react';
 import { SubmissionAttachment } from './FileSectionItem/FileSectionItem';
 import { Action } from './FileSectionState';
+import { FileType } from './util';
 export interface ExternalFileRef {
     url: string;
     kind?: string;
@@ -9,8 +9,13 @@ export interface ExternalFileRef {
 }
 export declare const InlineFilesSection: React.FC<{
     submissionId: string;
-    attachments: SubmissionAttachment[];
-    modelMap: Map<string, Model>;
+    inlineFiles: {
+        id: string;
+        label: string;
+        type: FileType;
+        caption?: string;
+        attachments?: SubmissionAttachment[];
+    }[];
     handleReplace: (submissionId: string, attachmentId: string, name: string, file: File, typeId: string) => Promise<boolean>;
     handleDownload: (url: string) => void;
     isEditor: boolean;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@manuscripts/style-guide",
   "description": "Shared components for Manuscripts applications",
-  "version": "0.31.0",
+  "version": "0.31.1",
   "repository": "gitlab:atypon-opensource/manuscripts-style-guide",
   "license": "Apache-2.0",
   "main": "dist/cjs",