@manuscripts/style-guide 1.3.5-LEAN-2705-5 → 1.3.6-LEAN-2585-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 (115) hide show
  1. package/dist/cjs/components/AuthorsList/Author.js +19 -11
  2. package/dist/cjs/components/AuthorsList/AuthorsList.js +1 -1
  3. package/dist/cjs/components/EditorHeader/EditorHeader.js +11 -3
  4. package/dist/cjs/components/EditorHeader/ProceedView.js +6 -25
  5. package/dist/cjs/components/FileManager/{FileSectionItem/DragLayer.js → DragLayer.js} +12 -10
  6. package/dist/cjs/components/FileManager/FileActions.js +134 -0
  7. package/dist/cjs/components/FileManager/FileContainer.js +39 -0
  8. package/dist/cjs/components/FileManager/FileCreatedDate.js +25 -0
  9. package/dist/cjs/components/FileManager/FileManager.js +14 -125
  10. package/dist/cjs/components/FileManager/FileManagerProvider.js +2 -7
  11. package/dist/cjs/components/FileManager/FileName.js +27 -0
  12. package/dist/cjs/components/FileManager/FileSectionAlert.js +170 -0
  13. package/dist/cjs/components/FileManager/FileTypeIcon.js +22 -0
  14. package/dist/cjs/components/FileManager/{UploadFileArea.js → FileUploader.js} +19 -12
  15. package/dist/cjs/components/FileManager/InlineFilesSection.js +71 -126
  16. package/dist/cjs/components/FileManager/OtherFilesSection.js +101 -0
  17. package/dist/cjs/components/FileManager/SupplementsSection.js +118 -0
  18. package/dist/cjs/components/FileManager/{TooltipDiv.js → Tooltip.js} +8 -3
  19. package/dist/cjs/components/FileManager/util.js +52 -67
  20. package/dist/cjs/components/icons/corrupted-file-icon.js +27 -0
  21. package/dist/cjs/components/icons/document-icon-with-dot.js +1 -1
  22. package/dist/cjs/hooks/use-deep-compare.js +2 -2
  23. package/dist/cjs/hooks/use-files.js +29 -43
  24. package/dist/cjs/index.js +3 -4
  25. package/dist/cjs/lib/capabilities.js +1 -2
  26. package/dist/cjs/lib/files.js +85 -0
  27. package/dist/es/components/AuthorsList/Author.js +19 -11
  28. package/dist/es/components/AuthorsList/AuthorsList.js +1 -1
  29. package/dist/es/components/EditorHeader/EditorHeader.js +11 -3
  30. package/dist/es/components/EditorHeader/ProceedView.js +7 -26
  31. package/dist/es/components/FileManager/{FileSectionItem/DragLayer.js → DragLayer.js} +12 -10
  32. package/dist/es/components/FileManager/FileActions.js +104 -0
  33. package/dist/es/components/FileManager/FileContainer.js +33 -0
  34. package/dist/es/components/FileManager/FileCreatedDate.js +18 -0
  35. package/dist/es/components/FileManager/FileManager.js +16 -124
  36. package/dist/es/components/FileManager/FileManagerProvider.js +3 -8
  37. package/dist/es/components/FileManager/FileName.js +20 -0
  38. package/dist/es/components/FileManager/FileSectionAlert.js +163 -0
  39. package/dist/es/components/FileManager/FileTypeIcon.js +15 -0
  40. package/dist/es/components/FileManager/{UploadFileArea.js → FileUploader.js} +17 -10
  41. package/dist/es/components/FileManager/InlineFilesSection.js +72 -127
  42. package/dist/es/components/FileManager/OtherFilesSection.js +74 -0
  43. package/dist/es/components/FileManager/SupplementsSection.js +91 -0
  44. package/dist/es/components/FileManager/{TooltipDiv.js → Tooltip.js} +7 -2
  45. package/dist/es/components/FileManager/util.js +47 -65
  46. package/dist/es/components/icons/corrupted-file-icon.js +22 -0
  47. package/dist/es/components/icons/document-icon-with-dot.js +1 -1
  48. package/dist/es/hooks/use-deep-compare.js +2 -2
  49. package/dist/es/hooks/use-files.js +29 -40
  50. package/dist/es/index.js +2 -2
  51. package/dist/es/lib/capabilities.js +1 -2
  52. package/dist/es/lib/files.js +79 -0
  53. package/dist/types/components/AuthorsList/Author.d.ts +1 -0
  54. package/dist/types/components/EditorHeader/ProceedView.d.ts +1 -0
  55. package/dist/types/components/FileManager/FileActions.d.ts +19 -0
  56. package/dist/types/components/FileManager/FileContainer.d.ts +1 -0
  57. package/dist/types/components/FileManager/FileCreatedDate.d.ts +8 -0
  58. package/dist/types/components/FileManager/FileManager.d.ts +17 -8
  59. package/dist/types/components/FileManager/FileManagerProvider.d.ts +8 -18
  60. package/dist/types/components/FileManager/FileName.d.ts +6 -0
  61. package/dist/types/components/FileManager/FileSectionAlert.d.ts +13 -0
  62. package/dist/types/components/FileManager/{FileSectionItem/FileTypeIcon.d.ts → FileTypeIcon.d.ts} +2 -3
  63. package/dist/types/components/FileManager/FileUploader.d.ts +4 -0
  64. package/dist/types/components/FileManager/InlineFilesSection.d.ts +3 -19
  65. package/dist/types/components/FileManager/OtherFilesSection.d.ts +5 -0
  66. package/dist/types/components/FileManager/SupplementsSection.d.ts +5 -0
  67. package/dist/types/components/FileManager/Tooltip.d.ts +2 -0
  68. package/dist/types/components/FileManager/util.d.ts +8 -12
  69. package/dist/types/components/icons/corrupted-file-icon.d.ts +19 -0
  70. package/dist/types/hooks/use-files.d.ts +4 -6
  71. package/dist/types/index.d.ts +2 -2
  72. package/dist/types/lib/capabilities.d.ts +0 -1
  73. package/dist/types/lib/files.d.ts +24 -0
  74. package/package.json +3 -3
  75. package/dist/cjs/components/FileManager/ConfirmationPopUp.js +0 -90
  76. package/dist/cjs/components/FileManager/DragItemArea.js +0 -28
  77. package/dist/cjs/components/FileManager/FileSectionItem/DraggableFileSectionItem.js +0 -76
  78. package/dist/cjs/components/FileManager/FileSectionItem/FileInfo.js +0 -115
  79. package/dist/cjs/components/FileManager/FileSectionItem/FileSectionItem.js +0 -95
  80. package/dist/cjs/components/FileManager/FileSectionItem/FileSectionUploadItem.js +0 -37
  81. package/dist/cjs/components/FileManager/FileSectionItem/FileTypeIcon.js +0 -53
  82. package/dist/cjs/components/FileManager/FileSectionItem/ItemActions.js +0 -92
  83. package/dist/cjs/components/FileManager/FileSectionItem/ProgressBarUploadItem.js +0 -120
  84. package/dist/cjs/components/FileManager/FileSectionState.js +0 -83
  85. package/dist/cjs/components/FileManager/FilesSection.js +0 -61
  86. package/dist/cjs/components/FileManager/ItemsAction.js +0 -48
  87. package/dist/cjs/lib/inlineFiles.js +0 -92
  88. package/dist/es/components/FileManager/ConfirmationPopUp.js +0 -62
  89. package/dist/es/components/FileManager/DragItemArea.js +0 -21
  90. package/dist/es/components/FileManager/FileSectionItem/DraggableFileSectionItem.js +0 -46
  91. package/dist/es/components/FileManager/FileSectionItem/FileInfo.js +0 -85
  92. package/dist/es/components/FileManager/FileSectionItem/FileSectionItem.js +0 -88
  93. package/dist/es/components/FileManager/FileSectionItem/FileSectionUploadItem.js +0 -30
  94. package/dist/es/components/FileManager/FileSectionItem/FileTypeIcon.js +0 -46
  95. package/dist/es/components/FileManager/FileSectionItem/ItemActions.js +0 -65
  96. package/dist/es/components/FileManager/FileSectionItem/ProgressBarUploadItem.js +0 -113
  97. package/dist/es/components/FileManager/FileSectionState.js +0 -78
  98. package/dist/es/components/FileManager/FilesSection.js +0 -34
  99. package/dist/es/components/FileManager/ItemsAction.js +0 -42
  100. package/dist/es/lib/inlineFiles.js +0 -90
  101. package/dist/types/components/FileManager/ConfirmationPopUp.d.ts +0 -12
  102. package/dist/types/components/FileManager/DragItemArea.d.ts +0 -4
  103. package/dist/types/components/FileManager/FileSectionItem/DraggableFileSectionItem.d.ts +0 -3
  104. package/dist/types/components/FileManager/FileSectionItem/FileInfo.d.ts +0 -19
  105. package/dist/types/components/FileManager/FileSectionItem/FileSectionItem.d.ts +0 -38
  106. package/dist/types/components/FileManager/FileSectionItem/FileSectionUploadItem.d.ts +0 -12
  107. package/dist/types/components/FileManager/FileSectionItem/ItemActions.d.ts +0 -21
  108. package/dist/types/components/FileManager/FileSectionItem/ProgressBarUploadItem.d.ts +0 -4
  109. package/dist/types/components/FileManager/FileSectionState.d.ts +0 -38
  110. package/dist/types/components/FileManager/FilesSection.d.ts +0 -12
  111. package/dist/types/components/FileManager/ItemsAction.d.ts +0 -4
  112. package/dist/types/components/FileManager/TooltipDiv.d.ts +0 -1
  113. package/dist/types/components/FileManager/UploadFileArea.d.ts +0 -9
  114. package/dist/types/lib/inlineFiles.d.ts +0 -11
  115. /package/dist/types/components/FileManager/{FileSectionItem/DragLayer.d.ts → DragLayer.d.ts} +0 -0
