@manuscripts/style-guide 1.13.9-LEAN-3311.0 → 1.13.9-LEAN-3771.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (65) hide show
  1. package/dist/cjs/components/Menus/Menus.js +2 -19
  2. package/dist/cjs/hooks/use-menus.js +2 -2
  3. package/dist/cjs/index.js +0 -4
  4. package/dist/cjs/lib/files.js +125 -77
  5. package/dist/es/components/Menus/Menus.js +2 -19
  6. package/dist/es/hooks/use-menus.js +2 -2
  7. package/dist/es/index.js +0 -4
  8. package/dist/es/lib/files.js +117 -73
  9. package/dist/types/components/Menus/Menus.d.ts +2 -2
  10. package/dist/types/hooks/use-menus.d.ts +2 -2
  11. package/dist/types/index.d.ts +0 -4
  12. package/dist/types/lib/files.d.ts +19 -24
  13. package/dist/types/lib/menus.d.ts +1 -6
  14. package/package.json +1 -1
  15. package/dist/cjs/components/FileManager/FileActions.js +0 -134
  16. package/dist/cjs/components/FileManager/FileContainer.js +0 -39
  17. package/dist/cjs/components/FileManager/FileCreatedDate.js +0 -25
  18. package/dist/cjs/components/FileManager/FileManager.js +0 -60
  19. package/dist/cjs/components/FileManager/FileManagerDragLayer.js +0 -55
  20. package/dist/cjs/components/FileManager/FileManagerProvider.js +0 -39
  21. package/dist/cjs/components/FileManager/FileName.js +0 -27
  22. package/dist/cjs/components/FileManager/FileSectionAlert.js +0 -170
  23. package/dist/cjs/components/FileManager/FileTypeIcon.js +0 -20
  24. package/dist/cjs/components/FileManager/FileUploader.js +0 -85
  25. package/dist/cjs/components/FileManager/InlineFilesSection.js +0 -133
  26. package/dist/cjs/components/FileManager/OtherFilesSection.js +0 -101
  27. package/dist/cjs/components/FileManager/SupplementsSection.js +0 -118
  28. package/dist/cjs/components/FileManager/index.js +0 -32
  29. package/dist/cjs/components/FileManager/util.js +0 -138
  30. package/dist/cjs/components/InsertTableDialog.js +0 -130
  31. package/dist/cjs/hooks/use-files.js +0 -39
  32. package/dist/es/components/FileManager/FileActions.js +0 -104
  33. package/dist/es/components/FileManager/FileContainer.js +0 -33
  34. package/dist/es/components/FileManager/FileCreatedDate.js +0 -18
  35. package/dist/es/components/FileManager/FileManager.js +0 -33
  36. package/dist/es/components/FileManager/FileManagerDragLayer.js +0 -48
  37. package/dist/es/components/FileManager/FileManagerProvider.js +0 -12
  38. package/dist/es/components/FileManager/FileName.js +0 -20
  39. package/dist/es/components/FileManager/FileSectionAlert.js +0 -163
  40. package/dist/es/components/FileManager/FileTypeIcon.js +0 -13
  41. package/dist/es/components/FileManager/FileUploader.js +0 -58
  42. package/dist/es/components/FileManager/InlineFilesSection.js +0 -103
  43. package/dist/es/components/FileManager/OtherFilesSection.js +0 -74
  44. package/dist/es/components/FileManager/SupplementsSection.js +0 -91
  45. package/dist/es/components/FileManager/index.js +0 -16
  46. package/dist/es/components/FileManager/util.js +0 -128
  47. package/dist/es/components/InsertTableDialog.js +0 -100
  48. package/dist/es/hooks/use-files.js +0 -35
  49. package/dist/types/components/FileManager/FileActions.d.ts +0 -19
  50. package/dist/types/components/FileManager/FileContainer.d.ts +0 -1
  51. package/dist/types/components/FileManager/FileCreatedDate.d.ts +0 -8
  52. package/dist/types/components/FileManager/FileManager.d.ts +0 -30
  53. package/dist/types/components/FileManager/FileManagerDragLayer.d.ts +0 -2
  54. package/dist/types/components/FileManager/FileManagerProvider.d.ts +0 -15
  55. package/dist/types/components/FileManager/FileName.d.ts +0 -6
  56. package/dist/types/components/FileManager/FileSectionAlert.d.ts +0 -13
  57. package/dist/types/components/FileManager/FileTypeIcon.d.ts +0 -5
  58. package/dist/types/components/FileManager/FileUploader.d.ts +0 -5
  59. package/dist/types/components/FileManager/InlineFilesSection.d.ts +0 -6
  60. package/dist/types/components/FileManager/OtherFilesSection.d.ts +0 -5
  61. package/dist/types/components/FileManager/SupplementsSection.d.ts +0 -5
  62. package/dist/types/components/FileManager/index.d.ts +0 -16
  63. package/dist/types/components/FileManager/util.d.ts +0 -25
  64. package/dist/types/components/InsertTableDialog.d.ts +0 -22
  65. package/dist/types/hooks/use-files.d.ts +0 -8
