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

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 (15) 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 +22 -3
  4. package/dist/cjs/components/FileManager/FileSectionItem/FileSectionItem.js +1 -1
  5. package/dist/cjs/components/FileManager/InlineFilesSection.js +3 -2
  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 +21 -2
  9. package/dist/es/components/FileManager/FileSectionItem/FileSectionItem.js +1 -1
  10. package/dist/es/components/FileManager/InlineFilesSection.js +3 -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/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,18 @@ 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)))),
48
+ ' '));
46
49
  };
47
50
  exports.FileInfo = FileInfo;
51
+ exports.FileDateContainer = styled_components_1.default.div `
52
+ line-height: 20px;
53
+ overflow: hidden;
54
+ width: 100%;
55
+ display: none;
56
+ `;
48
57
  exports.FileInfoContainer = styled_components_1.default.div `
49
58
  margin-left: 8px;
50
59
  overflow: hidden;
@@ -53,10 +62,15 @@ exports.FileInfoContainer = styled_components_1.default.div `
53
62
  justify-content: center;
54
63
  align-items: start;
55
64
  width: 100%;
65
+
66
+ &:hover ${exports.FileDateContainer} {
67
+ display: flex;
68
+ }
56
69
  `;
57
70
  exports.FileNameTitleContainer = styled_components_1.default.div `
58
71
  display: flex;
59
72
  width: 100%;
73
+ align-items: baseline;
60
74
  `;
61
75
  exports.FileTitle = styled_components_1.default.div `
62
76
  color: ${(props) => props.theme.colors.text.primary};
@@ -79,6 +93,11 @@ exports.FileName = styled_components_1.default.div `
79
93
  text-overflow: ellipsis;
80
94
  white-space: nowrap;
81
95
  overflow: hidden;
96
+ width: 50px;
97
+ `;
98
+ exports.FileDate = styled_components_1.default.div `
99
+ color: '#6E6E6E';
100
+ font-size: 12px;
82
101
  `;
83
102
  exports.FileDescription = styled_components_1.default.div `
84
103
  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
@@ -50,14 +50,15 @@ 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("div", { key: attachment.id }, attachment.createdDate)))))));
61
62
  })));
62
63
  };
63
64
  exports.InlineFilesSection = InlineFilesSection;
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,17 @@ 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)))),
19
+ ' '));
17
20
  };
21
+ export const FileDateContainer = styled.div `
22
+ line-height: 20px;
23
+ overflow: hidden;
24
+ width: 100%;
25
+ display: none;
26
+ `;
18
27
  export const FileInfoContainer = styled.div `
19
28
  margin-left: 8px;
20
29
  overflow: hidden;
@@ -23,10 +32,15 @@ export const FileInfoContainer = styled.div `
23
32
  justify-content: center;
24
33
  align-items: start;
25
34
  width: 100%;
35
+
36
+ &:hover ${FileDateContainer} {
37
+ display: flex;
38
+ }
26
39
  `;
27
40
  export const FileNameTitleContainer = styled.div `
28
41
  display: flex;
29
42
  width: 100%;
43
+ align-items: baseline;
30
44
  `;
31
45
  export const FileTitle = styled.div `
32
46
  color: ${(props) => props.theme.colors.text.primary};
@@ -49,6 +63,11 @@ export const FileName = styled.div `
49
63
  text-overflow: ellipsis;
50
64
  white-space: nowrap;
51
65
  overflow: hidden;
66
+ width: 50px;
67
+ `;
68
+ export const FileDate = styled.div `
69
+ color: '#6E6E6E';
70
+ font-size: 12px;
52
71
  `;
53
72
  export const FileDescription = styled.div `
54
73
  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,15 @@ 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("div", { key: attachment.id }, attachment.createdDate)))))));
32
33
  })));
33
34
  };
34
35
  const FileReference = ({ attachment, handleReplace, handleDownload, handleUpdateInline, handleDetachFile, dispatch, }) => {
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/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-v5",
5
5
  "repository": "github:Atypon-OpenSource/manuscripts-style-guide",
6
6
  "license": "Apache-2.0",
7
7
  "main": "dist/cjs",