@manuscripts/style-guide 1.11.2 → 1.11.3-LEAN-3514.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (43) hide show
  1. package/dist/cjs/components/icons/index.js +5 -1
  2. package/dist/cjs/index.js +2 -1
  3. package/dist/es/components/icons/index.js +2 -0
  4. package/dist/es/index.js +2 -1
  5. package/dist/types/components/icons/index.d.ts +2 -0
  6. package/dist/types/index.d.ts +2 -1
  7. package/package.json +2 -2
  8. package/dist/cjs/components/References/BibliographyItemSource.js +0 -91
  9. package/dist/cjs/components/References/CitationEditor.js +0 -143
  10. package/dist/cjs/components/References/CitationViewer.js +0 -69
  11. package/dist/cjs/components/References/ReferenceForm.js +0 -414
  12. package/dist/cjs/components/References/ReferenceLine.js +0 -52
  13. package/dist/cjs/components/References/ReferenceSearch.js +0 -124
  14. package/dist/cjs/components/References/ReferenceSearchResults.js +0 -68
  15. package/dist/cjs/components/References/ReferenceSearchResultsPlaceholder.js +0 -43
  16. package/dist/cjs/components/References/ReferenceSearchSection.js +0 -118
  17. package/dist/cjs/components/References/ReferencesModal.js +0 -226
  18. package/dist/cjs/components/References/SearchInput.js +0 -103
  19. package/dist/cjs/components/References/index.js +0 -20
  20. package/dist/es/components/References/BibliographyItemSource.js +0 -64
  21. package/dist/es/components/References/CitationEditor.js +0 -113
  22. package/dist/es/components/References/CitationViewer.js +0 -39
  23. package/dist/es/components/References/ReferenceForm.js +0 -384
  24. package/dist/es/components/References/ReferenceLine.js +0 -42
  25. package/dist/es/components/References/ReferenceSearch.js +0 -94
  26. package/dist/es/components/References/ReferenceSearchResults.js +0 -61
  27. package/dist/es/components/References/ReferenceSearchResultsPlaceholder.js +0 -36
  28. package/dist/es/components/References/ReferenceSearchSection.js +0 -88
  29. package/dist/es/components/References/ReferencesModal.js +0 -195
  30. package/dist/es/components/References/SearchInput.js +0 -73
  31. package/dist/es/components/References/index.js +0 -4
  32. package/dist/types/components/References/BibliographyItemSource.d.ts +0 -38
  33. package/dist/types/components/References/CitationEditor.d.ts +0 -18
  34. package/dist/types/components/References/CitationViewer.d.ts +0 -24
  35. package/dist/types/components/References/ReferenceForm.d.ts +0 -35
  36. package/dist/types/components/References/ReferenceLine.d.ts +0 -10
  37. package/dist/types/components/References/ReferenceSearch.d.ts +0 -26
  38. package/dist/types/components/References/ReferenceSearchResults.d.ts +0 -26
  39. package/dist/types/components/References/ReferenceSearchResultsPlaceholder.d.ts +0 -2
  40. package/dist/types/components/References/ReferenceSearchSection.d.ts +0 -25
  41. package/dist/types/components/References/ReferencesModal.d.ts +0 -14
  42. package/dist/types/components/References/SearchInput.d.ts +0 -18
  43. package/dist/types/components/References/index.d.ts +0 -4
