@manuscripts/style-guide 1.1.15 → 1.1.16-LEAN-2669-v6

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 (16) hide show
  1. package/dist/cjs/components/EditorHeader/EditorHeader.js +29 -20
  2. package/dist/cjs/components/EditorHeader/ProceedView.js +9 -10
  3. package/dist/cjs/components/FileManager/FileSectionItem/FileInfo.js +21 -3
  4. package/dist/cjs/components/FileManager/FileSectionItem/FileSectionItem.js +1 -1
  5. package/dist/cjs/components/FileManager/InlineFilesSection.js +19 -3
  6. package/dist/es/components/EditorHeader/EditorHeader.js +29 -20
  7. package/dist/es/components/EditorHeader/ProceedView.js +11 -12
  8. package/dist/es/components/FileManager/FileSectionItem/FileInfo.js +20 -2
  9. package/dist/es/components/FileManager/FileSectionItem/FileSectionItem.js +1 -1
  10. package/dist/es/components/FileManager/InlineFilesSection.js +18 -2
  11. package/dist/types/components/EditorHeader/EditorHeader.d.ts +15 -3
  12. package/dist/types/components/EditorHeader/ProceedView.d.ts +2 -3
  13. package/dist/types/components/FileManager/FileSectionItem/FileInfo.d.ts +3 -0
  14. package/dist/types/components/FileManager/FileSectionItem/FileSectionItem.d.ts +1 -0
  15. package/dist/types/components/FileManager/InlineFilesSection.d.ts +2 -0
  16. package/package.json +1 -1
package/dist/cjs/components/EditorHeader/EditorHeader.js CHANGED
@@ -35,11 +35,19 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
35
35
  return (mod && mod.__esModule) ? mod : { "default": mod };
36
36
  };
37
37
  Object.defineProperty(exports, "__esModule", { value: true });
38
- exports.MediumTextArea = exports.PrimaryButtonSmall = exports.EditorHeader = void 0;
38
+ exports.MediumTextArea = exports.PrimaryButtonSmall = exports.EditorHeader = exports.DialogState = void 0;
39
39
  const react_1 = __importStar(require("react"));
40
40
  const styled_components_1 = __importDefault(require("styled-components"));
41
41
  const __1 = require("../..");
42
42
  const ProceedView_1 = require("./ProceedView");
43
+ var DialogState;
44
+ (function (DialogState) {
45
+ DialogState[DialogState["INIT"] = 0] = "INIT";
46
+ DialogState[DialogState["LOADING"] = 1] = "LOADING";
47
+ DialogState[DialogState["ERROR"] = 2] = "ERROR";
48
+ DialogState[DialogState["SUCCESS"] = 3] = "SUCCESS";
49
+ DialogState[DialogState["CLOSED"] = 4] = "CLOSED";
50
+ })(DialogState = exports.DialogState || (exports.DialogState = {}));
43
51
  const Editing = { label: 'Editing...', icon: __1.EditIcon };
44
52
  const MapUserRole = {
45
53
  Editor: Editing,
@@ -49,53 +57,54 @@ const MapUserRole = {
49
57
  Viewer: { label: 'Reading...', icon: __1.ReadingIcon },
50
58
  };
51
59
  const EditorHeader = ({ handleSnapshot, submission, hasPendingSuggestions, userRole, canCompleteTask, submitProceed, goBack, status, isAnnotator, message, exceptionDialog: ExceptionDialog, disabelProceedNote, }) => {
52
- var _a, _b, _c, _d;
60
+ var _a, _b, _c, _d, _e;
53
61
  const [confirmationDialog, toggleConfirmationDialog] = (0, react_1.useState)(false);
54
- const [loading, setLoading] = (0, react_1.useState)(false);
55
62
  const [noteValue, setNoteValue] = (0, react_1.useState)('');
56
- const [error, setError] = (0, react_1.useState)(undefined);
57
63
  const [selectedTransitionIndex, setSelectedTransitionIndex] = (0, react_1.useState)();
58
- const { complete: showComplete, error: submissionError, mutationError, submit, } = submitProceed;
59
- (0, react_1.useEffect)(() => {
60
- if (submissionError) {
61
- setError(submissionError);
62
- }
63
- }, [submissionError]);
64
+ const { dialogData, submit } = submitProceed;
65
+ const { updateState, clearError } = dialogData;
64
66
  const continueDialogAction = (0, react_1.useCallback)(() => __awaiter(void 0, void 0, void 0, function* () {
65
67
  if (submission && selectedTransitionIndex && handleSnapshot) {
66
68
  const { status } = submission.currentStep.type.transitions[selectedTransitionIndex];
67
- setLoading(true);
69
+ updateState(DialogState.LOADING);
68
70
  yield handleSnapshot();
69
71
  yield submit(status.id, noteValue);
70
- setLoading(false);
71
72
  }
72
73
  }), [
73
- handleSnapshot,
74
- selectedTransitionIndex,
75
74
  submission,
76
- noteValue,
75
+ selectedTransitionIndex,
76
+ handleSnapshot,
77
+ updateState,
77
78
  submit,
79
+ noteValue,
78
80
  ]);
79
81
  const onTransitionClick = (0, react_1.useCallback)((event) => {
82
+ updateState(DialogState.INIT);
80
83
  toggleConfirmationDialog(true);
81
84
  setSelectedTransitionIndex(event.target.value || event.target.parentNode.value);
82
- }, [setSelectedTransitionIndex, toggleConfirmationDialog]);
85
+ }, [setSelectedTransitionIndex, toggleConfirmationDialog, updateState]);
83
86
  const onCancelClick = (0, react_1.useCallback)(() => {
84
87
  toggleConfirmationDialog(false);
85
88
  setSelectedTransitionIndex(undefined);
86
- setError(undefined);
87
- }, [toggleConfirmationDialog, setSelectedTransitionIndex, setError]);
89
+ clearError();
90
+ updateState(DialogState.CLOSED);
91
+ }, [
92
+ toggleConfirmationDialog,
93
+ setSelectedTransitionIndex,
94
+ clearError,
95
+ updateState,
96
+ ]);
88
97
  const onNoteChange = (0, react_1.useCallback)((event) => setNoteValue(event.target.value), [setNoteValue]);
