@manuscripts/style-guide 1.7.10-LEAN-3301 → 1.7.10-LEAN-3415-2

package/dist/cjs/components/AffiliationsEditor/AffiliationsEditor.js

@@ -0,0 +1,62 @@
+"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 __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 });
+const react_1 = __importStar(require("react"));
+const authors_1 = require("../../lib/authors");
+const AffiliationsEditorView_1 = __importDefault(require("./AffiliationsEditorView"));
+const AffiliationsEditor = ({ affiliations, authorAffiliations, addAuthorAffiliation, updateAffiliation, removeAuthorAffiliation, components, styleOverrides, }) => {
+    const [searchText, setSearchText] = (0, react_1.useState)('');
+    const handleChoose = (0, react_1.useCallback)((value) => {
+        if (value) {
+            const selectedAffiliation = value;
+            addAuthorAffiliation(selectedAffiliation.value);
+        }
+        setSearchText('');
+    }, [addAuthorAffiliation]);
+    const options = (0, authors_1.affiliationsOptions)(affiliations, authorAffiliations);
+    const active = authorAffiliations
+        ? authorAffiliations.map((item) => item.data)
+        : [];
+    return (react_1.default.createElement(AffiliationsEditorView_1.default, { options: options, selected: active, updateAffiliation: updateAffiliation, removeAuthorAffiliation: removeAuthorAffiliation, components: components, styleOverrides: styleOverrides, handleChoose: handleChoose, handleInputChange: setSearchText, inputValue: searchText }));
+};
+exports.default = AffiliationsEditor;

package/dist/cjs/components/AffiliationsEditor/AffiliationsEditorItem.js

