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