@@ -1,24 +1,19 @@
1
- import { Model } from '@manuscripts/json-schema';
2
- import { FileType } from '../components/FileManager/util';
3
- export type FileDesignation = {
4
- id: string;
5
- label?: string;
6
- };
7
- export type FileAttachment = {
8
- id: string;
9
- name: string;
10
- type: FileDesignation;
11
- createdDate?: Date;
12
- };
13
- export type ModelFile = FileAttachment & {
14
- modelId: string;
15
- };
16
- export type ElementFiles = {
17
- modelId: string;
18
- label: string;
19
- type: FileType;
20
- files: ModelFile[];
21
- };
22
- export declare const isModelFile: (file: FileAttachment) => file is ModelFile;
23
- export declare const getInlineFiles: (modelMap: Map<string, Model>, files: FileAttachment[]) => ElementFiles[];
24
- export declare const getSupplements: (modelMap: Map<string, Model>, files: FileAttachment[]) => ModelFile[];
1
+ /// <reference types="react" />
2
+ export declare enum FileType {
3
+ Image = 0,
4
+ Audio = 1,
5
+ Video = 2,
6
+ PlainDocument = 3,
7
+ SheetsWorkbooks = 4,
8
+ Latex = 5,
9
+ CodeFile = 6,
10
+ PdfFile = 7,
11
+ CompressedFile = 8,
12
+ PlainText = 9,
13
+ Figure = 10,
14
+ GraphicalAbstract = 11
15
+ }
16
+ export declare const getFileType: (name: string) => FileType | undefined;
17
+ export declare const getFileIcon: (name: string) => JSX.Element | undefined;
18
+ export declare const getFileTypeIcon: (type: FileType) => JSX.Element | undefined;
19
+ export declare const isImageFile: (name: string) => boolean;
@@ -19,11 +19,6 @@ export interface MenuShortcut {
19
19
  mac: string;
20
20
  pc: string;
21
21
  }