89
98
  const currentStepTransition = submission === null || submission === void 0 ? void 0 : submission.currentStep.type.transitions;
90
99
  const disable = !currentStepTransition || !canCompleteTask;
91
- const errorCode = (_c = (_b = (_a = mutationError === null || mutationError === void 0 ? void 0 : mutationError.graphQLErrors) === null || _a === void 0 ? void 0 : _a.find((error) => { var _a; return (_a = error === null || error === void 0 ? void 0 : error.extensions) === null || _a === void 0 ? void 0 : _a.code; })) === null || _b === void 0 ? void 0 : _b.extensions) === null || _c === void 0 ? void 0 : _c.code.name;
100
+ const errorCode = (_d = (_c = (_b = (_a = dialogData.mutationError) === null || _a === void 0 ? void 0 : _a.graphQLErrors) === null || _b === void 0 ? void 0 : _b.find((error) => { var _a; return (_a = error === null || error === void 0 ? void 0 : error.extensions) === null || _a === void 0 ? void 0 : _a.code; })) === null || _c === void 0 ? void 0 : _c.extensions) === null || _d === void 0 ? void 0 : _d.code.name;
92
101
  return (react_1.default.createElement(Wrapper, null,
93
102
  goBack && (react_1.default.createElement(SecondaryButtonSmall, { onClick: goBack, type: "button" },
94
103
  react_1.default.createElement(__1.LeftArrow, null),
95
104
  react_1.default.createElement("span", null, "Dashboard"))),
96
105
  handleSnapshot &&
97
106
  typeof hasPendingSuggestions == 'boolean' &&
98
- submission.nextStep && (react_1.default.createElement(ProceedView_1.ProceedView, { isAnnotator: isAnnotator, disable: disable, onTransitionClick: onTransitionClick, hasPendingSuggestions: hasPendingSuggestions, loading: loading, showComplete: showComplete, noteValue: noteValue, currentStepTransition: currentStepTransition, error: error, currentStepType: submission.currentStep.type, previousStepType: (_d = submission.previousStep) === null || _d === void 0 ? void 0 : _d.type, nextStepType: submission.nextStep.type, confirmationDialog: confirmationDialog, onNoteChange: disabelProceedNote ? undefined : onNoteChange, continueDialogAction: continueDialogAction, onCancelClick: onCancelClick, message: message })),
107
+ submission.nextStep && (react_1.default.createElement(ProceedView_1.ProceedView, { isAnnotator: isAnnotator, disable: disable, onTransitionClick: onTransitionClick, hasPendingSuggestions: hasPendingSuggestions, dialogData: dialogData, noteValue: noteValue, currentStepTransition: currentStepTransition, currentStepType: submission.currentStep.type, previousStepType: (_e = submission.previousStep) === null || _e === void 0 ? void 0 : _e.type, nextStepType: submission.nextStep.type, confirmationDialog: confirmationDialog, onNoteChange: disabelProceedNote ? undefined : onNoteChange, continueDialogAction: continueDialogAction, onCancelClick: onCancelClick, message: message })),
99
108
  status && (react_1.default.createElement(ChildWrapper, null,
100
109
  react_1.default.createElement(__1.SaveStatus, { status: status }))),
101
110
  react_1.default.createElement(Spacer, null),
package/dist/cjs/components/EditorHeader/ProceedView.js CHANGED
@@ -46,7 +46,7 @@ const StepDetails = ({ icon, label, description, role }) => (react_1.default.cre
46
46
  react_1.default.createElement(__1.SecondarySmallText, null,
47
47
  "Actor: ",
48
48
  role.label))));
