@manuscripts/style-guide 0.30.27 → 0.31.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 +14 -2
- package/dist/cjs/components/FileManager/FileSectionItem/DesignationActions.js +15 -3
- package/dist/cjs/components/FileManager/FileSectionItem/FileInfo.js +1 -4
- package/dist/cjs/components/FileManager/InlineFilesSection.js +1 -3
- package/dist/cjs/components/Resizer/Resizer.js +109 -0
- package/dist/cjs/components/Resizer/ResizerButton.js +30 -0
- package/dist/cjs/components/Resizer/ResizerButtonInner.js +169 -0
- package/dist/cjs/components/Resizer/ResizerInner.js +74 -0
- package/dist/cjs/components/Resizer/index.js +16 -0
- package/dist/cjs/components/Resizer/types.js +2 -0
- package/dist/cjs/components/icons/index.js +3 -1
- package/dist/cjs/components/icons/missing-image.js +12 -0
- package/dist/cjs/index.js +4 -1
- package/dist/cjs/lib/inlineFiles.js +65 -41
- package/dist/es/components/FileManager/FileManager.js +15 -3
- package/dist/es/components/FileManager/FileSectionItem/DesignationActions.js +15 -3
- package/dist/es/components/FileManager/FileSectionItem/FileInfo.js +1 -4
- package/dist/es/components/FileManager/InlineFilesSection.js +3 -5
- package/dist/es/components/Resizer/Resizer.js +102 -0
- package/dist/es/components/Resizer/ResizerButton.js +23 -0
- package/dist/es/components/Resizer/ResizerButtonInner.js +163 -0
- package/dist/es/components/Resizer/ResizerInner.js +68 -0
- package/dist/es/components/Resizer/index.js +2 -0
- package/dist/es/components/Resizer/types.js +1 -0
- package/dist/es/components/icons/index.js +1 -0
- package/dist/es/components/icons/missing-image.js +7 -0
- package/dist/es/index.js +2 -0
- package/dist/es/lib/inlineFiles.js +66 -42
- package/dist/types/components/FileManager/FileSectionItem/DesignationActions.d.ts +2 -0
- package/dist/types/components/FileManager/InlineFilesSection.d.ts +8 -3
- package/dist/types/components/Form.d.ts +1 -1
- package/dist/types/components/Resizer/Resizer.d.ts +36 -0
- package/dist/types/components/Resizer/ResizerButton.d.ts +18 -0
- package/dist/types/components/Resizer/ResizerButtonInner.d.ts +8 -0
- package/dist/types/components/Resizer/ResizerInner.d.ts +4 -0
- package/dist/types/components/Resizer/index.d.ts +2 -0
- package/dist/types/components/Resizer/types.d.ts +2 -0
- package/dist/types/components/icons/index.d.ts +1 -0
- package/dist/types/components/icons/missing-image.d.ts +3 -0
- package/dist/types/index.d.ts +2 -0
- package/package.json +2 -2
|
@@ -34,6 +34,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
34
34
|
exports.FileManager = exports.PermissionsContext = void 0;
|
|
35
35
|
const react_1 = __importStar(require("react"));
|
|
36
36
|
const react_tooltip_1 = __importDefault(require("react-tooltip"));
|
|
37
|
+
const inlineFiles_1 = __importDefault(require("../../lib/inlineFiles"));
|
|
37
38
|
const AlertMessage_1 = require("../AlertMessage");
|
|
38
39
|
const Inspector_1 = require("../Inspector");
|
|
39
40
|
const InspectorSection_1 = require("../InspectorSection");
|
|
@@ -74,13 +75,24 @@ const FileManager = ({ submissionId, attachments, modelMap, enableDragAndDrop, c
|
|
|
74
75
|
const handleDownloadFile = (0, react_1.useCallback)((publicUrl) => {
|
|
75
76
|
return handleDownload(publicUrl);
|
|
76
77
|
}, [handleDownload]);
|
|
78
|
+
const inlineFiles = (0, react_1.useMemo)(() => (0, inlineFiles_1.default)(modelMap, attachments), [modelMap.values(), attachments]);
|
|
79
|
+
const inlineAttachmentsIds = (0, react_1.useMemo)(() => {
|
|
80
|
+
const attachmentsIDs = new Set();
|
|
81
|
+
inlineFiles.map(({ attachments }) => {
|
|
82
|
+
if (attachments) {
|
|
83
|
+
attachments.map((attachment) => attachmentsIDs.add(attachment.id));
|
|
84
|
+
}
|
|
85
|
+
});
|
|
86
|
+
return attachmentsIDs;
|
|
87
|
+
}, [inlineFiles]);
|
|
77
88
|
const getFileSectionExternalFile = (fileSection) => {
|
|
78
89
|
const isSupplementOrOtherFilesTab = fileSection === util_1.FileSectionType.Supplements ||
|
|
79
90
|
fileSection === util_1.FileSectionType.OtherFile;
|
|
80
91
|
const itemsData = attachments.filter((element) => {
|
|
81
92
|
const designation = util_1.namesWithDesignationMap.get(element.type.label);
|
|
82
93
|
return (designation !== undefined &&
|
|
83
|
-
util_1.designationWithFileSectionsMap.get(designation) === fileSection
|
|
94
|
+
util_1.designationWithFileSectionsMap.get(designation) === fileSection &&
|
|
95
|
+
!inlineAttachmentsIds.has(element.id));
|
|
84
96
|
});
|
|
85
97
|
const itemsDataWithTitle = (0, util_1.generateAttachmentsTitles)(itemsData, fileSection);
|
|
86
98
|
const filesItems = itemsDataWithTitle.map((element) => {
|
|
@@ -130,7 +142,7 @@ const FileManager = ({ submissionId, attachments, modelMap, enableDragAndDrop, c
|
|
|
130
142
|
react_1.default.createElement("div", null, "Files excluded from the final submission.")))),
|
|
131
143
|
react_1.default.createElement(Inspector_1.InspectorTabPanels, { style: { overflowY: 'visible', position: 'relative' } },
|
|
132
144
|
react_1.default.createElement(Inspector_1.InspectorTabPanel, null,
|
|
133
|
-
react_1.default.createElement(InlineFilesSection_1.InlineFilesSection, {
|
|
145
|
+
react_1.default.createElement(InlineFilesSection_1.InlineFilesSection, { inlineFiles: inlineFiles, submissionId: submissionId, handleReplace: handleReplace, handleDownload: handleDownload, isEditor: enableDragAndDrop, dispatch: dispatch })),
|
|
134
146
|
react_1.default.createElement(Inspector_1.InspectorTabPanel, null,
|
|
135
147
|
react_1.default.createElement(FilesSection_1.FilesSection, { submissionId: submissionId, enableDragAndDrop: enableDragAndDrop, handleUpload: handleUploadFile, fileSection: util_1.FileSectionType.Supplements, filesItem: getFileSectionExternalFile(util_1.FileSectionType.Supplements), state: state, dispatch: dispatch })),
|
|
136
148
|
react_1.default.createElement(Inspector_1.InspectorTabPanel, null,
|
|
@@ -24,12 +24,14 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
24
24
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
25
25
|
exports.DesignationActions = void 0;
|
|
26
26
|
const react_1 = __importStar(require("react"));
|
|
27
|
+
const react_tooltip_1 = __importDefault(require("react-tooltip"));
|
|
27
28
|
const styled_components_1 = __importDefault(require("styled-components"));
|
|
28
29
|
const BottomArrowIcon_1 = __importDefault(require("../../icons/BottomArrowIcon"));
|
|
29
30
|
const ConfirmationPopUp_1 = require("../ConfirmationPopUp");
|
|
31
|
+
const TooltipDiv_1 = require("../TooltipDiv");
|
|
30
32
|
const util_1 = require("../util");
|
|
31
33
|
const DesignationActionsList_1 = require("./DesignationActionsList");
|
|
32
|
-
const DesignationActions = ({ designation, attachmentId, fileExtension, handleChangeDesignation, submissionId, fileName, dispatch, }) => {
|
|
34
|
+
const DesignationActions = ({ designation, attachmentId, fileExtension, handleChangeDesignation, submissionId, fileName, can, dispatch, }) => {
|
|
33
35
|
const [isActionsShown, setIsActionsShown] = (0, react_1.useState)(false);
|
|
34
36
|
const [confirmationPopUpData, setConfirmationPopUpData] = (0, react_1.useState)({
|
|
35
37
|
isConfirmationPopUpOpen: false,
|
|
@@ -73,9 +75,12 @@ const DesignationActions = ({ designation, attachmentId, fileExtension, handleCh
|
|
|
73
75
|
};
|
|
74
76
|
return (react_1.default.createElement(react_1.default.Fragment, null,
|
|
75
77
|
react_1.default.createElement(SecondaryActionsContainer, { onClick: toggleActionsList, onBlur: hideActionsList },
|
|
76
|
-
react_1.default.createElement(
|
|
78
|
+
!(can === null || can === void 0 ? void 0 : can.changeDesignation) && (react_1.default.createElement(TooltipContainer, null,
|
|
79
|
+
react_1.default.createElement(react_tooltip_1.default, { id: "file-designation", place: "bottom", offset: { bottom: -8 }, effect: "solid", className: "tooltip" },
|
|
80
|
+
react_1.default.createElement("div", null, "You don\u2019t have permissions to adjust this selection")))),
|
|
81
|
+
react_1.default.createElement(SecondaryActionsText, { "data-for": "file-designation", "data-tip": true }, util_1.designationWithReadableNamesMap.get(designation)),
|
|
77
82
|
react_1.default.createElement(BottomArrowIcon_1.default, null),
|
|
78
|
-
isActionsShown && (react_1.default.createElement(ActionsListContainer, null,
|
|
83
|
+
isActionsShown && (can === null || can === void 0 ? void 0 : can.changeDesignation) && (react_1.default.createElement(ActionsListContainer, null,
|
|
79
84
|
react_1.default.createElement(DesignationActionsList_1.DesignationActionsList, { handleChangeDesignation: handleChangeDesignation, designationActionsList: designationActionsList, submissionId: submissionId, fileName: fileName, designation: designation, attachmentId: attachmentId, dispatch: dispatch, handleOpenConfirmationPopup: handleOpenConfirmationPopup })))),
|
|
80
85
|
confirmationPopUpData.isConfirmationPopUpOpen && (react_1.default.createElement(ConfirmationPopUp_1.ConfirmationPopUp, { popupHeader: confirmationPopUpData.confirmationPopUpHeader !== undefined
|
|
81
86
|
? confirmationPopUpData.confirmationPopUpHeader
|
|
@@ -113,3 +118,10 @@ const ActionsListContainer = styled_components_1.default.div `
|
|
|
113
118
|
top: 40px;
|
|
114
119
|
z-index: 999;
|
|
115
120
|
`;
|
|
121
|
+
const TooltipContainer = (0, styled_components_1.default)(TooltipDiv_1.TooltipDiv) `
|
|
122
|
+
.tooltip {
|
|
123
|
+
white-space: normal;
|
|
124
|
+
width: 144px;
|
|
125
|
+
height: 32px;
|
|
126
|
+
}
|
|
127
|
+
`;
|
|
@@ -31,10 +31,7 @@ const FileInfo = ({ showAttachmentName, showDesignationActions, title, submissio
|
|
|
31
31
|
const fileName = submissionAttachmentName.substring(0, submissionAttachmentName.lastIndexOf('.'));
|
|
32
32
|
const can = (0, react_1.useContext)(FileManager_1.PermissionsContext);
|
|
33
33
|
return (react_1.default.createElement(exports.FileInfoContainer, null,
|
|
34
|
-
(
|
|
35
|
-
showDesignationActions &&
|
|
36
|
-
designation !== undefined &&
|
|
37
|
-
submissionId && (react_1.default.createElement(DesignationActions_1.DesignationActions, { designation: designation, attachmentId: attachmentId, fileExtension: fileExtension, handleChangeDesignation: handleChangeDesignation, submissionId: submissionId, fileName: submissionAttachmentName, dispatch: dispatch })),
|
|
34
|
+
showDesignationActions && designation !== undefined && submissionId && (react_1.default.createElement(DesignationActions_1.DesignationActions, { designation: designation, attachmentId: attachmentId, fileExtension: fileExtension, handleChangeDesignation: handleChangeDesignation, submissionId: submissionId, fileName: submissionAttachmentName, dispatch: dispatch, can: can })),
|
|
38
35
|
react_1.default.createElement(exports.FileNameTitleContainer, null,
|
|
39
36
|
react_1.default.createElement(exports.FileTitle, null,
|
|
40
37
|
!showAttachmentName ? fileName : title,
|
|
@@ -26,14 +26,12 @@ exports.InlineFilesSection = void 0;
|
|
|
26
26
|
const react_1 = __importStar(require("react"));
|
|
27
27
|
const styled_components_1 = __importDefault(require("styled-components"));
|
|
28
28
|
const use_dropdown_1 = require("../../hooks/use-dropdown");
|
|
29
|
-
const inlineFiles_1 = __importDefault(require("../../lib/inlineFiles"));
|
|
30
29
|
const dots_icon_1 = __importDefault(require("../icons/dots-icon"));
|
|
31
30
|
const FileInfo_1 = require("./FileSectionItem/FileInfo");
|
|
32
31
|
const FileSectionItem_1 = require("./FileSectionItem/FileSectionItem");
|
|
33
32
|
const ItemActions_1 = require("./FileSectionItem/ItemActions");
|
|
34
33
|
const util_1 = require("./util");
|
|
35
|
-
const InlineFilesSection = ({ submissionId, handleReplace, handleDownload,
|
|
36
|
-
const inlineFiles = (0, react_1.useMemo)(() => (0, inlineFiles_1.default)(modelMap, attachments), [modelMap, attachments]);
|
|
34
|
+
const InlineFilesSection = ({ submissionId, handleReplace, handleDownload, inlineFiles, isEditor, dispatch, }) => {
|
|
37
35
|
const onElementClick = (0, react_1.useCallback)((e) => {
|
|
38
36
|
if (!isEditor) {
|
|
39
37
|
return;
|
|
@@ -0,0 +1,109 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
|
+
};
|
|
5
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
+
exports.Resizer = void 0;
|
|
7
|
+
const react_1 = __importDefault(require("react"));
|
|
8
|
+
const ResizerButton_1 = require("./ResizerButton");
|
|
9
|
+
const ResizerInner_1 = require("./ResizerInner");
|
|
10
|
+
const inners = {
|
|
11
|
+
column: {
|
|
12
|
+
end: ResizerInner_1.VerticalEndResizerInner,
|
|
13
|
+
start: ResizerInner_1.VerticalStartResizerInner,
|
|
14
|
+
},
|
|
15
|
+
row: {
|
|
16
|
+
end: ResizerInner_1.HorizontalEndResizerInner,
|
|
17
|
+
start: ResizerInner_1.HorizontalStartResizerInner,
|
|
18
|
+
},
|
|
19
|
+
};
|
|
20
|
+
class Resizer extends react_1.default.Component {
|
|
21
|
+
constructor() {
|
|
22
|
+
super(...arguments);
|
|
23
|
+
this.resizerRef = react_1.default.createRef();
|
|
24
|
+
this.state = {
|
|
25
|
+
isHovering: false,
|
|
26
|
+
isResizing: false,
|
|
27
|
+
startPosition: 0,
|
|
28
|
+
};
|
|
29
|
+
this.scheduleResize = (delta) => {
|
|
30
|
+
if (this.state.isResizing && delta) {
|
|
31
|
+
this.props.onResize(delta);
|
|
32
|
+
}
|
|
33
|
+
};
|
|
34
|
+
this.mouseDownHandler = (e) => {
|
|
35
|
+
e.preventDefault();
|
|
36
|
+
if (!this.resizerRef.current || e.target !== this.resizerRef.current) {
|
|
37
|
+
return;
|
|
38
|
+
}
|
|
39
|
+
if (this.state.isResizing) {
|
|
40
|
+
return;
|
|
41
|
+
}
|
|
42
|
+
this.setState({
|
|
43
|
+
isResizing: true,
|
|
44
|
+
startPosition: this.getPosition(e),
|
|
45
|
+
});
|
|
46
|
+
window.addEventListener('mousemove', this.mouseMoveHandler);
|
|
47
|
+
window.addEventListener('mouseup', this.mouseUpHandler);
|
|
48
|
+
window.addEventListener('mouseout', this.handleOutofBounds);
|
|
49
|
+
};
|
|
50
|
+
this.mouseUpHandler = (e, outOfBounds = false) => {
|
|
51
|
+
window.removeEventListener('mousemove', this.mouseMoveHandler);
|
|
52
|
+
window.removeEventListener('mouseup', this.mouseUpHandler);
|
|
53
|
+
window.removeEventListener('mouseout', this.handleOutofBounds);
|
|
54
|
+
this.setState({
|
|
55
|
+
isResizing: false,
|
|
56
|
+
});
|
|
57
|
+
const position = this.getPosition(e);
|
|
58
|
+
const adjustedPosition = outOfBounds ? position - 32 : position;
|
|
59
|
+
const delta = this.getDelta(adjustedPosition);
|
|
60
|
+
if (delta === 0) {
|
|
61
|
+
this.props.onResizeButton();
|
|
62
|
+
}
|
|
63
|
+
this.props.onResize(delta);
|
|
64
|
+
this.props.onResizeEnd(delta);
|
|
65
|
+
};
|
|
66
|
+
this.mouseMoveHandler = (e) => {
|
|
67
|
+
const position = this.getPosition(e);
|
|
68
|
+
const delta = this.getDelta(position);
|
|
69
|
+
this.scheduleResize(delta);
|
|
70
|
+
};
|
|
71
|
+
this.mouseEnterHandler = () => {
|
|
72
|
+
this.setState({
|
|
73
|
+
isHovering: true,
|
|
74
|
+
});
|
|
75
|
+
};
|
|
76
|
+
this.mouseLeaveHandler = () => {
|
|
77
|
+
this.setState({
|
|
78
|
+
isHovering: false,
|
|
79
|
+
});
|
|
80
|
+
};
|
|
81
|
+
this.handleOutofBounds = (e) => {
|
|
82
|
+
const disableResizeNodes = [
|
|
83
|
+
'IFRAME',
|
|
84
|
+
'HTML',
|
|
85
|
+
null,
|
|
86
|
+
];
|
|
87
|
+
if (this.state.isResizing &&
|
|
88
|
+
disableResizeNodes.includes(e.relatedTarget && e.relatedTarget.nodeName)) {
|
|
89
|
+
this.mouseUpHandler(e, true);
|
|
90
|
+
}
|
|
91
|
+
};
|
|
92
|
+
this.getDelta = (delta) => {
|
|
93
|
+
const { startPosition } = this.state;
|
|
94
|
+
return this.props.side === 'end'
|
|
95
|
+
? delta - startPosition
|
|
96
|
+
: startPosition - delta;
|
|
97
|
+
};
|
|
98
|
+
this.getPosition = (e) => {
|
|
99
|
+
return this.props.direction === 'row' ? e.screenX : e.screenY;
|
|
100
|
+
};
|
|
101
|
+
}
|
|
102
|
+
render() {
|
|
103
|
+
const { buttonInner, direction, side } = this.props;
|
|
104
|
+
const ResizerInner = inners[direction][side];
|
|
105
|
+
return (react_1.default.createElement(ResizerInner, { ref: this.resizerRef, onMouseDown: this.mouseDownHandler, onMouseEnter: this.mouseEnterHandler, onMouseLeave: this.mouseLeaveHandler },
|
|
106
|
+
react_1.default.createElement(ResizerButton_1.ResizerButton, { direction: direction, isCollapsed: this.props.collapsed, isVisible: this.state.isHovering, onClick: this.props.onResizeButton, side: side, buttonInner: buttonInner })));
|
|
107
|
+
}
|
|
108
|
+
}
|
|
109
|
+
exports.Resizer = Resizer;
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
|
+
};
|
|
5
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
+
exports.ResizerButton = void 0;
|
|
7
|
+
const react_1 = __importDefault(require("react"));
|
|
8
|
+
const ResizerButtonInner_1 = require("./ResizerButtonInner");
|
|
9
|
+
const inners = {
|
|
10
|
+
column: {
|
|
11
|
+
end: ResizerButtonInner_1.VerticalEndResizerButtonInner,
|
|
12
|
+
start: ResizerButtonInner_1.VerticalStartResizerButtonInner,
|
|
13
|
+
},
|
|
14
|
+
row: {
|
|
15
|
+
end: ResizerButtonInner_1.HorizontalEndResizerButtonInner,
|
|
16
|
+
start: ResizerButtonInner_1.HorizontalStartResizerButtonInner,
|
|
17
|
+
},
|
|
18
|
+
};
|
|
19
|
+
class ResizerButton extends react_1.default.PureComponent {
|
|
20
|
+
render() {
|
|
21
|
+
const { buttonInner, direction, side, isCollapsed, onClick, isVisible } = this.props;
|
|
22
|
+
const ResizerButtonInner = buttonInner || inners[direction][side];
|
|
23
|
+
return (react_1.default.createElement(ResizerButtonInner, { "aria-expanded": !isCollapsed, isCollapsed: isCollapsed, isVisible: isVisible, onClick: onClick, onMouseDown: (event) => event.preventDefault() }));
|
|
24
|
+
}
|
|
25
|
+
}
|
|
26
|
+
exports.ResizerButton = ResizerButton;
|
|
27
|
+
ResizerButton.defaultProps = {
|
|
28
|
+
isCollapsed: false,
|
|
29
|
+
isVisible: false,
|
|
30
|
+
};
|
|
@@ -0,0 +1,169 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
|
+
};
|
|
5
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
+
exports.VerticalStartResizerButtonInner = exports.VerticalEndResizerButtonInner = exports.HorizontalStartResizerButtonInner = exports.HorizontalEndResizerButtonInner = void 0;
|
|
7
|
+
const styled_components_1 = __importDefault(require("styled-components"));
|
|
8
|
+
const gridSize = 8;
|
|
9
|
+
const resizerVisibleSize = 2;
|
|
10
|
+
const toggleButtonDepth = gridSize * 4.5;
|
|
11
|
+
const toggleArrowDepth = gridSize * 2;
|
|
12
|
+
const toggleArrowSize = 2;
|
|
13
|
+
const toggleArrowStartOffset = (toggleButtonDepth - toggleArrowDepth) / 2;
|
|
14
|
+
const toggleArrowEndOffset = toggleArrowStartOffset - toggleArrowSize + toggleArrowDepth / 2;
|
|
15
|
+
const opacityTransition = `opacity 200ms ease-in-out 100ms`;
|
|
16
|
+
const transformTransition = `transform 100ms ease-in-out`;
|
|
17
|
+
const ResizerButtonInner = styled_components_1.default.button `
|
|
18
|
+
position: relative;
|
|
19
|
+
background: none;
|
|
20
|
+
border: none;
|
|
21
|
+
color: transparent;
|
|
22
|
+
cursor: pointer;
|
|
23
|
+
|
|
24
|
+
&:focus {
|
|
25
|
+
outline: 1px solid blue;
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
&::before,
|
|
29
|
+
&::after {
|
|
30
|
+
content: '';
|
|
31
|
+
background-color: #ddd;
|
|
32
|
+
border-radius: ${toggleArrowDepth}px;
|
|
33
|
+
position: absolute;
|
|
34
|
+
opacity: ${(props) => (props.isVisible ? 1 : 0.5)};
|
|
35
|
+
transition: ${transformTransition}, ${opacityTransition};
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
&::before {
|
|
39
|
+
transform-origin: ${toggleArrowSize / 2}px
|
|
40
|
+
${toggleArrowDepth / 2 - toggleArrowSize / 2}px;
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
&::after {
|
|
44
|
+
transform-origin: ${toggleArrowSize / 2}px ${toggleArrowSize / 2}px;
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
&:hover,
|
|
48
|
+
&:focus {
|
|
49
|
+
&::before,
|
|
50
|
+
&::after {
|
|
51
|
+
background-color: #2a6f9d;
|
|
52
|
+
opacity: 1;
|
|
53
|
+
}
|
|
54
|
+
}
|
|
55
|
+
`;
|
|
56
|
+
const HorizontalResizerButtonInner = (0, styled_components_1.default)(ResizerButtonInner) `
|
|
57
|
+
top: calc(50% - ${toggleButtonDepth / 2}px);
|
|
58
|
+
width: ${gridSize * 3}px;
|
|
59
|
+
height: ${toggleButtonDepth}px;
|
|
60
|
+
|
|
61
|
+
&::before,
|
|
62
|
+
&::after {
|
|
63
|
+
width: ${toggleArrowSize}px;
|
|
64
|
+
height: ${toggleArrowDepth / 2}px;
|
|
65
|
+
transform: rotate(0deg);
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
&::before {
|
|
69
|
+
top: ${toggleArrowStartOffset}px;
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
&::after {
|
|
73
|
+
top: ${toggleArrowEndOffset}px;
|
|
74
|
+
}
|
|
75
|
+
`;
|
|
76
|
+
exports.HorizontalEndResizerButtonInner = (0, styled_components_1.default)(HorizontalResizerButtonInner) `
|
|
77
|
+
left: -${resizerVisibleSize / 2}px;
|
|
78
|
+
|
|
79
|
+
&::before,
|
|
80
|
+
&::after {
|
|
81
|
+
left: 8px;
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
&:hover,
|
|
85
|
+
&:focus {
|
|
86
|
+
&::before {
|
|
87
|
+
transform: rotate(${(props) => (props.isCollapsed ? '-40deg' : '40deg')});
|
|
88
|
+
}
|
|
89
|
+
&::after {
|
|
90
|
+
transform: rotate(${(props) => (props.isCollapsed ? '40deg' : '-40deg')});
|
|
91
|
+
}
|
|
92
|
+
}
|
|
93
|
+
`;
|
|
94
|
+
exports.HorizontalStartResizerButtonInner = (0, styled_components_1.default)(HorizontalResizerButtonInner) `
|
|
95
|
+
right: -${resizerVisibleSize / 2}px;
|
|
96
|
+
|
|
97
|
+
&::before,
|
|
98
|
+
&::after {
|
|
99
|
+
right: 16px;
|
|
100
|
+
}
|
|
101
|
+
|
|
102
|
+
&:hover,
|
|
103
|
+
&:focus {
|
|
104
|
+
&::before {
|
|
105
|
+
transform: rotate(${(props) => (props.isCollapsed ? '40deg' : '-40deg')});
|
|
106
|
+
}
|
|
107
|
+
&::after {
|
|
108
|
+
transform: rotate(${(props) => (props.isCollapsed ? '-40deg' : '40deg')});
|
|
109
|
+
}
|
|
110
|
+
}
|
|
111
|
+
`;
|
|
112
|
+
const VerticalResizerButtonInner = (0, styled_components_1.default)(ResizerButtonInner) `
|
|
113
|
+
left: calc(50% - ${toggleButtonDepth / 2}px);
|
|
114
|
+
width: ${toggleButtonDepth}px;
|
|
115
|
+
height: ${gridSize * 3}px;
|
|
116
|
+
|
|
117
|
+
&::before,
|
|
118
|
+
&::after {
|
|
119
|
+
width: ${toggleArrowDepth / 2}px;
|
|
120
|
+
height: ${toggleArrowSize}px;
|
|
121
|
+
}
|
|
122
|
+
|
|
123
|
+
&::before {
|
|
124
|
+
left: ${toggleArrowStartOffset}px;
|
|
125
|
+
}
|
|
126
|
+
|
|
127
|
+
&::after {
|
|
128
|
+
left: ${toggleArrowEndOffset}px;
|
|
129
|
+
}
|
|
130
|
+
`;
|
|
131
|
+
exports.VerticalEndResizerButtonInner = (0, styled_components_1.default)(VerticalResizerButtonInner) `
|
|
132
|
+
bottom: -${resizerVisibleSize / 2}px;
|
|
133
|
+
|
|
134
|
+
&::before,
|
|
135
|
+
&::after {
|
|
136
|
+
bottom: 8px;
|
|
137
|
+
transform-origin: top center;
|
|
138
|
+
}
|
|
139
|
+
|
|
140
|
+
&:hover,
|
|
141
|
+
&:focus {
|
|
142
|
+
&::before {
|
|
143
|
+
transform: rotate(${(props) => (props.isCollapsed ? '40deg' : '-40deg')});
|
|
144
|
+
}
|
|
145
|
+
&::after {
|
|
146
|
+
transform: rotate(${(props) => (props.isCollapsed ? '-40deg' : '40deg')});
|
|
147
|
+
}
|
|
148
|
+
}
|
|
149
|
+
`;
|
|
150
|
+
exports.VerticalStartResizerButtonInner = (0, styled_components_1.default)(VerticalResizerButtonInner) `
|
|
151
|
+
top: -${resizerVisibleSize / 2}px;
|
|
152
|
+
|
|
153
|
+
&::before,
|
|
154
|
+
&::after {
|
|
155
|
+
top: 8px;
|
|
156
|
+
transform: rotate(270deg);
|
|
157
|
+
transform-origin: bottom center;
|
|
158
|
+
}
|
|
159
|
+
|
|
160
|
+
&:hover,
|
|
161
|
+
&:focus {
|
|
162
|
+
&::before {
|
|
163
|
+
transform: rotate(${(props) => (props.isCollapsed ? '-40deg' : '40deg')});
|
|
164
|
+
}
|
|
165
|
+
&::after {
|
|
166
|
+
transform: rotate(${(props) => (props.isCollapsed ? '40deg' : '-40deg')});
|
|
167
|
+
}
|
|
168
|
+
}
|
|
169
|
+
`;
|
|
@@ -0,0 +1,74 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
|
+
};
|
|
5
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
+
exports.VerticalEndResizerInner = exports.VerticalStartResizerInner = exports.HorizontalEndResizerInner = exports.HorizontalStartResizerInner = void 0;
|
|
7
|
+
const styled_components_1 = __importDefault(require("styled-components"));
|
|
8
|
+
const ResizerInner = styled_components_1.default.div `
|
|
9
|
+
display: block;
|
|
10
|
+
z-index: 2;
|
|
11
|
+
overflow: visible;
|
|
12
|
+
position: absolute;
|
|
13
|
+
|
|
14
|
+
&::before {
|
|
15
|
+
content: '';
|
|
16
|
+
position: absolute;
|
|
17
|
+
transition: background-color 200ms ease-in-out 100ms;
|
|
18
|
+
background: rgb(240, 240, 240);
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
&:hover::before {
|
|
22
|
+
background: #e2e2e2;
|
|
23
|
+
}
|
|
24
|
+
`;
|
|
25
|
+
const HorizontalResizerInner = (0, styled_components_1.default)(ResizerInner) `
|
|
26
|
+
cursor: ew-resize;
|
|
27
|
+
top: 0;
|
|
28
|
+
height: 100%;
|
|
29
|
+
width: 16px;
|
|
30
|
+
|
|
31
|
+
&::before {
|
|
32
|
+
height: 100%;
|
|
33
|
+
width: 1px;
|
|
34
|
+
}
|
|
35
|
+
`;
|
|
36
|
+
exports.HorizontalStartResizerInner = (0, styled_components_1.default)(HorizontalResizerInner) `
|
|
37
|
+
left: -16px;
|
|
38
|
+
|
|
39
|
+
&::before {
|
|
40
|
+
right: -1px;
|
|
41
|
+
}
|
|
42
|
+
`;
|
|
43
|
+
exports.HorizontalEndResizerInner = (0, styled_components_1.default)(HorizontalResizerInner) `
|
|
44
|
+
right: -16px;
|
|
45
|
+
|
|
46
|
+
&::before {
|
|
47
|
+
left: -1px;
|
|
48
|
+
}
|
|
49
|
+
`;
|
|
50
|
+
const VerticalResizerInner = (0, styled_components_1.default)(ResizerInner) `
|
|
51
|
+
cursor: ns-resize;
|
|
52
|
+
left: 0;
|
|
53
|
+
height: 16px;
|
|
54
|
+
width: 100%;
|
|
55
|
+
|
|
56
|
+
&::before {
|
|
57
|
+
width: 100%;
|
|
58
|
+
height: 1px;
|
|
59
|
+
}
|
|
60
|
+
`;
|
|
61
|
+
exports.VerticalStartResizerInner = (0, styled_components_1.default)(VerticalResizerInner) `
|
|
62
|
+
top: -16px;
|
|
63
|
+
|
|
64
|
+
&::before {
|
|
65
|
+
bottom: -1px;
|
|
66
|
+
}
|
|
67
|
+
`;
|
|
68
|
+
exports.VerticalEndResizerInner = (0, styled_components_1.default)(VerticalResizerInner) `
|
|
69
|
+
bottom: -16px;
|
|
70
|
+
|
|
71
|
+
&::before {
|
|
72
|
+
top: -1px;
|
|
73
|
+
}
|
|
74
|
+
`;
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
3
|
+
if (k2 === undefined) k2 = k;
|
|
4
|
+
Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
|
|
5
|
+
}) : (function(o, m, k, k2) {
|
|
6
|
+
if (k2 === undefined) k2 = k;
|
|
7
|
+
o[k2] = m[k];
|
|
8
|
+
}));
|
|
9
|
+
var __exportStar = (this && this.__exportStar) || function(m, exports) {
|
|
10
|
+
for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
|
|
11
|
+
};
|
|
12
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
13
|
+
exports.Resizer = void 0;
|
|
14
|
+
var Resizer_1 = require("./Resizer");
|
|
15
|
+
Object.defineProperty(exports, "Resizer", { enumerable: true, get: function () { return Resizer_1.Resizer; } });
|
|
16
|
+
__exportStar(require("./types"), exports);
|
|
@@ -18,7 +18,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
18
18
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
19
19
|
};
|
|
20
20
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
21
|
-
exports.UploadIcon = exports.AttachIcon = exports.TaskStepNextIcon = exports.TaskStepDoneIcon = exports.TaskStepCurrentIcon = exports.ZoomOutIcon = exports.ZoomInIcon = exports.UserIcon = exports.TickMarkIcon = exports.SearchIcon = exports.ProjectsListIcon = exports.ProjectIcon = exports.ProjectNotificationIcon = exports.OrcidIcon = exports.GoogleIcon = exports.CloseOIcon = exports.BookmarkIcon = exports.BackArrowIcon = exports.AddIconInverted = exports.AddIconActive = exports.AddAuthor = void 0;
|
|
21
|
+
exports.MissingImage = exports.UploadIcon = exports.AttachIcon = exports.TaskStepNextIcon = exports.TaskStepDoneIcon = exports.TaskStepCurrentIcon = exports.ZoomOutIcon = exports.ZoomInIcon = exports.UserIcon = exports.TickMarkIcon = exports.SearchIcon = exports.ProjectsListIcon = exports.ProjectIcon = exports.ProjectNotificationIcon = exports.OrcidIcon = exports.GoogleIcon = exports.CloseOIcon = exports.BookmarkIcon = exports.BackArrowIcon = exports.AddIconInverted = exports.AddIconActive = exports.AddAuthor = void 0;
|
|
22
22
|
var add_author_1 = require("./add-author");
|
|
23
23
|
Object.defineProperty(exports, "AddAuthor", { enumerable: true, get: function () { return __importDefault(add_author_1).default; } });
|
|
24
24
|
var add_icon_active_1 = require("./add-icon-active");
|
|
@@ -61,3 +61,5 @@ var attach_1 = require("./attach");
|
|
|
61
61
|
Object.defineProperty(exports, "AttachIcon", { enumerable: true, get: function () { return __importDefault(attach_1).default; } });
|
|
62
62
|
var upload_1 = require("./upload");
|
|
63
63
|
Object.defineProperty(exports, "UploadIcon", { enumerable: true, get: function () { return __importDefault(upload_1).default; } });
|
|
64
|
+
var missing_image_1 = require("./missing-image");
|
|
65
|
+
Object.defineProperty(exports, "MissingImage", { enumerable: true, get: function () { return __importDefault(missing_image_1).default; } });
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
|
+
};
|
|
5
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
+
const react_1 = __importDefault(require("react"));
|
|
7
|
+
const MissingImage = () => (react_1.default.createElement("svg", { width: "28", height: "32", viewBox: "0 0 28 32", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
|
|
8
|
+
react_1.default.createElement("path", { d: "M2.99979 1.25C2.03237 1.25 1.25073 2.03442 1.25073 3V29C1.25073 29.9665 2.03423 30.75 3.00073 30.75H25.0007C25.9672 30.75 26.7507 29.9665 26.7507 29V11.4383C26.7507 10.9494 26.5462 10.4828 26.1868 10.1515L17.0318 1.71322C16.7092 1.41588 16.287 1.25 15.8467 1.25H15.8372H15.8275H15.8177H15.8078H15.7978H15.7877H15.7775H15.7671H15.7567H15.7462H15.7355H15.7248H15.7139H15.703H15.6919H15.6807H15.6694H15.6581H15.6466H15.635H15.6233H15.6115H15.5996H15.5876H15.5755H15.5633H15.551H15.5386H15.5261H15.5135H15.5008H15.488H15.4751H15.4621H15.449H15.4358H15.4225H15.4091H15.3956H15.382H15.3683H15.3545H15.3406H15.3266H15.3126H15.2984H15.2841H15.2697H15.2553H15.2407H15.2261H15.2113H15.1965H15.1815H15.1665H15.1514H15.1362H15.1209H15.1055H15.09H15.0744H15.0587H15.043H15.0271H15.0111H14.9951H14.979H14.9628H14.9464H14.93H14.9136H14.897H14.8803H14.8636H14.8467H14.8298H14.8128H14.7957H14.7785H14.7612H14.7438H14.7264H14.7089H14.6912H14.6735H14.6557H14.6379H14.6199H14.6019H14.5837H14.5655H14.5472H14.5289H14.5104H14.4919H14.4732H14.4545H14.4357H14.4169H14.3979H14.3789H14.3598H14.3406H14.3213H14.302H14.2825H14.263H14.2435H14.2238H14.204H14.1842H14.1643H14.1443H14.1243H14.1042H14.084H14.0637H14.0433H14.0229H14.0024H13.9818H13.9611H13.9404H13.9196H13.8987H13.8778H13.8567H13.8356H13.8144H13.7932H13.7719H13.7505H13.729H13.7075H13.6859H13.6642H13.6425H13.6206H13.5988H13.5768H13.5548H13.5327H13.5105H13.4883H13.466H13.4436H13.4212H13.3987H13.3761H13.3535H13.3308H13.308H13.2851H13.2622H13.2393H13.2162H13.1931H13.17H13.1467H13.1235H13.1001H13.0767H13.0532H13.0296H13.006H12.9824H12.9586H12.9348H12.911H12.8871H12.8631H12.839H12.8149H12.7908H12.7666H12.7423H12.7179H12.6935H12.6691H12.6446H12.62H12.5954H12.5707H12.5459H12.5211H12.4963H12.4713H12.4464H12.4213H12.3963H12.3711H12.3459H12.3207H12.2954H12.27H12.2446H12.2191H12.1936H12.168H12.1424H12.1167H12.091H12.0652H12.0394H12.0135H11.9876H11.9616H11.9355H11.9094H11.8833H11.8571H11.8309H11.8046H11.7782H11.7519H11.7254H11.6989H11.6724H11.6458H11.6192H11.5925H11.5658H11.539H11.5122H11.4854H11.4585H11.4315H11.4045H11.3775H11.3504H11.3233H11.2961H11.2689H11.2416H11.2143H11.187H11.1596H11.1322H11.1047H11.0772H11.0497H11.0221H10.9944H10.9668H10.939H10.9113H10.8835H10.8556H10.8278H10.7999H10.7719H10.7439H10.7159H10.6878H10.6597H10.6316H10.6034H10.5752H10.5469H10.5187H10.4903H10.462H10.4336H10.4052H10.3767H10.3482H10.3197H10.2911H10.2625H10.2339H10.2052H10.1765H10.1478H10.119H10.0902H10.0614H10.0326H10.0037H9.97477H9.94582H9.91684H9.88784H9.8588H9.82973H9.80064H9.77151H9.74236H9.71318H9.68397H9.65474H9.62547H9.59618H9.56687H9.53752H9.50815H9.47876H9.44934H9.41989H9.39042H9.36092H9.3314H9.30186H9.27229H9.24269H9.21308H9.18344H9.15378H9.12409H9.09438H9.06465H9.0349H9.00513H8.97534H8.94552H8.91569H8.88583H8.85596H8.82606H8.79615H8.76621H8.73626H8.70629H8.6763H8.64629H8.61627H8.58623H8.55617H8.52609H8.49599H8.46588H8.43576H8.40562H8.37546H8.34529H8.3151H8.2849H8.25468H8.22445H8.1942H8.16394H8.13367H8.10339H8.07309H8.04278H8.01246H7.98212H7.95178H7.92142H7.89105H7.86067H7.83029H7.79989H7.76948H7.73906H7.70863H7.67819H7.64775H7.61729H7.58683H7.55636H7.52588H7.49539H7.4649H7.4344H7.40389H7.37338H7.34286H7.31234H7.28181H7.25127H7.22073H7.19019H7.15964H7.12908H7.09853H7.06797H7.0374H7.00684H6.97627H6.9457H6.91512H6.88455H6.85397H6.82339H6.79282H6.76224H6.73166H6.70108H6.6705H6.63992H6.60934H6.57876H6.54819H6.51761H6.48704H6.45647H6.4259H6.39533H6.36477H6.33421H6.30366H6.27311H6.24256H6.21201H6.18148H6.15094H6.12041H6.08989H6.05937H6.02886H5.99836H5.96786H5.93737H5.90689H5.87641H5.84594H5.81548H5.78503H5.75458H5.72415H5.69372H5.66331H5.6329H5.6025H5.57212H5.54174H5.51138H5.48102H5.45068H5.42035H5.39003H5.35973H5.32943H5.29915H5.26888H5.23863H5.20839H5.17816H5.14795H5.11775H5.08757H5.0574H5.02725H4.99711H4.96699H4.93688H4.90679H4.87672H4.84667H4.81663H4.78661H4.75661H4.72662H4.69666H4.66671H4.63678H4.60687H4.57698H4.54712H4.51727H4.48744H4.45763H4.42784H4.39808H4.36833H4.33861H4.30891H4.27923H4.24958H4.21994H4.19033H4.16075H4.13119H4.10165H4.07213H4.04264H4.01318H3.98374H3.95433H3.92494H3.89558H3.86624H3.83693H3.80765H3.7784H3.74917H3.71997H3.6908H3.66165H3.63254H3.60345H3.57439H3.54537H3.51637H3.4874H3.45846H3.42955H3.40068H3.37183H3.34302H3.31423H3.28548H3.25676H3.22808H3.19942H3.1708H3.14222H3.11366H3.08514H3.05666H3.02821H2.99979Z", stroke: "#6E6E6E", strokeWidth: "1.5" }),
|
|
9
|
+
react_1.default.createElement("path", { d: "M8.00073 24C10.1219 20.9815 15.8916 16.7556 22.0007 24", stroke: "#6E6E6E", strokeWidth: "1.5", strokeLinecap: "round" }),
|
|
10
|
+
react_1.default.createElement("path", { d: "M8.00073 8C8.00073 8 8.00073 9.04738 8.00073 11", stroke: "#6E6E6E", strokeWidth: "1.5", strokeLinecap: "round" }),
|
|
11
|
+
react_1.default.createElement("path", { d: "M16.0007 2V12H26.0007", stroke: "#6E6E6E", strokeWidth: "1.5" })));
|
|
12
|
+
exports.default = MissingImage;
|
package/dist/cjs/index.js
CHANGED
|
@@ -28,7 +28,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
28
28
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
29
29
|
};
|
|
30
30
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
31
|
-
exports.SelectDialogDesignation = exports.errorsDecoder = exports.PdfPreview = void 0;
|
|
31
|
+
exports.SelectDialogDesignation = exports.errorsDecoder = exports.PdfPreview = exports.inlineFiles = void 0;
|
|
32
32
|
__exportStar(require("./components/AffiliationsEditor"), exports);
|
|
33
33
|
__exportStar(require("./components/AffiliationsList"), exports);
|
|
34
34
|
__exportStar(require("./components/AuthorForm"), exports);
|
|
@@ -48,6 +48,7 @@ __exportStar(require("./components/Form"), exports);
|
|
|
48
48
|
__exportStar(require("./components/FileManager"), exports);
|
|
49
49
|
__exportStar(require("./components/FileManager/util"), exports);
|
|
50
50
|
__exportStar(require("./components/FileManager/FileSectionItem/FileSectionItem"), exports);
|
|
51
|
+
__exportStar(require("./components/Resizer"), exports);
|
|
51
52
|
__exportStar(require("./components/SaveStatus"), exports);
|
|
52
53
|
__exportStar(require("./components/SimpleModal"), exports);
|
|
53
54
|
__exportStar(require("./components/StyledModal"), exports);
|
|
@@ -59,6 +60,8 @@ __exportStar(require("./components/Tip"), exports);
|
|
|
59
60
|
__exportStar(require("./components/icons"), exports);
|
|
60
61
|
__exportStar(require("./components/Inspector"), exports);
|
|
61
62
|
__exportStar(require("./components/InspectorSection"), exports);
|
|
63
|
+
var inlineFiles_1 = require("./lib/inlineFiles");
|
|
64
|
+
Object.defineProperty(exports, "inlineFiles", { enumerable: true, get: function () { return __importDefault(inlineFiles_1).default; } });
|
|
62
65
|
var PdfPreview_1 = require("./components/PdfPreview");
|
|
63
66
|
Object.defineProperty(exports, "PdfPreview", { enumerable: true, get: function () { return __importDefault(PdfPreview_1).default; } });
|
|
64
67
|
__exportStar(require("./components/SubmissionInspector"), exports);
|