@@ -0,0 +1,19 @@
1
+ /*!
2
+ * © 2019 Atypon Systems LLC
3
+ *
4
+ * Licensed under the Apache License, Version 2.0 (the "License");
5
+ * you may not use this file except in compliance with the License.
6
+ * You may obtain a copy of the License at
7
+ *
8
+ * http://www.apache.org/licenses/LICENSE-2.0
9
+ *
10
+ * Unless required by applicable law or agreed to in writing, software
11
+ * distributed under the License is distributed on an "AS IS" BASIS,
12
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13
+ * See the License for the specific language governing permissions and
14
+ * limitations under the License.
15
+ */
16
+ import React from 'react';
17
+ import { IconProps } from './types';
18
+ declare const CorruptedFileIcon: React.FC<IconProps>;
19
+ export default CorruptedFileIcon;
@@ -1,10 +1,8 @@
1
1
  import { Model } from '@manuscripts/json-schema';
2
- import { FileAttachment } from '../components/FileManager/FileSectionItem/FileSectionItem';
3
- import { InlineFile } from '../lib/inlineFiles';
4
- type FilePredicate = (fileName: string) => boolean;
5
- export declare const useFiles: (modelMap: Map<string, Model>, attachments: FileAttachment[], filePredicate?: FilePredicate) => {
2
+ import { ElementFiles, FileAttachment, ModelFile } from '../lib/files';
3
+ export declare const useFiles: (modelMap: Map<string, Model>, files: FileAttachment[]) => {
4
+ inlineFiles: ElementFiles[];
5
+ supplements: ModelFile[];
6
6
  otherFiles: FileAttachment[];
7
- supplementFiles: FileAttachment[];
8
- inlineFiles: InlineFile[];
9
7
  };
10
8
  export default useFiles;
@@ -32,7 +32,6 @@ export * from './components/Checkbox';
32
32
  export * from './components/Form';
33
33
  export * from './components/FileManager';
34
34
  export * from './components/FileManager/util';
35
- export * from './components/FileManager/FileSectionItem/FileSectionItem';
36
35
  export * from './components/Resizer';
37
36
  export * from './components/SaveStatus';
38
37
  export * from './components/SimpleModal';
@@ -50,10 +49,11 @@ export * from './components/NavDropdown';
50
49
  export * from './components/SubmissionInspector';
51
50
  export * from './components/Dropdown';
52
51
  export * from './hooks/use-dropdown';
53
- export { useFiles } from './hooks/use-files';
52
+ export * from './hooks/use-files';
54
53
  export { useDeepCompareMemo, useDeepCompareCallback, } from './hooks/use-deep-compare';
55
54
  export * from './lib/authors';
56
55
  export * from './lib/capabilities';
56
+ export * from './lib/files';
57
57
  export { default as errorsDecoder } from './lib/errors-decoder';
58
58
  export * from './types';
59
59
  export * from './components/LoadingOverlay';
@@ -38,7 +38,6 @@ export type Capabilities = {
38
38
  editMetadata: boolean;
39
39
  shareProject: boolean;
40
40
  editCitationsAndRefs: boolean;
41
- applySaveChanges: boolean;
42
41
  };
43
42
  export interface ProviderProps {
44
43
  project?: Project;
@@ -0,0 +1,24 @@
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[];
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.3.5-LEAN-2705-5",
4
+ "version": "1.3.6-LEAN-2585-0",
5
5
  "repository": "github:Atypon-OpenSource/manuscripts-style-guide",
6
6
  "license": "Apache-2.0",
7
7
  "main": "dist/cjs",
@@ -20,7 +20,7 @@
20
20
  "build:es": "tsc --outDir dist/es --declarationDir dist/types --declaration",
21
21
  "build-storybook": "build-storybook",
22
22
  "dev": "npm-run-all --parallel 'build:* --project tsconfig.build.json --watch'",
23
- "lint": "eslint src --ext .ts,.tsx --max-warnings=0",
23
+ "lint": "eslint src stories --ext .ts,.tsx --max-warnings=0",
24
24
  "lint:fix": "eslint src stories --fix --ext .ts,.tsx --max-warnings=0",
25
25
  "prebuild": "rimraf dist",
26
26
  "prettier": "prettier --write \"{src,stories}/**/*.{ts,tsx}\"",
@@ -141,4 +141,4 @@
141
141
  "resolutions": {
142
142
  "@types/react": "^17.0.2"
143
143
  }
144
- }
144
+ }
@@ -1,90 +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
- Object.defineProperty(exports, "__esModule", { value: true });
35
- exports.MoveFilePopup = exports.ConfirmationPopUp = void 0;
36
- const json_schema_1 = require("@manuscripts/json-schema");
37
- const transform_1 = require("@manuscripts/transform");
38
- const react_1 = __importStar(require("react"));
39
- const Dialog_1 = require("../Dialog");
40
- const FileManagerProvider_1 = require("./FileManagerProvider");
41
- const FileSectionState_1 = require("./FileSectionState");
42
- const util_1 = require("./util");
43
- const ConfirmationPopUp = ({ popupHeader, popUpMessage, isOpen, handleClose, handleMove }) => {
44
- return (react_1.default.createElement(Dialog_1.Dialog, { isOpen: isOpen, category: Dialog_1.Category.confirmation, header: popupHeader, message: popUpMessage, actions: {
45
- primary: {
46
- action: handleMove,
47
- title: 'Move',
48
- },
49
- secondary: {
50
- action: handleClose,
51
- title: 'Cancel',
52
- },
53
- } }));
54
- };
55
- exports.ConfirmationPopUp = ConfirmationPopUp;
56
- const MoveFilePopup = ({ dispatch, }) => {
57
- const { moveFilePopup: { isOpen, fileSection, attachmentId }, saveModel, deleteModel, modelMap, getAttachments, setMoveFilePopupData, } = (0, react_1.useContext)(FileManagerProvider_1.FileManagerContext);
58
- const isSupplement = fileSection === util_1.FileSectionType.Supplements;
59
- const message = {
60
- popupHeader: `Are you sure you want to move this file to “${(!isSupplement && 'Supplements') || 'Other files'}”?`,
61
- popUpMessage: `The file will be removed from the “${(isSupplement && 'Supplements') || 'Other files'}” and added to “${(!isSupplement && 'Supplements') || 'Other files'}”.`,
62
- };
63
- const closePopup = (0, react_1.useCallback)(() => setMoveFilePopupData({
64
- isOpen: false,
65
- fileSection: fileSection,
66
- }), [fileSection, setMoveFilePopupData]);
67
- const showSuccessMessage = (0, react_1.useCallback)(() => dispatch(FileSectionState_1.actions.HANDLE_SUCCESS_MESSAGE(`File moved to ${(isSupplement && 'Other files') || 'Supplements'}.`, fileSection)), [dispatch, fileSection, isSupplement]);
68
- const moveToSupplement = (0, react_1.useCallback)(() => __awaiter(void 0, void 0, void 0, function* () {
69
- closePopup();
70
- const attachment = getAttachments().find(({ id }) => id === attachmentId);
71
- if (!attachment) {
72
- return;
73
- }
74
- const model = (0, transform_1.buildSupplementaryMaterial)(attachment.name, `attachment:${attachment.id}`);
75
- yield saveModel(Object.assign(Object.assign({}, model), { title: attachment.name, href: `attachment:${attachment.id}` }));
76
- showSuccessMessage();
77
- }), [getAttachments, saveModel, showSuccessMessage, closePopup, attachmentId]);
78
- const moveSupplementToOtherFiles = (0, react_1.useCallback)(() => __awaiter(void 0, void 0, void 0, function* () {
79
- closePopup();
80
- const model = (0, transform_1.getModelsByType)(modelMap, json_schema_1.ObjectTypes.Supplement).find(({ href }) => (href === null || href === void 0 ? void 0 : href.replace('attachment:', '')) === attachmentId);
81
- if (!model) {
82
- return;
83
- }
84
- yield deleteModel(model._id);
85
- showSuccessMessage();
86
- }), [attachmentId, closePopup, deleteModel, modelMap, showSuccessMessage]);
87
- return (react_1.default.createElement(react_1.default.Fragment, null,
88
- react_1.default.createElement(exports.ConfirmationPopUp, Object.assign({ isOpen: isOpen }, message, { handleMove: () => (!isSupplement && moveToSupplement()) || moveSupplementToOtherFiles(), handleClose: closePopup }))));
89
- };
90
- exports.MoveFilePopup = MoveFilePopup;
@@ -1,28 +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.DragItemArea = void 0;
7
- const react_1 = __importDefault(require("react"));
8
- const styled_components_1 = __importDefault(require("styled-components"));
9
- const drag_drop_file_icon_1 = __importDefault(require("../icons/drag-drop-file-icon"));
10
- const DragItemArea = ({ text }) => {
11
- return (react_1.default.createElement(Container, null,
12
- react_1.default.createElement("div", null,
13
- react_1.default.createElement(drag_drop_file_icon_1.default, null)),
14
- text));
15
- };
16
- exports.DragItemArea = DragItemArea;
17
- const Container = styled_components_1.default.div `
18
- display: flex;
19
- flex-direction: column;
20
- align-items: center;
21
- justify-content: center;
22
- font-size: 14px;
23
- line-height: 24px;
24
- font-family: ${(props) => props.theme.font.family.Lato};
25
- color: ${(props) => props.theme.colors.text.onLight};
26
- padding: 32px 0;
27
- text-align: center;
28
- `;
@@ -1,76 +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 __importDefault = (this && this.__importDefault) || function (mod) {
26
- return (mod && mod.__esModule) ? mod : { "default": mod };
27
- };
28
- Object.defineProperty(exports, "__esModule", { value: true });
29
- exports.DraggableFileSectionItem = void 0;
30
- const react_1 = __importStar(require("react"));
31
- const react_dnd_1 = require("react-dnd");
32
- const react_dnd_html5_backend_1 = require("react-dnd-html5-backend");
33
- const styled_components_1 = __importDefault(require("styled-components"));
34
- const FileSectionItem_1 = require("./FileSectionItem");
35
- const itemPlaceHolderDraggingStyle = {
36
- background: '#FAFAFA',
37
- borderRadius: '6px',
38
- height: '104px',
39
- };
40
- const draggingItemStyle = {
41
- opacity: 0,
42
- height: 0,
43
- };
44
- const DraggableFileSectionItem = (props) => {
45
- const [draggingItemWidth, setDraggingItemWidth] = (0, react_1.useState)('100%');
46
- const itemPlaceholderRef = (0, react_1.useRef)();
47
- const [{ isDragging }, dragRef, preview] = (0, react_dnd_1.useDrag)({
48
- item: {
49
- id: props.title,
50
- title: props.title,
51
- externalFile: props.externalFile,
52
- showAttachmentName: props.showAttachmentName,
53
- width: draggingItemWidth,
54
- type: 'FileSectionItem',
55
- },
56
- collect: (monitor) => ({
57
- isDragging: monitor.isDragging(),
58
- }),
59
- });
60
- (0, react_1.useEffect)(() => {
61
- if (itemPlaceholderRef && itemPlaceholderRef.current) {
62
- setDraggingItemWidth(itemPlaceholderRef.current.offsetWidth + 'px');
63
- }
64
- }, []);
65
- (0, react_1.useEffect)(() => {
66
- preview((0, react_dnd_html5_backend_1.getEmptyImage)());
67
- }, [preview]);
68
- return (react_1.default.createElement(ItemDraggingPlaceholderContainer, { style: isDragging ? itemPlaceHolderDraggingStyle : {}, ref: itemPlaceholderRef },
69
- react_1.default.createElement(FileSectionItem_1.FileSectionItem, Object.assign({ style: isDragging ? draggingItemStyle : {}, dragRef: dragRef }, props))));
70
- };
71
- exports.DraggableFileSectionItem = DraggableFileSectionItem;
72
- const ItemDraggingPlaceholderContainer = styled_components_1.default.div `
73
- background: ${(props) => props.theme.colors.background.primary};
74
- width: 100%;
75
- position: relative;
76
- `;
@@ -1,115 +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 __importDefault = (this && this.__importDefault) || function (mod) {
26
- return (mod && mod.__esModule) ? mod : { "default": mod };
27
- };
28
- Object.defineProperty(exports, "__esModule", { value: true });
29
- exports.FileDescription = exports.FileDate = exports.FileName = exports.FileNameContainer = exports.FileTitle = exports.FileNameTitleContainer = exports.FileInfoContainer = exports.FileDateContainer = exports.FileInfo = void 0;
30
- const date_fns_1 = require("date-fns");
31
- const react_1 = __importStar(require("react"));
32
- const react_tooltip_1 = __importDefault(require("react-tooltip"));
33
- const styled_components_1 = __importDefault(require("styled-components"));
34
- const FileManager_1 = require("../FileManager");
35
- const TooltipDiv_1 = require("../TooltipDiv");
36
- const FileInfo = ({ showAttachmentName, title, fileAttachmentName, fileExtension, attachmentId, dispatch, fileCreatedDate, }) => {
37
- const fileName = fileAttachmentName.substring(0, fileAttachmentName.lastIndexOf('.'));
38
- const can = (0, react_1.useContext)(FileManager_1.PermissionsContext);
39
- return (react_1.default.createElement(exports.FileInfoContainer, null,
40
- react_1.default.createElement(exports.FileNameTitleContainer, null,
41
- react_1.default.createElement(exports.FileTitle, null,
42
- !showAttachmentName ? fileName : title,
43
- showAttachmentName && ':'),
44
- showAttachmentName && (react_1.default.createElement(exports.FileNameContainer, null,
45
- react_1.default.createElement(exports.FileName, null, fileName),
46
- react_1.default.createElement("div", null,
47
- ".",
48
- fileExtension))),
49
- fileCreatedDate && (react_1.default.createElement(exports.FileDateContainer, { "data-tip": "tooltip-content" },
50
- react_1.default.createElement(exports.FileDate, null, (0, date_fns_1.format)(new Date(fileCreatedDate), 'M/d/yy, HH:mm')),
51
- react_1.default.createElement(TooltipDiv_1.TooltipDiv, null,
52
- react_1.default.createElement(react_tooltip_1.default, { place: "bottom", offset: { top: 0 }, effect: "solid", className: "tooltip" },
53
- react_1.default.createElement("div", null, "File uploaded"))))))));
54
- };
55
- exports.FileInfo = FileInfo;
56
- exports.FileDateContainer = styled_components_1.default.div `
57
- line-height: 20px;
58
- overflow: hidden;
59
- width: 100%;
60
- display: none;
61
- justify-content: flex-end;
62
- `;
63
- exports.FileInfoContainer = styled_components_1.default.div `
64
- margin-left: 8px;
65
- overflow: hidden;
66
- display: flex;
67
- flex-direction: column;
68
- justify-content: center;
69
- align-items: start;
70
- width: 100%;
71
-
72
- &:hover ${exports.FileDateContainer} {
73
- display: flex;
74
- }
75
- `;
76
- exports.FileNameTitleContainer = styled_components_1.default.div `
77
- display: flex;
78
- width: 100%;
79
- align-items: baseline;
80
- `;
81
- exports.FileTitle = styled_components_1.default.div `
82
- color: ${(props) => props.theme.colors.text.primary};
83
- font-weight: bold;
84
- font-size: 16px;
85
- line-height: 20px;
86
- margin-right: 4px;
87
- white-space: nowrap;
88
- `;
89
- exports.FileNameContainer = styled_components_1.default.div `
90
- display: flex;
91
- color: ${(props) => props.theme.colors.text.primary};
92
- font-weight: normal;
93
- font-size: 16px;
94
- line-height: 20px;
95
- overflow: hidden;
96
- width: 100%;
97
- `;
98
- exports.FileName = styled_components_1.default.div `
99
- text-overflow: ellipsis;
100
- white-space: nowrap;
101
- overflow: hidden;
102
- width: 50px;
103
- `;
104
- exports.FileDate = styled_components_1.default.div `
105
- font-size: font-size: ${(props) => props.theme.font.size.small};
106
- `;
107
- exports.FileDescription = styled_components_1.default.div `
108
- color: ${(props) => props.theme.colors.text.secondary};
109
- font-size: 14px;
110
- line-height: 20px;
111
- text-overflow: ellipsis;
112
- white-space: nowrap;
113
- overflow: hidden;
114
- width: 100%;
115
- `;
@@ -1,95 +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.ItemContainer = exports.Item = exports.ActionsIcon = exports.FileSectionItem = void 0;
7
- const react_1 = __importDefault(require("react"));
8
- const styled_components_1 = __importDefault(require("styled-components"));
9
- const use_dropdown_1 = require("../../../hooks/use-dropdown");
10
- const Dropdown_1 = require("../../Dropdown");
11
- const icons_1 = require("../../icons/");
12
- const dots_icon_1 = __importDefault(require("../../icons/dots-icon"));
13
- const FileInfo_1 = require("./FileInfo");
14
- const FileTypeIcon_1 = require("./FileTypeIcon");
15
- const ItemActions_1 = require("./ItemActions");
16
- const FileSectionItem = ({ fileSection, externalFile, title, showAttachmentName = false, showReplaceAction = true, handleDownload, handleReplace, handleSupplementReplace, dispatch, dragRef, className, style, onClose, isEditor, }) => {
17
- const { isOpen, toggleOpen, wrapperRef } = (0, use_dropdown_1.useDropdown)();
18
- const fileExtension = externalFile.name.substring(externalFile.name.lastIndexOf('.') + 1);
19
- const isMainManuscript = externalFile.type.label === 'main-manuscript';
20
- const isSelected = externalFile.id == window.location.hash.substr(1);
21
- return (react_1.default.createElement(exports.Item, { ref: dragRef, className: className, style: style },
22
- react_1.default.createElement(exports.ItemContainer, { onClick: () => {
23
- window.location.hash =
24
- isEditor && !isSelected ? `#${externalFile.id}` : '#';
25
- if (isSelected) {
26
- window.location.hash = `#${externalFile.id}`;
27
- }
28
- } },
29
- react_1.default.createElement(FileTypeIcon_1.FileTypeIcon, { withDot: isMainManuscript, fileExtension: fileExtension, alt: externalFile.name }),
30
- react_1.default.createElement(FileInfo_1.FileInfo, { fileExtension: fileExtension, fileCreatedDate: externalFile.createdDate, showAttachmentName: showAttachmentName, fileAttachmentName: externalFile.name, title: title, attachmentId: externalFile.id, dispatch: dispatch })),
31
- onClose && (react_1.default.createElement(IconCloseButton, { onClick: (e) => {
32
- e.preventDefault();
33
- onClose();
34
- } },
35
- react_1.default.createElement(icons_1.CloseOIcon, { color: '#6E6E6E' }))),
36
- handleDownload && handleReplace && (react_1.default.createElement(Dropdown_1.DropdownContainer, { ref: wrapperRef },
37
- react_1.default.createElement(exports.ActionsIcon, { onClick: toggleOpen, type: "button", "aria-label": "Download or Replace", "aria-pressed": isOpen },
38
- react_1.default.createElement(dots_icon_1.default, null)),
39
- isOpen && (react_1.default.createElement(ItemActions_1.ItemActions, { fileSection: fileSection, isMainManuscript: isMainManuscript, replaceAttachmentHandler: handleReplace, showReplaceAction: showReplaceAction, downloadAttachmentHandler: handleDownload, handleSupplementReplace: handleSupplementReplace, attachmentId: externalFile.id, fileName: externalFile.name, publicUrl: externalFile.link, hideActionList: toggleOpen, dispatch: dispatch }))))));
40
- };
41
- exports.FileSectionItem = FileSectionItem;
42
- const IconCloseButton = styled_components_1.default.button `
43
- border: none;
44
- background: transparent;
45
- cursor: pointer;
46
- padding: 0 8px;
47
- align-self: flex-start;
48
- &:hover {
49
- opacity: 0.5;
50
- }
51
- `;
52
- exports.ActionsIcon = styled_components_1.default.button `
53
- visibility: hidden;
54
- border: none;
55
- background: transparent;
56
- cursor: pointer;
57
- padding: 0 8px;
58
- &:focus {
59
- outline: none;
60
- }
61
- &:hover svg circle {
62
- fill: #1a9bc7;
63
- }
64
- `;
65
- exports.Item = styled_components_1.default.div `
66
- display: flex;
67
- font-family: ${(props) => props.theme.font.family.Lato};
68
- padding: 20px 15px;
69
- cursor: pointer;
70
- box-sizing: border-box;
71
- width: 100%;
72
- position: relative;
73
-
74
- &:hover,
75
- &:focus {
76
- background: #f2fbfc;
77
- }
78
-
79
- &:hover ${exports.ActionsIcon} {
80
- visibility: visible;
81
- }
82
-
83
- ${Dropdown_1.DropdownContainer} {
84
- position: absolute;
85
- top: 24px;
86
- right: 0;
87
- margin-right: 8px;
88
- }
89
- `;
90
- exports.ItemContainer = styled_components_1.default.div `
91
- display: flex;
92
- min-width: calc(100% - 8px);
93
- padding-right: 4px;
94
- box-sizing: border-box;
95
- `;
@@ -1,37 +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.ProgressBar = exports.UploadItemContainer = exports.FileSectionUploadItem = void 0;
7
- const react_1 = __importDefault(require("react"));
8
- const styled_components_1 = __importDefault(require("styled-components"));
9
- const FileInfo_1 = require("./FileInfo");
10
- const FileSectionItem_1 = require("./FileSectionItem");
11
- const FileTypeIcon_1 = require("./FileTypeIcon");
12
- const ProgressBarUploadItem_1 = require("./ProgressBarUploadItem");
13
- const FileSectionUploadItem = ({ fileName, isLoading, dragRef, className, style, }) => {
14
- const fileExtension = fileName.substring(fileName.lastIndexOf('.') + 1);
15
- fileName = fileName.substring(0, fileName.lastIndexOf('.'));
16
- return (react_1.default.createElement(FileSectionItem_1.Item, { ref: dragRef, className: className, style: style },
17
- react_1.default.createElement(exports.UploadItemContainer, null,
18
- react_1.default.createElement(FileTypeIcon_1.FileTypeIcon, { withDot: false }),
19
- react_1.default.createElement(FileInfo_1.FileInfoContainer, null,
20
- react_1.default.createElement(FileInfo_1.FileNameContainer, null,
21
- react_1.default.createElement(FileInfo_1.FileName, null, fileName),
22
- react_1.default.createElement("div", null,
23
- ".",
24
- fileExtension)),
25
- isLoading && react_1.default.createElement(ProgressBarUploadItem_1.ProgressBarUploadItem, null)))));
26
- };
27
- exports.FileSectionUploadItem = FileSectionUploadItem;
28
- exports.UploadItemContainer = (0, styled_components_1.default)(FileSectionItem_1.ItemContainer) `
29
- min-width: calc(100% - 16px);
30
- `;
31
- exports.ProgressBar = styled_components_1.default.div `
32
- background: #1a9bc7;
33
- opacity: 0.7;
34
- border-radius: 8px 0 0 8px;
35
- width: 20%;
36
- height: 100%;
37
- `;
@@ -1,53 +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 react_tooltip_1 = __importDefault(require("react-tooltip"));
9
- const styled_components_1 = __importDefault(require("styled-components"));
10
- const document_icon_with_dot_1 = __importDefault(require("../../icons/document-icon-with-dot"));
11
- const unknown_format_file_icon_1 = __importDefault(require("../../icons/unknown-format-file-icon"));
12
- const TooltipDiv_1 = require("../TooltipDiv");
13
- const util_1 = require("../util");
14
- const FileTypeIcon = ({ withDot, fileExtension, alt }) => {
15
- let fileIcon = react_1.default.createElement(unknown_format_file_icon_1.default, null);
16
- if (withDot) {
17
- return (react_1.default.createElement(Container, null,
18
- react_1.default.createElement(document_icon_with_dot_1.default, null),
19
- react_1.default.createElement(TooltipDiv_1.TooltipDiv, null,
20
- react_1.default.createElement(react_tooltip_1.default, { id: "dot", place: "bottom", effect: "float", className: "tooltip" },
21
- react_1.default.createElement("div", null, "Main manuscript. Only one file per submission")))));
22
- }
23
- if (fileExtension) {
24
- const fileType = util_1.extensionsWithFileTypesMap.get(fileExtension.toLowerCase());
25
- fileIcon = util_1.fileTypesWithIconMap.get(fileType);
26
- }
27
- return react_1.default.createElement(Container, null, fileIcon);
28
- };
29
- exports.FileTypeIcon = FileTypeIcon;
30
- const Container = styled_components_1.default.div `
31
- width: 40px;
32
- min-width: 40px;
33
- height: 40px;
34
- display: flex;
35
- justify-content: center;
36
- align-items: center;
37
- box-sizing: border-box;
38
- border-radius: 4px;
39
- position: relative;
40
- `;
41
- const Img = styled_components_1.default.img `
42
- width: 100%;
43
- height: 100%;
44
- border-radius: 4px;
45
- `;
46
- const VideoIconContainer = styled_components_1.default.div `
47
- width: 100%;
48
- height: 100%;
49
- position: absolute;
50
- display: flex;
51
- align-items: center;
52
- justify-content: center;
53
- `;