@manuscripts/style-guide 1.3.2-LEAN-2859-0 → 1.3.2-LEAN-2859-2

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

@@ -9,9 +9,9 @@ const react_1 = __importDefault(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
 const Tooltip_1 = require("./Tooltip");
 const FileCreatedDate = ({ file, className }) => {
-    return file.createdDate ? (react_1.default.createElement(exports.FileDateContainer, { "data-tip": "tooltip-content", className: className },
+    return file.createdDate ? (react_1.default.createElement(exports.FileDateContainer, { "data-tip": "File Uploaded", "data-for": `${file.id}-created-date`, className: className },
         react_1.default.createElement(exports.FileDate, null, (0, date_fns_1.format)(new Date(file.createdDate), 'M/d/yy, HH:mm')),
-        react_1.default.createElement(Tooltip_1.Tooltip, { place: "bottom", offset: { top: 0 }, effect: "solid", className: "tooltip" }, "File Uploaded"))) : (react_1.default.createElement(react_1.default.Fragment, null));
+        react_1.default.createElement(Tooltip_1.Tooltip, { id: `${file.id}-created-date`, place: "bottom", offset: { top: 0 }, effect: "solid", className: "tooltip" }, "File Uploaded"))) : (react_1.default.createElement(react_1.default.Fragment, null));
 };
 exports.FileCreatedDate = FileCreatedDate;
 exports.FileDateContainer = styled_components_1.default.div `

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

@@ -7,12 +7,10 @@ exports.FileNameText = exports.FileName = void 0;
 const react_1 = __importDefault(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
 const FileTypeIcon_1 = require("./FileTypeIcon");
-const Tooltip_1 = require("./Tooltip");
 const FileName = ({ file }) => {
     return (react_1.default.createElement(react_1.default.Fragment, null,
         react_1.default.createElement(FileTypeIcon_1.FileTypeIcon, { file: file }),
-        react_1.default.createElement(exports.FileNameText, null, file.name),
-        react_1.default.createElement(Tooltip_1.Tooltip, { place: "bottom", offset: { top: 0 }, effect: "solid", className: "tooltip" }, file.name)));
+        react_1.default.createElement(exports.FileNameText, null, file.name)));
 };
 exports.FileName = FileName;
 exports.FileNameText = styled_components_1.default.div `

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

@@ -16,16 +16,7 @@ const FileTypeIcon = ({ file }) => {
     if (file.type.id === 'main-manuscript') {
         return react_1.default.createElement(document_icon_with_dot_1.default, { className: "file-icon" });
     }
-    const name = file.name;
-    const index = name.indexOf('.');
-    const extension = index ? name.substring(index + 1) : '';
-    if (extension) {
-        const type = util_1.extensionsWithFileTypesMap.get(extension.toLowerCase());
-        const icon = util_1.fileTypesWithIconMap.get(type);
-        if (icon) {
-            return icon;
-        }
-    }
-    return react_1.default.createElement(unknown_format_file_icon_1.default, { className: "file-icon" });
+    const icon = (0, util_1.getFileIcon)(file);
+    return icon || react_1.default.createElement(unknown_format_file_icon_1.default, { className: "file-icon" });
 };
 exports.FileTypeIcon = FileTypeIcon;

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

@@ -73,7 +73,7 @@ const InlineFilesSection = ({ elements, isEditor }) => {
         var _a;
         return (react_1.default.createElement(Element, { key: index, id: element.modelId, onClick: onElementClick },
             react_1.default.createElement(ElementLabelContainer, null,
-                util_1.fileTypesWithIconMap.get(element.type),
+                (0, util_1.getFileTypeIcon)(element.type),
                 react_1.default.createElement(ElementLabel, null, element.label)),
             react_1.default.createElement(ElementFilesContainer, null, (_a = element.files) === null || _a === void 0 ? void 0 : _a.map((file) => (react_1.default.createElement(ElementFile, { key: file.modelId, file: file, handleReplace: (f) => __awaiter(void 0, void 0, void 0, function* () { return yield replace(file.modelId, f); }), handleDetach: () => __awaiter(void 0, void 0, void 0, function* () { return yield detach(file.modelId); }), handleDownload: () => fileManagement.download(file) }))))));
     })));
@@ -103,6 +103,7 @@ const Element = styled_components_1.default.div `
 const ElementLabelContainer = styled_components_1.default.div `
   display: flex;
   padding: 20px 16px;
