@manuscripts/style-guide 0.31.16 → 0.31.19

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

@@ -35,8 +35,7 @@ exports.FileManager = exports.PermissionsContext = void 0;
 const manuscript_transform_1 = require("@manuscripts/manuscript-transform");
 const react_1 = __importStar(require("react"));
 const react_tooltip_1 = __importDefault(require("react-tooltip"));
-const inlineFiles_1 = __importStar(require("../../lib/inlineFiles"));
-const AlertMessage_1 = require("../AlertMessage");
+const index_1 = require("../../index");
 const Inspector_1 = require("../Inspector");
 const InspectorSection_1 = require("../InspectorSection");
 const DraggableFileSectionItem_1 = require("./FileSectionItem/DraggableFileSectionItem");
@@ -55,6 +54,7 @@ const FileManager = ({ modelMap, saveModel, enableDragAndDrop, can, fileManageme
         dispatch(FileSectionState_1.actions.SELECT_DESIGNATION(util_1.namesWithDesignationMap.get(typeId) || util_1.Designation.Document));
         const res = yield replace(attachmentId, name, file, typeId);
         dispatch(FileSectionState_1.actions.HANDLE_FINISH_UPLOAD());
+        dispatch(FileSectionState_1.actions.HANDLE_SUCCESS_MESSAGE('File uploaded successfully.'));
         return res;
     }), [replace]);
     const handleUploadFile = (0, react_1.useCallback)((file, designation) => __awaiter(void 0, void 0, void 0, function* () {
@@ -64,6 +64,7 @@ const FileManager = ({ modelMap, saveModel, enableDragAndDrop, can, fileManageme
         }
         const res = yield upload(file, designation);
         dispatch(FileSectionState_1.actions.HANDLE_FINISH_UPLOAD());
+        dispatch(FileSectionState_1.actions.HANDLE_SUCCESS_MESSAGE('File uploaded successfully.'));
         return res;
     }), [upload]);
     const handleUploadFileWithSupplement = (0, react_1.useCallback)((file, designation) => __awaiter(void 0, void 0, void 0, function* () {
@@ -77,7 +78,7 @@ const FileManager = ({ modelMap, saveModel, enableDragAndDrop, can, fileManageme
     const handleChangeDesignationFile = (0, react_1.useCallback)((attachmentId, typeId, name) => __awaiter(void 0, void 0, void 0, function* () {
         const res = yield changeDesignation(attachmentId, typeId, name);
         if (res) {
-            dispatch(FileSectionState_1.actions.HANDLE_SUCCESS_MESSAGE());
+            dispatch(FileSectionState_1.actions.HANDLE_SUCCESS_MESSAGE(''));
         }
         return res;
     }), [changeDesignation]);
@@ -96,27 +97,13 @@ const FileManager = ({ modelMap, saveModel, enableDragAndDrop, can, fileManageme
         }
     }), [modelMap, saveModel]);
     const attachments = getAttachments();
-    const inlineFiles = (0, react_1.useMemo)(() => (0, inlineFiles_1.default)(modelMap, attachments), [modelMap.values(), attachments]);
-    const supplementFiles = (0, react_1.useMemo)(() => (0, inlineFiles_1.getSupplementFiles)(modelMap, attachments), [attachments, modelMap.size]);
-    const excludedAttachmentsIds = (0, react_1.useMemo)(() => {
-        const attachmentsIDs = new Set();
-        inlineFiles.map(({ attachments }) => {
-            if (attachments) {
-                attachments.map((attachment) => attachmentsIDs.add(attachment.id));
-            }
-        });
-        supplementFiles.map(({ id }) => attachmentsIDs.add(id));
-        return attachmentsIDs;
-    }, [inlineFiles, supplementFiles]);
+    const { otherFiles, supplementFiles, inlineFiles } = (0, index_1.useFiles)(modelMap, attachments);
     const getFileSectionExternalFile = (fileSection) => {
         const isSupplementOrOtherFilesTab = fileSection === util_1.FileSectionType.Supplements ||
             fileSection === util_1.FileSectionType.OtherFile;
         const isOtherFilesTab = fileSection === util_1.FileSectionType.OtherFile;
         const itemsData = (fileSection === util_1.FileSectionType.Supplements && supplementFiles) ||
-            attachments.filter((element) => {
-                const designation = util_1.namesWithDesignationMap.get(element.type.label);
-                return (designation !== undefined && !excludedAttachmentsIds.has(element.id));
-            });
+            otherFiles;
         const itemsDataWithTitle = (0, util_1.generateAttachmentsTitles)(itemsData, fileSection);
         const filesItems = itemsDataWithTitle.map((element) => {
             const itemProps = {
@@ -139,9 +126,6 @@ const FileManager = ({ modelMap, saveModel, enableDragAndDrop, can, fileManageme
         });
         return filesItems;
     };
-    const handleSuccessMessage = () => {
-        return (react_1.default.createElement(AlertMessage_1.AlertMessage, { type: AlertMessage_1.AlertMessageType.info, hideCloseButton: false }, state.successMessage));
-    };
     return (react_1.default.createElement(react_1.default.Fragment, null,
         react_1.default.createElement(DragLayer_1.DragLayer, null),
         react_1.default.createElement(exports.PermissionsContext.Provider, { value: can },
@@ -169,9 +153,6 @@ const FileManager = ({ modelMap, saveModel, enableDragAndDrop, can, fileManageme
                         react_1.default.createElement(Inspector_1.InspectorTabPanel, null,
                             react_1.default.createElement(FilesSection_1.FilesSection, { enableDragAndDrop: enableDragAndDrop, handleUpload: handleUploadFileWithSupplement, fileSection: util_1.FileSectionType.Supplements, filesItem: getFileSectionExternalFile(util_1.FileSectionType.Supplements), state: state, dispatch: dispatch })),
                         react_1.default.createElement(Inspector_1.InspectorTabPanel, null,
-                            react_1.default.createElement(FilesSection_1.FilesSection, { enableDragAndDrop: enableDragAndDrop, handleUpload: handleUploadFile, fileSection: util_1.FileSectionType.OtherFile, filesItem: getFileSectionExternalFile(util_1.FileSectionType.OtherFile), state: state, dispatch: dispatch })))))),
-        state.isShowSuccessMessage &&
-            state.successMessage !== '' &&
-            handleSuccessMessage()));
+                            react_1.default.createElement(FilesSection_1.FilesSection, { enableDragAndDrop: enableDragAndDrop, handleUpload: handleUploadFile, fileSection: util_1.FileSectionType.OtherFile, filesItem: getFileSectionExternalFile(util_1.FileSectionType.OtherFile), state: state, dispatch: dispatch }))))))));
 };
 exports.FileManager = FileManager;

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

