@manuscripts/style-guide 1.13.8-LEAN-3645 → 1.13.9-LEAN-3720.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.
@@ -41,7 +41,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
41
41
  return (mod && mod.__esModule) ? mod : { "default": mod };
42
42
  };
43
43
  Object.defineProperty(exports, "__esModule", { value: true });
44
- exports.FootnotesSelector = void 0;
44
+ exports.TableFootnotesSelector = void 0;
45
45
  const react_1 = __importStar(require("react"));
46
46
  const styled_components_1 = __importDefault(require("styled-components"));
47
47
  const Button_1 = require("./Button");
@@ -77,7 +77,7 @@ const AddNewFootnote = (0, styled_components_1.default)(Button_1.ButtonGroup) `
77
77
  }
78
78
  }
79
79
  `;
80
- const FootnotesSelector = ({ notes, inlineFootnote, onAdd, onInsert, onCancel, addNewLabel }) => {
80
+ const TableFootnotesSelector = ({ notes, inlineFootnote, onAdd, onInsert, onCancel }) => {
81
81
  let selectedNotesMap;
82
82
  if (inlineFootnote) {
83
83
  const rids = inlineFootnote.attrs.rids;
@@ -104,18 +104,18 @@ const FootnotesSelector = ({ notes, inlineFootnote, onAdd, onInsert, onCancel, a
104
104
  };
105
105
  return (react_1.default.createElement(Container, null,
106
106
  react_1.default.createElement(NotesContainer, null,
107
- react_1.default.createElement(FootnotesList, { notes: notes, inlineFootnote: inlineFootnote, isSelected: isSelected, onSelect: toggleSelection })),
107
+ react_1.default.createElement(TableFootnotesList, { notes: notes, inlineFootnote: inlineFootnote, isSelected: isSelected, onSelect: toggleSelection })),
108
108
  react_1.default.createElement(Actions, null,
109
109
  react_1.default.createElement(AddNewFootnote, null,
110
110
  react_1.default.createElement(Button_1.IconTextButton, { onClick: onAdd },
111
111
  react_1.default.createElement(icons_1.AddNewIcon, null),
112
- addNewLabel || 'Add new')),
112
+ "Add new")),
113
113
  react_1.default.createElement(Button_1.ButtonGroup, null,
114
114
  react_1.default.createElement(Button_1.SecondaryButton, { onClick: onCancel }, "Cancel"),
115
115
  react_1.default.createElement(Button_1.PrimaryButton, { onClick: handleClick, disabled: selections.size === 0 && !inlineFootnote }, inlineFootnote ? 'Update' : 'Insert')))));
116
116
  };