49
- const ProceedView = ({ currentStepTransition, onTransitionClick, disable, loading, showComplete, confirmationDialog, previousStepType, currentStepType, nextStepType, isAnnotator, hasPendingSuggestions, error, noteValue, onNoteChange, onCancelClick, continueDialogAction, message: Message, }) => {
49
+ const ProceedView = ({ currentStepTransition, onTransitionClick, disable, dialogData, confirmationDialog, previousStepType, currentStepType, isAnnotator, hasPendingSuggestions, onCancelClick, continueDialogAction, message: Message, }) => {
50
50
  const dialogMessages = (0, react_1.useMemo)(() => hasPendingSuggestions && !isAnnotator
51
51
  ? {
52
52
  header: 'The task can not be transitioned to the next step',
@@ -59,7 +59,7 @@ const ProceedView = ({ currentStepTransition, onTransitionClick, disable, loadin
59
59
  },
60
60
  },
61
61
  }
62
- : showComplete
62
+ : dialogData.state === __1.DialogState.SUCCESS
63
63
  ? {
64
64
  header: 'Content reassigned successfully',
65
65
  message: `to the ${currentStepType.label}`,
@@ -84,7 +84,7 @@ const ProceedView = ({ currentStepTransition, onTransitionClick, disable, loadin
84
84
  },
85
85
  },
86
86
  }, [
87
- showComplete,
87
+ dialogData,
88
88
  continueDialogAction,
89
89
  onCancelClick,
90
90
  currentStepType,
@@ -97,16 +97,15 @@ const ProceedView = ({ currentStepTransition, onTransitionClick, disable, loadin
97
97
  currentStepTransition.map((transition, index) => (react_1.default.createElement(Task, { key: 'task_' + transition.type.id, className: transition.status.id === 'success' ? 'happyPath' : '', value: index, onClick: onTransitionClick },
98
98
  react_1.default.createElement("strong", null, transition.type.label),
99
99
  transition.type.description))))))) || (react_1.default.createElement(EditorHeader_1.PrimaryButtonSmall, { value: 0, onClick: onTransitionClick, disabled: disable }, "Complete task")),
100
- (loading && (react_1.default.createElement(__1.LoadingOverlay, null,
101
- react_1.default.createElement(Message, { isCentered: true }, "Proceeding with your submission\u2026")))) || (react_1.default.createElement(__1.Dialog, { isOpen: confirmationDialog && !loading, category: __1.Category.confirmation, header: dialogMessages.header, message: dialogMessages.message, actions: dialogMessages.actions },
102
- (showComplete && (react_1.default.createElement(Grid, null,
100
+ dialogData.state === __1.DialogState.LOADING && (react_1.default.createElement(__1.LoadingOverlay, null,
101
+ react_1.default.createElement(Message, { isCentered: true }, "Proceeding with your submission\u2026"))),
102
+ !(dialogData.state === __1.DialogState.CLOSED) && (react_1.default.createElement(__1.Dialog, { isOpen: confirmationDialog && !(dialogData.state === __1.DialogState.LOADING), category: __1.Category.confirmation, header: dialogMessages.header, message: dialogMessages.message, actions: dialogMessages.actions },
103
+ dialogData.state === __1.DialogState.SUCCESS && (react_1.default.createElement(Grid, null,
103
104
  previousStepType && (react_1.default.createElement(StepDetails, Object.assign({}, previousStepType, { icon: react_1.default.createElement(react_1.default.Fragment, null,
104
105
  react_1.default.createElement(__1.TaskStepDoneIcon, null),
105
106
  react_1.default.createElement(Line, null)) }))),
106
- react_1.default.createElement(StepDetails, Object.assign({}, currentStepType))))) ||
107
- ((!hasPendingSuggestions || isAnnotator) && onNoteChange && (react_1.default.createElement(TextAreaWrapper, null,
108
- react_1.default.createElement(EditorHeader_1.MediumTextArea, { value: noteValue, onChange: onNoteChange, rows: 5, placeholder: 'Add any additional comment here...' })))),
109
- error && (react_1.default.createElement(AlertMessage_1.AlertMessage, { type: AlertMessage_1.AlertMessageType.error, hideCloseButton: true }, error))))));
107
+ react_1.default.createElement(StepDetails, Object.assign({}, currentStepType)))),
108
+ dialogData.state === __1.DialogState.ERROR && (react_1.default.createElement(AlertMessage_1.AlertMessage, { type: AlertMessage_1.AlertMessageType.error, hideCloseButton: true }, dialogData.error))))));
110
109
  };
111
110
  exports.ProceedView = ProceedView;
112
111
  const TaskDropdown = styled_components_1.default.div `
package/dist/cjs/components/FileManager/FileSectionItem/FileInfo.js CHANGED
@@ -26,11 +26,11 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
26
26
  return (mod && mod.__esModule) ? mod : { "default": mod };
27
27
  };
28
28
  Object.defineProperty(exports, "__esModule", { value: true });
29
- exports.FileDescription = exports.FileName = exports.FileNameContainer = exports.FileTitle = exports.FileNameTitleContainer = exports.FileInfoContainer = exports.FileInfo = void 0;
29
+ exports.FileDescription = exports.FileDate = exports.FileName = exports.FileNameContainer = exports.FileTitle = exports.FileNameTitleContainer = exports.FileInfoContainer = exports.FileDateContainer = exports.FileInfo = void 0;
30
30
  const react_1 = __importStar(require("react"));
31
31
  const styled_components_1 = __importDefault(require("styled-components"));
32
32
  const FileManager_1 = require("../FileManager");
33
- const FileInfo = ({ showAttachmentName, title, fileAttachmentName, fileExtension, attachmentId, dispatch, }) => {
33
+ const FileInfo = ({ showAttachmentName, title, fileAttachmentName, fileExtension, attachmentId, dispatch, fileCreatedDate, }) => {
34
34
  const fileName = fileAttachmentName.substring(0, fileAttachmentName.lastIndexOf('.'));
35
35
  const can = (0, react_1.useContext)(FileManager_1.PermissionsContext);
36
36
  return (react_1.default.createElement(exports.FileInfoContainer, null,
@@ -42,9 +42,17 @@ const FileInfo = ({ showAttachmentName, title, fileAttachmentName, fileExtension
42
42
  react_1.default.createElement(exports.FileName, null, fileName),
43
43
  react_1.default.createElement("div", null,
44
44
  ".",
45
- fileExtension))))));
45
+ fileExtension))),
46
+ fileCreatedDate && (react_1.default.createElement(exports.FileDateContainer, null,
47
+ react_1.default.createElement(exports.FileDate, null, fileCreatedDate))))));
46
48
  };
47
49
  exports.FileInfo = FileInfo;
50
+ exports.FileDateContainer = styled_components_1.default.div `
51
+ line-height: 20px;
52
+ overflow: hidden;
53
+ width: 100%;
54
+ display: none;
55
+ `;
48
56
  exports.FileInfoContainer = styled_components_1.default.div `
49
57
  margin-left: 8px;
50
58
  overflow: hidden;
@@ -53,10 +61,15 @@ exports.FileInfoContainer = styled_components_1.default.div `
53
61
  justify-content: center;
54
62
  align-items: start;
55
63
  width: 100%;
64
+
65
+ &:hover ${exports.FileDateContainer} {
66
+ display: flex;
67
+ }
56
68
  `;
