@manuscripts/body-editor 2.7.7 → 2.7.8-LEAN-4213.0

package/dist/cjs/components/affiliations/AffiliationForm.js

@@ -0,0 +1,106 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AffiliationForm = void 0;
+const style_guide_1 = require("@manuscripts/style-guide");
+const formik_1 = require("formik");
+const react_1 = __importStar(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const ChangeHandlingForm_1 = require("../ChangeHandlingForm");
+const Row = styled_components_1.default.div `
+  display: flex;
+`;
+const AffiliationsTextField = (0, styled_components_1.default)(style_guide_1.TextField) `
+  border-radius: 0;
+  background: transparent;
+  margin-bottom: 4px;
+  border-radius: ${(props) => props.theme.grid.radius.default};
+  &[aria-invalid] {
+    background: ${(props) => props.theme.colors.background.warning};
+  }
+
+  &[aria-invalid]:focus {
+    background: transparent;
+  }
+`;
+const DepartmentTextField = (0, styled_components_1.default)(style_guide_1.TextArea) `
+  border-radius: 0;
+  background: transparent;
+  margin-bottom: 4px;
+  min-height: 60px;
+  border-radius: ${(props) => props.theme.grid.radius.default};
+  &[aria-invalid] {
+    background: ${(props) => props.theme.colors.background.warning};
+  }
+
+  &[aria-invalid]:focus {
+    background: transparent;
+  }
+`;
+const FormLabel = styled_components_1.default.legend `
+  &:not(:first-child) {
+    margin-top: 24px;
+  }
+  margin-bottom: 12px;
+  font: ${(props) => props.theme.font.weight.normal}
+    ${(props) => props.theme.font.size.xlarge} /
+    ${(props) => props.theme.font.lineHeight.large}
+    ${(props) => props.theme.font.family.sans};
+  letter-spacing: -0.4px;
+  color: ${(props) => props.theme.colors.text.secondary};
+`;
+const MarginRightTextField = (0, styled_components_1.default)(AffiliationsTextField) `
+  margin-right: 4px;
+`;
+const AffiliationForm = ({ values, onSave, onChange, actionsRef, }) => {
+    if (actionsRef && !actionsRef.current) {
+        actionsRef.current = {
+            reset: () => {
+                var _a;
+                (_a = formRef.current) === null || _a === void 0 ? void 0 : _a.resetForm();
+            },
+        };
+    }
+    const formRef = (0, react_1.useRef)(null);
+    return (react_1.default.createElement(formik_1.Formik, { initialValues: values, onSubmit: onSave, innerRef: formRef, enableReinitialize: true }, () => (react_1.default.createElement(ChangeHandlingForm_1.ChangeHandlingForm, { onChange: onChange },
+        react_1.default.createElement(FormLabel, null, "Institution*"),
+        react_1.default.createElement(Row, null,
+            react_1.default.createElement(formik_1.Field, { name: "institution" }, (props) => (react_1.default.createElement(AffiliationsTextField, Object.assign({ id: "institution", placeholder: "Institution Name" }, props.field))))),
+        react_1.default.createElement(FormLabel, null, "Details"),
+        react_1.default.createElement(Row, null,
+            react_1.default.createElement(formik_1.Field, { name: "department" }, (props) => (react_1.default.createElement(DepartmentTextField, Object.assign({ id: "department", placeholder: "Department" }, props.field))))),
+        react_1.default.createElement(Row, null,
+            react_1.default.createElement(formik_1.Field, { name: "addressLine1" }, (props) => (react_1.default.createElement(AffiliationsTextField, Object.assign({ id: "addressLine1", placeholder: "Street Address" }, props.field))))),
+        react_1.default.createElement(Row, null,
+            react_1.default.createElement(formik_1.Field, { name: "city" }, (props) => (react_1.default.createElement(MarginRightTextField, Object.assign({ id: "city", placeholder: "City" }, props.field)))),
+            react_1.default.createElement(formik_1.Field, { name: "county" }, (props) => (react_1.default.createElement(AffiliationsTextField, Object.assign({ id: "county", placeholder: "State / Province" }, props.field))))),
+        react_1.default.createElement(Row, null,
+            react_1.default.createElement(formik_1.Field, { name: "postCode" }, (props) => (react_1.default.createElement(MarginRightTextField, Object.assign({ id: "postCode", placeholder: "Postal Code" }, props.field)))),
+            react_1.default.createElement(formik_1.Field, { name: "country" }, ({ field }) => (react_1.default.createElement(AffiliationsTextField, Object.assign({ id: "country", placeholder: "Country" }, field)))))))));
+};
+exports.AffiliationForm = AffiliationForm;

package/dist/cjs/components/affiliations/AffiliationItem.js

@@ -0,0 +1,112 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AffiliationItem = void 0;
+const style_guide_1 = require("@manuscripts/style-guide");
+const react_1 = __importStar(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const AffiliationContainer = styled_components_1.default.div `
+  padding: ${(props) => props.theme.grid.unit * 2}px 0
+    ${(props) => props.theme.grid.unit * 2}px;
+  display: flex;
+  align-items: center;
+  transition: background-color 0.25s;
+  border: 1px solid transparent;
+  border-left: 0;
+  border-right: 0;
+  cursor: pointer;
+  &:hover,
+  &.active {
+    background: ${(props) => props.theme.colors.background.fifth};
+  }
+
+  &.active {
+    border-color: ${(props) => props.theme.colors.border.primary};
+  }
+`;
+const AffiliationName = styled_components_1.default.div `
+  margin-left: 12px;
+  flex: 1;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+  width: 250px;
+`;
+const AffiliationDetails = styled_components_1.default.div `
+  margin-left: 12px;
+  flex: 1;
+  font-size: 12px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 16px;
+  margin-top: 2px;
+  color: ${(props) => props.theme.colors.text.secondary};
+`;
+const AffiliationBox = styled_components_1.default.div `
+  display: flex;
+  flex-direction: column;
+  margin-left: 4px;
+`;
+const RemoveButton = styled_components_1.default.div `
+  display: flex;
+  align-items: center;
+  margin-right: 8px;
+  svg {
+    cursor: pointer;
+  }
+  .icon_element {
+    fill: #6e6e6e;
+  }
+`;
+const AffiliationItem = ({ affiliation, isSelected, onClick, onDelete, showSuccessIcon, }) => {
+    var _a;
+    const ref = (0, react_1.useRef)(null);
+    if (isSelected) {
+        (_a = ref.current) === null || _a === void 0 ? void 0 : _a.scrollIntoView({
+            behavior: 'smooth',
+            block: 'nearest',
+        });
+    }
+    return (react_1.default.createElement(AffiliationContainer, { onClick: onClick, className: isSelected ? 'active' : '', ref: ref },
+        react_1.default.createElement(style_guide_1.AffiliationIcon, { opacity: showSuccessIcon ? 0.05 : 1, style: { minWidth: 24, minHeight: 24 } }),
+        react_1.default.createElement(AffiliationBox, null,
+            react_1.default.createElement(AffiliationName, null, affiliation.institution),
+            react_1.default.createElement(AffiliationDetails, null,
+                affiliation.city && (react_1.default.createElement(react_1.default.Fragment, null,
+                    affiliation.city,
+                    affiliation.county || affiliation.country ? ', ' : '')),
+                affiliation.county && (react_1.default.createElement(react_1.default.Fragment, null,
+                    affiliation.county,
+                    affiliation.country ? ', ' : '')),
+                affiliation.country && react_1.default.createElement(react_1.default.Fragment, null, affiliation.country))),
+        showSuccessIcon && (react_1.default.createElement(style_guide_1.CrclTickAnimation, { size: 36, style: { position: 'absolute', left: '10px' } })),
+        isSelected && (react_1.default.createElement(RemoveButton, { onClick: () => onDelete(), "data-tooltip-id": 'delete-button-tooltip' },
+            react_1.default.createElement(style_guide_1.DeleteIcon, { fill: '#6E6E6E' }),
+            react_1.default.createElement(style_guide_1.Tooltip, { id: 'delete-button-tooltip', place: "bottom" }, 'Delete')))));
+};
+exports.AffiliationItem = AffiliationItem;

package/dist/cjs/components/affiliations/AffiliationList.js

@@ -0,0 +1,47 @@
+"use strict";
+/*!
+ * © 2019 Atypon Systems LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AffiliationList = void 0;
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const AffiliationItem_1 = require("./AffiliationItem");
+const AffiliationListContainer = styled_components_1.default.div `
+  flex: 1;
+  overflow-y: visible;
+  margin-left: 16px;
+`;
+const AffiliationListTitle = styled_components_1.default.h2 `
+  color: #6e6e6e;
+  font-size: 18px;
+  font-weight: 400;
+  line-height: 24px;
+  margin-left: 14px;
+  margin-top: 20px;
+`;
+const AffiliationList = ({ affiliation, affiliations, onSelect, onDelete, lastSavedAffiliationId, }) => {
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(AffiliationListTitle, null, "Existing Affiliations"),
+        react_1.default.createElement(AffiliationListContainer, { "data-cy": "affiliation-list" }, affiliations.map((a) => {
+            return (react_1.default.createElement(AffiliationItem_1.AffiliationItem, { key: a.id, affiliation: a, isSelected: a.id === (affiliation === null || affiliation === void 0 ? void 0 : affiliation.id), onClick: () => {
+                    return onSelect(a);
+                }, onDelete: () => onDelete(), showSuccessIcon: lastSavedAffiliationId === a.id }));
+        }))));
+};
+exports.AffiliationList = AffiliationList;