117
- exports.FootnotesSelector = FootnotesSelector;
118
- const FootnotesList = ({ notes, isSelected, onSelect, inlineFootnote }) => {
117
+ exports.TableFootnotesSelector = TableFootnotesSelector;
118
+ const TableFootnotesList = ({ notes, isSelected, onSelect, inlineFootnote }) => {
119
119
  const selectedNotes = [];
120
120
  const remainingNotes = [];
121
121
  notes.forEach((note) => {
@@ -170,5 +170,5 @@ const NoteText = styled_components_1.default.div `
170
170
  color: ${(props) => props.theme.colors.text.primary};
171
171
  flex: 1;
172
172
  font-weight: ${(props) => props.theme.font.weight.normal};
173
- margin-top: 2px;
173
+ margin-top: ${(props) => props.theme.grid.unit}px;
174
174
  `;
package/dist/cjs/index.js CHANGED
@@ -47,7 +47,7 @@ __exportStar(require("./components/FileManager/util"), exports);
47
47
  __exportStar(require("./components/Resizer"), exports);
48
48
  __exportStar(require("./components/SaveStatus"), exports);
49
49
  __exportStar(require("./components/StyledModal"), exports);
50
- __exportStar(require("./components/FootnotesSelector"), exports);
50
+ __exportStar(require("./components/TableFootnotesSelector"), exports);
51
51
  __exportStar(require("./components/Sidebar"), exports);
52
52
  __exportStar(require("./components/RichText"), exports);
53
53
  __exportStar(require("./components/TextField"), exports);
@@ -62,7 +62,6 @@ __exportStar(require("./components/Badge"), exports);
62
62
  __exportStar(require("./components/NavDropdown"), exports);
63
63
  __exportStar(require("./components/Dropdown"), exports);
64
64
  __exportStar(require("./components/LoadingOverlay"), exports);
65
- __exportStar(require("./components/EditorHeader/EditorHeader"), exports);
66
65
  __exportStar(require("./components/DatePicker"), exports);
67
66
  __exportStar(require("./components/Text"), exports);
68
67
  __exportStar(require("./components/RelativeDate"), exports);
@@ -48,7 +48,7 @@ const AddNewFootnote = styled(ButtonGroup) `
48
48
  }
49
49
  }
50
50
  `;
51
- export const FootnotesSelector = ({ notes, inlineFootnote, onAdd, onInsert, onCancel, addNewLabel }) => {
51
+ export const TableFootnotesSelector = ({ notes, inlineFootnote, onAdd, onInsert, onCancel }) => {
52
52
  let selectedNotesMap;
53
53
  if (inlineFootnote) {
54
54
  const rids = inlineFootnote.attrs.rids;
@@ -75,17 +75,17 @@ export const FootnotesSelector = ({ notes, inlineFootnote, onAdd, onInsert, onCa
75
75
  };
76
76
  return (React.createElement(Container, null,
77
77
  React.createElement(NotesContainer, null,
78
- React.createElement(FootnotesList, { notes: notes, inlineFootnote: inlineFootnote, isSelected: isSelected, onSelect: toggleSelection })),
78
+ React.createElement(TableFootnotesList, { notes: notes, inlineFootnote: inlineFootnote, isSelected: isSelected, onSelect: toggleSelection })),
79
79
  React.createElement(Actions, null,
80
80
  React.createElement(AddNewFootnote, null,
81
81
  React.createElement(IconTextButton, { onClick: onAdd },
82
82
  React.createElement(AddNewIcon, null),
83
- addNewLabel || 'Add new')),
83
+ "Add new")),
84
84
  React.createElement(ButtonGroup, null,
85
85
  React.createElement(SecondaryButton, { onClick: onCancel }, "Cancel"),
86
86
  React.createElement(PrimaryButton, { onClick: handleClick, disabled: selections.size === 0 && !inlineFootnote }, inlineFootnote ? 'Update' : 'Insert')))));
87
87
  };
88
- const FootnotesList = ({ notes, isSelected, onSelect, inlineFootnote }) => {
88
+ const TableFootnotesList = ({ notes, isSelected, onSelect, inlineFootnote }) => {
89
89
  const selectedNotes = [];
90
90
  const remainingNotes = [];
91
91
  notes.forEach((note) => {
@@ -140,5 +140,5 @@ const NoteText = styled.div `
140
140
  color: ${(props) => props.theme.colors.text.primary};
141
141
  flex: 1;
142
142
  font-weight: ${(props) => props.theme.font.weight.normal};
143
- margin-top: 2px;
143
+ margin-top: ${(props) => props.theme.grid.unit}px;
144
144
  `;
package/dist/es/index.js CHANGED
@@ -27,7 +27,7 @@ export * from './components/FileManager/util';
27
27
  export * from './components/Resizer';
28
28
  export * from './components/SaveStatus';
29
29
  export * from './components/StyledModal';
30
- export * from './components/FootnotesSelector';
30
+ export * from './components/TableFootnotesSelector';
31
31
  export * from './components/Sidebar';
32
32
  export * from './components/RichText';
33
33
  export * from './components/TextField';
@@ -42,7 +42,6 @@ export * from './components/Badge';
42
42
  export * from './components/NavDropdown';
43
43
  export * from './components/Dropdown';
44
44
  export * from './components/LoadingOverlay';
45
- export * from './components/EditorHeader/EditorHeader';
46
45
  export * from './components/DatePicker';
47
46
  export * from './components/Text';
48
47
  export * from './components/RelativeDate';
@@ -19,11 +19,10 @@ export type FootnoteWithIndex = {
19
19
  node: FootnoteNode;
20
20
  index?: string;
21
21
  };
22
- export declare const FootnotesSelector: React.FC<{
22
+ export declare const TableFootnotesSelector: React.FC<{
23
23
  notes: FootnoteWithIndex[];
24
24
  inlineFootnote?: InlineFootnoteNode;
25
25
  onAdd: () => void;
26
26
  onInsert: (notes: FootnoteWithIndex[]) => void;
27
27
  onCancel: () => void;
28
- addNewLabel?: string;
29
28
  }>;
@@ -28,7 +28,7 @@ export * from './components/FileManager/util';
28
28
  export * from './components/Resizer';
29
29
  export * from './components/SaveStatus';
30
30
  export * from './components/StyledModal';
31
- export * from './components/FootnotesSelector';
31
+ export * from './components/TableFootnotesSelector';
32
32
  export * from './components/Sidebar';
33
33
  export * from './components/RichText';
34
34
  export * from './components/TextField';
@@ -43,7 +43,6 @@ export * from './components/Badge';
43
43
  export * from './components/NavDropdown';
44
44
  export * from './components/Dropdown';
45
45
  export * from './components/LoadingOverlay';
46
- export * from './components/EditorHeader/EditorHeader';
47
46
  export * from './components/DatePicker';
48
47
  export * from './components/Text';
49
48
  export * from './components/RelativeDate';
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@manuscripts/style-guide",
3
3
  "description": "Shared components for Manuscripts applications",
4
- "version": "1.13.8-LEAN-3645",
4
+ "version": "1.13.9-LEAN-3720.0",
5
5
  "repository": "github:Atypon-OpenSource/manuscripts-style-guide",
6
6
  "license": "Apache-2.0",
7
7
  "main": "dist/cjs",
@@ -109,4 +109,4 @@
109
109
  "@types/react": "^17.0.2",
110
110
  "jackspeak": "2.1.1"
111
111
  }
112
- }
112
+ }
@@ -1,210 +0,0 @@
1
- "use strict";
2
- var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
3
- if (k2 === undefined) k2 = k;
4
- var desc = Object.getOwnPropertyDescriptor(m, k);
5
- if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
6
- desc = { enumerable: true, get: function() { return m[k]; } };
7
- }
8
- Object.defineProperty(o, k2, desc);
9
- }) : (function(o, m, k, k2) {
10
- if (k2 === undefined) k2 = k;
11
- o[k2] = m[k];
12
- }));
13
- var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
14
- Object.defineProperty(o, "default", { enumerable: true, value: v });
15
- }) : function(o, v) {
16
- o["default"] = v;
17
- });
18
- var __importStar = (this && this.__importStar) || function (mod) {
19
- if (mod && mod.__esModule) return mod;
20
- var result = {};
21
- if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
22
- __setModuleDefault(result, mod);
23
- return result;
24
- };
25
- var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
26
- function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
27
- return new (P || (P = Promise))(function (resolve, reject) {
28
- function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
29
- function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
30
- function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
31
- step((generator = generator.apply(thisArg, _arguments || [])).next());
32
- });
33
- };
34
- var __importDefault = (this && this.__importDefault) || function (mod) {
35
- return (mod && mod.__esModule) ? mod : { "default": mod };
36
- };
37
- Object.defineProperty(exports, "__esModule", { value: true });
38
- exports.MediumTextArea = exports.PrimaryButtonSmall = exports.EditorHeader = exports.DialogState = void 0;
39
- const react_1 = __importStar(require("react"));
40
- const styled_components_1 = __importDefault(require("styled-components"));
41
- const __1 = require("../..");
42
- const ProceedView_1 = require("./ProceedView");
43
- var DialogState;
44
- (function (DialogState) {
45
- DialogState[DialogState["INIT"] = 0] = "INIT";
46
- DialogState[DialogState["LOADING"] = 1] = "LOADING";
47
- DialogState[DialogState["ERROR"] = 2] = "ERROR";
48
- DialogState[DialogState["SUCCESS"] = 3] = "SUCCESS";
49
- DialogState[DialogState["CLOSED"] = 4] = "CLOSED";
50
- })(DialogState = exports.DialogState || (exports.DialogState = {}));
51
- const Editing = { label: 'Editing', icon: __1.EditIcon };
52
- const MapUserRole = {
53
- Editor: Editing,
54
- Owner: Editing,
55
- Writer: Editing,
56
- Annotator: { label: 'Suggesting', icon: __1.RoleAnnotatingIcon },
57
- Viewer: { label: 'Reading', icon: __1.RoleReadingIcon },
58
- Proofer: { label: 'Proofing', icon: __1.RoleAnnotatingIcon },
59
- };
60
- const EditorHeader = ({ handleSnapshot, submission, hasPendingSuggestions, userRole, canCompleteTask, submitProceed, goBack, status, isAnnotator, isProofer, message, exceptionDialog: ExceptionDialog, disabelProceedNote, }) => {
61
- var _a, _b, _c, _d, _e;
62
- const [noteValue, setNoteValue] = (0, react_1.useState)('');
63
- const [selectedTransitionIndex, setSelectedTransitionIndex] = (0, react_1.useState)();
64
- const { dialogData, submit } = submitProceed;
65
- const { updateState, clearError } = dialogData;
66
- const continueDialogAction = (0, react_1.useCallback)(() => __awaiter(void 0, void 0, void 0, function* () {
67
- if (submission && selectedTransitionIndex && handleSnapshot) {
68
- const { status } = submission.currentStep.type.transitions[selectedTransitionIndex];
69
- updateState(DialogState.LOADING);
70
- yield handleSnapshot();
71
- yield submit(status.id, noteValue);
72
- }
73
- }), [
74
- submission,
75
- selectedTransitionIndex,
76
- handleSnapshot,
77
- updateState,
78
- submit,
79
- noteValue,
80
- ]);
81
- const onTransitionClick = (0, react_1.useCallback)((event) => {
82
- updateState(DialogState.INIT);
83
- setSelectedTransitionIndex(event.target.value || event.target.parentNode.value);
84
- }, [setSelectedTransitionIndex, updateState]);
85
- const onCancelClick = (0, react_1.useCallback)(() => {
86
- setSelectedTransitionIndex(undefined);
87
- clearError();
88
- updateState(DialogState.CLOSED);
89
- }, [setSelectedTransitionIndex, clearError, updateState]);
90
- const onNoteChange = (0, react_1.useCallback)((event) => setNoteValue(event.target.value), [setNoteValue]);
91
- const currentStepTransition = submission === null || submission === void 0 ? void 0 : submission.currentStep.type.transitions;
92
- const disable = !currentStepTransition || !canCompleteTask;
93
- const errorCode = (_d = (_c = (_b = (_a = dialogData.mutationError) === null || _a === void 0 ? void 0 : _a.graphQLErrors) === null || _b === void 0 ? void 0 : _b.find((error) => { var _a; return (_a = error === null || error === void 0 ? void 0 : error.extensions) === null || _a === void 0 ? void 0 : _a.code; })) === null || _c === void 0 ? void 0 : _c.extensions) === null || _d === void 0 ? void 0 : _d.code.name;
94
- return (react_1.default.createElement(Wrapper, null,
95
- goBack && (react_1.default.createElement(SecondaryButtonSmall, { onClick: goBack, type: "button" },
96
- react_1.default.createElement(__1.ArrowLeftIcon, null),
97
- react_1.default.createElement("span", null, "Dashboard"))),
98
- handleSnapshot &&
99
- typeof hasPendingSuggestions == 'boolean' &&
100
- submission.nextStep && (react_1.default.createElement(ProceedView_1.ProceedView, { isAnnotator: isAnnotator, isProofer: isProofer, disable: disable, onTransitionClick: onTransitionClick, hasPendingSuggestions: hasPendingSuggestions, dialogData: dialogData, noteValue: noteValue, currentStepTransition: currentStepTransition, currentStepType: submission.currentStep.type, previousStepType: (_e = submission.previousStep) === null || _e === void 0 ? void 0 : _e.type, nextStepType: submission.nextStep.type, onNoteChange: disabelProceedNote ? undefined : onNoteChange, continueDialogAction: continueDialogAction, onCancelClick: onCancelClick, message: message })),
101
- status && (react_1.default.createElement(ChildWrapper, null,
102
- react_1.default.createElement(__1.SaveStatus, { status: status }))),
103
- react_1.default.createElement(Spacer, null),
104
- react_1.default.createElement(CurrentStepLabel, null, submission.currentStep.type.label),
105
- react_1.default.createElement(CurrentActionLablel, null,
106
- userRole &&
107
- MapUserRole[userRole] &&
108
- react_1.default.createElement(MapUserRole[userRole].icon),
109
- react_1.default.createElement("span", null, userRole && MapUserRole[userRole].label)),
110
- react_1.default.createElement(HelpDropdown, null),
111
- errorCode && react_1.default.createElement(ExceptionDialog, { errorCode: errorCode })));
112
- };
113
- exports.EditorHeader = EditorHeader;
114
- const HelpDropdown = () => {
115
- const { isOpen, toggleOpen, wrapperRef } = (0, __1.useDropdown)();
116
- return (react_1.default.createElement(HelpDropdownContainer, { ref: wrapperRef },
117
- react_1.default.createElement(HelpDropdownButton, { onClick: toggleOpen },
118
- react_1.default.createElement("span", null, "Help"),
119
- react_1.default.createElement(__1.NavDropdownToggle, { className: isOpen ? 'open' : '' })),
120
- isOpen && (react_1.default.createElement(__1.DropdownList, { top: 12, direction: "right" },
121
- react_1.default.createElement(DropdownItem, null, "Documentation")))));
122
- };
123
- const SecondaryButtonSmall = (0, styled_components_1.default)(__1.SecondaryButton) `
124
- font-size: inherit;
125
- margin-right: ${(props) => props.theme.grid.unit * 2}px;
126
- padding-top: ${(props) => props.theme.grid.unit * 0.75}px;
127
- padding-bottom: ${(props) => props.theme.grid.unit * 0.75}px;
128
- `;
129
- const HelpDropdownButton = styled_components_1.default.button `
130
- background: transparent;
131
- border: none;
132
- cursor: pointer;
133
- `;
134
- const HelpDropdownContainer = (0, styled_components_1.default)(__1.DropdownContainer) `
135
- border-left: 1px solid #f2f2f2;
136
- margin: -${(props) => props.theme.grid.unit * 3}px ${(props) => props.theme.grid.unit * 2}px -${(props) => props.theme.grid.unit * 3}px
137
- ${(props) => props.theme.grid.unit * 6}px;
138
- padding: ${(props) => props.theme.grid.unit * 4.75}px 0
139
- ${(props) => props.theme.grid.unit * 5}px
140
- ${(props) => props.theme.grid.unit * 4}px;
141
- `;
142
- const DropdownItem = styled_components_1.default.a `
143
- color: inherit;
144
- display: block;
145
- cursor: pointer;
146
- text-decoration: none;
147
- padding: ${(props) => props.theme.grid.unit * 5}px;
148
- `;
149
- exports.PrimaryButtonSmall = (0, styled_components_1.default)(__1.PrimaryButton) `
150
- padding-top: ${(props) => props.theme.grid.unit * 0.75}px;
151
- padding-bottom: ${(props) => props.theme.grid.unit * 0.75}px;
152
- font-size: inherit;
153
- `;
154
- const Wrapper = styled_components_1.default.div `
155
- display: flex;
156
- z-index: 6;
157
- padding: ${(props) => props.theme.grid.unit * 3}px
158
- ${(props) => props.theme.grid.unit * 8}px;
159
- width: 100%;
160
- box-sizing: border-box;
161
- align-items: center;
162
- border-bottom: 1px solid #f2f2f2;
163
- font-size: 14px;
164
- background: white;
165
-
166
- ${__1.NavDropdownContainer} + ${__1.NavDropdownContainer} {
167
- margin-left: ${(props) => props.theme.grid.unit * 2}px;
168
- }
169
- ${exports.PrimaryButtonSmall} + ${__1.NavDropdownContainer} {
170
- margin-left: ${(props) => props.theme.grid.unit * 2}px;
171
- }
172
- `;
173
- const CurrentStepLabel = styled_components_1.default.span `
174
- background: #f2f2f2;
175
- border-radius: ${(props) => props.theme.grid.unit * 1.5}px;
176
- padding: ${(props) => props.theme.grid.unit}px;
177
- `;
178
- const CurrentActionLablel = styled_components_1.default.span `
179
- display: flex;
180
- padding: 0 ${(props) => props.theme.grid.unit * 6}px;
181
- svg {
182
- margin-right: ${(props) => props.theme.grid.unit * 2.5}px;
183
- }
184
- `;
185
- const ChildWrapper = styled_components_1.default.div `
186
- display: inline-flex;
187
- margin: 0 2em;
188
- flex-direction: row;
189
- align-items: center;
190
- `;
191
- const Grid = styled_components_1.default.div `
192
- display: grid;
193
- grid-template-columns: max-content auto;
194
- gap: 0 ${(props) => props.theme.grid.unit * 2}px;
195
- margin-top: ${(props) => props.theme.grid.unit * 4}px;
196
- background: ${(props) => props.theme.colors.background.secondary};
197
- padding: ${(props) => props.theme.grid.unit * 6}px;
198
- `;
199
- const Line = styled_components_1.default.hr `
200
- margin: 5px 0 0 0;
201
- flex: 1;
202
- border: 1px dashed #c9c9c9;
203
- `;
204
- const Spacer = styled_components_1.default.div `
205
- flex: auto;
206
- `;
207
- exports.MediumTextArea = (0, styled_components_1.default)(__1.TextArea) `
208
- padding: 8px;
209
- font-size: 1em;
210
- `;
@@ -1,195 +0,0 @@
1
- "use strict";
2
- var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
3
- if (k2 === undefined) k2 = k;
4
- var desc = Object.getOwnPropertyDescriptor(m, k);
5
- if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
6
- desc = { enumerable: true, get: function() { return m[k]; } };
7
- }
8
- Object.defineProperty(o, k2, desc);
9
- }) : (function(o, m, k, k2) {
10
- if (k2 === undefined) k2 = k;
11
- o[k2] = m[k];
12
- }));
13
- var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
14
- Object.defineProperty(o, "default", { enumerable: true, value: v });
15
- }) : function(o, v) {
16
- o["default"] = v;
17
- });
18
- var __importStar = (this && this.__importStar) || function (mod) {
19
- if (mod && mod.__esModule) return mod;
20
- var result = {};
21
- if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
22
- __setModuleDefault(result, mod);
23
- return result;
24
- };
25
- var __importDefault = (this && this.__importDefault) || function (mod) {
26
- return (mod && mod.__esModule) ? mod : { "default": mod };
27
- };
28
- Object.defineProperty(exports, "__esModule", { value: true });
29
- exports.ProceedView = void 0;
30
- const react_1 = __importStar(require("react"));
31
- const styled_components_1 = __importDefault(require("styled-components"));
32
- const __1 = require("../..");
33
- const AlertMessage_1 = require("../AlertMessage");
34
- const EditorHeader_1 = require("./EditorHeader");
35
- const DropdownWrapper = ({ disabled, button, primary, children }) => {
36
- const { isOpen, toggleOpen, wrapperRef } = (0, __1.useDropdown)();
37
- return (react_1.default.createElement(__1.NavDropdownContainer, { id: 'user-dropdown', ref: wrapperRef },
38
- react_1.default.createElement(__1.NavDropdownButton, { as: (primary && __1.PrimaryButton) || undefined, disabled: disabled, isOpen: isOpen, onClick: toggleOpen }, button),
39
- isOpen && react_1.default.createElement(__1.NavDropdown, { direction: "left" }, children)));
40
- };
41
- const StepDetails = ({ icon, label, description, role }) => (react_1.default.createElement(react_1.default.Fragment, null,
42
- icon && react_1.default.createElement(TaskStatus, null, icon),
43
- react_1.default.createElement(TaskContainer, null,
44
- react_1.default.createElement(__1.PrimaryBoldHeading, null, label),
45
- react_1.default.createElement(__1.SecondarySmallText, null, description),
46
- react_1.default.createElement(__1.SecondarySmallText, null,
47
- "Actor: ",
48
- role.label))));
49
- const ProceedView = ({ currentStepTransition, onTransitionClick, disable, dialogData, previousStepType, currentStepType, isAnnotator, isProofer, hasPendingSuggestions, onCancelClick, continueDialogAction, message: Message, }) => {
50
- const dialogMessages = (0, react_1.useMemo)(() => hasPendingSuggestions &&
51
- !isAnnotator &&
52
- !isProofer &&
53
- dialogData.state !== __1.DialogState.SUCCESS
54
- ? {
55
- header: 'The task can not be transitioned to the next step',
56
- message: `There are still pending suggestions in the document.
57
- It is not possible to complete the task without having them approved or rejected.`,
58
- actions: {
59
- primary: {
60
- action: onCancelClick,
61
- title: 'Ok',
62
- },
63
- onClose: onCancelClick,
64
- },
65
- }
66
- : dialogData.state === __1.DialogState.SUCCESS
67
- ? {
68
- header: 'Content reassigned successfully',
69
- message: `to the ${currentStepType.label}`,
70
- actions: {
71
- primary: {
72
- action: onCancelClick,
73
- title: 'Close',
74
- },
75
- onClose: onCancelClick,
76
- },
77
- }
78
- : {
79
- header: 'Are you sure?',
80
- message: 'You are about to complete your task. If you confirm, you will no longer be able to make any changes.',
81
- actions: {
82
- primary: {
83
- action: continueDialogAction,
84
- title: 'Continue',
85
- },
86
- secondary: {
87
- action: onCancelClick,
88
- title: 'Cancel',
89
- },
90
- onClose: onCancelClick,
91
- },
92
- }, [
93
- dialogData,
94
- continueDialogAction,
95
- onCancelClick,
96
- currentStepType,
97
- hasPendingSuggestions,
98
- isAnnotator,
99
- isProofer,
100
- ]);
101
- const prevDialogMsgs = (0, react_1.useRef)();
102
- const prevDialogueState = (0, react_1.useRef)();
103
- (0, react_1.useEffect)(() => {
104
- prevDialogMsgs.current = dialogMessages;
105
- prevDialogueState.current = dialogData.state;
106
- }, [dialogData.state]);
107
- const messages = dialogData.state === __1.DialogState.CLOSED && prevDialogMsgs.current
108
- ? prevDialogMsgs.current
109
- : dialogMessages;
110
- const finalState = dialogData.state === __1.DialogState.CLOSED && prevDialogueState.current
111
- ? prevDialogueState.current
112
- : dialogData.state;
113
- return (react_1.default.createElement(react_1.default.Fragment, null,
114
- (currentStepTransition && (currentStepTransition === null || currentStepTransition === void 0 ? void 0 : currentStepTransition.length) > 1 && (react_1.default.createElement(DropdownWrapper, { button: 'Complete task', disabled: disable, primary: true },
115
- react_1.default.createElement(TaskDropdown, null, currentStepTransition &&
116
- currentStepTransition.map((transition, index) => (react_1.default.createElement(Task, { key: 'task_' + transition.type.id, className: transition.status.id === 'success' ? 'happyPath' : '', value: index, onClick: onTransitionClick },
117
- react_1.default.createElement("strong", null, transition.type.label),
118
- transition.type.description))))))) || (react_1.default.createElement(EditorHeader_1.PrimaryButtonSmall, { value: 0, onClick: onTransitionClick, disabled: disable }, "Complete task")),
119
- finalState === __1.DialogState.LOADING && (react_1.default.createElement(__1.LoadingOverlay, null,
120
- react_1.default.createElement(Message, { isCentered: true }, "Proceeding with your submission\u2026"))),
121
- react_1.default.createElement(__1.Dialog, { isOpen: dialogData.state !== __1.DialogState.CLOSED &&
122
- dialogData.state !== __1.DialogState.LOADING, category: __1.Category.confirmation, header: messages.header, message: messages.message, actions: messages.actions },
123
- finalState === __1.DialogState.SUCCESS && (react_1.default.createElement(Grid, null,
124
- previousStepType && (react_1.default.createElement(StepDetails, Object.assign({}, previousStepType, { icon: react_1.default.createElement(react_1.default.Fragment, null,
125
- react_1.default.createElement(__1.TaskStepDoneIcon, null),
126
- react_1.default.createElement(Line, null)) }))),
127
- react_1.default.createElement(StepDetails, Object.assign({}, currentStepType)))),
128
- finalState === __1.DialogState.ERROR && (react_1.default.createElement(AlertMessage_1.AlertMessage, { type: AlertMessage_1.AlertMessageType.error, hideCloseButton: true }, dialogData.error)))));
129
- };
130
- exports.ProceedView = ProceedView;
131
- const TaskDropdown = styled_components_1.default.div `
132
- display: flex;
133
- flex-direction: column;
134
- padding: ${(props) => props.theme.grid.unit * 2}px 0;
135
- `;
136
- const Task = styled_components_1.default.button `
137
- background: transparent;
138
- border: none;
139
- color: ${(props) => props.theme.colors.text.secondary};
140
- cursor: pointer;
141
- font: ${(props) => props.theme.font.weight.normal}
142
- ${(props) => props.theme.font.size.small} /
143
- ${(props) => props.theme.font.lineHeight.normal}
144
- ${(props) => props.theme.font.family.sans};
145
- order: 1;
146
- outline: none;
147
- padding: ${(props) => props.theme.grid.unit * 2}px
148
- ${(props) => props.theme.grid.unit * 4}px;
149
- text-align: left;
150
- width: ${(props) => props.theme.grid.unit * 66}px;
151
-
152
- &:not([disabled]):hover,
153
- &:not([disabled]):focus {
154
- background-color: ${(props) => props.theme.colors.button.default.background.hover};
155
- }
156
-
157
- strong {
158
- color: ${(props) => props.theme.colors.text.primary};
159
- display: block;
160
- font-size: ${(props) => props.theme.font.size.normal};
161
- line-height: ${(props) => props.theme.font.lineHeight.normal};
162
- }
163
-
164
- &.happyPath {
165
- border-bottom: 1px solid ${(props) => props.theme.colors.border.tertiary};
166
- order: 0;
167
- }
168
- `;
169
- const TextAreaWrapper = styled_components_1.default.div `
170
- margin-top: ${(props) => props.theme.grid.unit * 4}px;
171
- `;
172
- const Grid = styled_components_1.default.div `
173
- display: grid;
174
- grid-template-columns: max-content auto;
175
- gap: 0 ${(props) => props.theme.grid.unit * 2}px;
176
- margin-top: ${(props) => props.theme.grid.unit * 4}px;
177
- background: ${(props) => props.theme.colors.background.secondary};
178
- padding: ${(props) => props.theme.grid.unit * 6}px;
179
- `;
180
- const Line = styled_components_1.default.hr `
181
- margin: 5px 0 0 0;
182
- flex: 1;
183
- border: 1px dashed #c9c9c9;
184
- `;
185
- const TaskStatus = styled_components_1.default.div `
186
- grid-column: 1;
187
- display: flex;
188
- flex-direction: column;
189
- align-items: center;
190
- padding-top: 5px;
191
- `;
192
- const TaskContainer = styled_components_1.default.div `
193
- grid-column: 2;
194
- margin-bottom: 8px;
195
- `;
@@ -1,180 +0,0 @@
1
- var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
2
- function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
3
- return new (P || (P = Promise))(function (resolve, reject) {
4
- function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
5
- function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
6
- function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
7
- step((generator = generator.apply(thisArg, _arguments || [])).next());
8
- });
9
- };
10
- import React, { useCallback, useState } from 'react';
11
- import styled from 'styled-components';
12
- import { ArrowLeftIcon, DropdownContainer, DropdownList, EditIcon, NavDropdownContainer, NavDropdownToggle, PrimaryButton, RoleAnnotatingIcon, RoleReadingIcon, SaveStatus, SecondaryButton, TextArea, useDropdown, } from '../..';
13
- import { ProceedView } from './ProceedView';
14
- export var DialogState;
15
- (function (DialogState) {
16
- DialogState[DialogState["INIT"] = 0] = "INIT";
17
- DialogState[DialogState["LOADING"] = 1] = "LOADING";
18
- DialogState[DialogState["ERROR"] = 2] = "ERROR";
19
- DialogState[DialogState["SUCCESS"] = 3] = "SUCCESS";
20
- DialogState[DialogState["CLOSED"] = 4] = "CLOSED";
21
- })(DialogState || (DialogState = {}));
22
- const Editing = { label: 'Editing', icon: EditIcon };
23
- const MapUserRole = {
24
- Editor: Editing,
25
- Owner: Editing,
26
- Writer: Editing,
27
- Annotator: { label: 'Suggesting', icon: RoleAnnotatingIcon },
28
- Viewer: { label: 'Reading', icon: RoleReadingIcon },
29
- Proofer: { label: 'Proofing', icon: RoleAnnotatingIcon },
30
- };
31
- export const EditorHeader = ({ handleSnapshot, submission, hasPendingSuggestions, userRole, canCompleteTask, submitProceed, goBack, status, isAnnotator, isProofer, message, exceptionDialog: ExceptionDialog, disabelProceedNote, }) => {
32
- var _a, _b, _c, _d, _e;
33
- const [noteValue, setNoteValue] = useState('');
34
- const [selectedTransitionIndex, setSelectedTransitionIndex] = useState();
35
- const { dialogData, submit } = submitProceed;
36
- const { updateState, clearError } = dialogData;
37
- const continueDialogAction = useCallback(() => __awaiter(void 0, void 0, void 0, function* () {
38
- if (submission && selectedTransitionIndex && handleSnapshot) {
39
- const { status } = submission.currentStep.type.transitions[selectedTransitionIndex];
40
- updateState(DialogState.LOADING);
41
- yield handleSnapshot();
42
- yield submit(status.id, noteValue);
43
- }
44
- }), [
45
- submission,
46
- selectedTransitionIndex,
47
- handleSnapshot,
48
- updateState,
49
- submit,
50
- noteValue,
51
- ]);
52
- const onTransitionClick = useCallback((event) => {
53
- updateState(DialogState.INIT);
54
- setSelectedTransitionIndex(event.target.value || event.target.parentNode.value);
55
- }, [setSelectedTransitionIndex, updateState]);
56
- const onCancelClick = useCallback(() => {
57
- setSelectedTransitionIndex(undefined);
58
- clearError();
59
- updateState(DialogState.CLOSED);
60
- }, [setSelectedTransitionIndex, clearError, updateState]);
61
- const onNoteChange = useCallback((event) => setNoteValue(event.target.value), [setNoteValue]);
62
- const currentStepTransition = submission === null || submission === void 0 ? void 0 : submission.currentStep.type.transitions;
63
- const disable = !currentStepTransition || !canCompleteTask;
64
- const errorCode = (_d = (_c = (_b = (_a = dialogData.mutationError) === null || _a === void 0 ? void 0 : _a.graphQLErrors) === null || _b === void 0 ? void 0 : _b.find((error) => { var _a; return (_a = error === null || error === void 0 ? void 0 : error.extensions) === null || _a === void 0 ? void 0 : _a.code; })) === null || _c === void 0 ? void 0 : _c.extensions) === null || _d === void 0 ? void 0 : _d.code.name;
65
- return (React.createElement(Wrapper, null,
66
- goBack && (React.createElement(SecondaryButtonSmall, { onClick: goBack, type: "button" },
67
- React.createElement(ArrowLeftIcon, null),
68
- React.createElement("span", null, "Dashboard"))),
69
- handleSnapshot &&
70
- typeof hasPendingSuggestions == 'boolean' &&
71
- submission.nextStep && (React.createElement(ProceedView, { isAnnotator: isAnnotator, isProofer: isProofer, disable: disable, onTransitionClick: onTransitionClick, hasPendingSuggestions: hasPendingSuggestions, dialogData: dialogData, noteValue: noteValue, currentStepTransition: currentStepTransition, currentStepType: submission.currentStep.type, previousStepType: (_e = submission.previousStep) === null || _e === void 0 ? void 0 : _e.type, nextStepType: submission.nextStep.type, onNoteChange: disabelProceedNote ? undefined : onNoteChange, continueDialogAction: continueDialogAction, onCancelClick: onCancelClick, message: message })),
72
- status && (React.createElement(ChildWrapper, null,
73
- React.createElement(SaveStatus, { status: status }))),
74
- React.createElement(Spacer, null),
75
- React.createElement(CurrentStepLabel, null, submission.currentStep.type.label),
76
- React.createElement(CurrentActionLablel, null,
77
- userRole &&
78
- MapUserRole[userRole] &&
79
- React.createElement(MapUserRole[userRole].icon),
80
- React.createElement("span", null, userRole && MapUserRole[userRole].label)),
81
- React.createElement(HelpDropdown, null),
82
- errorCode && React.createElement(ExceptionDialog, { errorCode: errorCode })));
83
- };
84
- const HelpDropdown = () => {
85
- const { isOpen, toggleOpen, wrapperRef } = useDropdown();
86
- return (React.createElement(HelpDropdownContainer, { ref: wrapperRef },
87
- React.createElement(HelpDropdownButton, { onClick: toggleOpen },
88
- React.createElement("span", null, "Help"),
89
- React.createElement(NavDropdownToggle, { className: isOpen ? 'open' : '' })),
90
- isOpen && (React.createElement(DropdownList, { top: 12, direction: "right" },
91
- React.createElement(DropdownItem, null, "Documentation")))));
92
- };
93
- const SecondaryButtonSmall = styled(SecondaryButton) `
94
- font-size: inherit;
95
- margin-right: ${(props) => props.theme.grid.unit * 2}px;
96
- padding-top: ${(props) => props.theme.grid.unit * 0.75}px;
97
- padding-bottom: ${(props) => props.theme.grid.unit * 0.75}px;
98
- `;
99
- const HelpDropdownButton = styled.button `
100
- background: transparent;
101
- border: none;
102
- cursor: pointer;
103
- `;
104
- const HelpDropdownContainer = styled(DropdownContainer) `
105
- border-left: 1px solid #f2f2f2;
106
- margin: -${(props) => props.theme.grid.unit * 3}px ${(props) => props.theme.grid.unit * 2}px -${(props) => props.theme.grid.unit * 3}px
107
- ${(props) => props.theme.grid.unit * 6}px;
108
- padding: ${(props) => props.theme.grid.unit * 4.75}px 0
109
- ${(props) => props.theme.grid.unit * 5}px
110
- ${(props) => props.theme.grid.unit * 4}px;
111
- `;
112
- const DropdownItem = styled.a `
113
- color: inherit;
114
- display: block;
115
- cursor: pointer;
116
- text-decoration: none;
117
- padding: ${(props) => props.theme.grid.unit * 5}px;
118
- `;
119
- export const PrimaryButtonSmall = styled(PrimaryButton) `
120
- padding-top: ${(props) => props.theme.grid.unit * 0.75}px;
121
- padding-bottom: ${(props) => props.theme.grid.unit * 0.75}px;
122
- font-size: inherit;
123
- `;
124
- const Wrapper = styled.div `
125
- display: flex;
126
- z-index: 6;
127
- padding: ${(props) => props.theme.grid.unit * 3}px
128
- ${(props) => props.theme.grid.unit * 8}px;
129
- width: 100%;
130
- box-sizing: border-box;
131
- align-items: center;
132
- border-bottom: 1px solid #f2f2f2;
133
- font-size: 14px;
134
- background: white;
135
-
136
- ${NavDropdownContainer} + ${NavDropdownContainer} {
137
- margin-left: ${(props) => props.theme.grid.unit * 2}px;
138
- }
139
- ${PrimaryButtonSmall} + ${NavDropdownContainer} {
140
- margin-left: ${(props) => props.theme.grid.unit * 2}px;
141
- }
142
- `;
143
- const CurrentStepLabel = styled.span `
144
- background: #f2f2f2;
145
- border-radius: ${(props) => props.theme.grid.unit * 1.5}px;
146
- padding: ${(props) => props.theme.grid.unit}px;
147
- `;
148
- const CurrentActionLablel = styled.span `
149
- display: flex;
150
- padding: 0 ${(props) => props.theme.grid.unit * 6}px;
151
- svg {
152
- margin-right: ${(props) => props.theme.grid.unit * 2.5}px;
153
- }
154
- `;
155
- const ChildWrapper = styled.div `
156
- display: inline-flex;
157
- margin: 0 2em;
158
- flex-direction: row;
159
- align-items: center;
160
- `;
161
- const Grid = styled.div `
162
- display: grid;
163
- grid-template-columns: max-content auto;
164
- gap: 0 ${(props) => props.theme.grid.unit * 2}px;
165
- margin-top: ${(props) => props.theme.grid.unit * 4}px;
166
- background: ${(props) => props.theme.colors.background.secondary};
167
- padding: ${(props) => props.theme.grid.unit * 6}px;
168
- `;
169
- const Line = styled.hr `
170
- margin: 5px 0 0 0;
171
- flex: 1;
172
- border: 1px dashed #c9c9c9;
173
- `;
174
- const Spacer = styled.div `
175
- flex: auto;
176
- `;
177
- export const MediumTextArea = styled(TextArea) `
178
- padding: 8px;
179
- font-size: 1em;
180
- `;
@@ -1,165 +0,0 @@
1
- import React, { useEffect, useMemo, useRef } from 'react';
2
- import styled from 'styled-components';
3
- import { Category, Dialog, DialogState, LoadingOverlay, NavDropdown, NavDropdownButton, NavDropdownContainer, PrimaryBoldHeading, PrimaryButton, SecondarySmallText, TaskStepDoneIcon, useDropdown, } from '../..';
4
- import { AlertMessage, AlertMessageType } from '../AlertMessage';
5
- import { PrimaryButtonSmall, } from './EditorHeader';
6
- const DropdownWrapper = ({ disabled, button, primary, children }) => {
7
- const { isOpen, toggleOpen, wrapperRef } = useDropdown();
8
- return (React.createElement(NavDropdownContainer, { id: 'user-dropdown', ref: wrapperRef },
9
- React.createElement(NavDropdownButton, { as: (primary && PrimaryButton) || undefined, disabled: disabled, isOpen: isOpen, onClick: toggleOpen }, button),
10
- isOpen && React.createElement(NavDropdown, { direction: "left" }, children)));
11
- };
12
- const StepDetails = ({ icon, label, description, role }) => (React.createElement(React.Fragment, null,
13
- icon && React.createElement(TaskStatus, null, icon),
14
- React.createElement(TaskContainer, null,
15
- React.createElement(PrimaryBoldHeading, null, label),
16
- React.createElement(SecondarySmallText, null, description),
17
- React.createElement(SecondarySmallText, null,
18
- "Actor: ",
19
- role.label))));
20
- export const ProceedView = ({ currentStepTransition, onTransitionClick, disable, dialogData, previousStepType, currentStepType, isAnnotator, isProofer, hasPendingSuggestions, onCancelClick, continueDialogAction, message: Message, }) => {
21
- const dialogMessages = useMemo(() => hasPendingSuggestions &&
22
- !isAnnotator &&
23
- !isProofer &&
24
- dialogData.state !== DialogState.SUCCESS
25
- ? {
26
- header: 'The task can not be transitioned to the next step',
27
- message: `There are still pending suggestions in the document.
28
- It is not possible to complete the task without having them approved or rejected.`,
29
- actions: {
30
- primary: {
31
- action: onCancelClick,
32
- title: 'Ok',
33
- },
34
- onClose: onCancelClick,
35
- },
36
- }
37
- : dialogData.state === DialogState.SUCCESS
38
- ? {
39
- header: 'Content reassigned successfully',
40
- message: `to the ${currentStepType.label}`,
41
- actions: {
42
- primary: {
43
- action: onCancelClick,
44
- title: 'Close',
45
- },
46
- onClose: onCancelClick,
47
- },
48
- }
49
- : {
50
- header: 'Are you sure?',
51
- message: 'You are about to complete your task. If you confirm, you will no longer be able to make any changes.',
52
- actions: {
53
- primary: {
54
- action: continueDialogAction,
55
- title: 'Continue',
56
- },
57
- secondary: {
58
- action: onCancelClick,
59
- title: 'Cancel',
60
- },
61
- onClose: onCancelClick,
62
- },
63
- }, [
64
- dialogData,
65
- continueDialogAction,
66
- onCancelClick,
67
- currentStepType,
68
- hasPendingSuggestions,
69
- isAnnotator,
70
- isProofer,
71
- ]);
72
- const prevDialogMsgs = useRef();
73
- const prevDialogueState = useRef();
74
- useEffect(() => {
75
- prevDialogMsgs.current = dialogMessages;
76
- prevDialogueState.current = dialogData.state;
77
- }, [dialogData.state]);
78
- const messages = dialogData.state === DialogState.CLOSED && prevDialogMsgs.current
79
- ? prevDialogMsgs.current
80
- : dialogMessages;
81
- const finalState = dialogData.state === DialogState.CLOSED && prevDialogueState.current
82
- ? prevDialogueState.current
83
- : dialogData.state;
84
- return (React.createElement(React.Fragment, null,
85
- (currentStepTransition && (currentStepTransition === null || currentStepTransition === void 0 ? void 0 : currentStepTransition.length) > 1 && (React.createElement(DropdownWrapper, { button: 'Complete task', disabled: disable, primary: true },
86
- React.createElement(TaskDropdown, null, currentStepTransition &&
87
- currentStepTransition.map((transition, index) => (React.createElement(Task, { key: 'task_' + transition.type.id, className: transition.status.id === 'success' ? 'happyPath' : '', value: index, onClick: onTransitionClick },
88
- React.createElement("strong", null, transition.type.label),
89
- transition.type.description))))))) || (React.createElement(PrimaryButtonSmall, { value: 0, onClick: onTransitionClick, disabled: disable }, "Complete task")),
90
- finalState === DialogState.LOADING && (React.createElement(LoadingOverlay, null,
91
- React.createElement(Message, { isCentered: true }, "Proceeding with your submission\u2026"))),
92
- React.createElement(Dialog, { isOpen: dialogData.state !== DialogState.CLOSED &&
93
- dialogData.state !== DialogState.LOADING, category: Category.confirmation, header: messages.header, message: messages.message, actions: messages.actions },
94
- finalState === DialogState.SUCCESS && (React.createElement(Grid, null,
95
- previousStepType && (React.createElement(StepDetails, Object.assign({}, previousStepType, { icon: React.createElement(React.Fragment, null,
96
- React.createElement(TaskStepDoneIcon, null),
97
- React.createElement(Line, null)) }))),
98
- React.createElement(StepDetails, Object.assign({}, currentStepType)))),
99
- finalState === DialogState.ERROR && (React.createElement(AlertMessage, { type: AlertMessageType.error, hideCloseButton: true }, dialogData.error)))));
100
- };
101
- const TaskDropdown = styled.div `
102
- display: flex;
103
- flex-direction: column;
104
- padding: ${(props) => props.theme.grid.unit * 2}px 0;
105
- `;
106
- const Task = styled.button `
107
- background: transparent;
108
- border: none;
109
- color: ${(props) => props.theme.colors.text.secondary};
110
- cursor: pointer;
111
- font: ${(props) => props.theme.font.weight.normal}
112
- ${(props) => props.theme.font.size.small} /
113
- ${(props) => props.theme.font.lineHeight.normal}
114
- ${(props) => props.theme.font.family.sans};
115
- order: 1;
116
- outline: none;
117
- padding: ${(props) => props.theme.grid.unit * 2}px
118
- ${(props) => props.theme.grid.unit * 4}px;
119
- text-align: left;
120
- width: ${(props) => props.theme.grid.unit * 66}px;
121
-
122
- &:not([disabled]):hover,
123
- &:not([disabled]):focus {
124
- background-color: ${(props) => props.theme.colors.button.default.background.hover};
125
- }
126
-
127
- strong {
128
- color: ${(props) => props.theme.colors.text.primary};
129
- display: block;
130
- font-size: ${(props) => props.theme.font.size.normal};
131
- line-height: ${(props) => props.theme.font.lineHeight.normal};
132
- }
133
-
134
- &.happyPath {
135
- border-bottom: 1px solid ${(props) => props.theme.colors.border.tertiary};
136
- order: 0;
137
- }
138
- `;
139
- const TextAreaWrapper = styled.div `
140
- margin-top: ${(props) => props.theme.grid.unit * 4}px;
141
- `;
142
- const Grid = styled.div `
143
- display: grid;
144
- grid-template-columns: max-content auto;
145
- gap: 0 ${(props) => props.theme.grid.unit * 2}px;
146
- margin-top: ${(props) => props.theme.grid.unit * 4}px;
147
- background: ${(props) => props.theme.colors.background.secondary};
148
- padding: ${(props) => props.theme.grid.unit * 6}px;
149
- `;
150
- const Line = styled.hr `
151
- margin: 5px 0 0 0;
152
- flex: 1;
153
- border: 1px dashed #c9c9c9;
154
- `;
155
- const TaskStatus = styled.div `
156
- grid-column: 1;
157
- display: flex;
158
- flex-direction: column;
159
- align-items: center;
160
- padding-top: 5px;
161
- `;
162
- const TaskContainer = styled.div `
163
- grid-column: 2;
164
- margin-bottom: 8px;
165
- `;
@@ -1,68 +0,0 @@
1
- import React from 'react';
2
- export type PartialSubmission = {
3
- id: string;
4
- currentStep: SubmissionStep;
5
- previousStep?: SubmissionStep | null | undefined;
6
- nextStep?: SubmissionStep | null | undefined;
7
- };
8
- export type SubmissionStep = {
9
- type: SubmissionStepType;
10
- };
11
- export type SubmissionStepTransition = {
12
- status: {
13
- id: string;
14
- label: string;
15
- };
16
- type: SubmissionStepType;
17
- };
18
- export type SubmissionStepType = {
19
- id: string;
20
- label: string;
21
- description: string;
22
- transitions: Array<SubmissionStepTransition>;
23
- role: {
24
- label: string;
25
- };
26
- };
27
- export declare enum DialogState {
28
- INIT = 0,
29
- LOADING = 1,
30
- ERROR = 2,
31
- SUCCESS = 3,
32
- CLOSED = 4
33
- }
34
- export type ProceedDialogData = {
35
- state: DialogState;
36
- error?: string;
37
- mutationError?: any;
38
- updateState: (state: DialogState) => void;
39
- clearError: () => void;
40
- };
41
- export declare const EditorHeader: React.FC<{
42
- handleSnapshot?: () => Promise<void>;
43
- submission: PartialSubmission;
44
- hasPendingSuggestions?: boolean;
45
- canCompleteTask: boolean;
46
- exceptionDialog: React.FC<{
47
- errorCode: string;
48
- }>;
49
- userRole: string;
50
- submitProceed: {
51
- dialogData: ProceedDialogData;
52
- submit: (statusId: string, noteValue: string) => Promise<unknown>;
53
- };
54
- goBack?: () => void;
55
- status?: 'saved' | 'saving' | 'offline' | 'failed';
56
- isAnnotator: boolean;
57
- isProofer: boolean;
58
- message: React.FC;
59
- disabelProceedNote?: boolean;
60
- }>;
61
- export declare const PrimaryButtonSmall: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, {
62
- type: "button" | "submit" | "reset";
63
- } & {
64
- danger?: boolean | undefined;
65
- disabled?: boolean | undefined;
66
- mini?: boolean | undefined;
67
- }, "type">;
68
- export declare const MediumTextArea: import("styled-components").StyledComponent<"textarea", import("styled-components").DefaultTheme, import("../Form").ErrorProps, never>;
@@ -1,22 +0,0 @@
1
- import React from 'react';
2
- import { ProceedDialogData } from '../..';
3
- import { SubmissionStepTransition, SubmissionStepType } from './EditorHeader';
4
- export declare const ProceedView: React.FC<{
5
- isAnnotator: boolean;
6
- isProofer: boolean;
7
- disable: boolean;
8
- onTransitionClick: (event: unknown) => void;
9
- onNoteChange?: (event: unknown) => void;
10
- hasPendingSuggestions: boolean;
11
- dialogData: ProceedDialogData;
12
- noteValue: string;
13
- currentStepTransition: SubmissionStepTransition[];
14
- previousStepType: SubmissionStepType | undefined;
15
- currentStepType: SubmissionStepType;
16
- nextStepType: SubmissionStepType;
17
- onCancelClick: () => void;
18
- continueDialogAction: () => Promise<void>;
19
- message: React.FC<{
20
- isCentered: boolean;
21
- }>;
22
- }>;