57
69
  exports.FileNameTitleContainer = styled_components_1.default.div `
58
70
  display: flex;
59
71
  width: 100%;
72
+ align-items: baseline;
60
73
  `;
61
74
  exports.FileTitle = styled_components_1.default.div `
62
75
  color: ${(props) => props.theme.colors.text.primary};
@@ -79,6 +92,11 @@ exports.FileName = styled_components_1.default.div `
79
92
  text-overflow: ellipsis;
80
93
  white-space: nowrap;
81
94
  overflow: hidden;
95
+ width: 50px;
96
+ `;
97
+ exports.FileDate = styled_components_1.default.div `
98
+ color: '#6E6E6E';
99
+ font-size: 12px;
82
100
  `;
83
101
  exports.FileDescription = styled_components_1.default.div `
84
102
  color: ${(props) => props.theme.colors.text.secondary};
package/dist/cjs/components/FileManager/FileSectionItem/FileSectionItem.js CHANGED
@@ -27,7 +27,7 @@ const FileSectionItem = ({ fileSection, externalFile, title, showAttachmentName
27
27
  }
28
28
  } },
29
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, showAttachmentName: showAttachmentName, fileAttachmentName: externalFile.name, title: title, attachmentId: externalFile.id, dispatch: dispatch })),
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
31
  onClose && (react_1.default.createElement(IconCloseButton, { onClick: (e) => {
32
32
  e.preventDefault();
33
33
  onClose();
package/dist/cjs/components/FileManager/InlineFilesSection.js CHANGED
@@ -26,7 +26,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
26
26
  return (mod && mod.__esModule) ? mod : { "default": mod };
27
27
  };
28
28
  Object.defineProperty(exports, "__esModule", { value: true });
29
- exports.InlineFilesSection = void 0;
29
+ exports.FileDate = exports.FileDateContainer = exports.InlineFilesSection = void 0;
30
30
  const react_1 = __importStar(require("react"));
31
31
  const styled_components_1 = __importDefault(require("styled-components"));
32
32
  const use_dropdown_1 = require("../../hooks/use-dropdown");
@@ -50,14 +50,16 @@ const InlineFilesSection = ({ handleReplace, handleDownload, handleUpdateInline,
50
50
  }
51
51
  }, [isEditor]);
52
52
  return (react_1.default.createElement("div", null, inlineFiles.map((file, index) => {
53
- var _a;
53
+ var _a, _b;
54
54
  return (react_1.default.createElement(ElementItem, { className: 'item', key: index, id: file.id, onClick: onElementClick },
55
55
  react_1.default.createElement(FileReferences, { className: 'refItems' }, (_a = file.attachments) === null || _a === void 0 ? void 0 : _a.map((attachment) => (react_1.default.createElement(FileReference, { key: attachment.id, attachment: attachment, handleReplace: handleReplace, handleUpdateInline: handleUpdateInline, handleDetachFile: handleDetachFile, handleDownload: handleDownload, dispatch: dispatch })))),
56
56
  react_1.default.createElement(Element, { className: 'element' },
57
57
  util_1.fileTypesWithIconMap.get(file.type),
58
58
  react_1.default.createElement(FileInfo_1.FileInfoContainer, null,
59
59
  react_1.default.createElement(FileInfo_1.FileNameTitleContainer, null,
60
- react_1.default.createElement(FileInfo_1.FileTitle, null, file.label))))));
60
+ react_1.default.createElement(FileInfo_1.FileTitle, null, file.label)), (_b = file.attachments) === null || _b === void 0 ? void 0 :
61
+ _b.map((attachment) => (react_1.default.createElement(exports.FileDateContainer, { key: attachment.id },
62
+ react_1.default.createElement(exports.FileDate, null, attachment.createdDate))))))));
61
63
  })));
62
64
  };
63
65
  exports.InlineFilesSection = InlineFilesSection;
@@ -108,9 +110,19 @@ const ElementItem = (0, styled_components_1.default)(FileSectionItem_1.Item) `
108
110
  const Container = styled_components_1.default.div `
109
111
  display: flex;
110
112
  `;
113
+ exports.FileDateContainer = styled_components_1.default.div `
114
+ line-height: 20px;
115
+ overflow: hidden;
116
+ width: 100%;
117
+ display: none;
118
+ `;
111
119
  const Element = styled_components_1.default.div `
112
120
  display: flex;
113
121
  padding: 20px 15px;
122
+
123
+ &:hover ${exports.FileDateContainer} {
124
+ display: flex;
125
+ }
114
126
  `;
115
127
  const FileReferences = styled_components_1.default.div ``;
116
128
  const FileReferenceItem = styled_components_1.default.div `
@@ -161,3 +173,7 @@ const FileReferenceName = styled_components_1.default.div `
161
173
  const DropdownContainer = styled_components_1.default.div `
162
174
  position: relative;
