@manuscripts/style-guide 1.0.1 → 1.0.2
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.
- package/dist/cjs/components/FileManager/FileManager.js +16 -8
- package/dist/cjs/components/FileManager/FileSectionState.js +11 -8
- package/dist/cjs/components/FileManager/FilesSection.js +3 -4
- package/dist/cjs/components/FileManager/UploadFileArea.js +4 -15
- package/dist/es/components/FileManager/FileManager.js +12 -4
- package/dist/es/components/FileManager/FileSectionState.js +11 -8
- package/dist/es/components/FileManager/FilesSection.js +3 -4
- package/dist/es/components/FileManager/UploadFileArea.js +5 -16
- package/dist/types/components/FileManager/FileSectionState.d.ts +5 -4
- package/package.json +1 -1
|
@@ -58,7 +58,9 @@ const FileManager = ({ modelMap, saveModel, enableDragAndDrop, can, fileManageme
|
|
|
58
58
|
dispatch(FileSectionState_1.actions.SELECT_DESIGNATION(util_1.namesWithDesignationMap.get(typeId) || util_1.Designation.Document));
|
|
59
59
|
const res = yield replace(attachmentId, name, file, typeId);
|
|
60
60
|
dispatch(FileSectionState_1.actions.HANDLE_FINISH_UPLOAD());
|
|
61
|
-
|
|
61
|
+
if (res) {
|
|
62
|
+
dispatch(FileSectionState_1.actions.HANDLE_SUCCESS_MESSAGE('File uploaded successfully.'));
|
|
63
|
+
}
|
|
62
64
|
return res;
|
|
63
65
|
}), [replace]);
|
|
64
66
|
const handleUploadFile = (0, react_1.useCallback)((file, designation) => __awaiter(void 0, void 0, void 0, function* () {
|
|
@@ -68,7 +70,9 @@ const FileManager = ({ modelMap, saveModel, enableDragAndDrop, can, fileManageme
|
|
|
68
70
|
}
|
|
69
71
|
const res = yield upload(file, designation);
|
|
70
72
|
dispatch(FileSectionState_1.actions.HANDLE_FINISH_UPLOAD());
|
|
71
|
-
|
|
73
|
+
if (res) {
|
|
74
|
+
dispatch(FileSectionState_1.actions.HANDLE_SUCCESS_MESSAGE('File uploaded successfully.', index_1.FileSectionType.OtherFile));
|
|
75
|
+
}
|
|
72
76
|
return res;
|
|
73
77
|
}), [upload]);
|
|
74
78
|
const handleUploadFileWithSupplement = (0, react_1.useCallback)((file, designation) => __awaiter(void 0, void 0, void 0, function* () {
|
|
@@ -77,6 +81,10 @@ const FileManager = ({ modelMap, saveModel, enableDragAndDrop, can, fileManageme
|
|
|
77
81
|
const { id, name } = response;
|
|
78
82
|
yield saveModel((0, transform_1.buildSupplementaryMaterial)(name, `attachment:${id}`));
|
|
79
83
|
}
|
|
84
|
+
dispatch(FileSectionState_1.actions.HANDLE_FINISH_UPLOAD());
|
|
85
|
+
if (response) {
|
|
86
|
+
dispatch(FileSectionState_1.actions.HANDLE_SUCCESS_MESSAGE('File uploaded successfully.', index_1.FileSectionType.Supplements));
|
|
87
|
+
}
|
|
80
88
|
return response;
|
|
81
89
|
}), [upload, saveModel]);
|
|
82
90
|
const handleChangeDesignationFile = (0, react_1.useCallback)((attachmentId, typeId, name) => __awaiter(void 0, void 0, void 0, function* () {
|
|
@@ -106,10 +114,10 @@ const FileManager = ({ modelMap, saveModel, enableDragAndDrop, can, fileManageme
|
|
|
106
114
|
}
|
|
107
115
|
};
|
|
108
116
|
const getFileSectionExternalFile = (fileSection) => {
|
|
109
|
-
const isSupplementOrOtherFilesTab = fileSection ===
|
|
110
|
-
fileSection ===
|
|
111
|
-
const isOtherFilesTab = fileSection ===
|
|
112
|
-
const itemsData = (fileSection ===
|
|
117
|
+
const isSupplementOrOtherFilesTab = fileSection === index_1.FileSectionType.Supplements ||
|
|
118
|
+
fileSection === index_1.FileSectionType.OtherFile;
|
|
119
|
+
const isOtherFilesTab = fileSection === index_1.FileSectionType.OtherFile;
|
|
120
|
+
const itemsData = (fileSection === index_1.FileSectionType.Supplements && supplementFiles) ||
|
|
113
121
|
otherFiles;
|
|
114
122
|
const itemsDataWithTitle = (0, util_1.generateAttachmentsTitles)(itemsData, fileSection);
|
|
115
123
|
const filesItems = itemsDataWithTitle.map((element) => {
|
|
@@ -158,8 +166,8 @@ const FileManager = ({ modelMap, saveModel, enableDragAndDrop, can, fileManageme
|
|
|
158
166
|
react_1.default.createElement(Inspector_1.InspectorTabPanel, null,
|
|
159
167
|
react_1.default.createElement(InlineFilesSection_1.InlineFilesSection, { inlineFiles: inlineFiles, handleReplace: replace, handleDownload: handleDownload, handleUpdateInline: handleUpdateInline, handleDetachFile: handleDetachFile, isEditor: enableDragAndDrop, dispatch: dispatch })),
|
|
160
168
|
react_1.default.createElement(Inspector_1.InspectorTabPanel, null,
|
|
161
|
-
react_1.default.createElement(FilesSection_1.FilesSection, { enableDragAndDrop: enableDragAndDrop, handleUpload: handleUploadFileWithSupplement, fileSection:
|
|
169
|
+
react_1.default.createElement(FilesSection_1.FilesSection, { enableDragAndDrop: enableDragAndDrop, handleUpload: handleUploadFileWithSupplement, fileSection: index_1.FileSectionType.Supplements, filesItem: getFileSectionExternalFile(index_1.FileSectionType.Supplements), state: state, dispatch: dispatch })),
|
|
162
170
|
react_1.default.createElement(Inspector_1.InspectorTabPanel, null,
|
|
163
|
-
react_1.default.createElement(FilesSection_1.FilesSection, { enableDragAndDrop: enableDragAndDrop, handleUpload: handleUploadFile, fileSection:
|
|
171
|
+
react_1.default.createElement(FilesSection_1.FilesSection, { enableDragAndDrop: enableDragAndDrop, handleUpload: handleUploadFile, fileSection: index_1.FileSectionType.OtherFile, filesItem: getFileSectionExternalFile(index_1.FileSectionType.OtherFile), state: state, dispatch: dispatch }))))))));
|
|
164
172
|
};
|
|
165
173
|
exports.FileManager = FileManager;
|
|
@@ -5,10 +5,11 @@ const getInitialState = () => ({
|
|
|
5
5
|
uploadedFile: undefined,
|
|
6
6
|
isUploadFile: false,
|
|
7
7
|
moveToOtherState: undefined,
|
|
8
|
+
fileUploadedSuccessfullySection: undefined,
|
|
8
9
|
successMessage: '',
|
|
9
10
|
isShowSuccessMessage: false,
|
|
10
11
|
selectDesignation: undefined,
|
|
11
|
-
|
|
12
|
+
showDesignationPopup: undefined,
|
|
12
13
|
});
|
|
13
14
|
exports.getInitialState = getInitialState;
|
|
14
15
|
var ActionTypes;
|
|
@@ -25,7 +26,7 @@ var ActionTypes;
|
|
|
25
26
|
const reducer = (state, action) => {
|
|
26
27
|
switch (action.type) {
|
|
27
28
|
case ActionTypes.UPLOAD_FILE: {
|
|
28
|
-
return Object.assign(Object.assign({}, state), {
|
|
29
|
+
return Object.assign(Object.assign({}, state), { showDesignationPopup: action.sectionType, uploadedFile: action.uploadFile, selectDesignation: undefined });
|
|
29
30
|
}
|
|
30
31
|
case ActionTypes.MOVE_FILE: {
|
|
31
32
|
return Object.assign(Object.assign({}, state), { moveToOtherState: {
|
|
@@ -37,28 +38,29 @@ const reducer = (state, action) => {
|
|
|
37
38
|
return Object.assign(Object.assign({}, state), { selectDesignation: action.designation });
|
|
38
39
|
}
|
|
39
40
|
case ActionTypes.HANDLE_UPLOAD_ACTION: {
|
|
40
|
-
return Object.assign(Object.assign({}, state), {
|
|
41
|
+
return Object.assign(Object.assign({}, state), { showDesignationPopup: undefined, isUploadFile: true, isShowSuccessMessage: false, successMessage: '' });
|
|
41
42
|
}
|
|
42
43
|
case ActionTypes.HANDLE_CANCEL_UPLOAD: {
|
|
43
|
-
return Object.assign(Object.assign({}, state), {
|
|
44
|
+
return Object.assign(Object.assign({}, state), { showDesignationPopup: undefined });
|
|
44
45
|
}
|
|
45
46
|
case ActionTypes.HANDLE_FINISH_UPLOAD: {
|
|
46
47
|
return Object.assign(Object.assign({}, state), { isUploadFile: false, uploadedFile: undefined, selectDesignation: undefined });
|
|
47
48
|
}
|
|
48
49
|
case ActionTypes.HANDLE_SUCCESS_MESSAGE: {
|
|
49
|
-
return Object.assign(Object.assign({}, state), { isShowSuccessMessage: true, successMessage: action.successMessage });
|
|
50
|
+
return Object.assign(Object.assign({}, state), { isShowSuccessMessage: true, successMessage: action.successMessage, fileUploadedSuccessfullySection: action.sectionType });
|
|
50
51
|
}
|
|
51
52
|
case ActionTypes.HANDLE_SUCCESS_MESSAGE_DISMISS: {
|
|
52
|
-
return Object.assign(Object.assign({}, state), { isShowSuccessMessage: false, successMessage: '' });
|
|
53
|
+
return Object.assign(Object.assign({}, state), { isShowSuccessMessage: false, successMessage: '', fileUploadedSuccessfullySection: undefined });
|
|
53
54
|
}
|
|
54
55
|
}
|
|
55
56
|
return state;
|
|
56
57
|
};
|
|
57
58
|
exports.reducer = reducer;
|
|
58
59
|
exports.actions = {
|
|
59
|
-
UPLOAD_FILE: (uploadFile) => ({
|
|
60
|
+
UPLOAD_FILE: (uploadFile, sectionType) => ({
|
|
60
61
|
type: ActionTypes.UPLOAD_FILE,
|
|
61
62
|
uploadFile,
|
|
63
|
+
sectionType,
|
|
62
64
|
}),
|
|
63
65
|
HANDLE_UPLOAD_ACTION: () => ({
|
|
64
66
|
type: ActionTypes.HANDLE_UPLOAD_ACTION,
|
|
@@ -79,9 +81,10 @@ exports.actions = {
|
|
|
79
81
|
HANDLE_FINISH_UPLOAD: () => ({
|
|
80
82
|
type: ActionTypes.HANDLE_FINISH_UPLOAD,
|
|
81
83
|
}),
|
|
82
|
-
HANDLE_SUCCESS_MESSAGE: (successMessage) => ({
|
|
84
|
+
HANDLE_SUCCESS_MESSAGE: (successMessage, sectionType) => ({
|
|
83
85
|
type: ActionTypes.HANDLE_SUCCESS_MESSAGE,
|
|
84
86
|
successMessage,
|
|
87
|
+
sectionType,
|
|
85
88
|
}),
|
|
86
89
|
HANDLE_SUCCESS_MESSAGE_DISMISS: () => ({
|
|
87
90
|
type: ActionTypes.HANDLE_SUCCESS_MESSAGE_DISMISS,
|
|
@@ -59,12 +59,11 @@ const FilesSection = ({ enableDragAndDrop, handleUpload, fileSection, filesItem,
|
|
|
59
59
|
state.isUploadFile &&
|
|
60
60
|
state.uploadedFile &&
|
|
61
61
|
state.selectDesignation !== undefined && (react_1.default.createElement(FileSectionUploadItem_1.FileSectionUploadItem, { fileName: state.uploadedFile.name, isLoading: state.isUploadFile })))),
|
|
62
|
-
state.
|
|
63
|
-
state.successMessage !== '' &&
|
|
62
|
+
state.fileUploadedSuccessfullySection === fileSection &&
|
|
64
63
|
handleSuccessMessage(),
|
|
65
|
-
|
|
64
|
+
react_1.default.createElement(SelectDialogDesignation_1.SelectDialogDesignation, { isOpen: state.showDesignationPopup === fileSection, fileExtension: uploadedFileExtension, handleCancel: () => {
|
|
66
65
|
dispatch(FileSectionState_1.actions.HANDLE_CANCEL_UPLOAD());
|
|
67
|
-
}, uploadFileHandler:
|
|
66
|
+
}, uploadFileHandler: handleUploadOtherFile, dispatch: dispatch, fileSection: fileSection }),
|
|
68
67
|
filesItem,
|
|
69
68
|
(can === null || can === void 0 ? void 0 : can.changeDesignation) &&
|
|
70
69
|
enableDragAndDrop &&
|
|
@@ -29,11 +29,8 @@ const react_dnd_1 = require("react-dnd");
|
|
|
29
29
|
const react_dnd_html5_backend_1 = require("react-dnd-html5-backend");
|
|
30
30
|
const styled_components_1 = __importStar(require("styled-components"));
|
|
31
31
|
const FileSectionState_1 = require("./FileSectionState");
|
|
32
|
-
const
|
|
33
|
-
const UploadFileArea = ({ handleUploadFile, fileSection, dispatch }) => {
|
|
34
|
-
const [selectedFile, setSelectedFile] = (0, react_1.useState)();
|
|
32
|
+
const UploadFileArea = ({ fileSection, dispatch }) => {
|
|
35
33
|
const fileInputRef = (0, react_1.useRef)(null);
|
|
36
|
-
const isSupplementFilesTab = fileSection === util_1.FileSectionType.Supplements;
|
|
37
34
|
const openFileDialog = () => {
|
|
38
35
|
if (fileInputRef && fileInputRef.current) {
|
|
39
36
|
fileInputRef.current.click();
|
|
@@ -42,23 +39,15 @@ const UploadFileArea = ({ handleUploadFile, fileSection, dispatch }) => {
|
|
|
42
39
|
const handleChange = (event) => {
|
|
43
40
|
if (event && event.target && event.target.files) {
|
|
44
41
|
const file = event.target.files[0];
|
|
45
|
-
|
|
46
|
-
dispatch(FileSectionState_1.actions.UPLOAD_FILE(file));
|
|
47
|
-
if (file && isSupplementFilesTab) {
|
|
48
|
-
handleUploadFile(file, (0, util_1.getDesignationName)(util_1.Designation.Supplementary));
|
|
49
|
-
}
|
|
42
|
+
dispatch(FileSectionState_1.actions.UPLOAD_FILE(file, fileSection));
|
|
50
43
|
}
|
|
51
44
|
};
|
|
52
45
|
const handleFileDrop = (0, react_1.useCallback)((monitor) => {
|
|
53
46
|
if (monitor) {
|
|
54
47
|
const file = monitor.getItem().files[0];
|
|
55
|
-
|
|
56
|
-
dispatch(FileSectionState_1.actions.UPLOAD_FILE(file));
|
|
57
|
-
if (selectedFile && isSupplementFilesTab) {
|
|
58
|
-
handleUploadFile(selectedFile, (0, util_1.getDesignationName)(util_1.Designation.Supplementary));
|
|
59
|
-
}
|
|
48
|
+
dispatch(FileSectionState_1.actions.UPLOAD_FILE(file, fileSection));
|
|
60
49
|
}
|
|
61
|
-
}, [dispatch,
|
|
50
|
+
}, [dispatch, fileSection]);
|
|
62
51
|
const [{ canDrop, isOver }, dropRef] = (0, react_dnd_1.useDrop)({
|
|
63
52
|
accept: [react_dnd_html5_backend_1.NativeTypes.FILE],
|
|
64
53
|
drop(item, monitor) {
|
|
@@ -10,7 +10,7 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
|
|
|
10
10
|
import { buildSupplementaryMaterial } from '@manuscripts/transform';
|
|
11
11
|
import React, { createContext, useCallback, useReducer } from 'react';
|
|
12
12
|
import ReactTooltip from 'react-tooltip';
|
|
13
|
-
import { useFiles } from '../../index';
|
|
13
|
+
import { FileSectionType, useFiles } from '../../index';
|
|
14
14
|
import { InspectorTab, InspectorTabList, InspectorTabPanel, InspectorTabPanels, InspectorTabs, } from '../Inspector';
|
|
15
15
|
import { InspectorSection } from '../InspectorSection';
|
|
16
16
|
import { DraggableFileSectionItem } from './FileSectionItem/DraggableFileSectionItem';
|
|
@@ -20,7 +20,7 @@ import { actions, getInitialState, reducer } from './FileSectionState';
|
|
|
20
20
|
import { FilesSection } from './FilesSection';
|
|
21
21
|
import { InlineFilesSection } from './InlineFilesSection';
|
|
22
22
|
import { TooltipDiv } from './TooltipDiv';
|
|
23
|
-
import { Designation,
|
|
23
|
+
import { Designation, generateAttachmentsTitles, namesWithDesignationMap, } from './util';
|
|
24
24
|
export const PermissionsContext = createContext(null);
|
|
25
25
|
export const FileManager = ({ modelMap, saveModel, enableDragAndDrop, can, fileManagement: { getAttachments, changeDesignation, replace, upload }, addAttachmentToState, }) => {
|
|
26
26
|
const [state, dispatch] = useReducer(reducer, getInitialState());
|
|
@@ -29,7 +29,9 @@ export const FileManager = ({ modelMap, saveModel, enableDragAndDrop, can, fileM
|
|
|
29
29
|
dispatch(actions.SELECT_DESIGNATION(namesWithDesignationMap.get(typeId) || Designation.Document));
|
|
30
30
|
const res = yield replace(attachmentId, name, file, typeId);
|
|
31
31
|
dispatch(actions.HANDLE_FINISH_UPLOAD());
|
|
32
|
-
|
|
32
|
+
if (res) {
|
|
33
|
+
dispatch(actions.HANDLE_SUCCESS_MESSAGE('File uploaded successfully.'));
|
|
34
|
+
}
|
|
33
35
|
return res;
|
|
34
36
|
}), [replace]);
|
|
35
37
|
const handleUploadFile = useCallback((file, designation) => __awaiter(void 0, void 0, void 0, function* () {
|
|
@@ -39,7 +41,9 @@ export const FileManager = ({ modelMap, saveModel, enableDragAndDrop, can, fileM
|
|
|
39
41
|
}
|
|
40
42
|
const res = yield upload(file, designation);
|
|
41
43
|
dispatch(actions.HANDLE_FINISH_UPLOAD());
|
|
42
|
-
|
|
44
|
+
if (res) {
|
|
45
|
+
dispatch(actions.HANDLE_SUCCESS_MESSAGE('File uploaded successfully.', FileSectionType.OtherFile));
|
|
46
|
+
}
|
|
43
47
|
return res;
|
|
44
48
|
}), [upload]);
|
|
45
49
|
const handleUploadFileWithSupplement = useCallback((file, designation) => __awaiter(void 0, void 0, void 0, function* () {
|
|
@@ -48,6 +52,10 @@ export const FileManager = ({ modelMap, saveModel, enableDragAndDrop, can, fileM
|
|
|
48
52
|
const { id, name } = response;
|
|
49
53
|
yield saveModel(buildSupplementaryMaterial(name, `attachment:${id}`));
|
|
50
54
|
}
|
|
55
|
+
dispatch(actions.HANDLE_FINISH_UPLOAD());
|
|
56
|
+
if (response) {
|
|
57
|
+
dispatch(actions.HANDLE_SUCCESS_MESSAGE('File uploaded successfully.', FileSectionType.Supplements));
|
|
58
|
+
}
|
|
51
59
|
return response;
|
|
52
60
|
}), [upload, saveModel]);
|
|
53
61
|
const handleChangeDesignationFile = useCallback((attachmentId, typeId, name) => __awaiter(void 0, void 0, void 0, function* () {
|
|
@@ -2,10 +2,11 @@ export const getInitialState = () => ({
|
|
|
2
2
|
uploadedFile: undefined,
|
|
3
3
|
isUploadFile: false,
|
|
4
4
|
moveToOtherState: undefined,
|
|
5
|
+
fileUploadedSuccessfullySection: undefined,
|
|
5
6
|
successMessage: '',
|
|
6
7
|
isShowSuccessMessage: false,
|
|
7
8
|
selectDesignation: undefined,
|
|
8
|
-
|
|
9
|
+
showDesignationPopup: undefined,
|
|
9
10
|
});
|
|
10
11
|
var ActionTypes;
|
|
11
12
|
(function (ActionTypes) {
|
|
@@ -21,7 +22,7 @@ var ActionTypes;
|
|
|
21
22
|
export const reducer = (state, action) => {
|
|
22
23
|
switch (action.type) {
|
|
23
24
|
case ActionTypes.UPLOAD_FILE: {
|
|
24
|
-
return Object.assign(Object.assign({}, state), {
|
|
25
|
+
return Object.assign(Object.assign({}, state), { showDesignationPopup: action.sectionType, uploadedFile: action.uploadFile, selectDesignation: undefined });
|
|
25
26
|
}
|
|
26
27
|
case ActionTypes.MOVE_FILE: {
|
|
27
28
|
return Object.assign(Object.assign({}, state), { moveToOtherState: {
|
|
@@ -33,27 +34,28 @@ export const reducer = (state, action) => {
|
|
|
33
34
|
return Object.assign(Object.assign({}, state), { selectDesignation: action.designation });
|
|
34
35
|
}
|
|
35
36
|
case ActionTypes.HANDLE_UPLOAD_ACTION: {
|
|
36
|
-
return Object.assign(Object.assign({}, state), {
|
|
37
|
+
return Object.assign(Object.assign({}, state), { showDesignationPopup: undefined, isUploadFile: true, isShowSuccessMessage: false, successMessage: '' });
|
|
37
38
|
}
|
|
38
39
|
case ActionTypes.HANDLE_CANCEL_UPLOAD: {
|
|
39
|
-
return Object.assign(Object.assign({}, state), {
|
|
40
|
+
return Object.assign(Object.assign({}, state), { showDesignationPopup: undefined });
|
|
40
41
|
}
|
|
41
42
|
case ActionTypes.HANDLE_FINISH_UPLOAD: {
|
|
42
43
|
return Object.assign(Object.assign({}, state), { isUploadFile: false, uploadedFile: undefined, selectDesignation: undefined });
|
|
43
44
|
}
|
|
44
45
|
case ActionTypes.HANDLE_SUCCESS_MESSAGE: {
|
|
45
|
-
return Object.assign(Object.assign({}, state), { isShowSuccessMessage: true, successMessage: action.successMessage });
|
|
46
|
+
return Object.assign(Object.assign({}, state), { isShowSuccessMessage: true, successMessage: action.successMessage, fileUploadedSuccessfullySection: action.sectionType });
|
|
46
47
|
}
|
|
47
48
|
case ActionTypes.HANDLE_SUCCESS_MESSAGE_DISMISS: {
|
|
48
|
-
return Object.assign(Object.assign({}, state), { isShowSuccessMessage: false, successMessage: '' });
|
|
49
|
+
return Object.assign(Object.assign({}, state), { isShowSuccessMessage: false, successMessage: '', fileUploadedSuccessfullySection: undefined });
|
|
49
50
|
}
|
|
50
51
|
}
|
|
51
52
|
return state;
|
|
52
53
|
};
|
|
53
54
|
export const actions = {
|
|
54
|
-
UPLOAD_FILE: (uploadFile) => ({
|
|
55
|
+
UPLOAD_FILE: (uploadFile, sectionType) => ({
|
|
55
56
|
type: ActionTypes.UPLOAD_FILE,
|
|
56
57
|
uploadFile,
|
|
58
|
+
sectionType,
|
|
57
59
|
}),
|
|
58
60
|
HANDLE_UPLOAD_ACTION: () => ({
|
|
59
61
|
type: ActionTypes.HANDLE_UPLOAD_ACTION,
|
|
@@ -74,9 +76,10 @@ export const actions = {
|
|
|
74
76
|
HANDLE_FINISH_UPLOAD: () => ({
|
|
75
77
|
type: ActionTypes.HANDLE_FINISH_UPLOAD,
|
|
76
78
|
}),
|
|
77
|
-
HANDLE_SUCCESS_MESSAGE: (successMessage) => ({
|
|
79
|
+
HANDLE_SUCCESS_MESSAGE: (successMessage, sectionType) => ({
|
|
78
80
|
type: ActionTypes.HANDLE_SUCCESS_MESSAGE,
|
|
79
81
|
successMessage,
|
|
82
|
+
sectionType,
|
|
80
83
|
}),
|
|
81
84
|
HANDLE_SUCCESS_MESSAGE_DISMISS: () => ({
|
|
82
85
|
type: ActionTypes.HANDLE_SUCCESS_MESSAGE_DISMISS,
|
|
@@ -33,12 +33,11 @@ export const FilesSection = ({ enableDragAndDrop, handleUpload, fileSection, fil
|
|
|
33
33
|
state.isUploadFile &&
|
|
34
34
|
state.uploadedFile &&
|
|
35
35
|
state.selectDesignation !== undefined && (React.createElement(FileSectionUploadItem, { fileName: state.uploadedFile.name, isLoading: state.isUploadFile })))),
|
|
36
|
-
state.
|
|
37
|
-
state.successMessage !== '' &&
|
|
36
|
+
state.fileUploadedSuccessfullySection === fileSection &&
|
|
38
37
|
handleSuccessMessage(),
|
|
39
|
-
|
|
38
|
+
React.createElement(SelectDialogDesignation, { isOpen: state.showDesignationPopup === fileSection, fileExtension: uploadedFileExtension, handleCancel: () => {
|
|
40
39
|
dispatch(actions.HANDLE_CANCEL_UPLOAD());
|
|
41
|
-
}, uploadFileHandler:
|
|
40
|
+
}, uploadFileHandler: handleUploadOtherFile, dispatch: dispatch, fileSection: fileSection }),
|
|
42
41
|
filesItem,
|
|
43
42
|
(can === null || can === void 0 ? void 0 : can.changeDesignation) &&
|
|
44
43
|
enableDragAndDrop &&
|
|
@@ -1,13 +1,10 @@
|
|
|
1
|
-
import React, { useCallback, useRef
|
|
1
|
+
import React, { useCallback, useRef } from 'react';
|
|
2
2
|
import { useDrop } from 'react-dnd';
|
|
3
3
|
import { NativeTypes } from 'react-dnd-html5-backend';
|
|
4
4
|
import styled, { css } from 'styled-components';
|
|
5
5
|
import { actions } from './FileSectionState';
|
|
6
|
-
|
|
7
|
-
export const UploadFileArea = ({ handleUploadFile, fileSection, dispatch }) => {
|
|
8
|
-
const [selectedFile, setSelectedFile] = useState();
|
|
6
|
+
export const UploadFileArea = ({ fileSection, dispatch }) => {
|
|
9
7
|
const fileInputRef = useRef(null);
|
|
10
|
-
const isSupplementFilesTab = fileSection === FileSectionType.Supplements;
|
|
11
8
|
const openFileDialog = () => {
|
|
12
9
|
if (fileInputRef && fileInputRef.current) {
|
|
13
10
|
fileInputRef.current.click();
|
|
@@ -16,23 +13,15 @@ export const UploadFileArea = ({ handleUploadFile, fileSection, dispatch }) => {
|
|
|
16
13
|
const handleChange = (event) => {
|
|
17
14
|
if (event && event.target && event.target.files) {
|
|
18
15
|
const file = event.target.files[0];
|
|
19
|
-
|
|
20
|
-
dispatch(actions.UPLOAD_FILE(file));
|
|
21
|
-
if (file && isSupplementFilesTab) {
|
|
22
|
-
handleUploadFile(file, getDesignationName(Designation.Supplementary));
|
|
23
|
-
}
|
|
16
|
+
dispatch(actions.UPLOAD_FILE(file, fileSection));
|
|
24
17
|
}
|
|
25
18
|
};
|
|
26
19
|
const handleFileDrop = useCallback((monitor) => {
|
|
27
20
|
if (monitor) {
|
|
28
21
|
const file = monitor.getItem().files[0];
|
|
29
|
-
|
|
30
|
-
dispatch(actions.UPLOAD_FILE(file));
|
|
31
|
-
if (selectedFile && isSupplementFilesTab) {
|
|
32
|
-
handleUploadFile(selectedFile, getDesignationName(Designation.Supplementary));
|
|
33
|
-
}
|
|
22
|
+
dispatch(actions.UPLOAD_FILE(file, fileSection));
|
|
34
23
|
}
|
|
35
|
-
}, [dispatch,
|
|
24
|
+
}, [dispatch, fileSection]);
|
|
36
25
|
const [{ canDrop, isOver }, dropRef] = useDrop({
|
|
37
26
|
accept: [NativeTypes.FILE],
|
|
38
27
|
drop(item, monitor) {
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { Designation } from './util';
|
|
1
|
+
import { Designation, FileSectionType } from './util';
|
|
2
2
|
export declare const getInitialState: () => State;
|
|
3
3
|
export interface State {
|
|
4
4
|
uploadedFile: File | undefined;
|
|
@@ -7,10 +7,11 @@ export interface State {
|
|
|
7
7
|
typeId: string;
|
|
8
8
|
name: string;
|
|
9
9
|
} | undefined;
|
|
10
|
+
fileUploadedSuccessfullySection: FileSectionType | undefined;
|
|
10
11
|
successMessage: string;
|
|
11
12
|
isShowSuccessMessage: boolean;
|
|
12
13
|
selectDesignation: Designation | undefined;
|
|
13
|
-
|
|
14
|
+
showDesignationPopup: FileSectionType | undefined;
|
|
14
15
|
}
|
|
15
16
|
declare enum ActionTypes {
|
|
16
17
|
UPLOAD_FILE = "UploadFile",
|
|
@@ -28,13 +29,13 @@ export interface Action {
|
|
|
28
29
|
[key: string]: any;
|
|
29
30
|
}
|
|
30
31
|
export declare const actions: {
|
|
31
|
-
UPLOAD_FILE: (uploadFile: File) => Action;
|
|
32
|
+
UPLOAD_FILE: (uploadFile: File, sectionType: FileSectionType) => Action;
|
|
32
33
|
HANDLE_UPLOAD_ACTION: () => Action;
|
|
33
34
|
HANDLE_CANCEL_UPLOAD: () => Action;
|
|
34
35
|
SELECT_DESIGNATION: (designation: Designation) => Action;
|
|
35
36
|
MOVE_FILE: (attachmentId: string, typeId: string, name: string, successMoveMessage: string) => Action;
|
|
36
37
|
HANDLE_FINISH_UPLOAD: () => Action;
|
|
37
|
-
HANDLE_SUCCESS_MESSAGE: (successMessage: string) => Action;
|
|
38
|
+
HANDLE_SUCCESS_MESSAGE: (successMessage: string, sectionType?: FileSectionType) => Action;
|
|
38
39
|
HANDLE_SUCCESS_MESSAGE_DISMISS: () => Action;
|
|
39
40
|
};
|
|
40
41
|
export {};
|
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.0.
|
|
4
|
+
"version": "1.0.2",
|
|
5
5
|
"repository": "github:Atypon-OpenSource/manuscripts-style-guide",
|
|
6
6
|
"license": "Apache-2.0",
|
|
7
7
|
"main": "dist/cjs",
|