@@ -1,414 +0,0 @@
1
- "use strict";
2
- /*!
3
- * © 2023 Atypon Systems LLC
4
- *
5
- * Licensed under the Apache License, Version 2.0 (the "License");
6
- * you may not use this file except in compliance with the License.
7
- * You may obtain a copy of the License at
8
- *
9
- * http://www.apache.org/licenses/LICENSE-2.0
10
- *
11
- * Unless required by applicable law or agreed to in writing, software
12
- * distributed under the License is distributed on an "AS IS" BASIS,
13
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
14
- * See the License for the specific language governing permissions and
15
- * limitations under the License.
16
- */
17
- var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
18
- if (k2 === undefined) k2 = k;
19
- var desc = Object.getOwnPropertyDescriptor(m, k);
20
- if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
21
- desc = { enumerable: true, get: function() { return m[k]; } };
22
- }
23
- Object.defineProperty(o, k2, desc);
24
- }) : (function(o, m, k, k2) {
25
- if (k2 === undefined) k2 = k;
26
- o[k2] = m[k];
27
- }));
28
- var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
29
- Object.defineProperty(o, "default", { enumerable: true, value: v });
30
- }) : function(o, v) {
31
- o["default"] = v;
32
- });
33
- var __importStar = (this && this.__importStar) || function (mod) {
34
- if (mod && mod.__esModule) return mod;
35
- var result = {};
36
- if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
37
- __setModuleDefault(result, mod);
38
- return result;
39
- };
40
- var __importDefault = (this && this.__importDefault) || function (mod) {
41
- return (mod && mod.__esModule) ? mod : { "default": mod };
42
- };
43
- Object.defineProperty(exports, "__esModule", { value: true });
44
- exports.ReferenceForm = exports.FormFields = exports.FlexForm = exports.ReferenceTextArea = exports.FormField = exports.LabelContainer = void 0;
45
- const AddAuthor_1 = __importDefault(require("@manuscripts/assets/react/AddAuthor"));
46
- const AnnotationRemove_1 = __importDefault(require("@manuscripts/assets/react/AnnotationRemove"));
47
- const ArrowDownBlue_1 = __importDefault(require("@manuscripts/assets/react/ArrowDownBlue"));
48
- const json_schema_1 = require("@manuscripts/json-schema");
49
- const formik_1 = require("formik");
50
- const react_1 = __importStar(require("react"));
51
- const styled_components_1 = __importDefault(require("styled-components"));
52
- const Button_1 = require("../Button");
53
- const Dialog_1 = require("../Dialog");
54
- const delete_icon_1 = require("../icons/delete-icon");
55
- const link_icon_1 = require("../icons/link-icon");
56
- const SelectField_1 = require("../SelectField");
57
- const TextField_1 = require("../TextField");
58
- const Tooltip_1 = require("../Tooltip");
59
- exports.LabelContainer = styled_components_1.default.div `
60
- display: flex;
61
- justify-content: space-between;
62
- align-items: center;
63
- margin-bottom: ${(props) => props.theme.grid.unit}px;
64
- `;
65
- const Label = styled_components_1.default.label `
66
- font-family: ${(props) => props.theme.font.family.sans};
67
- font-size: ${(props) => props.theme.font.size.medium};
68
- display: flex;
69
- color: ${(props) => props.theme.colors.text.secondary};
70
- `;
71
- const FieldLabel = styled_components_1.default.label `
72
- font-family: ${(props) => props.theme.font.family.sans};
73
- font-size: ${(props) => props.theme.font.size.medium};
74
- color: ${(props) => props.theme.colors.text.muted};
75
- padding-right: ${(props) => props.theme.grid.unit * 3}px;
76
- `;
77
- const NameFieldContainer = styled_components_1.default.div `
78
- display: flex;
79
- align-items: center;
80
- justify-content: space-between;
81
- background-color: ${(props) => props.theme.colors.background.primary};
82
- :not(:last-child) {
83
- border-bottom: 1px solid ${(props) => props.theme.colors.text.muted};
84
- }
85
- `;
86
- const NameField = styled_components_1.default.input `
87
- font-size: ${(props) => props.theme.font.size.normal};
88
- padding: ${(props) => props.theme.grid.unit * 2}px
89
- ${(props) => props.theme.grid.unit * 4}px;
90
- box-sizing: border-box;
91
- border: none;
92
- background-color: transparent;
93
- width: 50%;
94
-
95
- &:focus {
96
- outline: none;
97
- }
98
-
99
- &::placeholder {
100
- color: ${(props) => props.theme.colors.text.muted};
101
- }
102
-
103
- &:hover::placeholder {
104
- color: ${(props) => props.theme.colors.text.secondary};
105
- }
106
- `;
107
- const YearField = (0, styled_components_1.default)(formik_1.Field) `
108
- font-family: ${(props) => props.theme.font.family.sans};
109
- padding: ${(props) => props.theme.grid.unit * 2}px
110
- ${(props) => props.theme.grid.unit * 3}px;
111
- font-size: ${(props) => props.theme.font.size.medium};
112
- color: ${(props) => props.theme.colors.text.primary};
113
- border-radius: ${(props) => props.theme.grid.radius.small};
114
- border: solid 1px ${(props) => props.theme.colors.text.muted};
115
- `;
116
- const Button = (0, styled_components_1.default)(Button_1.IconButton).attrs({
117
- defaultColor: true,
118
- size: 24,
119
- }) `
120
- circle,
121
- use {
122
- fill: ${(props) => props.theme.colors.brand.default};
123
- }
124
-
125
- path {
126
- mask: none;
127
- }
128
- `;
129
- const Actions = styled_components_1.default.div `
130
- flex-shrink: 1;
131
- display: flex;
132
- justify-content: space-between;
133
- align-items: center;
134
-
135
- .tooltip {
136
- max-width: ${(props) => props.theme.grid.unit * 39}px;
137
- padding: ${(props) => props.theme.grid.unit * 2}px;
138
- border-radius: 6px;
139
- }
140
- `;
141
- exports.FormField = styled_components_1.default.div `
142
- padding: ${(props) => props.theme.grid.unit * 3}px;
143
- `;
144
- const ReferenceTextField = (0, styled_components_1.default)(TextField_1.TextField) `
145
- padding: ${(props) => props.theme.grid.unit * 2}px
146
- ${(props) => props.theme.grid.unit * 3}px;
147
- `;
148
- exports.ReferenceTextArea = (0, styled_components_1.default)(TextField_1.TextArea) `
149
- padding: ${(props) => props.theme.grid.unit * 2}px
150
- ${(props) => props.theme.grid.unit * 3}px;
151
- height: ${(props) => props.theme.grid.unit * 20}px;
152
- resize: none;
153
- `;
154
- exports.FlexForm = (0, styled_components_1.default)(formik_1.Form) `
155
- height: 100%;
156
- display: flex;
157
- flex-direction: column;
158
- overflow: hidden;
159
- `;
160
- exports.FormFields = styled_components_1.default.div `
161
- flex: 1;
162
- overflow-y: auto;
163
- `;
164
- const AuthorDropDown = ({ author, index, remove, onChange }) => {
165
- const [isOpen, setIsOpen] = (0, react_1.useState)(!!author['isNew']);
166
- const fullName = [author.given, author.family].join(' ').trim();
167
- const title = fullName.length > 0 ? fullName : 'Edit author name';
168
- return (react_1.default.createElement(Section, { key: author._id },
169
- react_1.default.createElement(Title, null,
170
- react_1.default.createElement(ToggleButton, { type: "button", onClick: () => setIsOpen(!isOpen), isOpen: isOpen },
171
- react_1.default.createElement(DropdownIndicator, null,
172
- react_1.default.createElement(ArrowDownBlue_1.default, null)),
173
- title),
174
- react_1.default.createElement(RemoveButton, { type: "button", "aria-label": "Delete this affiliation", onClick: () => remove(index) },
175
- react_1.default.createElement(AnnotationRemove_1.default, null))),
176
- isOpen && (react_1.default.createElement(AuthorForm, null,
177
- react_1.default.createElement(formik_1.Field, { name: `author.${index}.given`, value: author.given, onChange: onChange }, ({ field }) => (react_1.default.createElement(NameFieldContainer, null,
178
- react_1.default.createElement(NameField, Object.assign({}, field, { id: field.name, placeholder: 'Given', autoFocus: true })),
179
- react_1.default.createElement(FieldLabel, { htmlFor: field.name }, "Given")))),
180
- react_1.default.createElement(formik_1.Field, { name: `author.${index}.family`, value: author.family, onChange: onChange }, ({ field }) => (react_1.default.createElement(NameFieldContainer, null,
181
- react_1.default.createElement(NameField, Object.assign({}, field, { id: field.name, placeholder: 'Family', autoFocus: true })),
182
- react_1.default.createElement(FieldLabel, { htmlFor: field.name }, "Family"))))))));
183
- };
184
- const bibliographyItemTypes = [
185
- ['article', 'Article'],
186
- ['article-journal', 'Journal Article'],
187
- ['article-magazine', 'Magazine Article'],
188
- ['article-newspaper', 'Newspaper Article'],
189
- ['bill', 'Bill'],
190
- ['book', 'Book'],
191
- ['broadcast', 'Broadcast'],
192
- ['chapter', 'Chapter'],
193
- ['dataset', 'Dataset'],
194
- ['entry', 'Entry'],
195
- ['entry-dictionary', 'Dictionary Entry'],
196
- ['entry-encyclopedia', 'Encyclopedia Entry'],
197
- ['figure', 'Figure'],
198
- ['graphic', 'Graphic'],
199
- ['interview', 'Interview'],
200
- ['legal_case', 'Legal Case'],
201
- ['legislation', 'Legislation'],
202
- ['manuscript', 'Manuscript'],
203
- ['map', 'Map'],
204
- ['motion_picture', 'Motion Picture'],
205
- ['musical_score', 'Musical Score'],
206
- ['pamphlet', 'Pamphlet'],
207
- ['paper-conference', 'Conference Paper'],
208
- ['patent', 'Patent'],
209
- ['personal_communication', 'Personal Communication'],
210
- ['post', 'Post'],
211
- ['post-weblog', 'Blog Post'],
212
- ['report', 'Report'],
213
- ['review', 'Review'],
214
- ['review-book', 'Book Review'],
215
- ['song', 'Song'],
216
- ['speech', 'Speech'],
217
- ['thesis', 'Thesis'],
218
- ['treaty', 'Treaty'],
219
- ['webpage', 'Web Page'],
220
- ];
221
- const bibliographyItemTypeOptions = bibliographyItemTypes.map((i) => ({
222
- label: i[1],
223
- value: i[0],
224
- }));
225
- const ChangeHandlingForm = (props) => {
226
- const { values } = (0, formik_1.useFormikContext)();
227
- (0, react_1.useEffect)(() => {
228
- var _a;
229
- (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, values);
230
- }, [props.onChange, values]);
231
- return react_1.default.createElement(exports.FlexForm, null, props.children);
232
- };
233
- const ReferenceForm = ({ values, showDelete, onChange, onDelete, onCancel, onSave, actionsRef, }) => {
234
- const fieldsRef = (0, react_1.useRef)(null);
235
- (0, react_1.useEffect)(() => {
236
- if (fieldsRef.current) {
237
- fieldsRef.current.scrollTop = 0;
238
- }
239
- }, [values]);
240
- const formRef = (0, react_1.useRef)(null);
241
- const [showDeleteDialog, setShowDeleteDialog] = (0, react_1.useState)(false);
242
- if (actionsRef && !actionsRef.current) {
243
- actionsRef.current = {
244
- reset: () => {
245
- var _a;
246
- (_a = formRef.current) === null || _a === void 0 ? void 0 : _a.resetForm();
247
- },
248
- };
249
- }
250
- return (react_1.default.createElement(formik_1.Formik, { initialValues: values, onSubmit: onSave, enableReinitialize: true, innerRef: formRef }, (formik) => {
251
- return (react_1.default.createElement(ChangeHandlingForm, { onChange: onChange },
252
- react_1.default.createElement(Dialog_1.Dialog, { isOpen: showDeleteDialog, category: Dialog_1.Category.confirmation, header: "Delete Reference", message: "Are you sure you want to delete this reference from the list?", actions: {
253
- secondary: {
254
- action: () => {
255
- onDelete();
256
- setShowDeleteDialog(false);
257
- },
258
- title: 'Delete',
259
- },
260
- primary: {
261
- action: () => setShowDeleteDialog(false),
262
- title: 'Cancel',
263
- },
264
- } }),
265
- react_1.default.createElement(Actions, null,
266
- react_1.default.createElement(Button_1.ButtonGroup, null,
267
- react_1.default.createElement(Button_1.IconButton, { as: "a", href: `https://doi.org/${formik.values.DOI}`, target: '_blank' },
268
- react_1.default.createElement(link_icon_1.LinkIcon, null)),
269
- react_1.default.createElement(DeleteButton, { defaultColor: true, disabled: !showDelete, "data-tooltip-id": showDelete ? '' : 'delete-button-tooltip', onClick: () => setShowDeleteDialog(true) },
270
- react_1.default.createElement(delete_icon_1.DeleteIcon, null)),
271
- react_1.default.createElement(Tooltip_1.Tooltip, { id: "delete-button-tooltip", place: "bottom" }, "Unable to delete because the item is used in the document")),
272
- react_1.default.createElement(Button_1.ButtonGroup, null,
273
- react_1.default.createElement(Button_1.SecondaryButton, { onClick: onCancel }, "Cancel"),
274
- react_1.default.createElement(Button_1.PrimaryButton, { type: "submit" }, "Save"))),
275
- react_1.default.createElement(exports.FormFields, { ref: fieldsRef },
276
- react_1.default.createElement(exports.FormField, null,
277
- react_1.default.createElement(exports.LabelContainer, null,
278
- react_1.default.createElement(Label, { htmlFor: 'citation-item-type' }, "Type")),
279
- react_1.default.createElement(formik_1.Field, { id: 'citation-item-type', name: 'type', component: SelectField_1.SelectField, options: bibliographyItemTypeOptions })),
280
- react_1.default.createElement(exports.FormField, null,
281
- react_1.default.createElement(exports.LabelContainer, null,
282
- react_1.default.createElement(Label, null, "Title")),
283
- react_1.default.createElement(formik_1.Field, { name: 'title' }, (props) => (react_1.default.createElement(exports.ReferenceTextArea, Object.assign({ id: 'title' }, props.field))))),
284
- react_1.default.createElement(formik_1.FieldArray, { name: 'author', render: ({ push, remove }) => (react_1.default.createElement(exports.FormField, null,
285
- react_1.default.createElement(exports.LabelContainer, null,
286
- react_1.default.createElement(Label, null, "Authors"),
287
- react_1.default.createElement(Button, { onClick: () => push((0, json_schema_1.buildBibliographicName)({
288
- given: '',
289
- family: '',
290
- isNew: true,
291
- })) },
292
- react_1.default.createElement(AddAuthor_1.default, { height: 17, width: 17 }))),
293
- react_1.default.createElement("div", null, formik.values.author &&
294
- formik.values.author.map((author, index) => (react_1.default.createElement(AuthorDropDown, { key: index, index: index, author: author, remove: remove, onChange: formik.handleChange })))))) }),
295
- react_1.default.createElement(exports.FormField, null,
296
- react_1.default.createElement(exports.LabelContainer, null,
297
- react_1.default.createElement(Label, { htmlFor: "issued['date-parts'][0][0]" }, "Year")),
298
- react_1.default.createElement(YearField, { name: "issued['date-parts'][0][0]", type: 'number', step: 1, onChange: (event) => {
299
- const { value } = event.target;
300
- if (value) {
301
- if (formik.values.issued) {
302
- formik.setFieldValue("issued['date-parts'][0][0]", Number(value));
303
- }
304
- else {
305
- formik.setFieldValue('issued', (0, json_schema_1.buildBibliographicDate)({
306
- 'date-parts': [[Number(value)]],
307
- }));
308
- }
309
- }
310
- else {
311
- formik.setFieldValue('issued', '');
312
- }
313
- } })),
314
- react_1.default.createElement(exports.FormField, null,
315
- react_1.default.createElement(exports.LabelContainer, null,
316
- react_1.default.createElement(Label, { htmlFor: 'container-title' }, "Container Title")),
317
- react_1.default.createElement(formik_1.Field, { name: 'container-title' }, (props) => (react_1.default.createElement(exports.ReferenceTextArea, Object.assign({ id: 'container-title' }, props.field))))),
318
- react_1.default.createElement(exports.FormField, null,
319
- react_1.default.createElement(exports.LabelContainer, null,
320
- react_1.default.createElement(Label, { htmlFor: 'volume' }, "Volume")),
321
- react_1.default.createElement(formik_1.Field, { name: 'volume' }, (props) => (react_1.default.createElement(ReferenceTextField, Object.assign({ id: 'volume' }, props.field))))),
322
- react_1.default.createElement(exports.FormField, null,
323
- react_1.default.createElement(exports.LabelContainer, null,
324
- react_1.default.createElement(Label, { htmlFor: 'issue' }, "Issue")),
325
- react_1.default.createElement(formik_1.Field, { name: 'issue' }, (props) => (react_1.default.createElement(ReferenceTextField, Object.assign({ id: 'issue' }, props.field))))),
326
- react_1.default.createElement(exports.FormField, null,
327
- react_1.default.createElement(exports.LabelContainer, null,
328
- react_1.default.createElement(Label, { htmlFor: 'page' }, "Page")),
329
- react_1.default.createElement(formik_1.Field, { name: 'page' }, (props) => (react_1.default.createElement(ReferenceTextField, Object.assign({ id: 'page' }, props.field))))),
330
- react_1.default.createElement(exports.FormField, null,
331
- react_1.default.createElement(exports.LabelContainer, null,
332
- react_1.default.createElement(Label, { htmlFor: 'url' }, "URL")),
333
- react_1.default.createElement(formik_1.Field, { name: 'URL' }, (props) => (react_1.default.createElement(ReferenceTextField, Object.assign({ type: 'url', id: 'url' }, props.field))))),
334
- react_1.default.createElement(exports.FormField, null,
335
- react_1.default.createElement(exports.LabelContainer, null,
336
- react_1.default.createElement(Label, { htmlFor: 'doi' }, "DOI")),
337
- react_1.default.createElement(formik_1.Field, { name: 'DOI' }, (props) => (react_1.default.createElement(ReferenceTextField, Object.assign({ id: 'doi', pattern: '(https://doi.org/)?10..+' }, props.field))))),
338
- react_1.default.createElement(exports.FormField, null,
339
- react_1.default.createElement(exports.LabelContainer, null,
340
- react_1.default.createElement(Label, { htmlFor: 'supplement' }, "Supplement")),
341
- react_1.default.createElement(formik_1.Field, { name: 'supplement' }, (props) => (react_1.default.createElement(ReferenceTextField, Object.assign({ type: 'supplement', id: 'supplement' }, props.field))))))));
342
- }));
343
- };
344
- exports.ReferenceForm = ReferenceForm;
345
- const DeleteButton = (0, styled_components_1.default)(Button_1.IconButton) `
346
- background-color: ${(props) => props.theme.colors.background.primary} !important;
347
- border-color: ${(props) => props.theme.colors.background.primary} !important;
348
- .icon_element {
349
- fill: ${(props) => (props.disabled && '#c9c9c9') || '#F35143'} !important;
350
- }
351
- `;
352
- const Section = styled_components_1.default.section `
353
- border: 1px solid ${(props) => props.theme.colors.border.field.default};
354
- border-radius: ${(props) => props.theme.grid.radius.default};
355
- background: ${(props) => props.theme.colors.background.primary};
356
- margin-bottom: ${(props) => props.theme.grid.unit * 3}px;
357
- overflow: hidden;
358
- `;
359
- const AuthorForm = (0, styled_components_1.default)(Section) `
360
- margin: ${(props) => props.theme.grid.unit * 3}px;
361
- `;
362
- const Title = styled_components_1.default.h4 `
363
- margin: 0;
364
- display: flex;
365
- align-items: center;
366
- font-size: 0.875rem;
367
- padding-right: 0.5rem;
368
- background: ${(props) => props.isInvalid ? props.theme.colors.background.warning : 'transparent'};
369
- color: ${(props) => props.isInvalid ? props.theme.colors.text.warning : 'inherit'};
370
- `;
371
- const DropdownIndicator = (0, styled_components_1.default)(ArrowDownBlue_1.default) `
372
- border: 0;
373
- border-radius: 50%;
374
- margin-right: 0.6em;
375
- min-width: 20px;
376
- `;
377
- const ToggleButton = styled_components_1.default.button `
378
- flex-grow: 1;
379
- display: flex;
380
- align-items: center;
381
- width: 100%;
382
- background: transparent;
383
- border: none;
384
- text-align: left;
385
- font-family: ${(props) => props.theme.font.family.sans};
386
- font-size: 1rem;
387
- padding: 0.6em 0.5em;
388
-
389
- outline: none;
390
-
391
- &:focus {
392
- color: ${(props) => props.theme.colors.button.primary.border.hover};
393
- }
394
-
395
- svg {
396
- transform: ${(props) => (props.isOpen ? 'rotateX(180deg)' : 'initial')};
397
- }
398
- `;
399
- const RemoveButton = styled_components_1.default.button `
400
- border: none;
401
- background: transparent;
402
- padding: 0;
403
-
404
- outline: none;
405
-
406
- &:focus path {
407
- fill: ${(props) => props.theme.colors.button.primary.color.hover};
408
- }
409
-
410
- svg {
411
- width: 2rem;
412
- height: 2rem;
413
- }
414
- `;
@@ -1,52 +0,0 @@
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.ReferenceLine = exports.authors = exports.issuedYear = exports.metadata = exports.MetadataContainer = exports.Metadata = void 0;
7
- const react_1 = __importDefault(require("react"));
8
- const styled_components_1 = __importDefault(require("styled-components"));
9
- exports.Metadata = styled_components_1.default.div `
10
- color: ${(props) => props.theme.colors.text.secondary};
11
- flex: 1;
12
- font-weight: ${(props) => props.theme.font.weight.light};
13
- margin-top: ${(props) => props.theme.grid.unit}px;
14
- `;
15
- exports.MetadataContainer = styled_components_1.default.div `
16
- flex: 1;
17
- `;
18
- const metadata = (item) => {
19
- return [(0, exports.authors)(item), item['container-title'], (0, exports.issuedYear)(item)]
20
- .filter(Boolean)
21
- .join(', ');
22
- };
23
- exports.metadata = metadata;
24
- const issuedYear = (item) => {
25
- if (!item.issued ||
26
- !item.issued['date-parts'] ||
27
- !item.issued['date-parts'][0] ||
28
- !item.issued['date-parts'][0][0]) {
29
- return '';
30
- }
31
- const [[year]] = item.issued['date-parts'];
32
- return `${year}`;
33
- };
34
- exports.issuedYear = issuedYear;
35
- const authors = (item) => {
36
- if (!item.author) {
37
- return '';
38
- }
39
- const authors = item.author
40
- .map((a) => a.family || a.literal || a.given)
41
- .filter(Boolean);
42
- if (authors.length > 1) {
43
- const last = authors.splice(-2);
44
- authors.push(last.join(' & '));
45
- }
46
- return authors.join(', ');
47
- };
48
- exports.authors = authors;
49
- const ReferenceLine = ({ item }) => (react_1.default.createElement(exports.MetadataContainer, null,
50
- react_1.default.createElement("div", null, item.title || 'Untitled'),
51
- react_1.default.createElement(exports.Metadata, null, (0, exports.metadata)(item))));
52
- exports.ReferenceLine = ReferenceLine;
@@ -1,124 +0,0 @@
1
- "use strict";
2
- /*!
3
- * © 2023 Atypon Systems LLC
4
- *
5
- * Licensed under the Apache License, Version 2.0 (the "License");
6
- * you may not use this file except in compliance with the License.
7
- * You may obtain a copy of the License at
8
- *
9
- * http://www.apache.org/licenses/LICENSE-2.0
10
- *
11
- * Unless required by applicable law or agreed to in writing, software
12
- * distributed under the License is distributed on an "AS IS" BASIS,
13
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
14
- * See the License for the specific language governing permissions and
15
- * limitations under the License.
16
- */
17
- var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
18
- if (k2 === undefined) k2 = k;
19
- var desc = Object.getOwnPropertyDescriptor(m, k);
20
- if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
21
- desc = { enumerable: true, get: function() { return m[k]; } };
22
- }
23
- Object.defineProperty(o, k2, desc);
24
- }) : (function(o, m, k, k2) {
25
- if (k2 === undefined) k2 = k;
26
- o[k2] = m[k];
27
- }));
28
- var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
29
- Object.defineProperty(o, "default", { enumerable: true, value: v });
30
- }) : function(o, v) {
31
- o["default"] = v;
32
- });
33
- var __importStar = (this && this.__importStar) || function (mod) {
34
- if (mod && mod.__esModule) return mod;
35
- var result = {};
36
- if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
37
- __setModuleDefault(result, mod);
38
- return result;
39
- };
40
- var __importDefault = (this && this.__importDefault) || function (mod) {
41
- return (mod && mod.__esModule) ? mod : { "default": mod };
42
- };
43
- Object.defineProperty(exports, "__esModule", { value: true });
44
- exports.ReferenceSearch = void 0;
45
- const lodash_1 = require("lodash");
46
- const react_1 = __importStar(require("react"));
47
- const styled_components_1 = __importDefault(require("styled-components"));
48
- const Button_1 = require("../Button");
49
- const template_icon_1 = require("../icons/template-icon");
50
- const BibliographyItemSource_1 = require("./BibliographyItemSource");
51
- const ReferenceSearchSection_1 = require("./ReferenceSearchSection");
52
- const SearchInput_1 = require("./SearchInput");
53
- const ReferenceSearchSectionContainer = styled_components_1.default.div `
54
- max-height: 400px;
55
- overflow-y: auto;
56
- `;
57
- const Actions = (0, styled_components_1.default)(Button_1.ButtonGroup) `
58
- align-items: center;
59
- box-shadow: 0 -2px 12px 0 rgba(216, 216, 216, 0.26);
60
- display: flex;
61
- justify-content: space-between;
62
- padding: ${(props) => props.theme.grid.unit * 4}px;
63
- `;
64
- const Container = styled_components_1.default.div `
65
- flex: 1;
66
- font-family: ${(props) => props.theme.font.family.sans};
67
- `;
68
- const AddReferenceActions = (0, styled_components_1.default)(Button_1.ButtonGroup) `
69
- button {
70
- margin-right: ${(props) => props.theme.grid.unit * 8}px;
71
- }
72
-
73
- button:hover,
74
- button:active {
75
- path {
76
- stroke: ${(props) => props.theme.colors.brand.medium};
77
- }
78
- rect {
79
- stroke: ${(props) => props.theme.colors.brand.medium};
80
- }
81
- }
82
- `;
83
- const ReferenceSearch = ({ query: initialQuery, sources, items, onAdd, onCite, onCancel }) => {
84
- const [query, setQuery] = (0, react_1.useState)(initialQuery || '');
85
- const [selections, setSelections] = (0, react_1.useState)(new Map());
86
- const toggleSelection = (item) => {
87
- const id = item._id;
88
- if (selections.has(id)) {
89
- selections.delete(id);
90
- setSelections(new Map([...selections]));
91
- }
92
- else {
93
- selections.set(id, item);
94
- setSelections(new Map([...selections]));
95
- }
96
- };
97
- const isSelected = (item) => {
98
- return selections.has(item._id);
99
- };
100
- const document = new BibliographyItemSource_1.DocumentReferenceSource(items);
101
- const handleClick = () => {
102
- const items = Array.from(selections.values());
103
- return onCite(items);
104
- };
105
- const debouncedSetQuery = (0, lodash_1.debounce)((e) => {
106
- setQuery(e.target.value.trim());
107
- }, 800);
108
- return (react_1.default.createElement(Container, null,
109
- react_1.default.createElement(SearchInput_1.SearchInput, { onChange: debouncedSetQuery, defaultValue: initialQuery }),
110
- react_1.default.createElement(ReferenceSearchSectionContainer, null,
111
- react_1.default.createElement(ReferenceSearchSection_1.ReferenceSearchSection, { key: document.id, query: query, source: document, isSelected: isSelected, onSelect: toggleSelection }),
112
- query.length
113
- ? sources.map((source) => (react_1.default.createElement(ReferenceSearchSection_1.ReferenceSearchSection, { key: source.id, query: query, source: source, isSelected: isSelected, onSelect: toggleSelection })))
114
- : ''),
115
- react_1.default.createElement(Actions, null,
116
- react_1.default.createElement(AddReferenceActions, null,
117
- react_1.default.createElement(Button_1.IconTextButton, { onClick: onAdd },
118
- react_1.default.createElement(template_icon_1.TemplateIcon, null),
119
- "Add new")),
120
- react_1.default.createElement(Button_1.ButtonGroup, null,
121
- react_1.default.createElement(Button_1.SecondaryButton, { onClick: onCancel }, "Close"),
122
- react_1.default.createElement(Button_1.PrimaryButton, { onClick: handleClick, disabled: selections.size === 0 }, "Cite")))));
123
- };
124
- exports.ReferenceSearch = ReferenceSearch;
@@ -1,68 +0,0 @@
1
- "use strict";
2
- /*!
3
- * © 2023 Atypon Systems LLC
4
- *
5
- * Licensed under the Apache License, Version 2.0 (the "License");
6
- * you may not use this file except in compliance with the License.
7
- * You may obtain a copy of the License at
8
- *
9
- * http://www.apache.org/licenses/LICENSE-2.0
10
- *
11
- * Unless required by applicable law or agreed to in writing, software
12
- * distributed under the License is distributed on an "AS IS" BASIS,
13
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
14
- * See the License for the specific language governing permissions and
15
- * limitations under the License.
16
- */
17
- var __importDefault = (this && this.__importDefault) || function (mod) {
18
- return (mod && mod.__esModule) ? mod : { "default": mod };
19
- };
20
- Object.defineProperty(exports, "__esModule", { value: true });
21
- exports.ReferenceSearchResults = exports.ReferenceSearchResult = exports.ReferenceSearchResultsContainer = void 0;
22
- const AddedIcon_1 = __importDefault(require("@manuscripts/assets/react/AddedIcon"));
23
- const AddIcon_1 = __importDefault(require("@manuscripts/assets/react/AddIcon"));
24
- const react_1 = __importDefault(require("react"));
25
- const styled_components_1 = __importDefault(require("styled-components"));
26
- const Button_1 = require("../Button");
27
- const ReferenceLine_1 = require("./ReferenceLine");
28
- const StatusIcon = styled_components_1.default.div `
29
- flex-shrink: 1;
30
- margin-right: ${(props) => props.theme.grid.unit * 3}px;
31
- margin-left: ${(props) => props.theme.grid.unit}px;
32
- height: ${(props) => props.theme.grid.unit * 6}px;
33
- width: ${(props) => props.theme.grid.unit * 6}px;
34
- display: inline-flex;
35
- justify-content: center;
36
- align-items: center;
37
- cursor: pointer;
38
- `;
39
- const MoreButton = (0, styled_components_1.default)(Button_1.SecondaryButton) `
40
- font-size: inherit;
41
- text-transform: none;
42
- text-decoration: underline;
43
- border: none;
44
- margin-left: ${(props) => props.theme.grid.unit * 4}px;
45
- color: ${(props) => props.theme.colors.button.default.color.default};
46
- `;
47
- exports.ReferenceSearchResultsContainer = styled_components_1.default.div `
48
- padding: 0 ${(props) => props.theme.grid.unit * 4}px;
49
- flex: 1;
50
- overflow-y: auto;
51
- `;
52
- exports.ReferenceSearchResult = styled_components_1.default.div `
53
- cursor: pointer;
54
- padding: ${(props) => props.theme.grid.unit * 2}px 0;
55
- display: flex;
56
-
57
- &:not(:last-of-type) {
58
- border-bottom: 1px solid #f6f6f6;
59
- }
60
- `;
61
- const ReferenceSearchResults = ({ items, total, isSelected, onSelect, onShowMore }) => {
62
- return (react_1.default.createElement(exports.ReferenceSearchResultsContainer, null,
63
- items.map((item) => (react_1.default.createElement(exports.ReferenceSearchResult, { onClick: () => onSelect(item), key: item._id },
64
- react_1.default.createElement(StatusIcon, null, isSelected(item) ? (react_1.default.createElement(AddedIcon_1.default, { "data-cy": 'plus-icon-ok', width: 24, height: 24 })) : (react_1.default.createElement(AddIcon_1.default, { "data-cy": 'plus-icon', width: 24, height: 24 }))),
65
- react_1.default.createElement(ReferenceLine_1.ReferenceLine, { item: item })))),
66
- items.length < 25 && total > items.length ? (react_1.default.createElement(MoreButton, { onClick: onShowMore, "data-cy": 'more-button' }, "Show more")) : undefined));
67
- };
68
- exports.ReferenceSearchResults = ReferenceSearchResults;