163
175
  `;
176
+ exports.FileDate = styled_components_1.default.div `
177
+ color: '#6E6E6E';
178
+ font-size: 12px;
179
+ `;
package/dist/es/components/EditorHeader/EditorHeader.js CHANGED
@@ -7,10 +7,18 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
7
7
  step((generator = generator.apply(thisArg, _arguments || [])).next());
8
8
  });
9
9
  };
10
- import React, { useCallback, useEffect, useState } from 'react';
10
+ import React, { useCallback, useState } from 'react';
11
11
  import styled from 'styled-components';
12
12
  import { AnnotatorIcon, DropdownContainer, DropdownList, EditIcon, LeftArrow, NavDropdownContainer, NavDropdownToggle, PrimaryButton, ReadingIcon, SaveStatus, SecondaryButton, TextArea, useDropdown, } from '../..';
13
13
  import { ProceedView } from './ProceedView';
14
+ export var DialogState;
15
+ (function (DialogState) {
16
+ DialogState[DialogState["INIT"] = 0] = "INIT";
17
+ DialogState[DialogState["LOADING"] = 1] = "LOADING";
18
+ DialogState[DialogState["ERROR"] = 2] = "ERROR";
19
+ DialogState[DialogState["SUCCESS"] = 3] = "SUCCESS";
20
+ DialogState[DialogState["CLOSED"] = 4] = "CLOSED";
21
+ })(DialogState || (DialogState = {}));
14
22
  const Editing = { label: 'Editing...', icon: EditIcon };
15
23
  const MapUserRole = {
16
24
  Editor: Editing,
@@ -20,53 +28,54 @@ const MapUserRole = {
20
28
  Viewer: { label: 'Reading...', icon: ReadingIcon },
21
29
  };
22
30
  export const EditorHeader = ({ handleSnapshot, submission, hasPendingSuggestions, userRole, canCompleteTask, submitProceed, goBack, status, isAnnotator, message, exceptionDialog: ExceptionDialog, disabelProceedNote, }) => {
23
- var _a, _b, _c, _d;
31
+ var _a, _b, _c, _d, _e;
24
32
  const [confirmationDialog, toggleConfirmationDialog] = useState(false);
25
- const [loading, setLoading] = useState(false);
26
33
  const [noteValue, setNoteValue] = useState('');
27
- const [error, setError] = useState(undefined);
28
34
  const [selectedTransitionIndex, setSelectedTransitionIndex] = useState();
29
- const { complete: showComplete, error: submissionError, mutationError, submit, } = submitProceed;
30
- useEffect(() => {
31
- if (submissionError) {
32
- setError(submissionError);
33
- }
34
- }, [submissionError]);
35
+ const { dialogData, submit } = submitProceed;
36
+ const { updateState, clearError } = dialogData;
35
37
  const continueDialogAction = useCallback(() => __awaiter(void 0, void 0, void 0, function* () {
36
38
  if (submission && selectedTransitionIndex && handleSnapshot) {
37
39
  const { status } = submission.currentStep.type.transitions[selectedTransitionIndex];
38
- setLoading(true);
40
+ updateState(DialogState.LOADING);
39
41
  yield handleSnapshot();
40
42
  yield submit(status.id, noteValue);
41
- setLoading(false);
42
43
  }
43
44
  }), [
44
- handleSnapshot,
45
- selectedTransitionIndex,
46
45
  submission,
47
- noteValue,
46
+ selectedTransitionIndex,
47
+ handleSnapshot,
48
+ updateState,
48
49
  submit,
50
+ noteValue,
49
51
  ]);
50
52
  const onTransitionClick = useCallback((event) => {
53
+ updateState(DialogState.INIT);
51
54
  toggleConfirmationDialog(true);
52
55
  setSelectedTransitionIndex(event.target.value || event.target.parentNode.value);
53
- }, [setSelectedTransitionIndex, toggleConfirmationDialog]);
56
+ }, [setSelectedTransitionIndex, toggleConfirmationDialog, updateState]);
54
57
  const onCancelClick = useCallback(() => {
55
58
  toggleConfirmationDialog(false);
56
59
  setSelectedTransitionIndex(undefined);
57
- setError(undefined);
58
- }, [toggleConfirmationDialog, setSelectedTransitionIndex, setError]);
60
+ clearError();
61
+ updateState(DialogState.CLOSED);
62
+ }, [
63
+ toggleConfirmationDialog,
64
+ setSelectedTransitionIndex,
65
+ clearError,
66
+ updateState,
67
+ ]);
59
68
  const onNoteChange = useCallback((event) => setNoteValue(event.target.value), [setNoteValue]);
60
69
  const currentStepTransition = submission === null || submission === void 0 ? void 0 : submission.currentStep.type.transitions;
61
70
  const disable = !currentStepTransition || !canCompleteTask;
62
- const errorCode = (_c = (_b = (_a = mutationError === null || mutationError === void 0 ? void 0 : mutationError.graphQLErrors) === null || _a === void 0 ? void 0 : _a.find((error) => { var _a; return (_a = error === null || error === void 0 ? void 0 : error.extensions) === null || _a === void 0 ? void 0 : _a.code; })) === null || _b === void 0 ? void 0 : _b.extensions) === null || _c === void 0 ? void 0 : _c.code.name;
71
+ const errorCode = (_d = (_c = (_b = (_a = dialogData.mutationError) === null || _a === void 0 ? void 0 : _a.graphQLErrors) === null || _b === void 0 ? void 0 : _b.find((error) => { var _a; return (_a = error === null || error === void 0 ? void 0 : error.extensions) === null || _a === void 0 ? void 0 : _a.code; })) === null || _c === void 0 ? void 0 : _c.extensions) === null || _d === void 0 ? void 0 : _d.code.name;
63
72
  return (React.createElement(Wrapper, null,
64
73
  goBack && (React.createElement(SecondaryButtonSmall, { onClick: goBack, type: "button" },
65
74
  React.createElement(LeftArrow, null),
66
75
  React.createElement("span", null, "Dashboard"))),
67
76
  handleSnapshot &&
68
77
  typeof hasPendingSuggestions == 'boolean' &&
69
- submission.nextStep && (React.createElement(ProceedView, { isAnnotator: isAnnotator, disable: disable, onTransitionClick: onTransitionClick, hasPendingSuggestions: hasPendingSuggestions, loading: loading, showComplete: showComplete, noteValue: noteValue, currentStepTransition: currentStepTransition, error: error, currentStepType: submission.currentStep.type, previousStepType: (_d = submission.previousStep) === null || _d === void 0 ? void 0 : _d.type, nextStepType: submission.nextStep.type, confirmationDialog: confirmationDialog, onNoteChange: disabelProceedNote ? undefined : onNoteChange, continueDialogAction: continueDialogAction, onCancelClick: onCancelClick, message: message })),
78
+ submission.nextStep && (React.createElement(ProceedView, { isAnnotator: isAnnotator, disable: disable, onTransitionClick: onTransitionClick, hasPendingSuggestions: hasPendingSuggestions, dialogData: dialogData, noteValue: noteValue, currentStepTransition: currentStepTransition, currentStepType: submission.currentStep.type, previousStepType: (_e = submission.previousStep) === null || _e === void 0 ? void 0 : _e.type, nextStepType: submission.nextStep.type, confirmationDialog: confirmationDialog, onNoteChange: disabelProceedNote ? undefined : onNoteChange, continueDialogAction: continueDialogAction, onCancelClick: onCancelClick, message: message })),
70
79
  status && (React.createElement(ChildWrapper, null,
71
80
  React.createElement(SaveStatus, { status: status }))),
72
81
  React.createElement(Spacer, null),
package/dist/es/components/EditorHeader/ProceedView.js CHANGED
@@ -1,8 +1,8 @@
1
1
  import React, { useMemo } from 'react';
2
2
  import styled from 'styled-components';
3
- import { Category, Dialog, LoadingOverlay, NavDropdown, NavDropdownButton, NavDropdownContainer, PrimaryBoldHeading, PrimaryButton, SecondarySmallText, TaskStepDoneIcon, useDropdown, } from '../..';
3
+ import { Category, Dialog, DialogState, LoadingOverlay, NavDropdown, NavDropdownButton, NavDropdownContainer, PrimaryBoldHeading, PrimaryButton, SecondarySmallText, TaskStepDoneIcon, useDropdown, } from '../..';
4
4
  import { AlertMessage, AlertMessageType } from '../AlertMessage';
5
- import { MediumTextArea, PrimaryButtonSmall, } from './EditorHeader';
5
+ import { PrimaryButtonSmall, } from './EditorHeader';
6
6
  const DropdownWrapper = ({ disabled, button, primary, children }) => {
7
7
  const { isOpen, toggleOpen, wrapperRef } = useDropdown();
8
8
  return (React.createElement(NavDropdownContainer, { id: 'user-dropdown', ref: wrapperRef },
@@ -17,7 +17,7 @@ const StepDetails = ({ icon, label, description, role }) => (React.createElement
17
17
  React.createElement(SecondarySmallText, null,
18
18
  "Actor: ",
19
19
  role.label))));
20
- export const ProceedView = ({ currentStepTransition, onTransitionClick, disable, loading, showComplete, confirmationDialog, previousStepType, currentStepType, nextStepType, isAnnotator, hasPendingSuggestions, error, noteValue, onNoteChange, onCancelClick, continueDialogAction, message: Message, }) => {
20
+ export const ProceedView = ({ currentStepTransition, onTransitionClick, disable, dialogData, confirmationDialog, previousStepType, currentStepType, isAnnotator, hasPendingSuggestions, onCancelClick, continueDialogAction, message: Message, }) => {
21
21
  const dialogMessages = useMemo(() => hasPendingSuggestions && !isAnnotator
22
22
  ? {
23
23
  header: 'The task can not be transitioned to the next step',
@@ -30,7 +30,7 @@ export const ProceedView = ({ currentStepTransition, onTransitionClick, disable,
30
30
  },
31
31
  },
32
32
  }
33
- : showComplete
33
+ : dialogData.state === DialogState.SUCCESS
34
34
  ? {
35
35
  header: 'Content reassigned successfully',
36
36
  message: `to the ${currentStepType.label}`,
@@ -55,7 +55,7 @@ export const ProceedView = ({ currentStepTransition, onTransitionClick, disable,
55
55
  },
56
56
  },
57
57
  }, [
58
- showComplete,
58
+ dialogData,
59
59
  continueDialogAction,
60
60
  onCancelClick,
61
61
  currentStepType,
@@ -68,16 +68,15 @@ export const ProceedView = ({ currentStepTransition, onTransitionClick, disable,
68
68
  currentStepTransition.map((transition, index) => (React.createElement(Task, { key: 'task_' + transition.type.id, className: transition.status.id === 'success' ? 'happyPath' : '', value: index, onClick: onTransitionClick },
69
69
  React.createElement("strong", null, transition.type.label),
70
70
  transition.type.description))))))) || (React.createElement(PrimaryButtonSmall, { value: 0, onClick: onTransitionClick, disabled: disable }, "Complete task")),
71
- (loading && (React.createElement(LoadingOverlay, null,
72
- React.createElement(Message, { isCentered: true }, "Proceeding with your submission\u2026")))) || (React.createElement(Dialog, { isOpen: confirmationDialog && !loading, category: Category.confirmation, header: dialogMessages.header, message: dialogMessages.message, actions: dialogMessages.actions },
73
- (showComplete && (React.createElement(Grid, null,
71
+ dialogData.state === DialogState.LOADING && (React.createElement(LoadingOverlay, null,
72
+ React.createElement(Message, { isCentered: true }, "Proceeding with your submission\u2026"))),
73
+ !(dialogData.state === DialogState.CLOSED) && (React.createElement(Dialog, { isOpen: confirmationDialog && !(dialogData.state === DialogState.LOADING), category: Category.confirmation, header: dialogMessages.header, message: dialogMessages.message, actions: dialogMessages.actions },
74
+ dialogData.state === DialogState.SUCCESS && (React.createElement(Grid, null,
74
75
  previousStepType && (React.createElement(StepDetails, Object.assign({}, previousStepType, { icon: React.createElement(React.Fragment, null,
75
76
  React.createElement(TaskStepDoneIcon, null),
76
77
  React.createElement(Line, null)) }))),
77
- React.createElement(StepDetails, Object.assign({}, currentStepType))))) ||
78
- ((!hasPendingSuggestions || isAnnotator) && onNoteChange && (React.createElement(TextAreaWrapper, null,
79
- React.createElement(MediumTextArea, { value: noteValue, onChange: onNoteChange, rows: 5, placeholder: 'Add any additional comment here...' })))),
80
- error && (React.createElement(AlertMessage, { type: AlertMessageType.error, hideCloseButton: true }, error))))));
78
+ React.createElement(StepDetails, Object.assign({}, currentStepType)))),
79
+ dialogData.state === DialogState.ERROR && (React.createElement(AlertMessage, { type: AlertMessageType.error, hideCloseButton: true }, dialogData.error))))));
81
80
  };
82
81
  const TaskDropdown = styled.div `