+  cursor: pointer;
 `;
 const ElementLabel = styled_components_1.default.div `
   color: ${(props) => props.theme.colors.text.primary};

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

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.fileTypesWithIconMap = exports.extensionsWithFileTypesMap = exports.FileType = exports.FileSectionType = void 0;
+exports.isImageFile = exports.getFileTypeIcon = exports.getFileIcon = exports.getFileType = exports.FileType = exports.FileSectionType = void 0;
 const react_1 = __importDefault(require("react"));
 const audio_icon_1 = __importDefault(require("../icons/audio-icon"));
 const code_file_icon_1 = __importDefault(require("../icons/code-file-icon"));
@@ -38,7 +38,7 @@ var FileType;
     FileType[FileType["Figure"] = 10] = "Figure";
     FileType[FileType["GraphicalAbstract"] = 11] = "GraphicalAbstract";
 })(FileType = exports.FileType || (exports.FileType = {}));
-exports.extensionsWithFileTypesMap = new Map([
+const extension2type = new Map([
     ['png', FileType.Image],
     ['jpg', FileType.Image],
     ['jpeg', FileType.Image],
@@ -74,7 +74,7 @@ exports.extensionsWithFileTypesMap = new Map([
     ['tgz', FileType.CompressedFile],
     ['txt', FileType.PlainText],
 ]);
-exports.fileTypesWithIconMap = new Map([
+const type2icon = new Map([
     [FileType.Audio, react_1.default.createElement(audio_icon_1.default, { key: FileType.Audio, className: "file-icon" })],
     [FileType.Video, react_1.default.createElement(video_icon_1.default, { key: FileType.Video, className: "file-icon" })],
     [
@@ -113,3 +113,25 @@ exports.fileTypesWithIconMap = new Map([
     ],
     [undefined, react_1.default.createElement(unknown_format_file_icon_1.default, { key: undefined, className: "file-icon" })],
 ]);
+const getFileType = (file) => {
+    const extension = getExtension(file.name);
+    return extension2type.get(extension.toLowerCase());
+};
+exports.getFileType = getFileType;
+const getFileIcon = (file) => {
+    const type = (0, exports.getFileType)(file);
+    return type2icon.get(type);
+};
+exports.getFileIcon = getFileIcon;
+const getFileTypeIcon = (type) => {
+    return type2icon.get(type);
+};
+exports.getFileTypeIcon = getFileTypeIcon;
+const isImageFile = (file) => {
+    return (0, exports.getFileType)(file) === FileType.Image;
+};
+exports.isImageFile = isImageFile;
+const getExtension = (name) => {
+    const index = name.indexOf('.');
+    return index ? name.substring(index + 1) : '';
+};

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

@@ -25,7 +25,7 @@ const useDeepCompare = (deps) => {
     }
     return ref.current;
 };
-const useDeepCompareMemo = (callback, deps) => (0, react_1.useMemo)(callback, [useDeepCompare(deps), callback]);
+const useDeepCompareMemo = (callback, deps) => (0, react_1.useMemo)(callback, [useDeepCompare(deps)]);
 exports.useDeepCompareMemo = useDeepCompareMemo;
-const useDeepCompareCallback = (callback, deps) => (0, react_1.useCallback)(callback, [useDeepCompare(deps), callback]);
+const useDeepCompareCallback = (callback, deps) => (0, react_1.useCallback)(callback, [useDeepCompare(deps)]);
 exports.useDeepCompareCallback = useDeepCompareCallback;

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

@@ -1,23 +1,39 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useFiles = void 0;
+const json_schema_1 = require("@manuscripts/json-schema");
 const files_1 = require("../lib/files");
 const use_deep_compare_1 = require("./use-deep-compare");
-const getOtherFiles = (inlineFiles, supplements, files, filter) => {
+const types = [
+    json_schema_1.ObjectTypes.Section,
+    json_schema_1.ObjectTypes.FigureElement,
+    json_schema_1.ObjectTypes.Figure,
+    json_schema_1.ObjectTypes.Supplement,
+    json_schema_1.ObjectTypes.ElementsOrder,
+];
+const getOtherFiles = (inlineFiles, supplements, files) => {
     const excluded = new Set();
     inlineFiles.flatMap((f) => f.files).forEach((f) => excluded.add(f.id));
     supplements.forEach((s) => excluded.add(s.id));
-    return files.filter((f) => !excluded.has(f.id) && (!filter || filter(f)));
+    return files.filter((f) => !excluded.has(f.id));
+};
+const useFiles = (modelMap, files) => {
+    const models = [];
+    for (const [_, model] of modelMap.entries()) {
+        if (types.includes(model.objectType)) {
+            models.push(model);
+        }
+    }
+    return (0, use_deep_compare_1.useDeepCompareMemo)(() => {
+        const inlineFiles = (0, files_1.getInlineFiles)(modelMap, files);
+        const supplements = (0, files_1.getSupplements)(modelMap, files);
+        const otherFiles = getOtherFiles(inlineFiles, supplements, files);
+        return {
+            inlineFiles,
+            supplements,
+            otherFiles,
+        };
+    }, [models, files]);
 };
-const useFiles = (modelMap, files, filter) => (0, use_deep_compare_1.useDeepCompareMemo)(() => {
-    const inlineFiles = (0, files_1.getInlineFiles)(modelMap, files);
-    const supplements = (0, files_1.getSupplements)(modelMap, files);
-    const otherFiles = getOtherFiles(inlineFiles, supplements, files, filter);
-    return {
-        inlineFiles,
-        supplements,
-        otherFiles,
-    };
-}, [...Array.from(modelMap.values()), ...files]);
 exports.useFiles = useFiles;
 exports.default = exports.useFiles;

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

@@ -3,9 +3,9 @@ import React from 'react';
 import styled from 'styled-components';
 import { Tooltip } from './Tooltip';
 export const FileCreatedDate = ({ file, className }) => {
-    return file.createdDate ? (React.createElement(FileDateContainer, { "data-tip": "tooltip-content", className: className },
+    return file.createdDate ? (React.createElement(FileDateContainer, { "data-tip": "File Uploaded", "data-for": `${file.id}-created-date`, className: className },
         React.createElement(FileDate, null, format(new Date(file.createdDate), 'M/d/yy, HH:mm')),
-        React.createElement(Tooltip, { place: "bottom", offset: { top: 0 }, effect: "solid", className: "tooltip" }, "File Uploaded"))) : (React.createElement(React.Fragment, null));
+        React.createElement(Tooltip, { id: `${file.id}-created-date`, place: "bottom", offset: { top: 0 }, effect: "solid", className: "tooltip" }, "File Uploaded"))) : (React.createElement(React.Fragment, null));
 };
 export const FileDateContainer = styled.div `
   overflow: hidden;

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

@@ -1,12 +1,10 @@
 import React from 'react';
 import styled from 'styled-components';
 import { FileTypeIcon } from './FileTypeIcon';
-import { Tooltip } from './Tooltip';
 export const FileName = ({ file }) => {
     return (React.createElement(React.Fragment, null,
         React.createElement(FileTypeIcon, { file: file }),
-        React.createElement(FileNameText, null, file.name),
-        React.createElement(Tooltip, { place: "bottom", offset: { top: 0 }, effect: "solid", className: "tooltip" }, file.name)));
+        React.createElement(FileNameText, null, file.name)));
 };
 export const FileNameText = styled.div `
   font-family: ${(props) => props.theme.font.family.Lato};

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

@@ -2,7 +2,7 @@ import React from 'react';
 import CorruptedFileIcon from '../icons/corrupted-file-icon';
 import DocumentIconWithDot from '../icons/document-icon-with-dot';
 import UnknownFormatFileIcon from '../icons/unknown-format-file-icon';
-import { extensionsWithFileTypesMap, fileTypesWithIconMap } from './util';
+import { getFileIcon } from './util';
 export const FileTypeIcon = ({ file }) => {
     if (file.type.id === 'missing') {
         return React.createElement(CorruptedFileIcon, { className: "file-icon" });
@@ -10,15 +10,6 @@ export const FileTypeIcon = ({ file }) => {
     if (file.type.id === 'main-manuscript') {
         return React.createElement(DocumentIconWithDot, { className: "file-icon" });
     }
-    const name = file.name;
-    const index = name.indexOf('.');
-    const extension = index ? name.substring(index + 1) : '';
-    if (extension) {
-        const type = extensionsWithFileTypesMap.get(extension.toLowerCase());
-        const icon = fileTypesWithIconMap.get(type);
-        if (icon) {
-            return icon;
-        }
-    }
-    return React.createElement(UnknownFormatFileIcon, { className: "file-icon" });
+    const icon = getFileIcon(file);
+    return icon || React.createElement(UnknownFormatFileIcon, { className: "file-icon" });
 };

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

@@ -14,7 +14,7 @@ import { FileContainer } from './FileContainer';
 import { FileCreatedDate } from './FileCreatedDate';
 import { FileManagerContext } from './FileManagerProvider';
 import { FileName } from './FileName';
-import { FileSectionType, fileTypesWithIconMap } from './util';
+import { FileSectionType, getFileTypeIcon } from './util';
 const trackedJoint = ':dataTracked:';
 export const InlineFilesSection = ({ elements, isEditor }) => {
     const { modelMap, fileManagement, saveModel } = useContext(FileManagerContext);
@@ -44,7 +44,7 @@ export const InlineFilesSection = ({ elements, isEditor }) => {
         var _a;
         return (React.createElement(Element, { key: index, id: element.modelId, onClick: onElementClick },
             React.createElement(ElementLabelContainer, null,
-                fileTypesWithIconMap.get(element.type),
+                getFileTypeIcon(element.type),
                 React.createElement(ElementLabel, null, element.label)),
             React.createElement(ElementFilesContainer, null, (_a = element.files) === null || _a === void 0 ? void 0 : _a.map((file) => (React.createElement(ElementFile, { key: file.modelId, file: file, handleReplace: (f) => __awaiter(void 0, void 0, void 0, function* () { return yield replace(file.modelId, f); }), handleDetach: () => __awaiter(void 0, void 0, void 0, function* () { return yield detach(file.modelId); }), handleDownload: () => fileManagement.download(file) }))))));
     })));
@@ -73,6 +73,7 @@ const Element = styled.div `
 const ElementLabelContainer = styled.div `
   display: flex;
   padding: 20px 16px;
+  cursor: pointer;
 `;
 const ElementLabel = styled.div `
   color: ${(props) => props.theme.colors.text.primary};

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

@@ -32,7 +32,7 @@ export var FileType;
     FileType[FileType["Figure"] = 10] = "Figure";
     FileType[FileType["GraphicalAbstract"] = 11] = "GraphicalAbstract";
 })(FileType || (FileType = {}));
-export const extensionsWithFileTypesMap = new Map([
+const extension2type = new Map([
     ['png', FileType.Image],
     ['jpg', FileType.Image],
     ['jpeg', FileType.Image],
@@ -68,7 +68,7 @@ export const extensionsWithFileTypesMap = new Map([
     ['tgz', FileType.CompressedFile],
     ['txt', FileType.PlainText],
 ]);
-export const fileTypesWithIconMap = new Map([
+const type2icon = new Map([
     [FileType.Audio, React.createElement(AudioIcon, { key: FileType.Audio, className: "file-icon" })],
     [FileType.Video, React.createElement(VideoIcon, { key: FileType.Video, className: "file-icon" })],
     [
@@ -107,3 +107,21 @@ export const fileTypesWithIconMap = new Map([
     ],
     [undefined, React.createElement(UnknownFormatFileIcon, { key: undefined, className: "file-icon" })],
 ]);
+export const getFileType = (file) => {
+    const extension = getExtension(file.name);
+    return extension2type.get(extension.toLowerCase());
+};
+export const getFileIcon = (file) => {
+    const type = getFileType(file);
+    return type2icon.get(type);
+};
+export const getFileTypeIcon = (type) => {
+    return type2icon.get(type);
+};
+export const isImageFile = (file) => {
+    return getFileType(file) === FileType.Image;
+};
+const getExtension = (name) => {
+    const index = name.indexOf('.');
+    return index ? name.substring(index + 1) : '';
+};

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

@@ -22,5 +22,5 @@ const useDeepCompare = (deps) => {
     }
     return ref.current;
 };
-export const useDeepCompareMemo = (callback, deps) => useMemo(callback, [useDeepCompare(deps), callback]);
-export const useDeepCompareCallback = (callback, deps) => useCallback(callback, [useDeepCompare(deps), callback]);
+export const useDeepCompareMemo = (callback, deps) => useMemo(callback, [useDeepCompare(deps)]);
+export const useDeepCompareCallback = (callback, deps) => useCallback(callback, [useDeepCompare(deps)]);

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

@@ -1,19 +1,35 @@
+import { ObjectTypes } from '@manuscripts/json-schema';
 import { getInlineFiles, getSupplements, } from '../lib/files';
 import { useDeepCompareMemo } from './use-deep-compare';
-const getOtherFiles = (inlineFiles, supplements, files, filter) => {
+const types = [
+    ObjectTypes.Section,
+    ObjectTypes.FigureElement,
+    ObjectTypes.Figure,
+    ObjectTypes.Supplement,
+    ObjectTypes.ElementsOrder,
+];
+const getOtherFiles = (inlineFiles, supplements, files) => {
     const excluded = new Set();
     inlineFiles.flatMap((f) => f.files).forEach((f) => excluded.add(f.id));
     supplements.forEach((s) => excluded.add(s.id));
-    return files.filter((f) => !excluded.has(f.id) && (!filter || filter(f)));
+    return files.filter((f) => !excluded.has(f.id));
+};
+export const useFiles = (modelMap, files) => {
+    const models = [];
+    for (const [_, model] of modelMap.entries()) {
+        if (types.includes(model.objectType)) {
+            models.push(model);
+        }
+    }
+    return useDeepCompareMemo(() => {
+        const inlineFiles = getInlineFiles(modelMap, files);
+        const supplements = getSupplements(modelMap, files);
+        const otherFiles = getOtherFiles(inlineFiles, supplements, files);
+        return {
+            inlineFiles,
+            supplements,
+            otherFiles,
+        };
+    }, [models, files]);
 };
-export const useFiles = (modelMap, files, filter) => useDeepCompareMemo(() => {
-    const inlineFiles = getInlineFiles(modelMap, files);
-    const supplements = getSupplements(modelMap, files);
-    const otherFiles = getOtherFiles(inlineFiles, supplements, files, filter);
-    return {
-        inlineFiles,
-        supplements,
-        otherFiles,
-    };
-}, [...Array.from(modelMap.values()), ...files]);
 export default useFiles;

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

@@ -6,6 +6,7 @@ import { Capabilities } from '../../lib/capabilities';
 import { FileAttachment } from '../../lib/files';
 export type Upload = (file: File) => Promise<FileAttachment>;
 export type Download = (file: FileAttachment) => void;
+export type PreviewLink = (file: FileAttachment) => string | undefined;
 export type Replace = (file: File) => Promise<void>;
 export type Move = {
     sectionType: FileSectionType;
@@ -14,6 +15,7 @@ export type Move = {
 export interface FileManagement {
     upload: Upload;
     download: Download;
+    previewLink: PreviewLink;
 }
 export type SaveModel = <T extends Model>(model: T | Build<T> | Partial<T>) => Promise<T>;
 export type DeleteModel = (id: string) => Promise<string>;

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

@@ -1,3 +1,4 @@
+import { FileAttachment } from '../../lib/files';
 export declare enum FileSectionType {
     Inline = "Inline files",
     Supplements = "Supplements",
@@ -17,5 +18,7 @@ export declare enum FileType {
     Figure = 10,
     GraphicalAbstract = 11
 }
-export declare const extensionsWithFileTypesMap: Map<string, FileType>;
-export declare const fileTypesWithIconMap: Map<FileType | undefined, JSX.Element>;
+export declare const getFileType: (file: FileAttachment) => FileType | undefined;
+export declare const getFileIcon: (file: FileAttachment) => JSX.Element | undefined;
+export declare const getFileTypeIcon: (type: FileType) => JSX.Element | undefined;
+export declare const isImageFile: (file: FileAttachment) => boolean;

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

@@ -1,7 +1,6 @@
 import { Model } from '@manuscripts/json-schema';
 import { ElementFiles, FileAttachment, ModelFile } from '../lib/files';
-type FileFilter = (file: FileAttachment) => boolean;
-export declare const useFiles: (modelMap: Map<string, Model>, files: FileAttachment[], filter?: FileFilter) => {
+export declare const useFiles: (modelMap: Map<string, Model>, files: FileAttachment[]) => {
     inlineFiles: ElementFiles[];
     supplements: ModelFile[];
     otherFiles: FileAttachment[];

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

@@ -8,7 +8,6 @@ export type FileAttachment = {
     id: string;
     name: string;
     type: FileDesignation;
-    link?: string;
     createdDate?: Date;
 };
 export type ModelFile = FileAttachment & {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@manuscripts/style-guide",
   "description": "Shared components for Manuscripts applications",
-  "version": "1.3.2-LEAN-2859-0",
+  "version": "1.3.2-LEAN-2859-2",
   "repository": "github:Atypon-OpenSource/manuscripts-style-guide",
   "license": "Apache-2.0",
   "main": "dist/cjs",