@@ -20,6 +20,7 @@ var ActionTypes;
     ActionTypes["HANDLE_UPLOAD_ACTION"] = "handleUpload";
     ActionTypes["HANDLE_FINISH_UPLOAD"] = "handleFinishUpload";
     ActionTypes["HANDLE_SUCCESS_MESSAGE"] = "handleSuccessMessage";
+    ActionTypes["HANDLE_SUCCESS_MESSAGE_DISMISS"] = "handleSuccessMessageDismiss";
 })(ActionTypes || (ActionTypes = {}));
 const reducer = (state, action) => {
     switch (action.type) {
@@ -36,7 +37,7 @@ const reducer = (state, action) => {
             return Object.assign(Object.assign({}, state), { selectDesignation: action.designation });
         }
         case ActionTypes.HANDLE_UPLOAD_ACTION: {
-            return Object.assign(Object.assign({}, state), { isOpenSelectDesignationPopup: false, isUploadFile: true });
+            return Object.assign(Object.assign({}, state), { isOpenSelectDesignationPopup: false, isUploadFile: true, isShowSuccessMessage: false, successMessage: '' });
         }
         case ActionTypes.HANDLE_CANCEL_UPLOAD: {
             return Object.assign(Object.assign({}, state), { isOpenSelectDesignationPopup: false });
@@ -45,7 +46,10 @@ const reducer = (state, action) => {
             return Object.assign(Object.assign({}, state), { isUploadFile: false, uploadedFile: undefined, selectDesignation: undefined });
         }
         case ActionTypes.HANDLE_SUCCESS_MESSAGE: {
-            return Object.assign(Object.assign({}, state), { isShowSuccessMessage: true });
+            return Object.assign(Object.assign({}, state), { isShowSuccessMessage: true, successMessage: action.successMessage });
+        }
+        case ActionTypes.HANDLE_SUCCESS_MESSAGE_DISMISS: {
+            return Object.assign(Object.assign({}, state), { isShowSuccessMessage: false, successMessage: '' });
         }
     }
     return state;
@@ -75,7 +79,11 @@ exports.actions = {
     HANDLE_FINISH_UPLOAD: () => ({
         type: ActionTypes.HANDLE_FINISH_UPLOAD,
     }),
-    HANDLE_SUCCESS_MESSAGE: () => ({
+    HANDLE_SUCCESS_MESSAGE: (successMessage) => ({
         type: ActionTypes.HANDLE_SUCCESS_MESSAGE,
+        successMessage,
+    }),
+    HANDLE_SUCCESS_MESSAGE_DISMISS: () => ({
+        type: ActionTypes.HANDLE_SUCCESS_MESSAGE_DISMISS,
     }),
 };

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

@@ -21,6 +21,7 @@ var __importStar = (this && this.__importStar) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.FilesSection = void 0;
 const react_1 = __importStar(require("react"));
+const AlertMessage_1 = require("../AlertMessage");
 const DragItemArea_1 = require("./DragItemArea");
 const FileManager_1 = require("./FileManager");
 const FileSectionUploadItem_1 = require("./FileSectionItem/FileSectionUploadItem");
@@ -42,12 +43,21 @@ const FilesSection = ({ enableDragAndDrop, handleUpload, fileSection, filesItem,
             handleUpload(state.uploadedFile, (0, util_1.getDesignationName)(state.selectDesignation));
     };
     const can = (0, react_1.useContext)(FileManager_1.PermissionsContext);
+    const handleSuccessMessage = () => {
+        return (react_1.default.createElement(AlertMessage_1.AlertMessage, { type: AlertMessage_1.AlertMessageType.success, hideCloseButton: true, dismissButton: {
+                text: 'OK',
+                action: () => dispatch(FileSectionState_1.actions.HANDLE_SUCCESS_MESSAGE_DISMISS()),
+            } }, state.successMessage));
+    };
     return (react_1.default.createElement("div", null,
         (can === null || can === void 0 ? void 0 : can.uploadFile) && (react_1.default.createElement(react_1.default.Fragment, null,
             (isOtherFileTab || isSupplementFilesTab) && (react_1.default.createElement(UploadFileArea_1.UploadFileArea, { handleUploadFile: handleUpload, fileSection: fileSection, dispatch: dispatch })),
             state.isUploadFile &&
                 state.uploadedFile &&
                 state.selectDesignation !== undefined && (react_1.default.createElement(FileSectionUploadItem_1.FileSectionUploadItem, { fileName: state.uploadedFile.name, isLoading: state.isUploadFile })))),
+        state.isShowSuccessMessage &&
+            state.successMessage !== '' &&
+            handleSuccessMessage(),
         state.uploadedFile && isOtherFileTab && (react_1.default.createElement(SelectDialogDesignation_1.SelectDialogDesignation, { isOpen: state.isOpenSelectDesignationPopup, fileExtension: uploadedFileExtension, handleCancel: () => {
                 dispatch(FileSectionState_1.actions.HANDLE_CANCEL_UPLOAD());
             }, uploadFileHandler: () => handleUploadOtherFile(), dispatch: dispatch, fileSection: fileSection })),

package/dist/cjs/hooks/use-deep-compare.js

@@ -0,0 +1,31 @@
+"use strict";
+/*!
+ * © 2022 Atypon Systems LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useDeepCompareCallback = exports.useDeepCompareMemo = void 0;
+const lodash_1 = require("lodash");
+const react_1 = require("react");
+const useDeepCompare = (deps) => {
+    const ref = (0, react_1.useRef)(deps);
+    if (!(0, lodash_1.isEqual)(deps, ref.current)) {
+        ref.current = deps;
+    }
+    return ref.current;
+};
+const useDeepCompareMemo = (callback, deps) => (0, react_1.useMemo)(callback, [useDeepCompare(deps), callback]);
+exports.useDeepCompareMemo = useDeepCompareMemo;
+const useDeepCompareCallback = (callback, deps) => (0, react_1.useCallback)(callback, [useDeepCompare(deps), callback]);
+exports.useDeepCompareCallback = useDeepCompareCallback;

package/dist/cjs/hooks/use-files.js

@@ -0,0 +1,44 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const manuscript_transform_1 = require("@manuscripts/manuscript-transform");
+const manuscripts_json_schema_1 = require("@manuscripts/manuscripts-json-schema");
+const inlineFiles_1 = __importDefault(require("../lib/inlineFiles"));
+const use_deep_compare_1 = require("./use-deep-compare");
+const getSupplementFiles = (modelMap, attachments, filePredicate) => {
+    const supplements = new Map((0, manuscript_transform_1.getModelsByType)(modelMap, manuscripts_json_schema_1.ObjectTypes.Supplement).map((supplement) => { var _a; return [(_a = supplement.href) === null || _a === void 0 ? void 0 : _a.replace('attachment:', ''), supplement]; }));
+    return attachments.filter((attachment) => {
+        if (supplements.has(attachment.id) && filePredicate) {
+            return filePredicate(attachment.name);
+        }
+        else {
+            return supplements.has(attachment.id);
+        }
+    });
+};
+const getOtherFiles = (inlineFiles, supplementFiles, attachments, filePredicate) => {
+    const inlineFilesAttachmentIds = inlineFiles
+        .map(({ attachments }) => (attachments === null || attachments === void 0 ? void 0 : attachments.map(({ id }) => ({ id }))) || [])
+        .flat();
+    const excludedAttachmentsIds = new Set([...inlineFilesAttachmentIds, ...supplementFiles].map(({ id }) => id));
+    return attachments.filter(({ id, name }) => {
+        if (!excludedAttachmentsIds.has(id) && filePredicate) {
+            return filePredicate(name);
+        }
+        else {
+            return !excludedAttachmentsIds.has(id);
+        }
+    });
+};
+exports.default = (modelMap, attachments, filePredicate) => (0, use_deep_compare_1.useDeepCompareMemo)(() => {
+    const inlineFiles = (0, inlineFiles_1.default)(modelMap, attachments);
+    const supplementFiles = getSupplementFiles(modelMap, attachments, filePredicate);
+    const otherFiles = getOtherFiles(inlineFiles, supplementFiles, attachments, filePredicate);
+    return {
+        otherFiles,
+        supplementFiles,
+        inlineFiles,
+    };
+}, [...Array.from(modelMap.values()), ...attachments]);

package/dist/cjs/index.js

@@ -28,7 +28,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.SelectDialogDesignation = exports.errorsDecoder = exports.PdfPreview = exports.getSupplementFiles = exports.inlineFiles = void 0;
+exports.SelectDialogDesignation = exports.errorsDecoder = exports.useDeepCompareCallback = exports.useDeepCompareMemo = exports.useFiles = exports.PdfPreview = void 0;
 __exportStar(require("./components/AffiliationsEditor"), exports);
 __exportStar(require("./components/AffiliationsList"), exports);
 __exportStar(require("./components/AuthorForm"), exports);
@@ -60,14 +60,16 @@ __exportStar(require("./components/Tip"), exports);
 __exportStar(require("./components/icons"), exports);
 __exportStar(require("./components/Inspector"), exports);
 __exportStar(require("./components/InspectorSection"), exports);
-var inlineFiles_1 = require("./lib/inlineFiles");
-Object.defineProperty(exports, "inlineFiles", { enumerable: true, get: function () { return __importDefault(inlineFiles_1).default; } });
-Object.defineProperty(exports, "getSupplementFiles", { enumerable: true, get: function () { return inlineFiles_1.getSupplementFiles; } });
 var PdfPreview_1 = require("./components/PdfPreview");
 Object.defineProperty(exports, "PdfPreview", { enumerable: true, get: function () { return __importDefault(PdfPreview_1).default; } });
 __exportStar(require("./components/SubmissionInspector"), exports);
 __exportStar(require("./components/Dropdown"), exports);
 __exportStar(require("./hooks/use-dropdown"), exports);
+var use_files_1 = require("./hooks/use-files");
+Object.defineProperty(exports, "useFiles", { enumerable: true, get: function () { return __importDefault(use_files_1).default; } });
+var use_deep_compare_1 = require("./hooks/use-deep-compare");
+Object.defineProperty(exports, "useDeepCompareMemo", { enumerable: true, get: function () { return use_deep_compare_1.useDeepCompareMemo; } });
+Object.defineProperty(exports, "useDeepCompareCallback", { enumerable: true, get: function () { return use_deep_compare_1.useDeepCompareCallback; } });
 __exportStar(require("./lib/authors"), exports);
 __exportStar(require("./lib/capabilities"), exports);
 var lw_errors_decoder_1 = require("./lib/lw-errors-decoder");

package/dist/cjs/lib/inlineFiles.js

@@ -1,12 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getSupplementFiles = void 0;
 const manuscript_transform_1 = require("@manuscripts/manuscript-transform");
 const manuscripts_json_schema_1 = require("@manuscripts/manuscripts-json-schema");
 const util_1 = require("../components/FileManager/util");
-const getCaptionText = (caption) => caption &&
-    new DOMParser().parseFromString(caption, 'text/html').documentElement
-        .innerText;
 const getAttachment = (externalFileRef, attachmentsMap) => {
     if (!(externalFileRef === null || externalFileRef === void 0 ? void 0 : externalFileRef.url.includes('https://'))) {
         const attachmentId = externalFileRef === null || externalFileRef === void 0 ? void 0 : externalFileRef.url.replace('attachment:', '');
@@ -33,7 +29,6 @@ const getFigureData = (element, modelMap, attachmentsMap) => {
     return {
         id: element._id,
         attachments,
-        caption: getCaptionText(element.caption),
     };
 };
 exports.default = (modelMap, attachments) => {
@@ -60,7 +55,6 @@ exports.default = (modelMap, attachments) => {
                 label: `Table`,
                 type: util_1.FileType.SheetsWorkbooks,
                 attachments: [attachment],
-                caption: getCaptionText(tableElement.caption),
             });
         }
     });
@@ -110,19 +104,13 @@ const getAuxiliaryObjects = (modelMap) => {
     }
     return {
         graphicalAbstractFigureId,
-        figureElement: orderObjects[manuscripts_json_schema_1.ObjectTypes.FigureElement]
-            ? sortAuxiliaryObject(orderObjects[manuscripts_json_schema_1.ObjectTypes.FigureElement], figureElementIds)
-            : figureElementIds,
-        tableElement: orderObjects[manuscripts_json_schema_1.ObjectTypes.TableElement]
-            ? sortAuxiliaryObject(orderObjects[manuscripts_json_schema_1.ObjectTypes.TableElement], tableElementIds)
-            : tableElementIds,
+        figureElement: sortAuxiliaryObject(figureElementIds, orderObjects[manuscripts_json_schema_1.ObjectTypes.FigureElement]),
+        tableElement: sortAuxiliaryObject(tableElementIds, orderObjects[manuscripts_json_schema_1.ObjectTypes.TableElement]),
     };
 };
-const sortAuxiliaryObject = (orderObject, auxiliaryObjectIds) => {
+const sortAuxiliaryObject = (auxiliaryObjectIds, orderObject) => {
+    if (!orderObject) {
+        return auxiliaryObjectIds;
+    }
     return auxiliaryObjectIds.sort((a, b) => orderObject.elements.indexOf(a) - orderObject.elements.indexOf(b));
 };
-const getSupplementFiles = (modelMap, attachments) => {
-    const supplements = new Map((0, manuscript_transform_1.getModelsByType)(modelMap, manuscripts_json_schema_1.ObjectTypes.Supplement).map((supplement) => { var _a; return [(_a = supplement.href) === null || _a === void 0 ? void 0 : _a.replace('attachment:', ''), supplement]; }));
-    return attachments.filter((attachment) => supplements.has(attachment.id));
-};
-exports.getSupplementFiles = getSupplementFiles;

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

@@ -8,10 +8,9 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
     });
 };
 import { buildSupplementaryMaterial, } from '@manuscripts/manuscript-transform';
-import React, { createContext, useCallback, useMemo, useReducer } from 'react';
+import React, { createContext, useCallback, useReducer } from 'react';
 import ReactTooltip from 'react-tooltip';
-import getInlineFiles, { getSupplementFiles } from '../../lib/inlineFiles';
-import { AlertMessage, AlertMessageType } from '../AlertMessage';
+import { useFiles } from '../../index';
 import { InspectorTab, InspectorTabList, InspectorTabPanel, InspectorTabPanels, InspectorTabs, } from '../Inspector';
 import { InspectorSection } from '../InspectorSection';
 import { DraggableFileSectionItem } from './FileSectionItem/DraggableFileSectionItem';
@@ -30,6 +29,7 @@ export const FileManager = ({ modelMap, saveModel, enableDragAndDrop, can, fileM
         dispatch(actions.SELECT_DESIGNATION(namesWithDesignationMap.get(typeId) || Designation.Document));
         const res = yield replace(attachmentId, name, file, typeId);
         dispatch(actions.HANDLE_FINISH_UPLOAD());
+        dispatch(actions.HANDLE_SUCCESS_MESSAGE('File uploaded successfully.'));
         return res;
     }), [replace]);
     const handleUploadFile = useCallback((file, designation) => __awaiter(void 0, void 0, void 0, function* () {
@@ -39,6 +39,7 @@ export const FileManager = ({ modelMap, saveModel, enableDragAndDrop, can, fileM
         }
         const res = yield upload(file, designation);
         dispatch(actions.HANDLE_FINISH_UPLOAD());
+        dispatch(actions.HANDLE_SUCCESS_MESSAGE('File uploaded successfully.'));
         return res;
     }), [upload]);
     const handleUploadFileWithSupplement = useCallback((file, designation) => __awaiter(void 0, void 0, void 0, function* () {
@@ -52,7 +53,7 @@ export const FileManager = ({ modelMap, saveModel, enableDragAndDrop, can, fileM
     const handleChangeDesignationFile = useCallback((attachmentId, typeId, name) => __awaiter(void 0, void 0, void 0, function* () {
         const res = yield changeDesignation(attachmentId, typeId, name);
         if (res) {
-            dispatch(actions.HANDLE_SUCCESS_MESSAGE());
+            dispatch(actions.HANDLE_SUCCESS_MESSAGE(''));
         }
         return res;
     }), [changeDesignation]);
@@ -71,27 +72,13 @@ export const FileManager = ({ modelMap, saveModel, enableDragAndDrop, can, fileM
         }
     }), [modelMap, saveModel]);
     const attachments = getAttachments();
-    const inlineFiles = useMemo(() => getInlineFiles(modelMap, attachments), [modelMap.values(), attachments]);
-    const supplementFiles = useMemo(() => getSupplementFiles(modelMap, attachments), [attachments, modelMap.size]);
-    const excludedAttachmentsIds = useMemo(() => {
-        const attachmentsIDs = new Set();
-        inlineFiles.map(({ attachments }) => {
-            if (attachments) {
-                attachments.map((attachment) => attachmentsIDs.add(attachment.id));
-            }
-        });
-        supplementFiles.map(({ id }) => attachmentsIDs.add(id));
-        return attachmentsIDs;
-    }, [inlineFiles, supplementFiles]);
+    const { otherFiles, supplementFiles, inlineFiles } = useFiles(modelMap, attachments);
     const getFileSectionExternalFile = (fileSection) => {
         const isSupplementOrOtherFilesTab = fileSection === FileSectionType.Supplements ||
             fileSection === FileSectionType.OtherFile;
         const isOtherFilesTab = fileSection === FileSectionType.OtherFile;
         const itemsData = (fileSection === FileSectionType.Supplements && supplementFiles) ||
-            attachments.filter((element) => {
-                const designation = namesWithDesignationMap.get(element.type.label);
-                return (designation !== undefined && !excludedAttachmentsIds.has(element.id));
-            });
+            otherFiles;
         const itemsDataWithTitle = generateAttachmentsTitles(itemsData, fileSection);
         const filesItems = itemsDataWithTitle.map((element) => {
             const itemProps = {
@@ -114,9 +101,6 @@ export const FileManager = ({ modelMap, saveModel, enableDragAndDrop, can, fileM
         });
         return filesItems;
     };
-    const handleSuccessMessage = () => {
-        return (React.createElement(AlertMessage, { type: AlertMessageType.info, hideCloseButton: false }, state.successMessage));
-    };
     return (React.createElement(React.Fragment, null,
         React.createElement(DragLayer, null),
         React.createElement(PermissionsContext.Provider, { value: can },
@@ -144,8 +128,5 @@ export const FileManager = ({ modelMap, saveModel, enableDragAndDrop, can, fileM
                         React.createElement(InspectorTabPanel, null,
                             React.createElement(FilesSection, { enableDragAndDrop: enableDragAndDrop, handleUpload: handleUploadFileWithSupplement, fileSection: FileSectionType.Supplements, filesItem: getFileSectionExternalFile(FileSectionType.Supplements), state: state, dispatch: dispatch })),
                         React.createElement(InspectorTabPanel, null,
-                            React.createElement(FilesSection, { enableDragAndDrop: enableDragAndDrop, handleUpload: handleUploadFile, fileSection: FileSectionType.OtherFile, filesItem: getFileSectionExternalFile(FileSectionType.OtherFile), state: state, dispatch: dispatch })))))),
-        state.isShowSuccessMessage &&
-            state.successMessage !== '' &&
-            handleSuccessMessage()));
+                            React.createElement(FilesSection, { enableDragAndDrop: enableDragAndDrop, handleUpload: handleUploadFile, fileSection: FileSectionType.OtherFile, filesItem: getFileSectionExternalFile(FileSectionType.OtherFile), state: state, dispatch: dispatch }))))))));
 };

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

@@ -16,6 +16,7 @@ var ActionTypes;
     ActionTypes["HANDLE_UPLOAD_ACTION"] = "handleUpload";
     ActionTypes["HANDLE_FINISH_UPLOAD"] = "handleFinishUpload";
     ActionTypes["HANDLE_SUCCESS_MESSAGE"] = "handleSuccessMessage";
+    ActionTypes["HANDLE_SUCCESS_MESSAGE_DISMISS"] = "handleSuccessMessageDismiss";
 })(ActionTypes || (ActionTypes = {}));
 export const reducer = (state, action) => {
     switch (action.type) {
@@ -32,7 +33,7 @@ export const reducer = (state, action) => {
             return Object.assign(Object.assign({}, state), { selectDesignation: action.designation });
         }
         case ActionTypes.HANDLE_UPLOAD_ACTION: {
-            return Object.assign(Object.assign({}, state), { isOpenSelectDesignationPopup: false, isUploadFile: true });
+            return Object.assign(Object.assign({}, state), { isOpenSelectDesignationPopup: false, isUploadFile: true, isShowSuccessMessage: false, successMessage: '' });
         }
         case ActionTypes.HANDLE_CANCEL_UPLOAD: {
             return Object.assign(Object.assign({}, state), { isOpenSelectDesignationPopup: false });
@@ -41,7 +42,10 @@ export const reducer = (state, action) => {
             return Object.assign(Object.assign({}, state), { isUploadFile: false, uploadedFile: undefined, selectDesignation: undefined });
         }
         case ActionTypes.HANDLE_SUCCESS_MESSAGE: {
-            return Object.assign(Object.assign({}, state), { isShowSuccessMessage: true });
+            return Object.assign(Object.assign({}, state), { isShowSuccessMessage: true, successMessage: action.successMessage });
+        }
+        case ActionTypes.HANDLE_SUCCESS_MESSAGE_DISMISS: {
+            return Object.assign(Object.assign({}, state), { isShowSuccessMessage: false, successMessage: '' });
         }
     }
     return state;
@@ -70,7 +74,11 @@ export const actions = {
     HANDLE_FINISH_UPLOAD: () => ({
         type: ActionTypes.HANDLE_FINISH_UPLOAD,
     }),
-    HANDLE_SUCCESS_MESSAGE: () => ({
+    HANDLE_SUCCESS_MESSAGE: (successMessage) => ({
         type: ActionTypes.HANDLE_SUCCESS_MESSAGE,
+        successMessage,
+    }),
+    HANDLE_SUCCESS_MESSAGE_DISMISS: () => ({
+        type: ActionTypes.HANDLE_SUCCESS_MESSAGE_DISMISS,
     }),
 };

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

@@ -1,4 +1,5 @@
 import React, { useContext } from 'react';
+import { AlertMessage, AlertMessageType } from '../AlertMessage';
 import { DragItemArea } from './DragItemArea';
 import { PermissionsContext } from './FileManager';
 import { FileSectionUploadItem } from './FileSectionItem/FileSectionUploadItem';
@@ -20,12 +21,21 @@ export const FilesSection = ({ enableDragAndDrop, handleUpload, fileSection, fil
             handleUpload(state.uploadedFile, getDesignationName(state.selectDesignation));
     };
     const can = useContext(PermissionsContext);
+    const handleSuccessMessage = () => {
+        return (React.createElement(AlertMessage, { type: AlertMessageType.success, hideCloseButton: true, dismissButton: {
+                text: 'OK',
+                action: () => dispatch(actions.HANDLE_SUCCESS_MESSAGE_DISMISS()),
+            } }, state.successMessage));
+    };
     return (React.createElement("div", null,
         (can === null || can === void 0 ? void 0 : can.uploadFile) && (React.createElement(React.Fragment, null,
             (isOtherFileTab || isSupplementFilesTab) && (React.createElement(UploadFileArea, { handleUploadFile: handleUpload, fileSection: fileSection, dispatch: dispatch })),
             state.isUploadFile &&
                 state.uploadedFile &&
                 state.selectDesignation !== undefined && (React.createElement(FileSectionUploadItem, { fileName: state.uploadedFile.name, isLoading: state.isUploadFile })))),
+        state.isShowSuccessMessage &&
+            state.successMessage !== '' &&
+            handleSuccessMessage(),
         state.uploadedFile && isOtherFileTab && (React.createElement(SelectDialogDesignation, { isOpen: state.isOpenSelectDesignationPopup, fileExtension: uploadedFileExtension, handleCancel: () => {
                 dispatch(actions.HANDLE_CANCEL_UPLOAD());
             }, uploadFileHandler: () => handleUploadOtherFile(), dispatch: dispatch, fileSection: fileSection })),

package/dist/es/hooks/use-deep-compare.js

@@ -0,0 +1,26 @@
+/*!
+ * © 2022 Atypon Systems LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { isEqual } from 'lodash';
+import { useCallback, useMemo, useRef } from 'react';
+const useDeepCompare = (deps) => {
+    const ref = useRef(deps);
+    if (!isEqual(deps, ref.current)) {
+        ref.current = deps;
+    }
+    return ref.current;
+};
+export const useDeepCompareMemo = (callback, deps) => useMemo(callback, [useDeepCompare(deps), callback]);
+export const useDeepCompareCallback = (callback, deps) => useCallback(callback, [useDeepCompare(deps), callback]);

package/dist/es/hooks/use-files.js

@@ -0,0 +1,39 @@
+import { getModelsByType } from '@manuscripts/manuscript-transform';
+import { ObjectTypes, } from '@manuscripts/manuscripts-json-schema';
+import getInlineFiles from '../lib/inlineFiles';
+import { useDeepCompareMemo } from './use-deep-compare';
+const getSupplementFiles = (modelMap, attachments, filePredicate) => {
+    const supplements = new Map(getModelsByType(modelMap, ObjectTypes.Supplement).map((supplement) => { var _a; return [(_a = supplement.href) === null || _a === void 0 ? void 0 : _a.replace('attachment:', ''), supplement]; }));
+    return attachments.filter((attachment) => {
+        if (supplements.has(attachment.id) && filePredicate) {
+            return filePredicate(attachment.name);
+        }
+        else {
+            return supplements.has(attachment.id);
+        }
+    });
+};
+const getOtherFiles = (inlineFiles, supplementFiles, attachments, filePredicate) => {
+    const inlineFilesAttachmentIds = inlineFiles
+        .map(({ attachments }) => (attachments === null || attachments === void 0 ? void 0 : attachments.map(({ id }) => ({ id }))) || [])
+        .flat();
+    const excludedAttachmentsIds = new Set([...inlineFilesAttachmentIds, ...supplementFiles].map(({ id }) => id));
+    return attachments.filter(({ id, name }) => {
+        if (!excludedAttachmentsIds.has(id) && filePredicate) {
+            return filePredicate(name);
+        }
+        else {
+            return !excludedAttachmentsIds.has(id);
+        }
+    });
+};
+export default (modelMap, attachments, filePredicate) => useDeepCompareMemo(() => {
+    const inlineFiles = getInlineFiles(modelMap, attachments);
+    const supplementFiles = getSupplementFiles(modelMap, attachments, filePredicate);
+    const otherFiles = getOtherFiles(inlineFiles, supplementFiles, attachments, filePredicate);
+    return {
+        otherFiles,
+        supplementFiles,
+        inlineFiles,
+    };
+}, [...Array.from(modelMap.values()), ...attachments]);

package/dist/es/index.js

@@ -44,11 +44,12 @@ export * from './components/Tip';
 export * from './components/icons';
 export * from './components/Inspector';
 export * from './components/InspectorSection';
-export { default as inlineFiles, getSupplementFiles } from './lib/inlineFiles';
 export { default as PdfPreview } from './components/PdfPreview';
 export * from './components/SubmissionInspector';
 export * from './components/Dropdown';
 export * from './hooks/use-dropdown';
+export { default as useFiles } from './hooks/use-files';
+export { useDeepCompareMemo, useDeepCompareCallback, } from './hooks/use-deep-compare';
 export * from './lib/authors';
 export * from './lib/capabilities';
 export { default as errorsDecoder } from './lib/lw-errors-decoder';

package/dist/es/lib/inlineFiles.js

@@ -1,9 +1,6 @@
-import { getModelsByType, hasObjectType, } from '@manuscripts/manuscript-transform';
+import { hasObjectType } from '@manuscripts/manuscript-transform';
 import { ObjectTypes, } from '@manuscripts/manuscripts-json-schema';
 import { FileType } from '../components/FileManager/util';
-const getCaptionText = (caption) => caption &&
-    new DOMParser().parseFromString(caption, 'text/html').documentElement
-        .innerText;
 const getAttachment = (externalFileRef, attachmentsMap) => {
     if (!(externalFileRef === null || externalFileRef === void 0 ? void 0 : externalFileRef.url.includes('https://'))) {
         const attachmentId = externalFileRef === null || externalFileRef === void 0 ? void 0 : externalFileRef.url.replace('attachment:', '');
@@ -30,7 +27,6 @@ const getFigureData = (element, modelMap, attachmentsMap) => {
     return {
         id: element._id,
         attachments,
-        caption: getCaptionText(element.caption),
     };
 };
 export default (modelMap, attachments) => {
@@ -57,7 +53,6 @@ export default (modelMap, attachments) => {
                 label: `Table`,
                 type: FileType.SheetsWorkbooks,
                 attachments: [attachment],
-                caption: getCaptionText(tableElement.caption),
             });
         }
     });
@@ -107,18 +102,13 @@ const getAuxiliaryObjects = (modelMap) => {
     }
     return {
         graphicalAbstractFigureId,
-        figureElement: orderObjects[ObjectTypes.FigureElement]
-            ? sortAuxiliaryObject(orderObjects[ObjectTypes.FigureElement], figureElementIds)
-            : figureElementIds,
-        tableElement: orderObjects[ObjectTypes.TableElement]
-            ? sortAuxiliaryObject(orderObjects[ObjectTypes.TableElement], tableElementIds)
-            : tableElementIds,
+        figureElement: sortAuxiliaryObject(figureElementIds, orderObjects[ObjectTypes.FigureElement]),
+        tableElement: sortAuxiliaryObject(tableElementIds, orderObjects[ObjectTypes.TableElement]),
     };
 };
-const sortAuxiliaryObject = (orderObject, auxiliaryObjectIds) => {
+const sortAuxiliaryObject = (auxiliaryObjectIds, orderObject) => {
+    if (!orderObject) {
+        return auxiliaryObjectIds;
+    }
     return auxiliaryObjectIds.sort((a, b) => orderObject.elements.indexOf(a) - orderObject.elements.indexOf(b));
 };
-export const getSupplementFiles = (modelMap, attachments) => {
-    const supplements = new Map(getModelsByType(modelMap, ObjectTypes.Supplement).map((supplement) => { var _a; return [(_a = supplement.href) === null || _a === void 0 ? void 0 : _a.replace('attachment:', ''), supplement]; }));
-    return attachments.filter((attachment) => supplements.has(attachment.id));
-};

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

@@ -19,7 +19,8 @@ declare enum ActionTypes {
     HANDLE_CANCEL_UPLOAD = "handleCancel",
     HANDLE_UPLOAD_ACTION = "handleUpload",
     HANDLE_FINISH_UPLOAD = "handleFinishUpload",
-    HANDLE_SUCCESS_MESSAGE = "handleSuccessMessage"
+    HANDLE_SUCCESS_MESSAGE = "handleSuccessMessage",
+    HANDLE_SUCCESS_MESSAGE_DISMISS = "handleSuccessMessageDismiss"
 }
 export declare const reducer: (state: State, action: Action) => State;
 export interface Action {
@@ -33,6 +34,7 @@ export declare const actions: {
     SELECT_DESIGNATION: (designation: Designation) => Action;
     MOVE_FILE: (attachmentId: string, typeId: string, name: string, successMoveMessage: string) => Action;
     HANDLE_FINISH_UPLOAD: () => Action;
-    HANDLE_SUCCESS_MESSAGE: () => Action;
+    HANDLE_SUCCESS_MESSAGE: (successMessage: string) => Action;
+    HANDLE_SUCCESS_MESSAGE_DISMISS: () => Action;
 };
 export {};

package/dist/types/hooks/use-deep-compare.d.ts

@@ -0,0 +1,17 @@
+/*!
+ * © 2022 Atypon Systems LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+export declare const useDeepCompareMemo: <T, D>(callback: () => T, deps: D) => T;
+export declare const useDeepCompareCallback: <T, D>(callback: () => T, deps: D) => () => T;

package/dist/types/hooks/use-files.d.ts

@@ -0,0 +1,10 @@
+import { Model } from '@manuscripts/manuscripts-json-schema';
+import { SubmissionAttachment } from '../components/FileManager/FileSectionItem/FileSectionItem';
+import { InlineFile } from '../lib/inlineFiles';
+declare type FilePredicate = (fileName: string) => boolean;
+declare const _default: (modelMap: Map<string, Model>, attachments: SubmissionAttachment[], filePredicate?: FilePredicate | undefined) => {
+    otherFiles: SubmissionAttachment[];
+    supplementFiles: SubmissionAttachment[];
+    inlineFiles: InlineFile[];
+};
+export default _default;

package/dist/types/index.d.ts

@@ -45,11 +45,12 @@ export * from './components/Tip';
 export * from './components/icons';
 export * from './components/Inspector';
 export * from './components/InspectorSection';
-export { default as inlineFiles, getSupplementFiles } from './lib/inlineFiles';
 export { default as PdfPreview } from './components/PdfPreview';
 export * from './components/SubmissionInspector';
 export * from './components/Dropdown';
 export * from './hooks/use-dropdown';
+export { default as useFiles } from './hooks/use-files';
+export { useDeepCompareMemo, useDeepCompareCallback, } from './hooks/use-deep-compare';
 export * from './lib/authors';
 export * from './lib/capabilities';
 export { default as errorsDecoder } from './lib/lw-errors-decoder';

package/dist/types/lib/inlineFiles.d.ts

@@ -1,12 +1,11 @@
 import { Model } from '@manuscripts/manuscripts-json-schema';
 import { SubmissionAttachment } from '../components/FileManager/FileSectionItem/FileSectionItem';
 import { FileType } from '../components/FileManager/util';
-declare const _default: (modelMap: Map<string, Model>, attachments: SubmissionAttachment[]) => {
+export declare type InlineFile = {
     id: string;
     label: string;
     type: FileType;
-    caption?: string | undefined;
-    attachments?: SubmissionAttachment[] | undefined;
-}[];
+    attachments?: SubmissionAttachment[];
+};
+declare const _default: (modelMap: Map<string, Model>, attachments: SubmissionAttachment[]) => InlineFile[];
 export default _default;
-export declare const getSupplementFiles: (modelMap: Map<string, Model>, attachments: SubmissionAttachment[]) => SubmissionAttachment[];

package/package.json

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