83
82
  display: flex;
package/dist/es/components/FileManager/FileSectionItem/FileInfo.js CHANGED
@@ -1,7 +1,7 @@
1
1
  import React, { useContext } from 'react';
2
2
  import styled from 'styled-components';
3
3
  import { PermissionsContext } from '../FileManager';
4
- export const FileInfo = ({ showAttachmentName, title, fileAttachmentName, fileExtension, attachmentId, dispatch, }) => {
4
+ export const FileInfo = ({ showAttachmentName, title, fileAttachmentName, fileExtension, attachmentId, dispatch, fileCreatedDate, }) => {
5
5
  const fileName = fileAttachmentName.substring(0, fileAttachmentName.lastIndexOf('.'));
6
6
  const can = useContext(PermissionsContext);
7
7
  return (React.createElement(FileInfoContainer, null,
@@ -13,8 +13,16 @@ export const FileInfo = ({ showAttachmentName, title, fileAttachmentName, fileEx
13
13
  React.createElement(FileName, null, fileName),
14
14
  React.createElement("div", null,
15
15
  ".",
16
- fileExtension))))));
16
+ fileExtension))),
17
+ fileCreatedDate && (React.createElement(FileDateContainer, null,
18
+ React.createElement(FileDate, null, fileCreatedDate))))));
17
19
  };