@@ -0,0 +1,176 @@
+"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 __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.AffiliationsEditorItem = void 0;
+const AnnotationRemove_1 = __importDefault(require("@manuscripts/assets/react/AnnotationRemove"));
+const ArrowDownBlue_1 = __importDefault(require("@manuscripts/assets/react/ArrowDownBlue"));
+const formik_1 = require("formik");
+const react_1 = __importStar(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const authors_1 = require("../../lib/authors");
+const AutoSaveInput_1 = require("../AutoSaveInput");
+const TextField_1 = require("../TextField");
+const Section = styled_components_1.default.section `
+  border: 1px solid ${(props) => props.theme.colors.border.field.default};
+  border-radius: ${(props) => props.theme.grid.radius.default};
+  background: ${(props) => props.theme.colors.background.primary};
+  margin-bottom: 2px;
+  overflow: hidden;
+`;
+const Title = styled_components_1.default.h4 `
+  margin: 0;
+  display: flex;
+  align-items: center;
+  font-size: 0.875rem;
+  padding-right: 0.5rem;
+  background: ${(props) => props.isInvalid ? props.theme.colors.background.warning : 'transparent'};
+  color: ${(props) => props.isInvalid ? props.theme.colors.text.warning : 'inherit'};
+`;
+const DropdownIndicator = (0, styled_components_1.default)(ArrowDownBlue_1.default) `
+  border: 0;
+  border-radius: 50%;
+  margin-right: 0.6em;
+  min-width: 20px;
+`;
+const ToggleButton = styled_components_1.default.button `
+  flex-grow: 1;
+  display: flex;
+  align-items: center;
+  width: 100%;
+  background: transparent;
+  border: none;
+  text-align: left;
+  font-family: ${(props) => props.theme.font.family.sans};
+  font-size: 1rem;
+  padding: 0.6em 0.5em;
+
+  outline: none;
+
+  &:focus {
+    color: ${(props) => props.theme.colors.button.primary.border.hover};
+  }
+
+  svg {
+    transform: ${(props) => (props.isOpen ? 'rotateX(180deg)' : 'initial')};
+  }
+`;
+const RemoveButton = styled_components_1.default.button `
+  border: none;
+  background: transparent;
+  padding: 0;
+
+  outline: none;
+
+  &:focus path {
+    fill: ${(props) => props.theme.colors.button.primary.color.hover};
+  }
+
+  svg {
+    width: 2rem;
+    height: 2rem;
+  }
+`;
+const AffiliationsForm = (0, styled_components_1.default)(formik_1.Form) `
+  border: 1px solid ${(props) => props.theme.colors.border.field.default};
+  border-radius: ${(props) => props.theme.grid.radius.default};
+  margin: 0.4rem 0.71rem 0.71rem;
+  overflow: hidden;
+`;
+const AffiliationsTextField = (0, styled_components_1.default)(TextField_1.TextField) `
+  border-radius: 0;
+  border-bottom: none;
+  border-right: none;
+  border-left: none;
+  background: transparent;
+  &:first-child {
+    border-top: none;
+  }
+
+  &[aria-invalid] {
+    background: ${(props) => props.theme.colors.background.warning};
+  }
+
+  &[aria-invalid]:focus {
+    background: transparent;
+  }
+`;
+const Columns = styled_components_1.default.div `
+  display: flex;
+`;
+const Column = styled_components_1.default.div `
+  flex: 1 1 auto;
+  max-width: 50%;
+  border-top: 1px solid ${(props) => props.theme.colors.border.field.default};
+  border-left: 1px solid ${(props) => props.theme.colors.border.field.default};
+  &:first-child {
+    border-left: none;
+  }
+`;
+const AffiliationsEditorItem = ({ affiliation, requestToggle, isOpen, updateAffiliation, removeAuthorAffiliation, }) => {
+    const remove = (0, react_1.useCallback)(() => {
+        removeAuthorAffiliation(affiliation);
+    }, [affiliation, removeAuthorAffiliation]);
+    const vivifiedAffiliation = Object.assign({ institution: '', department: '', addressLine1: '', addressLine2: '', addressLine3: '', city: '', county: '', country: '', postCode: '' }, affiliation);
+    const isInvalid = !vivifiedAffiliation.institution;
+    return (react_1.default.createElement(Section, null,
+        react_1.default.createElement(Title, { isInvalid: isInvalid },
+            react_1.default.createElement(ToggleButton, { type: "button", onClick: requestToggle, isOpen: isOpen },
+                react_1.default.createElement(DropdownIndicator, null,
+                    react_1.default.createElement(ArrowDownBlue_1.default, null)),
+                (0, authors_1.affiliationLabel)(affiliation)),
+            react_1.default.createElement(RemoveButton, { type: "button", "aria-label": "Delete this affiliation", onClick: remove },
+                react_1.default.createElement(AnnotationRemove_1.default, null))),
+        isOpen && (react_1.default.createElement(formik_1.Formik, { initialValues: vivifiedAffiliation, onSubmit: updateAffiliation }, () => (react_1.default.createElement(AffiliationsForm, null,
+            react_1.default.createElement(formik_1.Field, { name: "institution" }, (props) => (react_1.default.createElement(AutoSaveInput_1.AutoSaveInput, Object.assign({}, props, { component: AffiliationsTextField, saveOn: "blur", placeholder: "Institution Name", isInvalid: isInvalid })))),
+            react_1.default.createElement(formik_1.Field, { name: "department" }, (props) => (react_1.default.createElement(AutoSaveInput_1.AutoSaveInput, Object.assign({}, props, { component: AffiliationsTextField, saveOn: "blur", placeholder: "Department" })))),
+            react_1.default.createElement(formik_1.Field, { name: "addressLine1" }, (props) => (react_1.default.createElement(AutoSaveInput_1.AutoSaveInput, Object.assign({}, props, { component: AffiliationsTextField, saveOn: "blur", placeholder: "Street Address" })))),
+            react_1.default.createElement(Columns, null,
+                react_1.default.createElement(Column, null,
+                    react_1.default.createElement(formik_1.Field, { name: "city" }, (props) => (react_1.default.createElement(AutoSaveInput_1.AutoSaveInput, Object.assign({}, props, { component: AffiliationsTextField, saveOn: "blur", placeholder: "City" })))),
+                    react_1.default.createElement(formik_1.Field, { name: "county" }, (props) => (react_1.default.createElement(AutoSaveInput_1.AutoSaveInput, Object.assign({}, props, { component: AffiliationsTextField, saveOn: "blur", placeholder: "State / Province" }))))),
+                react_1.default.createElement(Column, null,
+                    react_1.default.createElement(formik_1.Field, { name: "postCode" }, (props) => (react_1.default.createElement(AutoSaveInput_1.AutoSaveInput, Object.assign({}, props, { component: AffiliationsTextField, saveOn: "blur", placeholder: "Postal Code" })))),
+                    react_1.default.createElement(formik_1.Field, { name: "country" }, (props) => (react_1.default.createElement(AutoSaveInput_1.AutoSaveInput, Object.assign({}, props, { component: AffiliationsTextField, saveOn: "blur", placeholder: "Country" }))))))))))));
+};
+exports.AffiliationsEditorItem = AffiliationsEditorItem;
+exports.default = exports.AffiliationsEditorItem;

package/dist/cjs/components/AffiliationsEditor/AffiliationsEditorProfile.js

@@ -0,0 +1,62 @@
+"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 __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 });
+const json_schema_1 = require("@manuscripts/json-schema");
+const react_1 = __importStar(require("react"));
+const AffiliationsEditorView_1 = __importDefault(require("./AffiliationsEditorView"));
+const AffiliationsEditorProfile = ({ affiliations, addAffiliation, updateAffiliation, removeAffiliation, components, styleOverrides, }) => {
+    const [searchText, setSearchText] = (0, react_1.useState)('');
+    const handleChoose = (0, react_1.useCallback)((value) => {
+        if (value) {
+            const selectedAffiliation = value;
+            addAffiliation(selectedAffiliation.value);
+        }
+        setSearchText('');
+    }, [addAffiliation]);
+    const affiliationsArr = Array.from(affiliations.values());
+    const updateUserProfileAffiliation = (0, react_1.useCallback)((data) => {
+        updateAffiliation(Object.assign(Object.assign({}, data), { objectType: json_schema_1.ObjectTypes.UserProfileAffiliation }));
+    }, [updateAffiliation]);
+    return (react_1.default.createElement(AffiliationsEditorView_1.default, { options: [], selected: affiliationsArr, updateAffiliation: updateUserProfileAffiliation, removeAuthorAffiliation: removeAffiliation, components: components, styleOverrides: styleOverrides, handleChoose: handleChoose, handleInputChange: setSearchText, inputValue: searchText }));
+};
+exports.default = AffiliationsEditorProfile;

package/dist/cjs/components/AffiliationsEditor/AffiliationsEditorView.js

@@ -0,0 +1,80 @@
+"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 __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 });
+const react_1 = __importStar(require("react"));
+const creatable_1 = __importDefault(require("react-select/creatable"));
+const styled_components_1 = require("styled-components");
+const AuthorFormComponents_1 = require("../AuthorForm/AuthorFormComponents");
+const AffiliationsEditorItem_1 = require("./AffiliationsEditorItem");
+const styles_1 = require("./styles");
+const reactSelectComponents = {
+    IndicatorsContainer: styles_1.AddAffiliationIndicator,
+};
+const AffiliationsEditorView = ({ options, selected, updateAffiliation, removeAuthorAffiliation, handleChoose, handleInputChange, inputValue, components, styleOverrides, }) => {
+    const { Legend } = Object.assign(Object.assign({}, AuthorFormComponents_1.defaultAuthorFormComponents), components);
+    const [currentSection, setCurrentSection] = (0, react_1.useState)('');
+    const requestOpen = (id) => {
+        setCurrentSection(id === currentSection ? '' : id);
+    };
+    const theme = (0, react_1.useContext)(styled_components_1.ThemeContext);
+    return (react_1.default.createElement(styles_1.Container, null,
+        react_1.default.createElement(Legend, null, "Affiliations"),
+        react_1.default.createElement(styles_1.Field, null,
+            react_1.default.createElement(styles_1.List, null, selected &&
+                selected.map((affiliation) => {
+                    const { _id } = affiliation;
+                    return (react_1.default.createElement(AffiliationsEditorItem_1.AffiliationsEditorItem, { key: _id, affiliation: affiliation, isOpen: currentSection === _id, requestToggle: () => requestOpen(_id), updateAffiliation: updateAffiliation, removeAuthorAffiliation: removeAuthorAffiliation }));
+                })),
+            react_1.default.createElement(creatable_1.default, { isMulti: false, isClearable: false, options: options, onInputChange: (t) => handleInputChange(t), inputValue: inputValue, onChange: handleChoose, value: null, placeholder: "Begin typing to add affiliation", isValidNewOption: (currentText) => !!currentText, components: reactSelectComponents, noOptionsMessage: () => 'Type the name of an institution', styles: {
+                    control: (provided, state) => (Object.assign(Object.assign({}, provided), { backgroundColor: state.isFocused
+                            ? theme.colors.background.fifth
+                            : theme.colors.background.primary, borderColor: state.isFocused
+                            ? theme.colors.border.field.active
+                            : theme.colors.border.field.default, '&:hover': {
+                            backgroundColor: theme.colors.background.fifth,
+                        }, borderRadius: theme.grid.radius.default, boxShadow: 'none', fontFamily: theme.font.family.sans })),
+                    menu: (provided) => (Object.assign(Object.assign({}, provided), { zIndex: (styleOverrides && styleOverrides.menuZIndex) ||
+                            provided.zIndex })),
+                } }))));
+};
+exports.default = AffiliationsEditorView;

package/dist/cjs/components/AffiliationsEditor/index.js

@@ -0,0 +1,25 @@
+"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.AffiliationsEditorProfile = exports.AffiliationsEditor = void 0;
+var AffiliationsEditor_1 = require("./AffiliationsEditor");
+Object.defineProperty(exports, "AffiliationsEditor", { enumerable: true, get: function () { return __importDefault(AffiliationsEditor_1).default; } });
+var AffiliationsEditorProfile_1 = require("./AffiliationsEditorProfile");
+Object.defineProperty(exports, "AffiliationsEditorProfile", { enumerable: true, get: function () { return __importDefault(AffiliationsEditorProfile_1).default; } });

package/dist/cjs/components/AffiliationsEditor/styles.js

@@ -0,0 +1,56 @@
+"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.AddAffiliationIndicator = exports.AddAffiliationContainer = exports.List = exports.Field = exports.Container = void 0;
+const AddAuthor_1 = __importDefault(require("@manuscripts/assets/react/AddAuthor"));
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+exports.Container = styled_components_1.default.div `
+  margin: 0 1.89rem 1rem;
+`;
+exports.Field = styled_components_1.default.div `
+  margin: 1rem 0;
+`;
+exports.List = styled_components_1.default.div `
+  margin-bottom: 0.5rem;
+`;
+exports.AddAffiliationContainer = styled_components_1.default.div `
+  padding-right: 0.71rem;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-around;
+
+  svg {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+
+  circle,
+  use {
+    fill: ${(props) => props.theme.colors.brand.default};
+  }
+
+  path {
+    mask: none;
+  }
+`;
+const AddAffiliationIndicator = () => (react_1.default.createElement(exports.AddAffiliationContainer, null,
+    react_1.default.createElement(AddAuthor_1.default, null)));
+exports.AddAffiliationIndicator = AddAffiliationIndicator;

package/dist/cjs/components/AuthorForm/AuthorForm.js

@@ -0,0 +1,99 @@
+"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 __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AuthorForm = void 0;
+const formik_1 = require("formik");
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const AutoSaveInput_1 = require("../AutoSaveInput");
+const Checkbox_1 = require("../Checkbox");
+const TextField_1 = require("../TextField");
+const TextFieldGroupContainer_1 = require("../TextFieldGroupContainer");
+const AuthorFormComponents_1 = require("./AuthorFormComponents");
+const RemoveAuthorButton_1 = __importDefault(require("./RemoveAuthorButton"));
+const ensureString = (value) => value || '';
+const buildInitialValues = (author) => {
+    return {
+        affiliations: author.affiliations || [],
+        _id: author._id,
+        priority: Number(author.priority),
+        email: ensureString(author.email),
+        isCorresponding: Boolean(author.isCorresponding),
+        bibliographicName: {
+            _id: author.bibliographicName._id,
+            objectType: author.bibliographicName.objectType,
+            given: ensureString(author.bibliographicName.given),
+            family: ensureString(author.bibliographicName.family),
+            suffix: ensureString(author.bibliographicName.suffix),
+        },
+        role: ensureString(author.role),
+        contribution: ensureString(author.contribution),
+        ORCIDIdentifier: ensureString(author.ORCIDIdentifier),
+        roles: author.roles || [],
+    };
+};
+const OrcidContainer = styled_components_1.default.div `
+  margin: 16px 0 0;
+`;
+const RolesContainer = styled_components_1.default.div `
+  margin: 16px 0;
+`;
+const AuthorForm = ({ author, handleSave, removeAuthor, isRemoveAuthorOpen, handleRemoveAuthor, components, }) => {
+    const { Legend, TextField } = Object.assign(Object.assign({}, AuthorFormComponents_1.defaultAuthorFormComponents), components);
+    return (react_1.default.createElement(formik_1.Formik, { initialValues: buildInitialValues(author), onSubmit: handleSave, enableReinitialize: true }, ({ values }) => {
+        const isAuthor = values.role === 'author';
+        return (react_1.default.createElement(formik_1.Form, null,
+            react_1.default.createElement(AuthorFormComponents_1.Fields, null,
+                react_1.default.createElement(AuthorFormComponents_1.Fieldset, null,
+                    react_1.default.createElement(AuthorFormComponents_1.Container, null,
+                        react_1.default.createElement(Legend, null, "Details"),
+                        react_1.default.createElement(RemoveAuthorButton_1.default, { author: author, removeAuthor: () => {
+                                removeAuthor(author);
+                            }, isOpen: isRemoveAuthorOpen, handleOpen: handleRemoveAuthor })),
+                    react_1.default.createElement(TextFieldGroupContainer_1.TextFieldGroupContainer, null,
+                        react_1.default.createElement(formik_1.Field, { name: 'bibliographicName.given' }, (props) => (react_1.default.createElement(AutoSaveInput_1.AutoSaveInput, Object.assign({}, props, { component: TextField, saveOn: 'blur', placeholder: 'Given name', testId: "bibliographic-name-given" })))),
+                        react_1.default.createElement(formik_1.Field, { name: 'bibliographicName.family' }, (props) => (react_1.default.createElement(AutoSaveInput_1.AutoSaveInput, Object.assign({}, props, { component: TextField, saveOn: 'blur', placeholder: 'Family name', testId: "bibliographic-name-family" }))))),
+                    react_1.default.createElement(Checkbox_1.CheckboxLabel, { disabled: !isAuthor },
+                        react_1.default.createElement(formik_1.Field, { name: 'isCorresponding' }, (props) => (react_1.default.createElement(AutoSaveInput_1.AutoSaveInput, Object.assign({}, props, { disabled: !isAuthor, component: Checkbox_1.CheckboxField, saveOn: 'change', testId: "corresponding-checkbox" })))),
+                        react_1.default.createElement(AuthorFormComponents_1.LabelText, null, "Corresponding Author")),
+                    values.isCorresponding && (react_1.default.createElement(AuthorFormComponents_1.Label, null,
+                        react_1.default.createElement(formik_1.Field, { name: 'email', type: 'email' }, (props) => (react_1.default.createElement(AutoSaveInput_1.AutoSaveInput, Object.assign({}, props, { disabled: !isAuthor, component: TextField, saveOn: 'blur', placeholder: 'Email address', testId: "corresponding-email" })))))),
+                    react_1.default.createElement(Checkbox_1.CheckboxLabel, null,
+                        react_1.default.createElement(formik_1.Field, { name: 'role', type: 'checkbox' }, (props) => (react_1.default.createElement(Checkbox_1.CheckboxField, { name: 'role', checked: isAuthor, onChange: (event) => __awaiter(void 0, void 0, void 0, function* () {
+                                props.form.setFieldValue(props.field.name, event.target.checked ? 'author' : 'other', false);
+                                yield props.form.submitForm();
+                            }) }))),
+                        react_1.default.createElement(AuthorFormComponents_1.LabelText, null, "Include in Authors List")),
+                    react_1.default.createElement(OrcidContainer, null,
+                        react_1.default.createElement(TextField_1.TextFieldLabel, null,
+                            react_1.default.createElement(AuthorFormComponents_1.LabelText, null, "ORCID"),
+                            react_1.default.createElement(formik_1.Field, { name: 'ORCIDIdentifier', type: 'text' }, (props) => (react_1.default.createElement(AutoSaveInput_1.AutoSaveInput, Object.assign({}, props, { component: TextField, saveOn: 'blur', placeholder: 'https://orcid.org/...', testId: "bibliographic-name-family" }))))))))));
+    }));
+};
+exports.AuthorForm = AuthorForm;

package/dist/cjs/components/AuthorForm/AuthorFormComponents.js

@@ -0,0 +1,63 @@
+"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.defaultAuthorFormComponents = exports.Container = exports.Legend = exports.Fieldset = exports.LabelText = exports.Label = exports.Fields = void 0;
+const styled_components_1 = __importDefault(require("styled-components"));
+const Checkbox_1 = require("../Checkbox");
+const TextField_1 = require("../TextField");
+exports.Fields = styled_components_1.default.div `
+  padding: 16px;
+`;
+exports.Label = styled_components_1.default.label `
+  display: flex;
+  flex-direction: column;
+  margin-bottom: 10px;
+`;
+exports.LabelText = styled_components_1.default.div `
+  font: ${(props) => props.theme.font.weight.normal}
+    ${(props) => props.theme.font.size.normal} / 1
+    ${(props) => props.theme.font.family.sans};
+  letter-spacing: -0.2px;
+  color: ${(props) => props.theme.colors.text.primary};
+`;
+exports.Fieldset = styled_components_1.default.fieldset `
+  border: none;
+
+  &:not(:last-child) {
+    margin-bottom: 16px;
+  }
+`;
+exports.Legend = styled_components_1.default.legend `
+  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};
+`;
+exports.Container = styled_components_1.default.div `
+  display: flex;
+  justify-content: space-between;
+`;
+exports.defaultAuthorFormComponents = {
+    Legend: exports.Legend,
+    CheckboxLabel: Checkbox_1.CheckboxLabel,
+    TextField: TextField_1.TextField,
+};