@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,130 +0,0 @@
1
- "use strict";
2
- /*!
3
- * © 2024 Atypon Systems LLC
4
- *
5
- * Licensed under the Apache License, Version 2.0 (the "License");
6
- * you may not use this file except in compliance with the License.
7
- * You may obtain a copy of the License at
8
- *
9
- * http://www.apache.org/licenses/LICENSE-2.0
10
- *
11
- * Unless required by applicable law or agreed to in writing, software
12
- * distributed under the License is distributed on an "AS IS" BASIS,
13
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
14
- * See the License for the specific language governing permissions and
15
- * limitations under the License.
16
- */
17
- var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
18
- if (k2 === undefined) k2 = k;
19
- var desc = Object.getOwnPropertyDescriptor(m, k);
20
- if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
21
- desc = { enumerable: true, get: function() { return m[k]; } };
22
- }
23
- Object.defineProperty(o, k2, desc);
24
- }) : (function(o, m, k, k2) {
25
- if (k2 === undefined) k2 = k;
26
- o[k2] = m[k];
27
- }));
28
- var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
29
- Object.defineProperty(o, "default", { enumerable: true, value: v });
30
- }) : function(o, v) {
31
- o["default"] = v;
32
- });
33
- var __importStar = (this && this.__importStar) || function (mod) {
34
- if (mod && mod.__esModule) return mod;
35
- var result = {};
36
- if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
37
- __setModuleDefault(result, mod);
38
- return result;
39
- };
40
- var __importDefault = (this && this.__importDefault) || function (mod) {
41
- return (mod && mod.__esModule) ? mod : { "default": mod };
42
- };
43
- Object.defineProperty(exports, "__esModule", { value: true });
44
- exports.InsertTableDialog = void 0;
45
- const react_1 = __importStar(require("react"));
46
- const react_select_1 = __importDefault(require("react-select"));
47
- const styled_components_1 = __importDefault(require("styled-components"));
48
- const Checkbox_1 = require("./Checkbox");
49
- const Dialog_1 = require("./Dialog");
50
- const Label = styled_components_1.default.div `
51
- padding-right: 16px;
52
- width: 150px;
53
- `;
54
- const SelectContainer = styled_components_1.default.div `
55
- width: 182px;
56
- height: 30px;
57
- `;
58
- const Container = styled_components_1.default.div `
59
- display: flex;
60
- align-items: center;
61
- padding-bottom: 16px;
62
- `;
63
- const OptionWrapper = styled_components_1.default.div `
64
- padding-left: ${(props) => props.theme.grid.unit * 4}px;
65
- padding-top: ${(props) => props.theme.grid.unit * 2}px;
66
- padding-bottom: ${(props) => props.theme.grid.unit * 2}px;
67
-
68
- background-color: ${(props) => props.focused ? props.theme.colors.background.fifth : 'transparent'};
69
-
70
- &:hover {
71
- background-color: ${(props) => props.theme.colors.background.fifth};
72
- }
73
- `;
74
- const InsertTableDialog = ({ run, open, onClose }) => {
75
- const [numberOfColumns, setNumColumns] = (0, react_1.useState)({ value: 4, label: `4` });
76
- const [numberOfRows, setNumRows] = (0, react_1.useState)({ value: 4, label: `4` });
77
- const [includeHeader, setIncludeHeader] = (0, react_1.useState)(true);
78
- const handleColumnChange = (newValue) => {
79
- setNumColumns(newValue);
80
- };
81
- const handleRowChange = (newValue) => {
82
- setNumRows(newValue);
83
- };
84
- const options = Array.from({ length: 20 }, (_, index) => ({
85
- value: index + 1,
86
- label: `${index + 1}`,
87
- }));
88
- const OptionComponent = ({ innerProps, data, }) => {
89
- return (react_1.default.createElement(OptionWrapper, Object.assign({}, innerProps, { ref: null }), data.label));
90
- };
91
- const insertTableDialogActions = {
92
- primary: {
93
- action: () => {
94
- const tableConfig = {
95
- numberOfColumns: numberOfColumns.value,
96
- numberOfRows: numberOfRows.value,
97
- includeHeader,
98
- };
99
- run(tableConfig);
100
- onClose();
101
- },
102
- title: 'Create table',
103
- },
104
- secondary: {
105
- action: onClose,
106
- title: 'Cancel',
107
- },
108
- };
109
- return (react_1.default.createElement(Dialog_1.Dialog, { isOpen: open, actions: insertTableDialogActions, category: Dialog_1.Category.confirmation, header: 'Insert table', message: '' },
110
- react_1.default.createElement(react_1.default.Fragment, null,
111
- react_1.default.createElement(react_1.default.Fragment, null,
112
- react_1.default.createElement(Container, null,
113
- react_1.default.createElement(Label, null, "Number of columns:"),
114
- react_1.default.createElement(SelectContainer, null,
115
- react_1.default.createElement(react_select_1.default, { onChange: (newValue) => handleColumnChange(newValue), value: numberOfColumns, options: options, components: {
116
- Option: OptionComponent,
117
- }, menuPosition: "fixed", maxMenuHeight: 150 }))),
118
- react_1.default.createElement(Container, null,
119
- react_1.default.createElement(Label, null, "Number of rows:"),
120
- react_1.default.createElement(SelectContainer, null,
121
- react_1.default.createElement(react_select_1.default, { onChange: (newValue) => handleRowChange(newValue), value: numberOfRows, options: options, components: {
122
- Option: OptionComponent,
123
- }, menuPosition: "fixed", maxMenuHeight: 150 })))),
124
- react_1.default.createElement(Checkbox_1.CheckboxLabel, null,
125
- react_1.default.createElement(Checkbox_1.CheckboxField, { name: 'include-header', checked: includeHeader, onChange: (e) => {
126
- setIncludeHeader(e.target.checked);
127
- } }),
128
- react_1.default.createElement("div", null, "Include header row")))));
129
- };
130
- exports.InsertTableDialog = InsertTableDialog;
@@ -1,39 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.useFiles = void 0;
4
- const json_schema_1 = require("@manuscripts/json-schema");
5
- const files_1 = require("../lib/files");
6
- const use_deep_compare_1 = require("./use-deep-compare");
7
- const types = [
8
- json_schema_1.ObjectTypes.Section,
9
- json_schema_1.ObjectTypes.FigureElement,
10
- json_schema_1.ObjectTypes.Figure,
11
- json_schema_1.ObjectTypes.Supplement,
12
- json_schema_1.ObjectTypes.ElementsOrder,
13
- ];
14
- const getOtherFiles = (inlineFiles, supplements, files) => {
15
- const excluded = new Set();
16
- inlineFiles.flatMap((f) => f.files).forEach((f) => excluded.add(f.id));
17
- supplements.forEach((s) => excluded.add(s.id));
18
- return files.filter((f) => !excluded.has(f.id));
19
- };
20
- const useFiles = (modelMap, files) => {
21
- const models = [];
22
- for (const [_, model] of modelMap.entries()) {
23
- if (types.includes(model.objectType)) {
24
- models.push(model);
25
- }
26
- }
27
- return (0, use_deep_compare_1.useDeepCompareMemo)(() => {
28
- const inlineFiles = (0, files_1.getInlineFiles)(modelMap, files);
29
- const supplements = (0, files_1.getSupplements)(modelMap, files);
30
- const otherFiles = getOtherFiles(inlineFiles, supplements, files);
31
- return {
32
- inlineFiles,
33
- supplements,
34
- otherFiles,
35
- };
36
- }, [models, files]);
37
- };
38
- exports.useFiles = useFiles;
39
- exports.default = exports.useFiles;
@@ -1,104 +0,0 @@
1
- var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
2
- function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
3
- return new (P || (P = Promise))(function (resolve, reject) {
4
- function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
5
- function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
6
- function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
7
- step((generator = generator.apply(thisArg, _arguments || [])).next());
8
- });
9
- };
10
- import React, { useContext, useRef, useState } from 'react';
11
- import styled from 'styled-components';
12
- import { useDropdown } from '../../hooks/use-dropdown';
13
- import { Category, Dialog } from '../Dialog';
14
- import { DropdownContainer, DropdownList } from '../Dropdown';
15
- import { DotsIcon } from '../icons';
16
- import { PermissionsContext } from './FileManager';
17
- export const FileActions = ({ sectionType, handleDownload, handleReplace, handleDetach, move, className, }) => {
18
- const can = useContext(PermissionsContext);
19
- const { isOpen, toggleOpen, wrapperRef } = useDropdown();
20
- const [isMoveDialogOpen, setMoveDialogOpen] = useState(false);
21
- const showDownload = (can === null || can === void 0 ? void 0 : can.downloadFiles) && handleDownload;
22
- const showReplace = (can === null || can === void 0 ? void 0 : can.replaceFile) && handleReplace;
23
- const showDetach = (can === null || can === void 0 ? void 0 : can.editArticle) && handleDetach;
24
- const showMove = (can === null || can === void 0 ? void 0 : can.moveFile) && move;
25
- const show = showDownload || showReplace || showDetach || showMove;
26
- const fileInputRef = useRef(null);
27
- const handleChange = (event) => __awaiter(void 0, void 0, void 0, function* () {
28
- if (handleReplace && event && event.target && event.target.files) {
29
- const file = event.target.files[0];
30
- yield handleReplace(file);
31
- }
32
- });
33
- const openFileDialog = () => {
34
- if (fileInputRef && fileInputRef.current) {
35
- fileInputRef.current.click();
36
- }
37
- };
38
- return show ? (React.createElement(DropdownContainer, { ref: wrapperRef },
39
- React.createElement(ActionsIcon, { onClick: toggleOpen, type: "button", className: "show-on-hover", "data-cy": "file-actions", "aria-label": "Actions", "aria-pressed": isOpen },
40
- React.createElement(DotsIcon, null)),
41
- isOpen && (React.createElement(FileActionDropdownList, { "data-cy": "file-actions-dropdown", direction: "right", className: className, width: 192, top: 5, onClick: toggleOpen },
42
- showDownload && (React.createElement(FileAction, { onClick: handleDownload }, "Download")),
43
- showReplace && (React.createElement(React.Fragment, null,
44
- React.createElement(FileAction, { onClick: openFileDialog }, "Replace"),
45
- React.createElement("input", { ref: fileInputRef, type: "file", style: { display: 'none' }, onChange: handleChange }))),
46
- showDetach && React.createElement(FileAction, { onClick: handleDetach }, "Detach"),
47
- showMove && (React.createElement(FileAction, { onClick: () => setMoveDialogOpen(true) },
48
- "Move to ",
49
- move.sectionType)))),
50
- showMove && (React.createElement(MoveFileConfirmationDialog, { "data-cy": "file-move-confirm-dialog", isOpen: isMoveDialogOpen, close: () => setMoveDialogOpen(false), source: sectionType, target: move.sectionType, handleMove: move.handler })))) : (React.createElement(React.Fragment, null));
51
- };
52
- const MoveFileConfirmationDialog = ({ isOpen, close, source, target, handleMove }) => {
53
- const header = `Are you sure you want to move this file to “${target}”?`;
54
- const message = `The file will be removed from “${source}” and added to “${target}”.`;
55
- const handleConfirm = () => __awaiter(void 0, void 0, void 0, function* () {
56
- yield handleMove();
57
- close();
58
- });
59
- return (React.createElement(Dialog, { isOpen: isOpen, category: Category.confirmation, header: header, message: message, actions: {
60
- primary: {
61
- action: handleConfirm,
62
- title: 'Move',
63
- },
64
- secondary: {
65
- action: () => close(),
66
- title: 'Cancel',
67
- },
68
- } }));
69
- };
70
- export const ActionsIcon = styled.button `
71
- border: none;
72
- background: transparent;
73
- cursor: pointer;
74
- padding: 0 8px;
75
- &:focus {
76
- outline: none;
77
- }
78
- &:hover svg circle {
79
- fill: #1a9bc7;
80
- }
81
- `;
82
- export const FileActionDropdownList = styled(DropdownList) `
83
- border: 1px solid #e2e2e2;
84
- box-sizing: border-box;
85
- box-shadow: 0 4px 9px rgba(0, 0, 0, 0.3);
86
- border-radius: 8px;
87
- min-width: 180px;
88
- background: ${(props) => props.theme.colors.background.primary};
89
- z-index: 999;
90
- text-align: left;
91
- overflow: hidden;
92
- `;
93
- export const FileAction = styled.div `
94
- font-family: ${(props) => props.theme.font.family.Lato};
95
- cursor: pointer;
96
- font-size: 16px;
97
- line-height: 24px;
98
- color: ${(props) => props.theme.colors.text.primary};
99
- padding: 16px;
100
- &:hover,
101
- &:focus {
102
- background: #f2fbfc;
103
- }
104
- `;
@@ -1,33 +0,0 @@
1
- import styled from 'styled-components';
2
- export const FileContainer = styled.div `
3
- display: flex;
4
- font-family: ${(props) => props.theme.font.family.Lato};
5
- align-items: center;
6
- cursor: pointer;
7
- box-sizing: border-box;
8
- position: relative;
9
- padding: 24px 18px;
10
- height: 72px;
11
-
12
- &.dragging {
13
- opacity: 0.2;
14
- }
15
-
16
- .file-icon {
17
- min-width: 20px;
18
- width: 20px;
19
- }
20
-
21
- .show-on-hover {
22
- display: none;
23
- }
24
-
25
- &:hover .show-on-hover {
26
- display: block;
27
- }
28
-
29
- &:hover,
30
- &:focus {
31
- background: #f2fbfc;
32
- }
33
- `;
@@ -1,18 +0,0 @@
1
- import { format } from 'date-fns';
2
- import React from 'react';
3
- import styled from 'styled-components';
4
- import { Tooltip } from '../Tooltip';
5
- export const FileCreatedDate = ({ file, className }) => {
6
- return file.createdDate ? (React.createElement(FileDateContainer, { "data-tooltip-id": `${file.id}-created-date-tooltip`, className: className },
7
- React.createElement(FileDate, null, format(new Date(file.createdDate), 'M/d/yy, HH:mm')),
8
- React.createElement(Tooltip, { id: `${file.id}-created-date-tooltip`, place: "bottom" }, "File Uploaded"))) : (React.createElement(React.Fragment, null));
9
- };
10
- export const FileDateContainer = styled.div `
11
- overflow: hidden;
12
- min-width: 88px;
13
- margin-left: 8px;
14
- `;
15
- export const FileDate = styled.div `
16
- font-size: ${(props) => props.theme.font.size.small};
17
- line-height: 27px;
18
- `;
@@ -1,33 +0,0 @@
1
- import React, { createContext } from 'react';
2
- import { useFiles } from '../../index';
3
- import { InspectorTab, InspectorTabList, InspectorTabPanel, InspectorTabPanels, InspectorTabs, } from '../Inspector';
4
- import { InspectorSection } from '../InspectorSection';
5
- import { Tooltip } from '../Tooltip';
6
- import { FileManagerDragLayer } from './FileManagerDragLayer';
7
- import { FileManagerProvider } from './FileManagerProvider';
8
- import { InlineFilesSection } from './InlineFilesSection';
9
- import { OtherFilesSection } from './OtherFilesSection';
10
- import { SupplementsSection } from './SupplementsSection';
11
- export const PermissionsContext = createContext(null);
12
- export const FileManager = ({ files, fileManagement, modelMap, saveModel, deleteModel, enableDragAndDrop, can, }) => {
13
- const { inlineFiles, supplements, otherFiles } = useFiles(modelMap, files);
14
- return (React.createElement(FileManagerProvider, { saveModel: saveModel, deleteModel: deleteModel, modelMap: modelMap, fileManagement: fileManagement },
15
- React.createElement(FileManagerDragLayer, null),
16
- React.createElement(PermissionsContext.Provider, { value: can },
17
- React.createElement(InspectorSection, { title: 'Files', contentStyles: { margin: '24px 16px' } },
18
- React.createElement(InspectorTabs, { defaultIndex: 0, "data-cy": "files-tabs", style: { overflow: 'visible' } },
19
- React.createElement(InspectorTabList, null,
20
- React.createElement(InspectorTab, { "data-tooltip-id": "inline-tooltip" }, "Inline files"),
21
- React.createElement(Tooltip, { id: "inline-tooltip", place: "bottom" }, "Files that can be found inline in the manuscript."),
22
- React.createElement(InspectorTab, { "data-tooltip-id": "supplements-tooltip" }, "Supplements"),
23
- React.createElement(Tooltip, { id: "supplements-tooltip", place: "bottom" }, "Files that were marked as supplements."),
24
- React.createElement(InspectorTab, { "data-tooltip-id": "other-tooltip" }, "Other files"),
25
- React.createElement(Tooltip, { id: "other-tooltip", place: "bottom" }, "Files excluded from the final submission.")),
26
- React.createElement(InspectorTabPanels, { style: { overflowY: 'visible', position: 'relative' } },
27
- React.createElement(InspectorTabPanel, { "data-cy": "inline" },
28
- React.createElement(InlineFilesSection, { elements: inlineFiles, isEditor: enableDragAndDrop })),
29
- React.createElement(InspectorTabPanel, { "data-cy": "supplements" },
30
- React.createElement(SupplementsSection, { supplements: supplements })),
31
- React.createElement(InspectorTabPanel, { "data-cy": "other" },
32
- React.createElement(OtherFilesSection, { files: otherFiles }))))))));
33
- };
@@ -1,48 +0,0 @@
1
- import React from 'react';
2
- import { useDragLayer } from 'react-dnd';
3
- import styled from 'styled-components';
4
- import { FileContainer } from './FileContainer';
5
- import { FileCreatedDate } from './FileCreatedDate';
6
- import { FileName } from './FileName';
7
- const Container = styled.div `
8
- position: fixed;
9
- pointer-events: none;
10
- z-index: 999;
11
- left: 0;
12
- top: 0;
13
- max-width: 400px;
14
- `;
15
- const DraggableFileContainer = styled(FileContainer) `
16
- padding: 16px 32px;
17
- background: #f2fbfc;
18
- border: 1px solid #bce7f6;
19
- box-shadow: 0 4px 9px rgba(0, 0, 0, 0.3);
20
- border-radius: 6px;
21
- `;
22
- const getItemStyles = (currentOffset) => {
23
- if (!currentOffset) {
24
- return {
25
- display: 'none',
26
- };
27
- }
28
- const { x, y } = currentOffset;
29
- const transform = `translate(${x}px, ${y}px)`;
30
- return {
31
- transform,
32
- WebkitTransform: transform,
33
- };
34
- };
35
- export const FileManagerDragLayer = () => {
36
- const { itemType, isDragging, item, currentOffset } = useDragLayer((monitor) => ({
37
- item: monitor.getItem(),
38
- itemType: monitor.getItemType(),
39
- currentOffset: monitor.getSourceClientOffset(),
40
- isDragging: monitor.isDragging(),
41
- }));
42
- if (!isDragging) {
43
- return null;
44
- }
45
- return (React.createElement(Container, { style: getItemStyles(currentOffset) }, itemType === 'file' && (React.createElement(DraggableFileContainer, null,
46
- React.createElement(FileName, { file: item.file }),
47
- item.file.createdDate && React.createElement(FileCreatedDate, { file: item.file })))));
48
- };
@@ -1,12 +0,0 @@
1
- import React, { createContext } from 'react';
2
- export const FileManagerContext = createContext({
3
- saveModel: () => '',
4
- });
5
- export const FileManagerProvider = ({ children, saveModel, deleteModel, modelMap, fileManagement }) => {
6
- return (React.createElement(FileManagerContext.Provider, { value: {
7
- saveModel,
8
- deleteModel,
9
- modelMap,
10
- fileManagement,
11
- } }, children));
12
- };
@@ -1,20 +0,0 @@
1
- import React from 'react';
2
- import styled from 'styled-components';
3
- import { FileTypeIcon } from './FileTypeIcon';
4
- export const FileName = ({ file }) => {
5
- return (React.createElement(React.Fragment, null,
6
- React.createElement(FileTypeIcon, { file: file }),
7
- React.createElement(FileNameText, { "data-cy": "filename" }, file.name)));
8
- };
9
- export const FileNameText = styled.div `
10
- font-family: ${(props) => props.theme.font.family.Lato};
11
- font-size: ${(props) => props.theme.font.size.medium};
12
- line-height: ${(props) => props.theme.font.lineHeight.large};
13
- font-weight: ${(props) => props.theme.font.weight.normal};
14
- color: ${(props) => props.theme.colors.text.primary};
15
- margin-left: ${(props) => props.theme.grid.unit * 2}px;
16
- flex-grow: 1;
17
- overflow: hidden;
18
- white-space: nowrap;
19
- text-overflow: ellipsis;
20
- `;
@@ -1,163 +0,0 @@
1
- import React from 'react';
2
- import styled from 'styled-components';
3
- import { AlertMessage, AlertMessageType } from '../AlertMessage';
4
- import { FileUnknownIcon } from '../icons';
5
- import { FileContainer } from './FileContainer';
6
- import { FileNameText } from './FileName';
7
- export var FileSectionAlertType;
8
- (function (FileSectionAlertType) {
9
- FileSectionAlertType[FileSectionAlertType["NONE"] = 0] = "NONE";
10
- FileSectionAlertType[FileSectionAlertType["UPLOAD_IN_PROGRESS"] = 1] = "UPLOAD_IN_PROGRESS";
11
- FileSectionAlertType[FileSectionAlertType["UPLOAD_SUCCESSFUL"] = 2] = "UPLOAD_SUCCESSFUL";
12
- FileSectionAlertType[FileSectionAlertType["MOVE_SUCCESSFUL"] = 3] = "MOVE_SUCCESSFUL";
13
- })(FileSectionAlertType || (FileSectionAlertType = {}));
14
- export const FileSectionAlert = ({ alert }) => {
15
- return (React.createElement(React.Fragment, null,
16
- alert.type === FileSectionAlertType.UPLOAD_IN_PROGRESS && (React.createElement(FileUploadInProgressAlert, { name: alert.message })),
17
- alert.type === FileSectionAlertType.UPLOAD_SUCCESSFUL && (React.createElement(FileUploadSuccessful, null)),
18
- alert.type === FileSectionAlertType.MOVE_SUCCESSFUL && (React.createElement(FileMoveSuccessful, { name: alert.message }))));
19
- };
20
- const FileUploadInProgressAlert = ({ name }) => {
21
- return (React.createElement(FileUploadContainer, null,
22
- React.createElement(FileUnknownIcon, null),
23
- React.createElement(FileUploadNameContainer, null,
24
- React.createElement(UploadFileNameText, null, name),
25
- React.createElement(FileUploadProgressBar, null))));
26
- };
27
- const FileUploadSuccessful = () => {
28
- return (React.createElement(AlertMessageContainer, null,
29
- React.createElement(AlertMessage, { type: AlertMessageType.success, hideCloseButton: true, dismissButton: {
30
- text: 'OK',
31
- } }, "File uploaded successfully")));
32
- };
33
- const FileMoveSuccessful = ({ name }) => {
34
- return (React.createElement(AlertMessageContainer, null,
35
- React.createElement(AlertMessage, { type: AlertMessageType.success, hideCloseButton: true, dismissButton: {
36
- text: 'OK',
37
- } },
38
- "File moved to ",
39
- name)));
40
- };
41
- const AlertMessageContainer = styled.div `
42
- margin-left: 16px;
43
- margin-right: 16px;
44
- `;
45
- const FileUploadContainer = styled(FileContainer) `
46
- background: #f2fbfc;
47
- `;
48
- const FileUploadNameContainer = styled.div `
49
- flex-grow: 1;
50
- margin-left: 8px;
51
- `;
52
- const UploadFileNameText = styled(FileNameText) `
53
- margin: 0;
54
- `;
55
- const FileUploadProgressBar = () => {
56
- return (React.createElement(LinearProgress, null,
57
- React.createElement(Bar, { className: "bar1" }),
58
- React.createElement(Bar, { className: "bar2" })));
59
- };
60
- const LinearProgress = styled.div `
61
- background: ${(props) => props.theme.colors.background.tertiary};
62
- opacity: 0.7;
63
- height: 4px;
64
- position: relative;
65
- width: 100%;
66
- margin: 8px auto 0;
67
- overflow: hidden;
68
- border-radius: 8px;
69
- animation: start 0.3s ease-in;
70
- `;
71
- const Bar = styled.div `
72
- position: absolute;
73
- opacity: 0.7;
74
- background: #1a9bc7;
75
- transition: transform 0.2s linear;
76
- left: 0;
77
- top: 0;
78
- bottom: 0;
79
- width: 100%;
80
-
81
- &.bar1 {
82
- animation: growBar1 2.5s infinite, moveBar1 2.5s infinite;
83
- }
84
-
85
- &.bar2 {
86
- animation: growBar2 2.5s infinite, moveBar2 2.5s infinite;
87
- }
88
-
89
- @keyframes growBar1 {
90
- 0% {
91
- animation-timing-function: linear;
92
- transform: scaleX(0.1);
93
- }
94
- 35% {
95
- animation-timing-function: cubic-bezier(0.3, 0.1, 0.7, 1);
96
- transform: scaleX(0.1);
97
- }
98
- 70% {
99
- animation-timing-function: cubic-bezier(0.2, 0, 0.2, 1.4);
100
- transform: scaleX(0.8);
101
- }
102
- 100% {
103
- transform: scaleX(0.1);
104
- }
105
- }
106
-
107
- @keyframes moveBar1 {
108
- 0% {
109
- left: -105%;
110
- animation-timing-function: linear;
111
- }
112
- 20% {
113
- left: -105%;
114
- animation-timing-function: cubic-bezier(0.5, 0, 0.7, 0.4);
115
- }
116
- 60% {
117
- left: 21%;
118
- animation-timing-function: cubic-bezier(0.3, 0.4, 0.55, 0.9);
119
- }
120
- 80% {
121
- left: 40%;
122
- animation-timing-function: cubic-bezier(0.1, 0.2, 0.3, 0.95);
123
- }
124
- 100% {
125
- left: 90%;
126
- }
127
- }
128
-
129
- @keyframes growBar2 {
130
- 0% {
131
- animation-timing-function: cubic-bezier(0.2, 0, 0.5, 0.4);
132
- transform: scaleX(0.1);
133
- }
134
- 20% {
135
- animation-timing-function: cubic-bezier(0.1, 0.2, 0.6, 1);
136
- transform: scaleX(0.3);
137
- }
138
- 60% {
139
- animation-timing-function: cubic-bezier(0.2, 0, 0.2, 1.4);
140
- transform: scaleX(0.6);
141
- }
142
- 100% {
143
- transform: scaleX(0.1);
144
- }
145
- }
146
- @keyframes moveBar2 {
147
- 0% {
148
- left: -100%;
149
- animation-timing-function: cubic-bezier(0.15, 0, 0.5, 0.4);
150
- }
151
- 25% {
152
- left: -50%;
153
- animation-timing-function: cubic-bezier(0.3, 0.3, 0.8, 0.7);
154
- }
155
- 50% {
156
- left: 45%;
157
- animation-timing-function: cubic-bezier(0.1, 0.6, 0.6, 0.9);
158
- }
159
- 100% {
160
- left: 95%;
161
- }
162
- }
163
- `;
@@ -1,13 +0,0 @@
1
- import React from 'react';
2
- import { FileCorruptedIcon, FileMainDocumentIcon, FileUnknownIcon, } from '../icons';
3
- import { getFileIcon } from './util';
4
- export const FileTypeIcon = ({ file }) => {
5
- if (file.type.id === 'missing') {
6
- return React.createElement(FileCorruptedIcon, { className: "file-icon" });
7
- }
8
- if (file.type.id === 'main-manuscript') {
9
- return React.createElement(FileMainDocumentIcon, { className: "file-icon" });
10
- }
11
- const icon = getFileIcon(file);
12
- return icon || React.createElement(FileUnknownIcon, { className: "file-icon" });
13
- };