20
+ export const FileDateContainer = styled.div `
21
+ line-height: 20px;
22
+ overflow: hidden;
23
+ width: 100%;
24
+ display: none;
25
+ `;
18
26
  export const FileInfoContainer = styled.div `
19
27
  margin-left: 8px;
20
28
  overflow: hidden;
@@ -23,10 +31,15 @@ export const FileInfoContainer = styled.div `
23
31
  justify-content: center;
24
32
  align-items: start;
25
33
  width: 100%;
34
+
35
+ &:hover ${FileDateContainer} {
36
+ display: flex;
37
+ }
26
38
  `;
27
39
  export const FileNameTitleContainer = styled.div `
28
40
  display: flex;
29
41
  width: 100%;
42
+ align-items: baseline;
30
43
  `;
31
44
  export const FileTitle = styled.div `
32
45
  color: ${(props) => props.theme.colors.text.primary};
@@ -49,6 +62,11 @@ export const FileName = styled.div `
49
62
  text-overflow: ellipsis;
50
63
  white-space: nowrap;
51
64
  overflow: hidden;
65
+ width: 50px;
66
+ `;
67
+ export const FileDate = styled.div `
68
+ color: '#6E6E6E';
69
+ font-size: 12px;
52
70
  `;
53
71
  export const FileDescription = styled.div `
54
72
  color: ${(props) => props.theme.colors.text.secondary};
package/dist/es/components/FileManager/FileSectionItem/FileSectionItem.js CHANGED
@@ -21,7 +21,7 @@ export const FileSectionItem = ({ fileSection, externalFile, title, showAttachme
21
21
  }
22
22
  } },
23
23
  React.createElement(FileTypeIcon, { withDot: isMainManuscript, fileExtension: fileExtension, alt: externalFile.name }),
24
- React.createElement(FileInfo, { fileExtension: fileExtension, showAttachmentName: showAttachmentName, fileAttachmentName: externalFile.name, title: title, attachmentId: externalFile.id, dispatch: dispatch })),
24
+ React.createElement(FileInfo, { fileExtension: fileExtension, fileCreatedDate: externalFile.createdDate, showAttachmentName: showAttachmentName, fileAttachmentName: externalFile.name, title: title, attachmentId: externalFile.id, dispatch: dispatch })),
25
25
  onClose && (React.createElement(IconCloseButton, { onClick: (e) => {
26
26
  e.preventDefault();
27
27
  onClose();
package/dist/es/components/FileManager/InlineFilesSection.js CHANGED
@@ -21,14 +21,16 @@ export const InlineFilesSection = ({ handleReplace, handleDownload, handleUpdate
21
21
  }
22
22
  }, [isEditor]);
23
23
  return (React.createElement("div", null, inlineFiles.map((file, index) => {
24
- var _a;
24
+ var _a, _b;
25
25
  return (React.createElement(ElementItem, { className: 'item', key: index, id: file.id, onClick: onElementClick },
26
26
  React.createElement(FileReferences, { className: 'refItems' }, (_a = file.attachments) === null || _a === void 0 ? void 0 : _a.map((attachment) => (React.createElement(FileReference, { key: attachment.id, attachment: attachment, handleReplace: handleReplace, handleUpdateInline: handleUpdateInline, handleDetachFile: handleDetachFile, handleDownload: handleDownload, dispatch: dispatch })))),
27
27
  React.createElement(Element, { className: 'element' },
28
28
  fileTypesWithIconMap.get(file.type),
29
29
  React.createElement(FileInfoContainer, null,
30
30
  React.createElement(FileNameTitleContainer, null,
31
- React.createElement(FileTitle, null, file.label))))));
31
+ React.createElement(FileTitle, null, file.label)), (_b = file.attachments) === null || _b === void 0 ? void 0 :
32
+ _b.map((attachment) => (React.createElement(FileDateContainer, { key: attachment.id },
33
+ React.createElement(FileDate, null, attachment.createdDate))))))));
32
34
  })));
33
35
  };
34
36
  const FileReference = ({ attachment, handleReplace, handleDownload, handleUpdateInline, handleDetachFile, dispatch, }) => {
@@ -78,9 +80,19 @@ const ElementItem = styled(Item) `
78
80
  const Container = styled.div `
79
81
  display: flex;
80
82
  `;