22
- export type TableConfig = {
23
- numberOfColumns: number;
24
- numberOfRows: number;
25
- includeHeader: boolean;
26
- };
27
22
  export interface MenuSpec {
28
23
  id: string;
29
24
  label: string;
@@ -31,7 +26,7 @@ export interface MenuSpec {
31
26
  shortcut?: MenuShortcut;
32
27
  isActive?: boolean;
33
28
  isEnabled: boolean;
34
- run?: (tableConfig?: TableConfig) => void;
29
+ run?: () => void;
35
30
  submenu?: (MenuSpec | MenuSeparator)[];
36
31
  options?: {
37
32
  [key: string]: () => void;
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@manuscripts/style-guide",
3
3
  "description": "Shared components for Manuscripts applications",
4
- "version": "1.13.9-LEAN-3311.0",
4
+ "version": "1.13.9-LEAN-3771.0",
5
5
  "repository": "github:Atypon-OpenSource/manuscripts-style-guide",
6
6
  "license": "Apache-2.0",
7
7
  "main": "dist/cjs",
@@ -1,134 +0,0 @@
1
- "use strict";
2
- var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
3
- if (k2 === undefined) k2 = k;
4
- var desc = Object.getOwnPropertyDescriptor(m, k);
5
- if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
6
- desc = { enumerable: true, get: function() { return m[k]; } };
7
- }
8
- Object.defineProperty(o, k2, desc);
9
- }) : (function(o, m, k, k2) {
10
- if (k2 === undefined) k2 = k;
11
- o[k2] = m[k];
12
- }));
13
- var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
14
- Object.defineProperty(o, "default", { enumerable: true, value: v });
15
- }) : function(o, v) {
16
- o["default"] = v;
17
- });
18
- var __importStar = (this && this.__importStar) || function (mod) {
19
- if (mod && mod.__esModule) return mod;
20
- var result = {};
21
- if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
22
- __setModuleDefault(result, mod);
23
- return result;
24
- };
25
- var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
26
- function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
27
- return new (P || (P = Promise))(function (resolve, reject) {
28
- function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
29
- function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
30
- function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
31
- step((generator = generator.apply(thisArg, _arguments || [])).next());
32
- });
33
- };
34
- var __importDefault = (this && this.__importDefault) || function (mod) {
35
- return (mod && mod.__esModule) ? mod : { "default": mod };
36
- };
37
- Object.defineProperty(exports, "__esModule", { value: true });
38
- exports.FileAction = exports.FileActionDropdownList = exports.ActionsIcon = exports.FileActions = void 0;
39
- const react_1 = __importStar(require("react"));
40
- const styled_components_1 = __importDefault(require("styled-components"));
41
- const use_dropdown_1 = require("../../hooks/use-dropdown");
42
- const Dialog_1 = require("../Dialog");
43
- const Dropdown_1 = require("../Dropdown");
44
- const icons_1 = require("../icons");
45
- const FileManager_1 = require("./FileManager");
46
- const FileActions = ({ sectionType, handleDownload, handleReplace, handleDetach, move, className, }) => {
47
- const can = (0, react_1.useContext)(FileManager_1.PermissionsContext);
48
- const { isOpen, toggleOpen, wrapperRef } = (0, use_dropdown_1.useDropdown)();
49
- const [isMoveDialogOpen, setMoveDialogOpen] = (0, react_1.useState)(false);
50
- const showDownload = (can === null || can === void 0 ? void 0 : can.downloadFiles) && handleDownload;
51
- const showReplace = (can === null || can === void 0 ? void 0 : can.replaceFile) && handleReplace;
52
- const showDetach = (can === null || can === void 0 ? void 0 : can.editArticle) && handleDetach;
53
- const showMove = (can === null || can === void 0 ? void 0 : can.moveFile) && move;
54
- const show = showDownload || showReplace || showDetach || showMove;
55
- const fileInputRef = (0, react_1.useRef)(null);
56
- const handleChange = (event) => __awaiter(void 0, void 0, void 0, function* () {
57
- if (handleReplace && event && event.target && event.target.files) {
58
- const file = event.target.files[0];
59
- yield handleReplace(file);
60
- }
61
- });
62
- const openFileDialog = () => {
63
- if (fileInputRef && fileInputRef.current) {
64
- fileInputRef.current.click();
65
- }
66
- };
67
- return show ? (react_1.default.createElement(Dropdown_1.DropdownContainer, { ref: wrapperRef },
68
- react_1.default.createElement(exports.ActionsIcon, { onClick: toggleOpen, type: "button", className: "show-on-hover", "data-cy": "file-actions", "aria-label": "Actions", "aria-pressed": isOpen },
69
- react_1.default.createElement(icons_1.DotsIcon, null)),
70
- isOpen && (react_1.default.createElement(exports.FileActionDropdownList, { "data-cy": "file-actions-dropdown", direction: "right", className: className, width: 192, top: 5, onClick: toggleOpen },
71
- showDownload && (react_1.default.createElement(exports.FileAction, { onClick: handleDownload }, "Download")),
72
- showReplace && (react_1.default.createElement(react_1.default.Fragment, null,
73
- react_1.default.createElement(exports.FileAction, { onClick: openFileDialog }, "Replace"),
74
- react_1.default.createElement("input", { ref: fileInputRef, type: "file", style: { display: 'none' }, onChange: handleChange }))),
75
- showDetach && react_1.default.createElement(exports.FileAction, { onClick: handleDetach }, "Detach"),
76
- showMove && (react_1.default.createElement(exports.FileAction, { onClick: () => setMoveDialogOpen(true) },
77
- "Move to ",
78
- move.sectionType)))),
79
- showMove && (react_1.default.createElement(MoveFileConfirmationDialog, { "data-cy": "file-move-confirm-dialog", isOpen: isMoveDialogOpen, close: () => setMoveDialogOpen(false), source: sectionType, target: move.sectionType, handleMove: move.handler })))) : (react_1.default.createElement(react_1.default.Fragment, null));
80
- };
81
- exports.FileActions = FileActions;
82
- const MoveFileConfirmationDialog = ({ isOpen, close, source, target, handleMove }) => {
83
- const header = `Are you sure you want to move this file to “${target}”?`;
84
- const message = `The file will be removed from “${source}” and added to “${target}”.`;
85
- const handleConfirm = () => __awaiter(void 0, void 0, void 0, function* () {
86
- yield handleMove();
87
- close();
88
- });
89
- return (react_1.default.createElement(Dialog_1.Dialog, { isOpen: isOpen, category: Dialog_1.Category.confirmation, header: header, message: message, actions: {
90
- primary: {
91
- action: handleConfirm,
92
- title: 'Move',
93
- },
94
- secondary: {
95
- action: () => close(),
96
- title: 'Cancel',
97
- },
98
- } }));
99
- };
100
- exports.ActionsIcon = styled_components_1.default.button `
101
- border: none;
102
- background: transparent;
103
- cursor: pointer;
104
- padding: 0 8px;
105
- &:focus {
106
- outline: none;
107
- }
108
- &:hover svg circle {
109
- fill: #1a9bc7;
110
- }
111
- `;
112
- exports.FileActionDropdownList = (0, styled_components_1.default)(Dropdown_1.DropdownList) `
113
- border: 1px solid #e2e2e2;
114
- box-sizing: border-box;
115
- box-shadow: 0 4px 9px rgba(0, 0, 0, 0.3);
116
- border-radius: 8px;
117
- min-width: 180px;
118
- background: ${(props) => props.theme.colors.background.primary};
119
- z-index: 999;
120
- text-align: left;
121
- overflow: hidden;
122
- `;
123
- exports.FileAction = styled_components_1.default.div `
124
- font-family: ${(props) => props.theme.font.family.Lato};
125
- cursor: pointer;
126
- font-size: 16px;
127
- line-height: 24px;
128
- color: ${(props) => props.theme.colors.text.primary};
129
- padding: 16px;
130
- &:hover,
131
- &:focus {
132
- background: #f2fbfc;
133
- }
134
- `;
@@ -1,39 +0,0 @@
1
- "use strict";
2
- var __importDefault = (this && this.__importDefault) || function (mod) {
3
- return (mod && mod.__esModule) ? mod : { "default": mod };
4
- };
5
- Object.defineProperty(exports, "__esModule", { value: true });
6
- exports.FileContainer = void 0;
7
- const styled_components_1 = __importDefault(require("styled-components"));
8
- exports.FileContainer = styled_components_1.default.div `
9
- display: flex;
10
- font-family: ${(props) => props.theme.font.family.Lato};
11
- align-items: center;
12
- cursor: pointer;
13
- box-sizing: border-box;
14
- position: relative;
15
- padding: 24px 18px;
16
- height: 72px;
17
-
18
- &.dragging {
19
- opacity: 0.2;
20
- }
21
-
22
- .file-icon {
23
- min-width: 20px;
24
- width: 20px;
25
- }
26
-
27
- .show-on-hover {
28
- display: none;
29
- }
30
-
31
- &:hover .show-on-hover {
32
- display: block;
33
- }
34
-
35
- &:hover,
36
- &:focus {
37
- background: #f2fbfc;
38
- }
39
- `;
@@ -1,25 +0,0 @@
1
- "use strict";
2
- var __importDefault = (this && this.__importDefault) || function (mod) {
3
- return (mod && mod.__esModule) ? mod : { "default": mod };
4
- };
5
- Object.defineProperty(exports, "__esModule", { value: true });
6
- exports.FileDate = exports.FileDateContainer = exports.FileCreatedDate = void 0;
7
- const date_fns_1 = require("date-fns");
8
- const react_1 = __importDefault(require("react"));
9
- const styled_components_1 = __importDefault(require("styled-components"));
10
- const Tooltip_1 = require("../Tooltip");
11
- const FileCreatedDate = ({ file, className }) => {
12
- return file.createdDate ? (react_1.default.createElement(exports.FileDateContainer, { "data-tooltip-id": `${file.id}-created-date-tooltip`, className: className },
13
- react_1.default.createElement(exports.FileDate, null, (0, date_fns_1.format)(new Date(file.createdDate), 'M/d/yy, HH:mm')),
14
- react_1.default.createElement(Tooltip_1.Tooltip, { id: `${file.id}-created-date-tooltip`, place: "bottom" }, "File Uploaded"))) : (react_1.default.createElement(react_1.default.Fragment, null));
15
- };
16
- exports.FileCreatedDate = FileCreatedDate;
17
- exports.FileDateContainer = styled_components_1.default.div `
18
- overflow: hidden;
19
- min-width: 88px;
20
- margin-left: 8px;
21
- `;
22
- exports.FileDate = styled_components_1.default.div `
23
- font-size: ${(props) => props.theme.font.size.small};
24
- line-height: 27px;
25
- `;
@@ -1,60 +0,0 @@
1
- "use strict";
2
- var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
3
- if (k2 === undefined) k2 = k;
4
- var desc = Object.getOwnPropertyDescriptor(m, k);
5
- if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
6
- desc = { enumerable: true, get: function() { return m[k]; } };
7
- }
8
- Object.defineProperty(o, k2, desc);
9
- }) : (function(o, m, k, k2) {
10
- if (k2 === undefined) k2 = k;
11
- o[k2] = m[k];
12
- }));
13
- var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
14
- Object.defineProperty(o, "default", { enumerable: true, value: v });
15
- }) : function(o, v) {
16
- o["default"] = v;
17
- });
18
- var __importStar = (this && this.__importStar) || function (mod) {
19
- if (mod && mod.__esModule) return mod;
20
- var result = {};
21
- if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
22
- __setModuleDefault(result, mod);
23
- return result;
24
- };
25
- Object.defineProperty(exports, "__esModule", { value: true });
26
- exports.FileManager = exports.PermissionsContext = void 0;
27
- const react_1 = __importStar(require("react"));
28
- const index_1 = require("../../index");
29
- const Inspector_1 = require("../Inspector");
30
- const InspectorSection_1 = require("../InspectorSection");
31
- const Tooltip_1 = require("../Tooltip");
32
- const FileManagerDragLayer_1 = require("./FileManagerDragLayer");
33
- const FileManagerProvider_1 = require("./FileManagerProvider");
34
- const InlineFilesSection_1 = require("./InlineFilesSection");
35
- const OtherFilesSection_1 = require("./OtherFilesSection");
36
- const SupplementsSection_1 = require("./SupplementsSection");
37
- exports.PermissionsContext = (0, react_1.createContext)(null);
38
- const FileManager = ({ files, fileManagement, modelMap, saveModel, deleteModel, enableDragAndDrop, can, }) => {
39
- const { inlineFiles, supplements, otherFiles } = (0, index_1.useFiles)(modelMap, files);
40
- return (react_1.default.createElement(FileManagerProvider_1.FileManagerProvider, { saveModel: saveModel, deleteModel: deleteModel, modelMap: modelMap, fileManagement: fileManagement },
41
- react_1.default.createElement(FileManagerDragLayer_1.FileManagerDragLayer, null),
42
- react_1.default.createElement(exports.PermissionsContext.Provider, { value: can },
43
- react_1.default.createElement(InspectorSection_1.InspectorSection, { title: 'Files', contentStyles: { margin: '24px 16px' } },
44
- react_1.default.createElement(Inspector_1.InspectorTabs, { defaultIndex: 0, "data-cy": "files-tabs", style: { overflow: 'visible' } },
45
- react_1.default.createElement(Inspector_1.InspectorTabList, null,
46
- react_1.default.createElement(Inspector_1.InspectorTab, { "data-tooltip-id": "inline-tooltip" }, "Inline files"),
47
- react_1.default.createElement(Tooltip_1.Tooltip, { id: "inline-tooltip", place: "bottom" }, "Files that can be found inline in the manuscript."),
48
- react_1.default.createElement(Inspector_1.InspectorTab, { "data-tooltip-id": "supplements-tooltip" }, "Supplements"),
49
- react_1.default.createElement(Tooltip_1.Tooltip, { id: "supplements-tooltip", place: "bottom" }, "Files that were marked as supplements."),
50
- react_1.default.createElement(Inspector_1.InspectorTab, { "data-tooltip-id": "other-tooltip" }, "Other files"),
51
- react_1.default.createElement(Tooltip_1.Tooltip, { id: "other-tooltip", place: "bottom" }, "Files excluded from the final submission.")),
52
- react_1.default.createElement(Inspector_1.InspectorTabPanels, { style: { overflowY: 'visible', position: 'relative' } },
53
- react_1.default.createElement(Inspector_1.InspectorTabPanel, { "data-cy": "inline" },
54
- react_1.default.createElement(InlineFilesSection_1.InlineFilesSection, { elements: inlineFiles, isEditor: enableDragAndDrop })),
55
- react_1.default.createElement(Inspector_1.InspectorTabPanel, { "data-cy": "supplements" },
56
- react_1.default.createElement(SupplementsSection_1.SupplementsSection, { supplements: supplements })),
57
- react_1.default.createElement(Inspector_1.InspectorTabPanel, { "data-cy": "other" },
58
- react_1.default.createElement(OtherFilesSection_1.OtherFilesSection, { files: otherFiles }))))))));
59
- };
60
- exports.FileManager = FileManager;
@@ -1,55 +0,0 @@
1
- "use strict";
2
- var __importDefault = (this && this.__importDefault) || function (mod) {
3
- return (mod && mod.__esModule) ? mod : { "default": mod };
4
- };
5
- Object.defineProperty(exports, "__esModule", { value: true });
6
- exports.FileManagerDragLayer = void 0;
7
- const react_1 = __importDefault(require("react"));
8
- const react_dnd_1 = require("react-dnd");
9
- const styled_components_1 = __importDefault(require("styled-components"));
10
- const FileContainer_1 = require("./FileContainer");
11
- const FileCreatedDate_1 = require("./FileCreatedDate");
12
- const FileName_1 = require("./FileName");
13
- const Container = styled_components_1.default.div `
14
- position: fixed;
15
- pointer-events: none;
16
- z-index: 999;
17
- left: 0;
18
- top: 0;
19
- max-width: 400px;
20
- `;
21
- const DraggableFileContainer = (0, styled_components_1.default)(FileContainer_1.FileContainer) `
22
- padding: 16px 32px;
23
- background: #f2fbfc;
24
- border: 1px solid #bce7f6;
25
- box-shadow: 0 4px 9px rgba(0, 0, 0, 0.3);
26
- border-radius: 6px;
27
- `;
28
- const getItemStyles = (currentOffset) => {
29
- if (!currentOffset) {
30
- return {
31
- display: 'none',
32
- };
33
- }
34
- const { x, y } = currentOffset;
35
- const transform = `translate(${x}px, ${y}px)`;
36
- return {
37
- transform,
38
- WebkitTransform: transform,
39
- };
40
- };
41
- const FileManagerDragLayer = () => {
42
- const { itemType, isDragging, item, currentOffset } = (0, react_dnd_1.useDragLayer)((monitor) => ({
43
- item: monitor.getItem(),
44
- itemType: monitor.getItemType(),
45
- currentOffset: monitor.getSourceClientOffset(),
46
- isDragging: monitor.isDragging(),
47
- }));
48
- if (!isDragging) {
49
- return null;
50
- }
51
- return (react_1.default.createElement(Container, { style: getItemStyles(currentOffset) }, itemType === 'file' && (react_1.default.createElement(DraggableFileContainer, null,
52
- react_1.default.createElement(FileName_1.FileName, { file: item.file }),
53
- item.file.createdDate && react_1.default.createElement(FileCreatedDate_1.FileCreatedDate, { file: item.file })))));
54
- };
55
- exports.FileManagerDragLayer = FileManagerDragLayer;
@@ -1,39 +0,0 @@
1
- "use strict";
2
- var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
3
- if (k2 === undefined) k2 = k;
4
- var desc = Object.getOwnPropertyDescriptor(m, k);
5
- if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
6
- desc = { enumerable: true, get: function() { return m[k]; } };
7
- }
8
- Object.defineProperty(o, k2, desc);
9
- }) : (function(o, m, k, k2) {
10
- if (k2 === undefined) k2 = k;
11
- o[k2] = m[k];
12
- }));
13
- var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
14
- Object.defineProperty(o, "default", { enumerable: true, value: v });
15
- }) : function(o, v) {
16
- o["default"] = v;
17
- });
18
- var __importStar = (this && this.__importStar) || function (mod) {
19
- if (mod && mod.__esModule) return mod;
20
- var result = {};
21
- if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
22
- __setModuleDefault(result, mod);
23
- return result;
24
- };
25
- Object.defineProperty(exports, "__esModule", { value: true });
26
- exports.FileManagerProvider = exports.FileManagerContext = void 0;
27
- const react_1 = __importStar(require("react"));
28
- exports.FileManagerContext = (0, react_1.createContext)({
29
- saveModel: () => '',
30
- });
31
- const FileManagerProvider = ({ children, saveModel, deleteModel, modelMap, fileManagement }) => {
32
- return (react_1.default.createElement(exports.FileManagerContext.Provider, { value: {
33
- saveModel,
34
- deleteModel,
35
- modelMap,
36
- fileManagement,
37
- } }, children));
38
- };
39
- exports.FileManagerProvider = FileManagerProvider;
@@ -1,27 +0,0 @@
1
- "use strict";
2
- var __importDefault = (this && this.__importDefault) || function (mod) {
3
- return (mod && mod.__esModule) ? mod : { "default": mod };
4
- };
5
- Object.defineProperty(exports, "__esModule", { value: true });
6
- exports.FileNameText = exports.FileName = void 0;
7
- const react_1 = __importDefault(require("react"));
8
- const styled_components_1 = __importDefault(require("styled-components"));
9
- const FileTypeIcon_1 = require("./FileTypeIcon");
10
- const FileName = ({ file }) => {
11
- return (react_1.default.createElement(react_1.default.Fragment, null,
12
- react_1.default.createElement(FileTypeIcon_1.FileTypeIcon, { file: file }),
13
- react_1.default.createElement(exports.FileNameText, { "data-cy": "filename" }, file.name)));
14
- };
15
- exports.FileName = FileName;
16
- exports.FileNameText = styled_components_1.default.div `
17
- font-family: ${(props) => props.theme.font.family.Lato};
18
- font-size: ${(props) => props.theme.font.size.medium};
19
- line-height: ${(props) => props.theme.font.lineHeight.large};
20
- font-weight: ${(props) => props.theme.font.weight.normal};
21
- color: ${(props) => props.theme.colors.text.primary};
22
- margin-left: ${(props) => props.theme.grid.unit * 2}px;
23
- flex-grow: 1;
24
- overflow: hidden;
25
- white-space: nowrap;
26
- text-overflow: ellipsis;
27
- `;
@@ -1,170 +0,0 @@
1
- "use strict";
2
- var __importDefault = (this && this.__importDefault) || function (mod) {
3
- return (mod && mod.__esModule) ? mod : { "default": mod };
4
- };
5
- Object.defineProperty(exports, "__esModule", { value: true });
6
- exports.FileSectionAlert = exports.FileSectionAlertType = void 0;
7
- const react_1 = __importDefault(require("react"));
8
- const styled_components_1 = __importDefault(require("styled-components"));
9
- const AlertMessage_1 = require("../AlertMessage");
10
- const icons_1 = require("../icons");
11
- const FileContainer_1 = require("./FileContainer");
12
- const FileName_1 = require("./FileName");
13
- var FileSectionAlertType;
14
- (function (FileSectionAlertType) {
15
- FileSectionAlertType[FileSectionAlertType["NONE"] = 0] = "NONE";
16
- FileSectionAlertType[FileSectionAlertType["UPLOAD_IN_PROGRESS"] = 1] = "UPLOAD_IN_PROGRESS";
17
- FileSectionAlertType[FileSectionAlertType["UPLOAD_SUCCESSFUL"] = 2] = "UPLOAD_SUCCESSFUL";
18
- FileSectionAlertType[FileSectionAlertType["MOVE_SUCCESSFUL"] = 3] = "MOVE_SUCCESSFUL";
19
- })(FileSectionAlertType = exports.FileSectionAlertType || (exports.FileSectionAlertType = {}));
20
- const FileSectionAlert = ({ alert }) => {
21
- return (react_1.default.createElement(react_1.default.Fragment, null,
22
- alert.type === FileSectionAlertType.UPLOAD_IN_PROGRESS && (react_1.default.createElement(FileUploadInProgressAlert, { name: alert.message })),
23
- alert.type === FileSectionAlertType.UPLOAD_SUCCESSFUL && (react_1.default.createElement(FileUploadSuccessful, null)),
24
- alert.type === FileSectionAlertType.MOVE_SUCCESSFUL && (react_1.default.createElement(FileMoveSuccessful, { name: alert.message }))));
25
- };
26
- exports.FileSectionAlert = FileSectionAlert;
27
- const FileUploadInProgressAlert = ({ name }) => {
28
- return (react_1.default.createElement(FileUploadContainer, null,
29
- react_1.default.createElement(icons_1.FileUnknownIcon, null),
30
- react_1.default.createElement(FileUploadNameContainer, null,
31
- react_1.default.createElement(UploadFileNameText, null, name),
32
- react_1.default.createElement(FileUploadProgressBar, null))));
33
- };
34
- const FileUploadSuccessful = () => {
35
- return (react_1.default.createElement(AlertMessageContainer, null,
36
- react_1.default.createElement(AlertMessage_1.AlertMessage, { type: AlertMessage_1.AlertMessageType.success, hideCloseButton: true, dismissButton: {
37
- text: 'OK',
38
- } }, "File uploaded successfully")));
39
- };
40
- const FileMoveSuccessful = ({ name }) => {
41
- return (react_1.default.createElement(AlertMessageContainer, null,
42
- react_1.default.createElement(AlertMessage_1.AlertMessage, { type: AlertMessage_1.AlertMessageType.success, hideCloseButton: true, dismissButton: {
43
- text: 'OK',
44
- } },
45
- "File moved to ",
46
- name)));
47
- };
48
- const AlertMessageContainer = styled_components_1.default.div `
49
- margin-left: 16px;
50
- margin-right: 16px;
51
- `;
52
- const FileUploadContainer = (0, styled_components_1.default)(FileContainer_1.FileContainer) `
53
- background: #f2fbfc;
54
- `;
55
- const FileUploadNameContainer = styled_components_1.default.div `
56
- flex-grow: 1;
57
- margin-left: 8px;
58
- `;
59
- const UploadFileNameText = (0, styled_components_1.default)(FileName_1.FileNameText) `
60
- margin: 0;
61
- `;
62
- const FileUploadProgressBar = () => {
63
- return (react_1.default.createElement(LinearProgress, null,
64
- react_1.default.createElement(Bar, { className: "bar1" }),
65
- react_1.default.createElement(Bar, { className: "bar2" })));
66
- };
67
- const LinearProgress = styled_components_1.default.div `
68
- background: ${(props) => props.theme.colors.background.tertiary};
69
- opacity: 0.7;
70
- height: 4px;
71
- position: relative;
72
- width: 100%;
73
- margin: 8px auto 0;
74
- overflow: hidden;
75
- border-radius: 8px;
76
- animation: start 0.3s ease-in;
77
- `;
78
- const Bar = styled_components_1.default.div `
79
- position: absolute;
80
- opacity: 0.7;
81
- background: #1a9bc7;
82
- transition: transform 0.2s linear;
83
- left: 0;
84
- top: 0;
85
- bottom: 0;
86
- width: 100%;
87
-
88
- &.bar1 {
89
- animation: growBar1 2.5s infinite, moveBar1 2.5s infinite;
90
- }
91
-
92
- &.bar2 {
93
- animation: growBar2 2.5s infinite, moveBar2 2.5s infinite;
94
- }
95
-
96
- @keyframes growBar1 {
97
- 0% {
98
- animation-timing-function: linear;
99
- transform: scaleX(0.1);
100
- }
101
- 35% {
102
- animation-timing-function: cubic-bezier(0.3, 0.1, 0.7, 1);
103
- transform: scaleX(0.1);
104
- }
105
- 70% {
106
- animation-timing-function: cubic-bezier(0.2, 0, 0.2, 1.4);
107
- transform: scaleX(0.8);
108
- }
109
- 100% {
110
- transform: scaleX(0.1);
111
- }
112
- }
113
-
114
- @keyframes moveBar1 {
115
- 0% {
116
- left: -105%;
117
- animation-timing-function: linear;
118
- }
119
- 20% {
120
- left: -105%;
121
- animation-timing-function: cubic-bezier(0.5, 0, 0.7, 0.4);
122
- }
123
- 60% {
124
- left: 21%;
125
- animation-timing-function: cubic-bezier(0.3, 0.4, 0.55, 0.9);
126
- }
127
- 80% {
128
- left: 40%;
129
- animation-timing-function: cubic-bezier(0.1, 0.2, 0.3, 0.95);
130
- }
131
- 100% {
132
- left: 90%;
133
- }
134
- }
135
-
136
- @keyframes growBar2 {
137
- 0% {
138
- animation-timing-function: cubic-bezier(0.2, 0, 0.5, 0.4);
139
- transform: scaleX(0.1);
140
- }
141
- 20% {
142
- animation-timing-function: cubic-bezier(0.1, 0.2, 0.6, 1);
143
- transform: scaleX(0.3);
144
- }
145
- 60% {
146
- animation-timing-function: cubic-bezier(0.2, 0, 0.2, 1.4);
147
- transform: scaleX(0.6);
148
- }
149
- 100% {
150
- transform: scaleX(0.1);
151
- }
152
- }
153
- @keyframes moveBar2 {
154
- 0% {
155
- left: -100%;
156
- animation-timing-function: cubic-bezier(0.15, 0, 0.5, 0.4);
157
- }
158
- 25% {
159
- left: -50%;
160
- animation-timing-function: cubic-bezier(0.3, 0.3, 0.8, 0.7);
161
- }
162
- 50% {
163
- left: 45%;
164
- animation-timing-function: cubic-bezier(0.1, 0.6, 0.6, 0.9);
165
- }
166
- 100% {
167
- left: 95%;
168
- }
169
- }
170
- `;
@@ -1,20 +0,0 @@
1
- "use strict";
2
- var __importDefault = (this && this.__importDefault) || function (mod) {
3
- return (mod && mod.__esModule) ? mod : { "default": mod };
4
- };
5
- Object.defineProperty(exports, "__esModule", { value: true });
6
- exports.FileTypeIcon = void 0;
7
- const react_1 = __importDefault(require("react"));
8
- const icons_1 = require("../icons");
9
- const util_1 = require("./util");
10
- const FileTypeIcon = ({ file }) => {
11
- if (file.type.id === 'missing') {
12
- return react_1.default.createElement(icons_1.FileCorruptedIcon, { className: "file-icon" });
13
- }
14
- if (file.type.id === 'main-manuscript') {
15
- return react_1.default.createElement(icons_1.FileMainDocumentIcon, { className: "file-icon" });
16
- }
17
- const icon = (0, util_1.getFileIcon)(file);
18
- return icon || react_1.default.createElement(icons_1.FileUnknownIcon, { className: "file-icon" });
19
- };
20
- exports.FileTypeIcon = FileTypeIcon;