@manuscripts/body-editor 3.9.22 → 3.10.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/components/affiliations/AffiliationForm.js +10 -44
- package/dist/cjs/components/affiliations/AffiliationsModal.js +18 -14
- package/dist/cjs/components/authors/AuthorDetailsForm.js +36 -37
- package/dist/cjs/components/authors/AuthorsModal.js +23 -18
- package/dist/cjs/components/authors/CreditDrawer.js +1 -9
- package/dist/cjs/components/form/ModalFormActions.js +3 -0
- package/dist/cjs/components/modal-drawer/GenericDrawerGroup.js +9 -33
- package/dist/cjs/versions.js +1 -1
- package/dist/es/components/affiliations/AffiliationForm.js +11 -42
- package/dist/es/components/affiliations/AffiliationsModal.js +19 -15
- package/dist/es/components/authors/AuthorDetailsForm.js +36 -37
- package/dist/es/components/authors/AuthorsModal.js +24 -19
- package/dist/es/components/authors/CreditDrawer.js +1 -9
- package/dist/es/components/form/ModalFormActions.js +3 -0
- package/dist/es/components/modal-drawer/GenericDrawerGroup.js +8 -32
- package/dist/es/versions.js +1 -1
- package/dist/types/components/modal-drawer/GenericDrawerGroup.d.ts +0 -2
- package/dist/types/versions.d.ts +1 -1
- package/package.json +3 -3
|
@@ -32,46 +32,12 @@ var __importStar = (this && this.__importStar) || (function () {
|
|
|
32
32
|
return result;
|
|
33
33
|
};
|
|
34
34
|
})();
|
|
35
|
-
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
36
|
-
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
37
|
-
};
|
|
38
35
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
39
36
|
exports.AffiliationForm = void 0;
|
|
40
37
|
const style_guide_1 = require("@manuscripts/style-guide");
|
|
41
38
|
const formik_1 = require("formik");
|
|
42
39
|
const react_1 = __importStar(require("react"));
|
|
43
|
-
const styled_components_1 = __importDefault(require("styled-components"));
|
|
44
40
|
const ChangeHandlingForm_1 = require("../ChangeHandlingForm");
|
|
45
|
-
const AffiliationsTextField = (0, styled_components_1.default)(style_guide_1.TextField) `
|
|
46
|
-
border-radius: 0;
|
|
47
|
-
background: transparent;
|
|
48
|
-
margin-bottom: 4px;
|
|
49
|
-
border-radius: ${(props) => props.theme.grid.radius.default};
|
|
50
|
-
&[aria-invalid] {
|
|
51
|
-
background: ${(props) => props.theme.colors.background.warning};
|
|
52
|
-
}
|
|
53
|
-
|
|
54
|
-
&[aria-invalid]:focus {
|
|
55
|
-
background: transparent;
|
|
56
|
-
}
|
|
57
|
-
`;
|
|
58
|
-
const DepartmentTextField = (0, styled_components_1.default)(style_guide_1.TextArea) `
|
|
59
|
-
border-radius: 0;
|
|
60
|
-
background: transparent;
|
|
61
|
-
margin-bottom: 4px;
|
|
62
|
-
min-height: 60px;
|
|
63
|
-
border-radius: ${(props) => props.theme.grid.radius.default};
|
|
64
|
-
&[aria-invalid] {
|
|
65
|
-
background: ${(props) => props.theme.colors.background.warning};
|
|
66
|
-
}
|
|
67
|
-
|
|
68
|
-
&[aria-invalid]:focus {
|
|
69
|
-
background: transparent;
|
|
70
|
-
}
|
|
71
|
-
`;
|
|
72
|
-
const MarginRightTextField = (0, styled_components_1.default)(AffiliationsTextField) `
|
|
73
|
-
margin-right: 4px;
|
|
74
|
-
`;
|
|
75
41
|
const AffiliationForm = ({ values, onSave, onChange, actionsRef, }) => {
|
|
76
42
|
if (actionsRef && !actionsRef.current) {
|
|
77
43
|
actionsRef.current = {
|
|
@@ -89,37 +55,37 @@ const AffiliationForm = ({ values, onSave, onChange, actionsRef, }) => {
|
|
|
89
55
|
return errors;
|
|
90
56
|
};
|
|
91
57
|
return (react_1.default.createElement(formik_1.Formik, { initialValues: values, onSubmit: onSave, innerRef: formRef, enableReinitialize: true, validate: validateAffiliation }, (formik) => (react_1.default.createElement(ChangeHandlingForm_1.ChangeHandlingForm, { onChange: onChange, id: "affiliation-form", noValidate: true },
|
|
92
|
-
react_1.default.createElement(style_guide_1.FormLabel, null, "Institution*"),
|
|
93
58
|
react_1.default.createElement(style_guide_1.FormRow, null,
|
|
94
59
|
react_1.default.createElement(formik_1.Field, { name: "institution" }, (props) => {
|
|
95
60
|
const hasError = formik.touched.institution && formik.errors.institution;
|
|
96
61
|
return (react_1.default.createElement(react_1.default.Fragment, null,
|
|
97
|
-
react_1.default.createElement(style_guide_1.Label, { htmlFor: "institution" }, "Institution Name"),
|
|
98
|
-
react_1.default.createElement(
|
|
62
|
+
react_1.default.createElement(style_guide_1.Label, { htmlFor: "institution" }, "Institution Name*"),
|
|
63
|
+
react_1.default.createElement(style_guide_1.TextField, { id: "institution", ...props.field, error: hasError }),
|
|
99
64
|
hasError && (react_1.default.createElement(style_guide_1.InputErrorText, null, formik.errors.institution))));
|
|
100
65
|
})),
|
|
101
|
-
react_1.default.createElement(style_guide_1.FormLabel, null, "Details"),
|
|
102
66
|
react_1.default.createElement(style_guide_1.FormRow, null,
|
|
103
67
|
react_1.default.createElement(formik_1.Field, { name: "department" }, (props) => (react_1.default.createElement(react_1.default.Fragment, null,
|
|
104
68
|
react_1.default.createElement(style_guide_1.Label, { htmlFor: "department" }, "Department"),
|
|
105
|
-
react_1.default.createElement(
|
|
69
|
+
react_1.default.createElement(style_guide_1.TextField, { id: "department", ...props.field }))))),
|
|
106
70
|
react_1.default.createElement(style_guide_1.FormRow, null,
|
|
107
71
|
react_1.default.createElement(formik_1.Field, { name: "addressLine1" }, (props) => (react_1.default.createElement(react_1.default.Fragment, null,
|
|
108
72
|
react_1.default.createElement(style_guide_1.Label, { htmlFor: "addressLine1" }, "Street Address"),
|
|
109
|
-
react_1.default.createElement(
|
|
73
|
+
react_1.default.createElement(style_guide_1.TextField, { id: "addressLine1", ...props.field }))))),
|
|
110
74
|
react_1.default.createElement(style_guide_1.FormRow, null,
|
|
111
75
|
react_1.default.createElement(formik_1.Field, { name: "city" }, (props) => (react_1.default.createElement(react_1.default.Fragment, null,
|
|
112
76
|
react_1.default.createElement(style_guide_1.Label, { htmlFor: "city" }, "City"),
|
|
113
|
-
react_1.default.createElement(
|
|
77
|
+
react_1.default.createElement(style_guide_1.TextField, { id: "city", ...props.field }))))),
|
|
78
|
+
react_1.default.createElement(style_guide_1.FormRow, null,
|
|
114
79
|
react_1.default.createElement(formik_1.Field, { name: "county" }, (props) => (react_1.default.createElement(react_1.default.Fragment, null,
|
|
115
80
|
react_1.default.createElement(style_guide_1.Label, { htmlFor: "county" }, "State / Province"),
|
|
116
|
-
react_1.default.createElement(
|
|
81
|
+
react_1.default.createElement(style_guide_1.TextField, { id: "county", ...props.field }))))),
|
|
117
82
|
react_1.default.createElement(style_guide_1.FormRow, null,
|
|
118
83
|
react_1.default.createElement(formik_1.Field, { name: "postCode" }, (props) => (react_1.default.createElement(react_1.default.Fragment, null,
|
|
119
84
|
react_1.default.createElement(style_guide_1.Label, { htmlFor: "postCode" }, "Postal Code"),
|
|
120
|
-
react_1.default.createElement(
|
|
85
|
+
react_1.default.createElement(style_guide_1.TextField, { id: "postCode", ...props.field }))))),
|
|
86
|
+
react_1.default.createElement(style_guide_1.FormRow, null,
|
|
121
87
|
react_1.default.createElement(formik_1.Field, { name: "country" }, ({ field }) => (react_1.default.createElement(react_1.default.Fragment, null,
|
|
122
88
|
react_1.default.createElement(style_guide_1.Label, { htmlFor: "country" }, "Country"),
|
|
123
|
-
react_1.default.createElement(
|
|
89
|
+
react_1.default.createElement(style_guide_1.TextField, { id: "country", ...field })))))))));
|
|
124
90
|
};
|
|
125
91
|
exports.AffiliationForm = AffiliationForm;
|
|
@@ -365,15 +365,21 @@ const AffiliationsModal = ({ authors: $authors, affiliations: $affiliations, aff
|
|
|
365
365
|
react_1.default.createElement(style_guide_1.AddIcon, { width: 18, height: 18 }),
|
|
366
366
|
react_1.default.createElement(ActionTitle, null, "New Affiliation")),
|
|
367
367
|
react_1.default.createElement(AffiliationList_1.AffiliationList, { affiliation: selection, affiliations: affiliations, onSelect: handleSelect, onDelete: handleShowDeleteDialog, lastSavedAffiliationId: savedAffiliationId }))),
|
|
368
|
-
react_1.default.createElement(
|
|
369
|
-
react_1.default.createElement(
|
|
368
|
+
react_1.default.createElement(style_guide_1.ScrollableModalContent, { "data-cy": "affiliations-modal-content" }, selection ? (react_1.default.createElement(react_1.default.Fragment, null,
|
|
369
|
+
react_1.default.createElement(AffiliationTabs, null,
|
|
370
370
|
react_1.default.createElement(ModalFormActions_1.ModalFormActions, { type: 'affiliation', form: 'affiliation-form', onDelete: handleDeleteAffiliation, showingDeleteDialog: showingDeleteDialog, showDeleteDialog: handleShowDeleteDialog, newEntity: newAffiliation, isDisableSave: isDisableSave }),
|
|
371
|
-
react_1.default.createElement(
|
|
372
|
-
|
|
373
|
-
|
|
374
|
-
react_1.default.createElement(
|
|
375
|
-
|
|
376
|
-
|
|
371
|
+
react_1.default.createElement(style_guide_1.InspectorTabList, null,
|
|
372
|
+
react_1.default.createElement(style_guide_1.InspectorTab, null, "Details"),
|
|
373
|
+
react_1.default.createElement(style_guide_1.InspectorTab, null, "Authors")),
|
|
374
|
+
react_1.default.createElement(style_guide_1.InspectorTabPanels, null,
|
|
375
|
+
react_1.default.createElement(AffiliationTabPanel, null,
|
|
376
|
+
react_1.default.createElement(AffiliationForm_1.AffiliationForm, { values: (0, normalize_1.checkID)(selection, 'affiliation'), onSave: () => handleSaveAffiliation(valuesRef.current), onChange: handleAffiliationChange, actionsRef: actionsRef })),
|
|
377
|
+
react_1.default.createElement(AffiliationTabPanel, null,
|
|
378
|
+
react_1.default.createElement(GenericDrawerGroup_1.DrawerGroup, { Drawer: GenericDrawer_1.GenericDrawer, removeItem: (id) => {
|
|
379
|
+
setSelectedAuthorIds((prev) => prev.filter((authorId) => authorId !== id));
|
|
380
|
+
}, selectedItems: selectedAuthors, onSelect: selectAuthor, items: makeAuthorItems(authors), showDrawer: showAuthorDrawer, setShowDrawer: setShowAuthorDrawer, title: "Authors", cy: "affiliations", labelField: "label", buttonText: "Affiliate Authors", Icon: react_1.default.createElement(style_guide_1.AddUserIcon, { width: 16, height: 16 }) })))),
|
|
381
|
+
react_1.default.createElement(ConfirmationDialog_1.ConfirmationDialog, { isOpen: showRequiredFieldConfirmationDialog, onPrimary: () => setShowRequiredFieldConfirmationDialog(false), onSecondary: handleConfirmationCancel, type: ConfirmationDialog_1.DialogType.REQUIRED, entityType: "affiliation" }),
|
|
382
|
+
react_1.default.createElement(ConfirmationDialog_1.ConfirmationDialog, { isOpen: showConfirmationDialog, onPrimary: handleConfirmationSave, onSecondary: handleConfirmationCancel, type: ConfirmationDialog_1.DialogType.SAVE, entityType: "affiliation" }))) : (react_1.default.createElement(FormPlaceholder_1.FormPlaceholder, { type: "affiliation", title: "Affiliation Details", message: "Select an affiliation from the list to display it's details here.", placeholderIcon: react_1.default.createElement(style_guide_1.AffiliationPlaceholderIcon, null) })))),
|
|
377
383
|
react_1.default.createElement(FormFooter_1.default, { onCancel: handleClose }))));
|
|
378
384
|
};
|
|
379
385
|
exports.AffiliationsModal = AffiliationsModal;
|
|
@@ -414,14 +420,12 @@ const AddAffiliationButton = styled_components_1.default.div `
|
|
|
414
420
|
const ActionTitle = styled_components_1.default.div `
|
|
415
421
|
padding-left: ${(props) => props.theme.grid.unit * 2}px;
|
|
416
422
|
`;
|
|
417
|
-
const
|
|
418
|
-
padding-left: ${(props) => props.theme.grid.unit * 3}px;
|
|
419
|
-
padding-right: ${(props) => props.theme.grid.unit * 3}px;
|
|
420
|
-
margin-top: 20px;
|
|
421
|
-
`;
|
|
422
|
-
const DrawerRelativeParent = styled_components_1.default.div `
|
|
423
|
+
const AffiliationTabs = (0, styled_components_1.default)(style_guide_1.InspectorTabs) `
|
|
423
424
|
position: relative;
|
|
424
425
|
`;
|
|
426
|
+
const AffiliationTabPanel = (0, styled_components_1.default)(style_guide_1.InspectorTabPanel).attrs({ unmount: false }) `
|
|
427
|
+
margin-top: ${(props) => props.theme.grid.unit * 4}px;
|
|
428
|
+
`;
|
|
425
429
|
const StyledModalBody = (0, styled_components_1.default)(style_guide_1.ModalBody) `
|
|
426
430
|
position: relative;
|
|
427
431
|
height: calc(90vh - 40px);
|
|
@@ -107,44 +107,43 @@ const AuthorDetailsForm = ({ values, onChange, onSave, actionsRef, isEmailRequir
|
|
|
107
107
|
};
|
|
108
108
|
return (react_1.default.createElement(formik_1.Formik, { initialValues: values, onSubmit: onSave, enableReinitialize: true, validateOnChange: true, innerRef: formRef, validate: validateAuthor }, (formik) => {
|
|
109
109
|
return (react_1.default.createElement(ChangeHandlingForm_1.ChangeHandlingForm, { onChange: onChange, id: "author-details-form", formRef: authorFormRef, noValidate: true },
|
|
110
|
-
react_1.default.createElement(
|
|
110
|
+
react_1.default.createElement(style_guide_1.FormRow, null,
|
|
111
|
+
react_1.default.createElement(formik_1.Field, { name: 'prefix' }, (props) => (react_1.default.createElement(react_1.default.Fragment, null,
|
|
112
|
+
react_1.default.createElement(style_guide_1.Label, { htmlFor: "prefix" }, "Prefix"),
|
|
113
|
+
react_1.default.createElement(style_guide_1.TextField, { id: 'prefix', ...props.field }))))),
|
|
114
|
+
react_1.default.createElement(style_guide_1.FormRow, null,
|
|
115
|
+
react_1.default.createElement(formik_1.Field, { name: 'bibliographicName.given' }, (props) => (react_1.default.createElement(react_1.default.Fragment, null,
|
|
116
|
+
react_1.default.createElement(style_guide_1.Label, { htmlFor: "given-name" }, "Given name"),
|
|
117
|
+
react_1.default.createElement(style_guide_1.TextField, { id: 'given-name', ...props.field }))))),
|
|
118
|
+
react_1.default.createElement(style_guide_1.FormRow, null,
|
|
119
|
+
react_1.default.createElement(formik_1.Field, { name: 'bibliographicName.family' }, (props) => (react_1.default.createElement(react_1.default.Fragment, null,
|
|
120
|
+
react_1.default.createElement(style_guide_1.Label, { htmlFor: "family-name" }, "Family name"),
|
|
121
|
+
react_1.default.createElement(style_guide_1.TextField, { id: 'family-name', ...props.field }))))),
|
|
122
|
+
react_1.default.createElement(style_guide_1.FormRow, null,
|
|
123
|
+
react_1.default.createElement(formik_1.Field, { name: 'role' }, (props) => (react_1.default.createElement(react_1.default.Fragment, null,
|
|
124
|
+
react_1.default.createElement(style_guide_1.Label, { htmlFor: "role" }, "Job Title"),
|
|
125
|
+
react_1.default.createElement(style_guide_1.TextField, { id: 'role', ...props.field }))))),
|
|
126
|
+
react_1.default.createElement(style_guide_1.FormRow, null,
|
|
127
|
+
react_1.default.createElement(formik_1.Field, { name: 'email', type: 'email' }, (props) => {
|
|
128
|
+
const hasError = (0, formik_1.getIn)(formik.touched, 'email') &&
|
|
129
|
+
(0, formik_1.getIn)(formik.errors, 'email');
|
|
130
|
+
return (react_1.default.createElement(react_1.default.Fragment, null,
|
|
131
|
+
react_1.default.createElement(style_guide_1.Label, { htmlFor: "email" }, isEmailRequired
|
|
132
|
+
? 'Email address*'
|
|
133
|
+
: 'Email address'),
|
|
134
|
+
react_1.default.createElement(TextFieldWithError, { id: 'email', type: "email", required: isEmailRequired, ...props.field, error: hasError }),
|
|
135
|
+
hasError && (react_1.default.createElement(style_guide_1.InputErrorText, null, (0, formik_1.getIn)(formik.errors, 'email')))));
|
|
136
|
+
})),
|
|
137
|
+
react_1.default.createElement(exports.CheckboxContainer, null,
|
|
138
|
+
react_1.default.createElement(style_guide_1.CheckboxLabel, null,
|
|
139
|
+
react_1.default.createElement(formik_1.Field, { name: 'isCorresponding' }, (props) => (react_1.default.createElement(style_guide_1.CheckboxField, { id: 'isCorresponding', checked: props.field.value, ...props.field }))),
|
|
140
|
+
react_1.default.createElement(style_guide_1.LabelText, null, "Corresponding Author"))),
|
|
141
|
+
react_1.default.createElement(OrcidContainer, null,
|
|
111
142
|
react_1.default.createElement(style_guide_1.FormRow, null,
|
|
112
|
-
react_1.default.createElement(
|
|
113
|
-
|
|
114
|
-
react_1.default.createElement(style_guide_1.
|
|
115
|
-
|
|
116
|
-
react_1.default.createElement(formik_1.Field, { name: 'bibliographicName.given' }, (props) => (react_1.default.createElement(react_1.default.Fragment, null,
|
|
117
|
-
react_1.default.createElement(style_guide_1.Label, { htmlFor: "given-name" }, "Given name"),
|
|
118
|
-
react_1.default.createElement(style_guide_1.TextField, { id: 'given-name', ...props.field }))))),
|
|
119
|
-
react_1.default.createElement(style_guide_1.FormRow, null,
|
|
120
|
-
react_1.default.createElement(formik_1.Field, { name: 'bibliographicName.family' }, (props) => (react_1.default.createElement(react_1.default.Fragment, null,
|
|
121
|
-
react_1.default.createElement(style_guide_1.Label, { htmlFor: "family-name" }, "Family name"),
|
|
122
|
-
react_1.default.createElement(style_guide_1.TextField, { id: 'family-name', ...props.field }))))),
|
|
123
|
-
react_1.default.createElement(style_guide_1.FormRow, null,
|
|
124
|
-
react_1.default.createElement(formik_1.Field, { name: 'email', type: 'email' }, (props) => {
|
|
125
|
-
const hasError = (0, formik_1.getIn)(formik.touched, 'email') &&
|
|
126
|
-
(0, formik_1.getIn)(formik.errors, 'email');
|
|
127
|
-
return (react_1.default.createElement(react_1.default.Fragment, null,
|
|
128
|
-
react_1.default.createElement(style_guide_1.Label, { htmlFor: "email" }, isEmailRequired
|
|
129
|
-
? 'Email address (required)'
|
|
130
|
-
: 'Email address'),
|
|
131
|
-
react_1.default.createElement(TextFieldWithError, { id: 'email', type: "email", required: isEmailRequired, ...props.field, error: hasError }),
|
|
132
|
-
hasError && (react_1.default.createElement(style_guide_1.InputErrorText, null, (0, formik_1.getIn)(formik.errors, 'email')))));
|
|
133
|
-
})),
|
|
134
|
-
react_1.default.createElement(style_guide_1.FormRow, null,
|
|
135
|
-
react_1.default.createElement(formik_1.Field, { name: 'role' }, (props) => (react_1.default.createElement(react_1.default.Fragment, null,
|
|
136
|
-
react_1.default.createElement(style_guide_1.Label, { htmlFor: "role" }, "Job Title"),
|
|
137
|
-
react_1.default.createElement(style_guide_1.TextField, { id: 'role', ...props.field }))))),
|
|
138
|
-
react_1.default.createElement(exports.CheckboxContainer, null,
|
|
139
|
-
react_1.default.createElement(style_guide_1.CheckboxLabel, null,
|
|
140
|
-
react_1.default.createElement(formik_1.Field, { name: 'isCorresponding' }, (props) => (react_1.default.createElement(style_guide_1.CheckboxField, { id: 'isCorresponding', checked: props.field.value, ...props.field }))),
|
|
141
|
-
react_1.default.createElement(style_guide_1.LabelText, null, "Corresponding Author"))),
|
|
142
|
-
react_1.default.createElement(OrcidContainer, null,
|
|
143
|
-
react_1.default.createElement(style_guide_1.FormRow, null,
|
|
144
|
-
react_1.default.createElement(style_guide_1.Label, { htmlFor: "orcid" }, "ORCID"),
|
|
145
|
-
react_1.default.createElement(formik_1.Field, { name: 'ORCIDIdentifier', type: 'text' }, (props) => (react_1.default.createElement(react_1.default.Fragment, null,
|
|
146
|
-
react_1.default.createElement(style_guide_1.Label, { htmlFor: "orcid", className: "sr-only" }, "ORCID"),
|
|
147
|
-
react_1.default.createElement(style_guide_1.TextField, { id: 'orcid', placeholder: 'https://orcid.org/...', pattern: "https://orcid\\.org/\\d{4}-\\d{4}-\\d{4}-\\d{3}[0-9Xx]", title: "Please enter a valid ORCID URL format: https://orcid.org/xxxx-xxxx-xxxx-xxxx", ...props.field })))))))));
|
|
143
|
+
react_1.default.createElement(style_guide_1.Label, { htmlFor: "orcid" }, "ORCID"),
|
|
144
|
+
react_1.default.createElement(formik_1.Field, { name: 'ORCIDIdentifier', type: 'text' }, (props) => (react_1.default.createElement(react_1.default.Fragment, null,
|
|
145
|
+
react_1.default.createElement(style_guide_1.Label, { htmlFor: "orcid", className: "sr-only" }, "ORCID"),
|
|
146
|
+
react_1.default.createElement(style_guide_1.TextField, { id: 'orcid', placeholder: 'https://orcid.org/...', pattern: "https://orcid\\.org/\\d{4}-\\d{4}-\\d{4}-\\d{3}[0-9Xx]", title: "Please enter a valid ORCID URL format: https://orcid.org/xxxx-xxxx-xxxx-xxxx", ...props.field }))))))));
|
|
148
147
|
}));
|
|
149
148
|
};
|
|
150
149
|
exports.AuthorDetailsForm = AuthorDetailsForm;
|
|
@@ -347,21 +347,28 @@ const AuthorsModal = ({ authors: $authors, affiliations: $affiliations, author,
|
|
|
347
347
|
react_1.default.createElement(style_guide_1.AddIcon, { width: 18, height: 18 }),
|
|
348
348
|
react_1.default.createElement(ActionTitle, null, "New Author")),
|
|
349
349
|
react_1.default.createElement(AuthorList_1.AuthorList, { author: selection, authors: authors, onSelect: selectAuthor, onDelete: () => setShowDeleteDialog((prev) => !prev), moveAuthor: moveAuthor, lastSavedAuthor: lastSavedAuthor }))),
|
|
350
|
-
react_1.default.createElement(
|
|
351
|
-
react_1.default.createElement(
|
|
352
|
-
react_1.default.createElement(ConfirmationDialog_1.ConfirmationDialog, { isOpen: showRequiredFieldConfirmationDialog, onPrimary: () => setShowRequiredFieldConfirmationDialog(false), onSecondary: cancel, type: ConfirmationDialog_1.DialogType.REQUIRED, entityType: "author" }),
|
|
353
|
-
react_1.default.createElement(ConfirmationDialog_1.ConfirmationDialog, { isOpen: showConfirmationDialog, onPrimary: save, onSecondary: cancel, type: ConfirmationDialog_1.DialogType.SAVE, entityType: "author" }),
|
|
350
|
+
react_1.default.createElement(style_guide_1.ScrollableModalContent, { "data-cy": "author-modal-content" }, selection ? (react_1.default.createElement(react_1.default.Fragment, null,
|
|
351
|
+
react_1.default.createElement(AuthorTabs, null,
|
|
354
352
|
react_1.default.createElement(ModalFormActions_1.ModalFormActions, { form: 'author-details-form', type: "author", onDelete: deleteAuthor, showingDeleteDialog: showingDeleteDialog, showDeleteDialog: () => setShowDeleteDialog((prev) => !prev), newEntity: newAuthor ||
|
|
355
353
|
(isCreatingNewAuthor &&
|
|
356
354
|
!showConfirmationDialog &&
|
|
357
355
|
!showRequiredFieldConfirmationDialog), isDisableSave: isDisableSave }),
|
|
358
|
-
react_1.default.createElement(style_guide_1.
|
|
359
|
-
|
|
360
|
-
|
|
361
|
-
|
|
362
|
-
|
|
363
|
-
|
|
364
|
-
|
|
356
|
+
react_1.default.createElement(style_guide_1.InspectorTabList, null,
|
|
357
|
+
react_1.default.createElement(style_guide_1.InspectorTab, null, "Details"),
|
|
358
|
+
react_1.default.createElement(style_guide_1.InspectorTab, null, "Affiliations"),
|
|
359
|
+
react_1.default.createElement(style_guide_1.InspectorTab, null, "Contributions (CRediT)")),
|
|
360
|
+
react_1.default.createElement(style_guide_1.InspectorTabPanels, null,
|
|
361
|
+
react_1.default.createElement(AuthorTabPanel, null,
|
|
362
|
+
react_1.default.createElement(AuthorDetailsForm_1.AuthorDetailsForm, { values: (0, normalize_1.normalizeAuthor)(selection), onChange: changeAuthor, onSave: saveAuthor, actionsRef: actionsRef, isEmailRequired: isEmailRequired, selectedAffiliations: selectedAffiliations.map((a) => a.id), authorFormRef: authorFormRef, selectedCreditRoles: selectedCreditRoles })),
|
|
363
|
+
react_1.default.createElement(AuthorTabPanel, null,
|
|
364
|
+
react_1.default.createElement(GenericDrawerGroup_1.DrawerGroup, { Drawer: AffiliationDrawer_1.AffiliationsDrawer, removeItem: removeAffiliation, selectedItems: selectedAffiliations, onSelect: selectAffiliation, items: affiliations, showDrawer: showAffiliationDrawer, setShowDrawer: setShowAffiliationDrawer, title: "Affiliations", buttonText: "Assign Institutions", cy: "affiliations", labelField: "institution", Icon: react_1.default.createElement(style_guide_1.AddInstitutionIcon, { width: 16, height: 16 }) })),
|
|
365
|
+
react_1.default.createElement(AuthorTabPanel, null,
|
|
366
|
+
react_1.default.createElement(GenericDrawerGroup_1.DrawerGroup, { Drawer: CreditDrawer_1.CreditDrawer, removeItem: removeCreditRole, selectedItems: selectedCreditRoles.map((r) => ({
|
|
367
|
+
id: r.vocabTerm,
|
|
368
|
+
...r,
|
|
369
|
+
})), onSelect: selectCreditRole, items: vocabTermItems, showDrawer: showCreditDrawer, setShowDrawer: setShowCreditDrawer, title: "Contributions (CRediT)", buttonText: "Assign Roles", cy: "credit-taxnonomy", labelField: "vocabTerm", Icon: react_1.default.createElement(style_guide_1.AddRoleIcon, { width: 16, height: 16 }) })))),
|
|
370
|
+
react_1.default.createElement(ConfirmationDialog_1.ConfirmationDialog, { isOpen: showRequiredFieldConfirmationDialog, onPrimary: () => setShowRequiredFieldConfirmationDialog(false), onSecondary: cancel, type: ConfirmationDialog_1.DialogType.REQUIRED, entityType: "author" }),
|
|
371
|
+
react_1.default.createElement(ConfirmationDialog_1.ConfirmationDialog, { isOpen: showConfirmationDialog, onPrimary: save, onSecondary: cancel, type: ConfirmationDialog_1.DialogType.SAVE, entityType: "author" }))) : (react_1.default.createElement(FormPlaceholder_1.FormPlaceholder, { type: "author", title: "Author Details", message: "Select an author from the list to display their details here.", placeholderIcon: react_1.default.createElement(style_guide_1.AuthorPlaceholderIcon, null) })))),
|
|
365
372
|
react_1.default.createElement(FormFooter_1.default, { onCancel: close }))));
|
|
366
373
|
};
|
|
367
374
|
exports.AuthorsModal = AuthorsModal;
|
|
@@ -398,10 +405,11 @@ const AddAuthorButton = styled_components_1.default.div `
|
|
|
398
405
|
const ActionTitle = styled_components_1.default.div `
|
|
399
406
|
padding-left: ${(props) => props.theme.grid.unit * 2}px;
|
|
400
407
|
`;
|
|
401
|
-
const
|
|
402
|
-
|
|
403
|
-
|
|
404
|
-
|
|
408
|
+
const AuthorTabs = (0, styled_components_1.default)(style_guide_1.InspectorTabs) `
|
|
409
|
+
position: relative;
|
|
410
|
+
`;
|
|
411
|
+
const AuthorTabPanel = (0, styled_components_1.default)(style_guide_1.InspectorTabPanel).attrs({ unmount: false }) `
|
|
412
|
+
margin-top: ${(props) => props.theme.grid.unit * 4}px;
|
|
405
413
|
`;
|
|
406
414
|
const StyledSidebarContent = (0, styled_components_1.default)(style_guide_1.SidebarContent) `
|
|
407
415
|
padding: 0;
|
|
@@ -413,6 +421,3 @@ const StyledModalBody = (0, styled_components_1.default)(style_guide_1.ModalBody
|
|
|
413
421
|
const StyledModalSidebarHeader = (0, styled_components_1.default)(style_guide_1.ModalSidebarHeader) `
|
|
414
422
|
margin-bottom: 16px;
|
|
415
423
|
`;
|
|
416
|
-
const DrawerRelativeParent = styled_components_1.default.div `
|
|
417
|
-
position: relative;
|
|
418
|
-
`;
|
|
@@ -23,15 +23,7 @@ const TwoColumnContainer = (0, styled_components_1.default)(style_guide_1.Drawer
|
|
|
23
23
|
flex-flow: row wrap;
|
|
24
24
|
padding: 0 ${(props) => props.theme.grid.unit * 4}px;
|
|
25
25
|
position: relative;
|
|
26
|
-
|
|
27
|
-
&:after {
|
|
28
|
-
content: '';
|
|
29
|
-
display: block;
|
|
30
|
-
border-bottom: 1px solid #f0f0f0;
|
|
31
|
-
min-width: 100%;
|
|
32
|
-
padding-top: 16px;
|
|
33
|
-
}
|
|
34
26
|
`;
|
|
35
27
|
const TwoColumnCheckbox = (0, styled_components_1.default)(AuthorDetailsForm_1.CheckboxContainer) `
|
|
36
|
-
flex 1 0 50%;
|
|
28
|
+
flex: 1 0 50%;
|
|
37
29
|
`;
|
|
@@ -10,6 +10,9 @@ const styled_components_1 = __importDefault(require("styled-components"));
|
|
|
10
10
|
const ConfirmationDialog_1 = require("../dialog/ConfirmationDialog");
|
|
11
11
|
const ActionsContainer = styled_components_1.default.div `
|
|
12
12
|
display: flex;
|
|
13
|
+
position: absolute;
|
|
14
|
+
top: 5px;
|
|
15
|
+
right: 5px;
|
|
13
16
|
`;
|
|
14
17
|
const StyledButtonGroup = (0, styled_components_1.default)(style_guide_1.ButtonGroup) `
|
|
15
18
|
flex: 1;
|
|
@@ -18,34 +18,22 @@ 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.
|
|
21
|
+
exports.AssignButton = void 0;
|
|
22
22
|
exports.DrawerGroup = DrawerGroup;
|
|
23
23
|
const style_guide_1 = require("@manuscripts/style-guide");
|
|
24
24
|
const react_1 = __importDefault(require("react"));
|
|
25
25
|
const styled_components_1 = __importDefault(require("styled-components"));
|
|
26
26
|
function DrawerGroup({ removeItem, selectedItems, onSelect, items, showDrawer, setShowDrawer, title, labelField, Drawer, cy, Icon, buttonText, }) {
|
|
27
27
|
return (react_1.default.createElement(react_1.default.Fragment, null,
|
|
28
|
-
react_1.default.createElement(exports.
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
id: String(i.id),
|
|
36
|
-
label: String(i[labelField] ?? ''),
|
|
37
|
-
})), onRemove: removeItem, placeholder: `No ${title.endsWith('s') ? title : title + 's'} assigned` })),
|
|
28
|
+
react_1.default.createElement(exports.AssignButton, { onClick: () => setShowDrawer(true), "data-cy": cy + 'assign-button' },
|
|
29
|
+
Icon,
|
|
30
|
+
buttonText),
|
|
31
|
+
react_1.default.createElement(style_guide_1.SelectedItemsBox, { "data-cy": cy + '-selected-items', items: selectedItems.map((i) => ({
|
|
32
|
+
id: String(i.id),
|
|
33
|
+
label: String(i[labelField] ?? ''),
|
|
34
|
+
})), onRemove: removeItem, placeholder: `No ${title} assigned` }),
|
|
38
35
|
showDrawer && (react_1.default.createElement(Drawer, { items: items, selectedItems: selectedItems, title: title, onSelect: onSelect, onBack: () => setShowDrawer(false), width: "100%" }))));
|
|
39
36
|
}
|
|
40
|
-
const DrawerSectionTitle = styled_components_1.default.h3 `
|
|
41
|
-
margin: 0;
|
|
42
|
-
padding-bottom: 12px;
|
|
43
|
-
font: ${(props) => props.theme.font.weight.normal}
|
|
44
|
-
${(props) => props.theme.font.size.xlarge} /
|
|
45
|
-
${(props) => props.theme.font.lineHeight.large}
|
|
46
|
-
${(props) => props.theme.font.family.sans};
|
|
47
|
-
color: ${(props) => props.theme.colors.text.secondary};
|
|
48
|
-
`;
|
|
49
37
|
exports.AssignButton = styled_components_1.default.button `
|
|
50
38
|
color: ${(props) => props.theme.colors.brand.default};
|
|
51
39
|
background: none;
|
|
@@ -58,20 +46,8 @@ exports.AssignButton = styled_components_1.default.button `
|
|
|
58
46
|
display: flex;
|
|
59
47
|
align-items: center;
|
|
60
48
|
gap: 4px;
|
|
61
|
-
margin-
|
|
49
|
+
margin-bottom: ${(props) => props.theme.grid.unit * 2}px;
|
|
62
50
|
&:hover {
|
|
63
51
|
opacity: 0.8;
|
|
64
52
|
}
|
|
65
53
|
`;
|
|
66
|
-
exports.DrawerSectionHeader = styled_components_1.default.div `
|
|
67
|
-
display: flex;
|
|
68
|
-
justify-content: space-between;
|
|
69
|
-
align-items: flex-start;
|
|
70
|
-
flex-direction: column;
|
|
71
|
-
margin-bottom: ${(props) => props.theme.grid.unit * 2}px;
|
|
72
|
-
`;
|
|
73
|
-
exports.DrawerSection = styled_components_1.default.div `
|
|
74
|
-
margin-top: ${(props) => props.theme.grid.unit * 4}px;
|
|
75
|
-
padding-top: ${(props) => props.theme.grid.unit * 4}px;
|
|
76
|
-
border-top: 1px solid ${(props) => props.theme.colors.border.tertiary};
|
|
77
|
-
`;
|
package/dist/cjs/versions.js
CHANGED
|
@@ -1,38 +1,7 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { FormRow, InputErrorText, Label, TextField, } from '@manuscripts/style-guide';
|
|
2
2
|
import { Field, Formik } from 'formik';
|
|
3
3
|
import React, { useRef } from 'react';
|
|
4
|
-
import styled from 'styled-components';
|
|
5
4
|
import { ChangeHandlingForm } from '../ChangeHandlingForm';
|
|
6
|
-
const AffiliationsTextField = styled(TextField) `
|
|
7
|
-
border-radius: 0;
|
|
8
|
-
background: transparent;
|
|
9
|
-
margin-bottom: 4px;
|
|
10
|
-
border-radius: ${(props) => props.theme.grid.radius.default};
|
|
11
|
-
&[aria-invalid] {
|
|
12
|
-
background: ${(props) => props.theme.colors.background.warning};
|
|
13
|
-
}
|
|
14
|
-
|
|
15
|
-
&[aria-invalid]:focus {
|
|
16
|
-
background: transparent;
|
|
17
|
-
}
|
|
18
|
-
`;
|
|
19
|
-
const DepartmentTextField = styled(TextArea) `
|
|
20
|
-
border-radius: 0;
|
|
21
|
-
background: transparent;
|
|
22
|
-
margin-bottom: 4px;
|
|
23
|
-
min-height: 60px;
|
|
24
|
-
border-radius: ${(props) => props.theme.grid.radius.default};
|
|
25
|
-
&[aria-invalid] {
|
|
26
|
-
background: ${(props) => props.theme.colors.background.warning};
|
|
27
|
-
}
|
|
28
|
-
|
|
29
|
-
&[aria-invalid]:focus {
|
|
30
|
-
background: transparent;
|
|
31
|
-
}
|
|
32
|
-
`;
|
|
33
|
-
const MarginRightTextField = styled(AffiliationsTextField) `
|
|
34
|
-
margin-right: 4px;
|
|
35
|
-
`;
|
|
36
5
|
export const AffiliationForm = ({ values, onSave, onChange, actionsRef, }) => {
|
|
37
6
|
if (actionsRef && !actionsRef.current) {
|
|
38
7
|
actionsRef.current = {
|
|
@@ -50,36 +19,36 @@ export const AffiliationForm = ({ values, onSave, onChange, actionsRef, }) => {
|
|
|
50
19
|
return errors;
|
|
51
20
|
};
|
|
52
21
|
return (React.createElement(Formik, { initialValues: values, onSubmit: onSave, innerRef: formRef, enableReinitialize: true, validate: validateAffiliation }, (formik) => (React.createElement(ChangeHandlingForm, { onChange: onChange, id: "affiliation-form", noValidate: true },
|
|
53
|
-
React.createElement(FormLabel, null, "Institution*"),
|
|
54
22
|
React.createElement(FormRow, null,
|
|
55
23
|
React.createElement(Field, { name: "institution" }, (props) => {
|
|
56
24
|
const hasError = formik.touched.institution && formik.errors.institution;
|
|
57
25
|
return (React.createElement(React.Fragment, null,
|
|
58
|
-
React.createElement(Label, { htmlFor: "institution" }, "Institution Name"),
|
|
59
|
-
React.createElement(
|
|
26
|
+
React.createElement(Label, { htmlFor: "institution" }, "Institution Name*"),
|
|
27
|
+
React.createElement(TextField, { id: "institution", ...props.field, error: hasError }),
|
|
60
28
|
hasError && (React.createElement(InputErrorText, null, formik.errors.institution))));
|
|
61
29
|
})),
|
|
62
|
-
React.createElement(FormLabel, null, "Details"),
|
|
63
30
|
React.createElement(FormRow, null,
|
|
64
31
|
React.createElement(Field, { name: "department" }, (props) => (React.createElement(React.Fragment, null,
|
|
65
32
|
React.createElement(Label, { htmlFor: "department" }, "Department"),
|
|
66
|
-
React.createElement(
|
|
33
|
+
React.createElement(TextField, { id: "department", ...props.field }))))),
|
|
67
34
|
React.createElement(FormRow, null,
|
|
68
35
|
React.createElement(Field, { name: "addressLine1" }, (props) => (React.createElement(React.Fragment, null,
|
|
69
36
|
React.createElement(Label, { htmlFor: "addressLine1" }, "Street Address"),
|
|
70
|
-
React.createElement(
|
|
37
|
+
React.createElement(TextField, { id: "addressLine1", ...props.field }))))),
|
|
71
38
|
React.createElement(FormRow, null,
|
|
72
39
|
React.createElement(Field, { name: "city" }, (props) => (React.createElement(React.Fragment, null,
|
|
73
40
|
React.createElement(Label, { htmlFor: "city" }, "City"),
|
|
74
|
-
React.createElement(
|
|
41
|
+
React.createElement(TextField, { id: "city", ...props.field }))))),
|
|
42
|
+
React.createElement(FormRow, null,
|
|
75
43
|
React.createElement(Field, { name: "county" }, (props) => (React.createElement(React.Fragment, null,
|
|
76
44
|
React.createElement(Label, { htmlFor: "county" }, "State / Province"),
|
|
77
|
-
React.createElement(
|
|
45
|
+
React.createElement(TextField, { id: "county", ...props.field }))))),
|
|
78
46
|
React.createElement(FormRow, null,
|
|
79
47
|
React.createElement(Field, { name: "postCode" }, (props) => (React.createElement(React.Fragment, null,
|
|
80
48
|
React.createElement(Label, { htmlFor: "postCode" }, "Postal Code"),
|
|
81
|
-
React.createElement(
|
|
49
|
+
React.createElement(TextField, { id: "postCode", ...props.field }))))),
|
|
50
|
+
React.createElement(FormRow, null,
|
|
82
51
|
React.createElement(Field, { name: "country" }, ({ field }) => (React.createElement(React.Fragment, null,
|
|
83
52
|
React.createElement(Label, { htmlFor: "country" }, "Country"),
|
|
84
|
-
React.createElement(
|
|
53
|
+
React.createElement(TextField, { id: "country", ...field })))))))));
|
|
85
54
|
};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { AddIcon, AddUserIcon, AffiliationPlaceholderIcon, CloseButton, ModalBody, ModalContainer, ModalHeader, ModalSidebar, ModalSidebarHeader, ModalSidebarTitle, ScrollableModalContent, SidebarContent, StyledModal, } from '@manuscripts/style-guide';
|
|
1
|
+
import { AddIcon, AddUserIcon, AffiliationPlaceholderIcon, CloseButton, InspectorTab, InspectorTabList, InspectorTabPanel, InspectorTabPanels, InspectorTabs, ModalBody, ModalContainer, ModalHeader, ModalSidebar, ModalSidebarHeader, ModalSidebarTitle, ScrollableModalContent, SidebarContent, StyledModal, } from '@manuscripts/style-guide';
|
|
2
2
|
import { generateNodeID, schema } from '@manuscripts/transform';
|
|
3
3
|
import { isEqual } from 'lodash';
|
|
4
4
|
import React, { useCallback, useEffect, useReducer, useRef, useState, } from 'react';
|
|
@@ -326,15 +326,21 @@ export const AffiliationsModal = ({ authors: $authors, affiliations: $affiliatio
|
|
|
326
326
|
React.createElement(AddIcon, { width: 18, height: 18 }),
|
|
327
327
|
React.createElement(ActionTitle, null, "New Affiliation")),
|
|
328
328
|
React.createElement(AffiliationList, { affiliation: selection, affiliations: affiliations, onSelect: handleSelect, onDelete: handleShowDeleteDialog, lastSavedAffiliationId: savedAffiliationId }))),
|
|
329
|
-
React.createElement(
|
|
330
|
-
React.createElement(
|
|
329
|
+
React.createElement(ScrollableModalContent, { "data-cy": "affiliations-modal-content" }, selection ? (React.createElement(React.Fragment, null,
|
|
330
|
+
React.createElement(AffiliationTabs, null,
|
|
331
331
|
React.createElement(ModalFormActions, { type: 'affiliation', form: 'affiliation-form', onDelete: handleDeleteAffiliation, showingDeleteDialog: showingDeleteDialog, showDeleteDialog: handleShowDeleteDialog, newEntity: newAffiliation, isDisableSave: isDisableSave }),
|
|
332
|
-
React.createElement(
|
|
333
|
-
|
|
334
|
-
|
|
335
|
-
React.createElement(
|
|
336
|
-
|
|
337
|
-
|
|
332
|
+
React.createElement(InspectorTabList, null,
|
|
333
|
+
React.createElement(InspectorTab, null, "Details"),
|
|
334
|
+
React.createElement(InspectorTab, null, "Authors")),
|
|
335
|
+
React.createElement(InspectorTabPanels, null,
|
|
336
|
+
React.createElement(AffiliationTabPanel, null,
|
|
337
|
+
React.createElement(AffiliationForm, { values: checkID(selection, 'affiliation'), onSave: () => handleSaveAffiliation(valuesRef.current), onChange: handleAffiliationChange, actionsRef: actionsRef })),
|
|
338
|
+
React.createElement(AffiliationTabPanel, null,
|
|
339
|
+
React.createElement(DrawerGroup, { Drawer: GenericDrawer, removeItem: (id) => {
|
|
340
|
+
setSelectedAuthorIds((prev) => prev.filter((authorId) => authorId !== id));
|
|
341
|
+
}, selectedItems: selectedAuthors, onSelect: selectAuthor, items: makeAuthorItems(authors), showDrawer: showAuthorDrawer, setShowDrawer: setShowAuthorDrawer, title: "Authors", cy: "affiliations", labelField: "label", buttonText: "Affiliate Authors", Icon: React.createElement(AddUserIcon, { width: 16, height: 16 }) })))),
|
|
342
|
+
React.createElement(ConfirmationDialog, { isOpen: showRequiredFieldConfirmationDialog, onPrimary: () => setShowRequiredFieldConfirmationDialog(false), onSecondary: handleConfirmationCancel, type: DialogType.REQUIRED, entityType: "affiliation" }),
|
|
343
|
+
React.createElement(ConfirmationDialog, { isOpen: showConfirmationDialog, onPrimary: handleConfirmationSave, onSecondary: handleConfirmationCancel, type: DialogType.SAVE, entityType: "affiliation" }))) : (React.createElement(FormPlaceholder, { type: "affiliation", title: "Affiliation Details", message: "Select an affiliation from the list to display it's details here.", placeholderIcon: React.createElement(AffiliationPlaceholderIcon, null) })))),
|
|
338
344
|
React.createElement(FormFooter, { onCancel: handleClose }))));
|
|
339
345
|
};
|
|
340
346
|
function createEmptyAffiliation(priority) {
|
|
@@ -374,14 +380,12 @@ const AddAffiliationButton = styled.div `
|
|
|
374
380
|
const ActionTitle = styled.div `
|
|
375
381
|
padding-left: ${(props) => props.theme.grid.unit * 2}px;
|
|
376
382
|
`;
|
|
377
|
-
const
|
|
378
|
-
padding-left: ${(props) => props.theme.grid.unit * 3}px;
|
|
379
|
-
padding-right: ${(props) => props.theme.grid.unit * 3}px;
|
|
380
|
-
margin-top: 20px;
|
|
381
|
-
`;
|
|
382
|
-
const DrawerRelativeParent = styled.div `
|
|
383
|
+
const AffiliationTabs = styled(InspectorTabs) `
|
|
383
384
|
position: relative;
|
|
384
385
|
`;
|
|
386
|
+
const AffiliationTabPanel = styled(InspectorTabPanel).attrs({ unmount: false }) `
|
|
387
|
+
margin-top: ${(props) => props.theme.grid.unit * 4}px;
|
|
388
|
+
`;
|
|
385
389
|
const StyledModalBody = styled(ModalBody) `
|
|
386
390
|
position: relative;
|
|
387
391
|
height: calc(90vh - 40px);
|
|
@@ -68,43 +68,42 @@ export const AuthorDetailsForm = ({ values, onChange, onSave, actionsRef, isEmai
|
|
|
68
68
|
};
|
|
69
69
|
return (React.createElement(Formik, { initialValues: values, onSubmit: onSave, enableReinitialize: true, validateOnChange: true, innerRef: formRef, validate: validateAuthor }, (formik) => {
|
|
70
70
|
return (React.createElement(ChangeHandlingForm, { onChange: onChange, id: "author-details-form", formRef: authorFormRef, noValidate: true },
|
|
71
|
-
React.createElement(
|
|
71
|
+
React.createElement(FormRow, null,
|
|
72
|
+
React.createElement(Field, { name: 'prefix' }, (props) => (React.createElement(React.Fragment, null,
|
|
73
|
+
React.createElement(Label, { htmlFor: "prefix" }, "Prefix"),
|
|
74
|
+
React.createElement(TextField, { id: 'prefix', ...props.field }))))),
|
|
75
|
+
React.createElement(FormRow, null,
|
|
76
|
+
React.createElement(Field, { name: 'bibliographicName.given' }, (props) => (React.createElement(React.Fragment, null,
|
|
77
|
+
React.createElement(Label, { htmlFor: "given-name" }, "Given name"),
|
|
78
|
+
React.createElement(TextField, { id: 'given-name', ...props.field }))))),
|
|
79
|
+
React.createElement(FormRow, null,
|
|
80
|
+
React.createElement(Field, { name: 'bibliographicName.family' }, (props) => (React.createElement(React.Fragment, null,
|
|
81
|
+
React.createElement(Label, { htmlFor: "family-name" }, "Family name"),
|
|
82
|
+
React.createElement(TextField, { id: 'family-name', ...props.field }))))),
|
|
83
|
+
React.createElement(FormRow, null,
|
|
84
|
+
React.createElement(Field, { name: 'role' }, (props) => (React.createElement(React.Fragment, null,
|
|
85
|
+
React.createElement(Label, { htmlFor: "role" }, "Job Title"),
|
|
86
|
+
React.createElement(TextField, { id: 'role', ...props.field }))))),
|
|
87
|
+
React.createElement(FormRow, null,
|
|
88
|
+
React.createElement(Field, { name: 'email', type: 'email' }, (props) => {
|
|
89
|
+
const hasError = getIn(formik.touched, 'email') &&
|
|
90
|
+
getIn(formik.errors, 'email');
|
|
91
|
+
return (React.createElement(React.Fragment, null,
|
|
92
|
+
React.createElement(Label, { htmlFor: "email" }, isEmailRequired
|
|
93
|
+
? 'Email address*'
|
|
94
|
+
: 'Email address'),
|
|
95
|
+
React.createElement(TextFieldWithError, { id: 'email', type: "email", required: isEmailRequired, ...props.field, error: hasError }),
|
|
96
|
+
hasError && (React.createElement(InputErrorText, null, getIn(formik.errors, 'email')))));
|
|
97
|
+
})),
|
|
98
|
+
React.createElement(CheckboxContainer, null,
|
|
99
|
+
React.createElement(CheckboxLabel, null,
|
|
100
|
+
React.createElement(Field, { name: 'isCorresponding' }, (props) => (React.createElement(CheckboxField, { id: 'isCorresponding', checked: props.field.value, ...props.field }))),
|
|
101
|
+
React.createElement(LabelText, null, "Corresponding Author"))),
|
|
102
|
+
React.createElement(OrcidContainer, null,
|
|
72
103
|
React.createElement(FormRow, null,
|
|
73
|
-
React.createElement(
|
|
74
|
-
|
|
75
|
-
React.createElement(
|
|
76
|
-
|
|
77
|
-
React.createElement(Field, { name: 'bibliographicName.given' }, (props) => (React.createElement(React.Fragment, null,
|
|
78
|
-
React.createElement(Label, { htmlFor: "given-name" }, "Given name"),
|
|
79
|
-
React.createElement(TextField, { id: 'given-name', ...props.field }))))),
|
|
80
|
-
React.createElement(FormRow, null,
|
|
81
|
-
React.createElement(Field, { name: 'bibliographicName.family' }, (props) => (React.createElement(React.Fragment, null,
|
|
82
|
-
React.createElement(Label, { htmlFor: "family-name" }, "Family name"),
|
|
83
|
-
React.createElement(TextField, { id: 'family-name', ...props.field }))))),
|
|
84
|
-
React.createElement(FormRow, null,
|
|
85
|
-
React.createElement(Field, { name: 'email', type: 'email' }, (props) => {
|
|
86
|
-
const hasError = getIn(formik.touched, 'email') &&
|
|
87
|
-
getIn(formik.errors, 'email');
|
|
88
|
-
return (React.createElement(React.Fragment, null,
|
|
89
|
-
React.createElement(Label, { htmlFor: "email" }, isEmailRequired
|
|
90
|
-
? 'Email address (required)'
|
|
91
|
-
: 'Email address'),
|
|
92
|
-
React.createElement(TextFieldWithError, { id: 'email', type: "email", required: isEmailRequired, ...props.field, error: hasError }),
|
|
93
|
-
hasError && (React.createElement(InputErrorText, null, getIn(formik.errors, 'email')))));
|
|
94
|
-
})),
|
|
95
|
-
React.createElement(FormRow, null,
|
|
96
|
-
React.createElement(Field, { name: 'role' }, (props) => (React.createElement(React.Fragment, null,
|
|
97
|
-
React.createElement(Label, { htmlFor: "role" }, "Job Title"),
|
|
98
|
-
React.createElement(TextField, { id: 'role', ...props.field }))))),
|
|
99
|
-
React.createElement(CheckboxContainer, null,
|
|
100
|
-
React.createElement(CheckboxLabel, null,
|
|
101
|
-
React.createElement(Field, { name: 'isCorresponding' }, (props) => (React.createElement(CheckboxField, { id: 'isCorresponding', checked: props.field.value, ...props.field }))),
|
|
102
|
-
React.createElement(LabelText, null, "Corresponding Author"))),
|
|
103
|
-
React.createElement(OrcidContainer, null,
|
|
104
|
-
React.createElement(FormRow, null,
|
|
105
|
-
React.createElement(Label, { htmlFor: "orcid" }, "ORCID"),
|
|
106
|
-
React.createElement(Field, { name: 'ORCIDIdentifier', type: 'text' }, (props) => (React.createElement(React.Fragment, null,
|
|
107
|
-
React.createElement(Label, { htmlFor: "orcid", className: "sr-only" }, "ORCID"),
|
|
108
|
-
React.createElement(TextField, { id: 'orcid', placeholder: 'https://orcid.org/...', pattern: "https://orcid\\.org/\\d{4}-\\d{4}-\\d{4}-\\d{3}[0-9Xx]", title: "Please enter a valid ORCID URL format: https://orcid.org/xxxx-xxxx-xxxx-xxxx", ...props.field })))))))));
|
|
104
|
+
React.createElement(Label, { htmlFor: "orcid" }, "ORCID"),
|
|
105
|
+
React.createElement(Field, { name: 'ORCIDIdentifier', type: 'text' }, (props) => (React.createElement(React.Fragment, null,
|
|
106
|
+
React.createElement(Label, { htmlFor: "orcid", className: "sr-only" }, "ORCID"),
|
|
107
|
+
React.createElement(TextField, { id: 'orcid', placeholder: 'https://orcid.org/...', pattern: "https://orcid\\.org/\\d{4}-\\d{4}-\\d{4}-\\d{3}[0-9Xx]", title: "Please enter a valid ORCID URL format: https://orcid.org/xxxx-xxxx-xxxx-xxxx", ...props.field }))))))));
|
|
109
108
|
}));
|
|
110
109
|
};
|
|
@@ -14,7 +14,7 @@
|
|
|
14
14
|
* limitations under the License.
|
|
15
15
|
*/
|
|
16
16
|
import { buildBibliographicName, } from '@manuscripts/json-schema';
|
|
17
|
-
import { AddIcon, AddInstitutionIcon, AddRoleIcon, AuthorPlaceholderIcon, CloseButton, ModalBody, ModalContainer, ModalHeader, ModalSidebar, ModalSidebarHeader, ModalSidebarTitle, ScrollableModalContent, SidebarContent, StyledModal,
|
|
17
|
+
import { AddIcon, AddInstitutionIcon, AddRoleIcon, AuthorPlaceholderIcon, CloseButton, ModalBody, ModalContainer, ModalHeader, ModalSidebar, ModalSidebarHeader, ModalSidebarTitle, ScrollableModalContent, SidebarContent, StyledModal, InspectorTabs, InspectorTabPanel, InspectorTabList, InspectorTab, InspectorTabPanels, } from '@manuscripts/style-guide';
|
|
18
18
|
import { generateNodeID, schema } from '@manuscripts/transform';
|
|
19
19
|
import { cloneDeep, isEqual, omit } from 'lodash';
|
|
20
20
|
import React, { useCallback, useEffect, useReducer, useRef, useState, } from 'react';
|
|
@@ -308,21 +308,28 @@ export const AuthorsModal = ({ authors: $authors, affiliations: $affiliations, a
|
|
|
308
308
|
React.createElement(AddIcon, { width: 18, height: 18 }),
|
|
309
309
|
React.createElement(ActionTitle, null, "New Author")),
|
|
310
310
|
React.createElement(AuthorList, { author: selection, authors: authors, onSelect: selectAuthor, onDelete: () => setShowDeleteDialog((prev) => !prev), moveAuthor: moveAuthor, lastSavedAuthor: lastSavedAuthor }))),
|
|
311
|
-
React.createElement(
|
|
312
|
-
React.createElement(
|
|
313
|
-
React.createElement(ConfirmationDialog, { isOpen: showRequiredFieldConfirmationDialog, onPrimary: () => setShowRequiredFieldConfirmationDialog(false), onSecondary: cancel, type: DialogType.REQUIRED, entityType: "author" }),
|
|
314
|
-
React.createElement(ConfirmationDialog, { isOpen: showConfirmationDialog, onPrimary: save, onSecondary: cancel, type: DialogType.SAVE, entityType: "author" }),
|
|
311
|
+
React.createElement(ScrollableModalContent, { "data-cy": "author-modal-content" }, selection ? (React.createElement(React.Fragment, null,
|
|
312
|
+
React.createElement(AuthorTabs, null,
|
|
315
313
|
React.createElement(ModalFormActions, { form: 'author-details-form', type: "author", onDelete: deleteAuthor, showingDeleteDialog: showingDeleteDialog, showDeleteDialog: () => setShowDeleteDialog((prev) => !prev), newEntity: newAuthor ||
|
|
316
314
|
(isCreatingNewAuthor &&
|
|
317
315
|
!showConfirmationDialog &&
|
|
318
316
|
!showRequiredFieldConfirmationDialog), isDisableSave: isDisableSave }),
|
|
319
|
-
React.createElement(
|
|
320
|
-
|
|
321
|
-
|
|
322
|
-
|
|
323
|
-
|
|
324
|
-
|
|
325
|
-
|
|
317
|
+
React.createElement(InspectorTabList, null,
|
|
318
|
+
React.createElement(InspectorTab, null, "Details"),
|
|
319
|
+
React.createElement(InspectorTab, null, "Affiliations"),
|
|
320
|
+
React.createElement(InspectorTab, null, "Contributions (CRediT)")),
|
|
321
|
+
React.createElement(InspectorTabPanels, null,
|
|
322
|
+
React.createElement(AuthorTabPanel, null,
|
|
323
|
+
React.createElement(AuthorDetailsForm, { values: normalizeAuthor(selection), onChange: changeAuthor, onSave: saveAuthor, actionsRef: actionsRef, isEmailRequired: isEmailRequired, selectedAffiliations: selectedAffiliations.map((a) => a.id), authorFormRef: authorFormRef, selectedCreditRoles: selectedCreditRoles })),
|
|
324
|
+
React.createElement(AuthorTabPanel, null,
|
|
325
|
+
React.createElement(DrawerGroup, { Drawer: AffiliationsDrawer, removeItem: removeAffiliation, selectedItems: selectedAffiliations, onSelect: selectAffiliation, items: affiliations, showDrawer: showAffiliationDrawer, setShowDrawer: setShowAffiliationDrawer, title: "Affiliations", buttonText: "Assign Institutions", cy: "affiliations", labelField: "institution", Icon: React.createElement(AddInstitutionIcon, { width: 16, height: 16 }) })),
|
|
326
|
+
React.createElement(AuthorTabPanel, null,
|
|
327
|
+
React.createElement(DrawerGroup, { Drawer: CreditDrawer, removeItem: removeCreditRole, selectedItems: selectedCreditRoles.map((r) => ({
|
|
328
|
+
id: r.vocabTerm,
|
|
329
|
+
...r,
|
|
330
|
+
})), onSelect: selectCreditRole, items: vocabTermItems, showDrawer: showCreditDrawer, setShowDrawer: setShowCreditDrawer, title: "Contributions (CRediT)", buttonText: "Assign Roles", cy: "credit-taxnonomy", labelField: "vocabTerm", Icon: React.createElement(AddRoleIcon, { width: 16, height: 16 }) })))),
|
|
331
|
+
React.createElement(ConfirmationDialog, { isOpen: showRequiredFieldConfirmationDialog, onPrimary: () => setShowRequiredFieldConfirmationDialog(false), onSecondary: cancel, type: DialogType.REQUIRED, entityType: "author" }),
|
|
332
|
+
React.createElement(ConfirmationDialog, { isOpen: showConfirmationDialog, onPrimary: save, onSecondary: cancel, type: DialogType.SAVE, entityType: "author" }))) : (React.createElement(FormPlaceholder, { type: "author", title: "Author Details", message: "Select an author from the list to display their details here.", placeholderIcon: React.createElement(AuthorPlaceholderIcon, null) })))),
|
|
326
333
|
React.createElement(FormFooter, { onCancel: close }))));
|
|
327
334
|
};
|
|
328
335
|
function createEmptyAuthor(name, priority) {
|
|
@@ -358,10 +365,11 @@ const AddAuthorButton = styled.div `
|
|
|
358
365
|
const ActionTitle = styled.div `
|
|
359
366
|
padding-left: ${(props) => props.theme.grid.unit * 2}px;
|
|
360
367
|
`;
|
|
361
|
-
const
|
|
362
|
-
|
|
363
|
-
|
|
364
|
-
|
|
368
|
+
const AuthorTabs = styled(InspectorTabs) `
|
|
369
|
+
position: relative;
|
|
370
|
+
`;
|
|
371
|
+
const AuthorTabPanel = styled(InspectorTabPanel).attrs({ unmount: false }) `
|
|
372
|
+
margin-top: ${(props) => props.theme.grid.unit * 4}px;
|
|
365
373
|
`;
|
|
366
374
|
const StyledSidebarContent = styled(SidebarContent) `
|
|
367
375
|
padding: 0;
|
|
@@ -373,6 +381,3 @@ const StyledModalBody = styled(ModalBody) `
|
|
|
373
381
|
const StyledModalSidebarHeader = styled(ModalSidebarHeader) `
|
|
374
382
|
margin-bottom: 16px;
|
|
375
383
|
`;
|
|
376
|
-
const DrawerRelativeParent = styled.div `
|
|
377
|
-
position: relative;
|
|
378
|
-
`;
|
|
@@ -16,15 +16,7 @@ const TwoColumnContainer = styled(DrawerItemsList) `
|
|
|
16
16
|
flex-flow: row wrap;
|
|
17
17
|
padding: 0 ${(props) => props.theme.grid.unit * 4}px;
|
|
18
18
|
position: relative;
|
|
19
|
-
|
|
20
|
-
&:after {
|
|
21
|
-
content: '';
|
|
22
|
-
display: block;
|
|
23
|
-
border-bottom: 1px solid #f0f0f0;
|
|
24
|
-
min-width: 100%;
|
|
25
|
-
padding-top: 16px;
|
|
26
|
-
}
|
|
27
19
|
`;
|
|
28
20
|
const TwoColumnCheckbox = styled(CheckboxContainer) `
|
|
29
|
-
flex 1 0 50%;
|
|
21
|
+
flex: 1 0 50%;
|
|
30
22
|
`;
|
|
@@ -4,6 +4,9 @@ import styled from 'styled-components';
|
|
|
4
4
|
import { ConfirmationDialog, DialogType } from '../dialog/ConfirmationDialog';
|
|
5
5
|
const ActionsContainer = styled.div `
|
|
6
6
|
display: flex;
|
|
7
|
+
position: absolute;
|
|
8
|
+
top: 5px;
|
|
9
|
+
right: 5px;
|
|
7
10
|
`;
|
|
8
11
|
const StyledButtonGroup = styled(ButtonGroup) `
|
|
9
12
|
flex: 1;
|
|
@@ -18,27 +18,15 @@ import React from 'react';
|
|
|
18
18
|
import styled from 'styled-components';
|
|
19
19
|
export function DrawerGroup({ removeItem, selectedItems, onSelect, items, showDrawer, setShowDrawer, title, labelField, Drawer, cy, Icon, buttonText, }) {
|
|
20
20
|
return (React.createElement(React.Fragment, null,
|
|
21
|
-
React.createElement(
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
id: String(i.id),
|
|
29
|
-
label: String(i[labelField] ?? ''),
|
|
30
|
-
})), onRemove: removeItem, placeholder: `No ${title.endsWith('s') ? title : title + 's'} assigned` })),
|
|
21
|
+
React.createElement(AssignButton, { onClick: () => setShowDrawer(true), "data-cy": cy + 'assign-button' },
|
|
22
|
+
Icon,
|
|
23
|
+
buttonText),
|
|
24
|
+
React.createElement(SelectedItemsBox, { "data-cy": cy + '-selected-items', items: selectedItems.map((i) => ({
|
|
25
|
+
id: String(i.id),
|
|
26
|
+
label: String(i[labelField] ?? ''),
|
|
27
|
+
})), onRemove: removeItem, placeholder: `No ${title} assigned` }),
|
|
31
28
|
showDrawer && (React.createElement(Drawer, { items: items, selectedItems: selectedItems, title: title, onSelect: onSelect, onBack: () => setShowDrawer(false), width: "100%" }))));
|
|
32
29
|
}
|
|
33
|
-
const DrawerSectionTitle = styled.h3 `
|
|
34
|
-
margin: 0;
|
|
35
|
-
padding-bottom: 12px;
|
|
36
|
-
font: ${(props) => props.theme.font.weight.normal}
|
|
37
|
-
${(props) => props.theme.font.size.xlarge} /
|
|
38
|
-
${(props) => props.theme.font.lineHeight.large}
|
|
39
|
-
${(props) => props.theme.font.family.sans};
|
|
40
|
-
color: ${(props) => props.theme.colors.text.secondary};
|
|
41
|
-
`;
|
|
42
30
|
export const AssignButton = styled.button `
|
|
43
31
|
color: ${(props) => props.theme.colors.brand.default};
|
|
44
32
|
background: none;
|
|
@@ -51,20 +39,8 @@ export const AssignButton = styled.button `
|
|
|
51
39
|
display: flex;
|
|
52
40
|
align-items: center;
|
|
53
41
|
gap: 4px;
|
|
54
|
-
margin-
|
|
42
|
+
margin-bottom: ${(props) => props.theme.grid.unit * 2}px;
|
|
55
43
|
&:hover {
|
|
56
44
|
opacity: 0.8;
|
|
57
45
|
}
|
|
58
46
|
`;
|
|
59
|
-
export const DrawerSectionHeader = styled.div `
|
|
60
|
-
display: flex;
|
|
61
|
-
justify-content: space-between;
|
|
62
|
-
align-items: flex-start;
|
|
63
|
-
flex-direction: column;
|
|
64
|
-
margin-bottom: ${(props) => props.theme.grid.unit * 2}px;
|
|
65
|
-
`;
|
|
66
|
-
export const DrawerSection = styled.div `
|
|
67
|
-
margin-top: ${(props) => props.theme.grid.unit * 4}px;
|
|
68
|
-
padding-top: ${(props) => props.theme.grid.unit * 4}px;
|
|
69
|
-
border-top: 1px solid ${(props) => props.theme.colors.border.tertiary};
|
|
70
|
-
`;
|
package/dist/es/versions.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export const VERSION = '3.
|
|
1
|
+
export const VERSION = '3.10.0';
|
|
2
2
|
export const MATHJAX_VERSION = '3.2.2';
|
|
@@ -40,6 +40,4 @@ interface EmbeddedDrawerProps<T extends Base> {
|
|
|
40
40
|
}
|
|
41
41
|
export declare function DrawerGroup<T extends Base>({ removeItem, selectedItems, onSelect, items, showDrawer, setShowDrawer, title, labelField, Drawer, cy, Icon, buttonText, }: DrawerGroupProps<T>): React.JSX.Element;
|
|
42
42
|
export declare const AssignButton: import("styled-components").StyledComponent<"button", any, {}, never>;
|
|
43
|
-
export declare const DrawerSectionHeader: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
44
|
-
export declare const DrawerSection: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
45
43
|
export {};
|
package/dist/types/versions.d.ts
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export declare const VERSION = "3.
|
|
1
|
+
export declare const VERSION = "3.10.0";
|
|
2
2
|
export declare const MATHJAX_VERSION = "3.2.2";
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@manuscripts/body-editor",
|
|
3
3
|
"description": "Prosemirror components for editing and viewing manuscripts",
|
|
4
|
-
"version": "3.
|
|
4
|
+
"version": "3.10.0",
|
|
5
5
|
"repository": "github:Atypon-OpenSource/manuscripts-body-editor",
|
|
6
6
|
"license": "Apache-2.0",
|
|
7
7
|
"main": "dist/cjs",
|
|
@@ -38,8 +38,8 @@
|
|
|
38
38
|
"@citation-js/plugin-ris": "0.7.18",
|
|
39
39
|
"@iarna/word-count": "1.1.2",
|
|
40
40
|
"@manuscripts/json-schema": "2.2.12",
|
|
41
|
-
"@manuscripts/style-guide": "3.
|
|
42
|
-
"@manuscripts/track-changes-plugin": "2.
|
|
41
|
+
"@manuscripts/style-guide": "3.5.0",
|
|
42
|
+
"@manuscripts/track-changes-plugin": "2.3.0",
|
|
43
43
|
"@manuscripts/transform": "4.3.22",
|
|
44
44
|
"@popperjs/core": "2.11.8",
|
|
45
45
|
"citeproc": "2.4.63",
|