83
+ export const FileDateContainer = styled.div `
84
+ line-height: 20px;
85
+ overflow: hidden;
86
+ width: 100%;
87
+ display: none;
88
+ `;
81
89
  const Element = styled.div `
82
90
  display: flex;
83
91
  padding: 20px 15px;
92
+
93
+ &:hover ${FileDateContainer} {
94
+ display: flex;
95
+ }
84
96
  `;
85
97
  const FileReferences = styled.div ``;
86
98
  const FileReferenceItem = styled.div `
@@ -131,3 +143,7 @@ const FileReferenceName = styled.div `
131
143
  const DropdownContainer = styled.div `
132
144
  position: relative;
133
145
  `;
146
+ export const FileDate = styled.div `
147
+ color: '#6E6E6E';
148
+ font-size: 12px;
149
+ `;
package/dist/types/components/EditorHeader/EditorHeader.d.ts CHANGED
@@ -26,6 +26,20 @@ export type SubmissionStepType = {
26
26
  label: string;
27
27
  };
28
28
  };
29
+ export declare enum DialogState {
30
+ INIT = 0,
31
+ LOADING = 1,
32
+ ERROR = 2,
33
+ SUCCESS = 3,
34
+ CLOSED = 4
35
+ }
36
+ export type ProceedDialogData = {
37
+ state: DialogState;
38
+ error?: string;
39
+ mutationError?: ApolloError | undefined;
40
+ updateState: (state: DialogState) => void;
41
+ clearError: () => void;
42
+ };
29
43
  export declare const EditorHeader: React.FC<{
30
44
  handleSnapshot?: () => Promise<void>;
31
45
  submission: PartialSubmission;
@@ -36,9 +50,7 @@ export declare const EditorHeader: React.FC<{
36
50
  }>;
37
51
  userRole: string;
38
52
  submitProceed: {
39
- complete: boolean;
40
- error: string;
41
- mutationError: ApolloError | undefined;
53
+ dialogData: ProceedDialogData;
42
54
  submit: (statusId: string, noteValue: string) => Promise<unknown>;
43
55
  };
44
56
  goBack?: () => void;
package/dist/types/components/EditorHeader/ProceedView.d.ts CHANGED
@@ -1,4 +1,5 @@
1
1
  import React from 'react';
2
+ import { ProceedDialogData } from '../..';
2
3
  import { SubmissionStepTransition, SubmissionStepType } from './EditorHeader';
3
4
  export declare const ProceedView: React.FC<{
4
5
  isAnnotator: boolean;
@@ -6,11 +7,9 @@ export declare const ProceedView: React.FC<{
6
7
  onTransitionClick: (event: unknown) => void;
7
8
  onNoteChange?: (event: unknown) => void;
8
9
  hasPendingSuggestions: boolean;
9
- loading: boolean;
10
- showComplete: boolean;
10
+ dialogData: ProceedDialogData;
11
11
  noteValue: string;
12
12
  currentStepTransition: SubmissionStepTransition[];
13
- error: string | undefined;
14
13
  previousStepType: SubmissionStepType | undefined;
15
14
  currentStepType: SubmissionStepType;
16
15
  nextStepType: SubmissionStepType;
package/dist/types/components/FileManager/FileSectionItem/FileInfo.d.ts CHANGED
@@ -6,11 +6,14 @@ export declare const FileInfo: React.FC<{
6
6
  fileAttachmentName: string;
7
7
  fileExtension: string;
8
8
  attachmentId: string;
9
+ fileCreatedDate: Date;
9
10
  dispatch?: Dispatch<Action>;
10
11
  }>;
12
+ export declare const FileDateContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
11
13
  export declare const FileInfoContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
12
14
  export declare const FileNameTitleContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
13
15
  export declare const FileTitle: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
14
16
  export declare const FileNameContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
15
17
  export declare const FileName: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
18
+ export declare const FileDate: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
16
19
  export declare const FileDescription: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
package/dist/types/components/FileManager/FileSectionItem/FileSectionItem.d.ts CHANGED
@@ -9,6 +9,7 @@ export type FileAttachment = {
9
9
  name: string;
10
10
  type: FileAttachmentType;
11
11
  link: string;
12
+ createdDate: Date;
12
13
  };
13
14
  export type FileAttachmentType = {
14
15
  id: string;
package/dist/types/components/FileManager/InlineFilesSection.d.ts CHANGED
@@ -18,3 +18,5 @@ export declare const InlineFilesSection: React.FC<{
18
18
  isEditor: boolean;
19
19
  dispatch: Dispatch<Action>;
20
20
  }>;
21
+ export declare const FileDateContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
22
+ export declare const FileDate: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
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.1.15",
4
+ "version": "1.1.16-LEAN-2669-v6",
5
5
  "repository": "github:Atypon-OpenSource/manuscripts-style-guide",
6
6
  "license": "Apache-2.0",
7
7
  "main": "dist/cjs",