From 7923e3c38fc911e2983e90ad2d57828ce46f0feb Mon Sep 17 00:00:00 2001
From: Jure Triglav <juretriglav@gmail.com>
Date: Thu, 30 Jul 2020 15:26:24 +0200
Subject: [PATCH] feat: initial links/urls array component

---
 .../src/components/config/Elements.js         |  8 ++
 .../src/components/FormTemplate.js            |  2 +
 .../src/components/LinksInput.js              | 95 +++++++++++++++++++
 3 files changed, 105 insertions(+)
 create mode 100644 app/components/component-submit/src/components/LinksInput.js

diff --git a/app/components/component-formbuilder/src/components/config/Elements.js b/app/components/component-formbuilder/src/components/config/Elements.js
index 25e529bb7a..6e087d0c19 100644
--- a/app/components/component-formbuilder/src/components/config/Elements.js
+++ b/app/components/component-formbuilder/src/components/config/Elements.js
@@ -89,6 +89,14 @@ const elements = {
     shortDescription: textfield,
     validate,
   },
+  LinksInput: {
+    id: textfield,
+    title: textfield,
+    name: textfield,
+    order: orderfield,
+    shortDescription: textfield,
+    validate,
+  },
   AbstractEditor: {
     id: textfield,
     title: textfield,
diff --git a/app/components/component-submit/src/components/FormTemplate.js b/app/components/component-submit/src/components/FormTemplate.js
index 092be22b20..d6913a4c31 100644
--- a/app/components/component-submit/src/components/FormTemplate.js
+++ b/app/components/component-submit/src/components/FormTemplate.js
@@ -15,6 +15,7 @@ import { AbstractEditor } from 'xpub-edit'
 import { Section as Container, Select } from '../../../shared'
 import { Heading1, Section, Legend, SubNote } from '../style'
 import AuthorsInput from './AuthorsInput'
+import LinksInput from './LinksInput'
 import Supplementary from './Supplementary'
 import Confirm from './Confirm'
 
@@ -101,6 +102,7 @@ elements.AbstractEditor = ({
 
 elements.AuthorsInput = AuthorsInput
 elements.Select = Select
+elements.LinksInput = LinksInput
 
 const rejectProps = (obj, keys) =>
   Object.keys(obj)
diff --git a/app/components/component-submit/src/components/LinksInput.js b/app/components/component-submit/src/components/LinksInput.js
new file mode 100644
index 0000000000..c92d594be7
--- /dev/null
+++ b/app/components/component-submit/src/components/LinksInput.js
@@ -0,0 +1,95 @@
+import React from 'react'
+import styled from 'styled-components'
+import { FieldArray } from 'formik'
+import { cloneDeep, set } from 'lodash'
+import { TextField, Button, ValidatedFieldFormik } from '@pubsweet/ui'
+import { minSize } from 'xpub-validators'
+
+const minSize1 = minSize(1)
+
+const Inline = styled.div`
+  display: inline-block;
+  margin-right: 30px;
+`
+
+const UnbulletedList = styled.div`
+  list-style-type: none;
+`
+
+const Spacing = styled.div`
+  padding: 15px 0px;
+`
+
+const Author = styled.div`
+  padding-bottom: 10px;
+`
+
+const URLInput = input => (
+  <TextField label="URL" placeholder="Enter a URL" {...input} />
+)
+
+const onChangeFn = (onChange, setFieldValue, values) => value => {
+  const val = value.target ? value.target.value : value
+  setFieldValue(value.target.name, val, true)
+
+  const data = cloneDeep(values)
+  set(data, value.target.name, val)
+  onChange(data.authors, 'authors')
+}
+
+const renderLinks = onChange => ({
+  form: { values, setFieldValue },
+  insert,
+  remove,
+}) => (
+  <ul>
+    <UnbulletedList>
+      <li>
+        <Button
+          onClick={() =>
+            insert((values.authors || []).length, {
+              firstName: '',
+              lastName: '',
+              email: '',
+              affiliation: '',
+            })
+          }
+          plain
+          type="button"
+        >
+          Add another link
+        </Button>
+      </li>
+      {(values.authors || []).map((author, index) => (
+        <li key={`author-${author}`}>
+          <Spacing>
+            <Author>
+              Link:&nbsp;
+              {values.authors.length > 1 && (
+                <Button onClick={() => remove(index)} type="button">
+                  Remove
+                </Button>
+              )}
+            </Author>
+            <div>
+              <Inline>
+                <ValidatedFieldFormik
+                  component={URLInput}
+                  name={`authors.${index}.firstName`}
+                  onChange={onChangeFn(onChange, setFieldValue, values)}
+                  validate={minSize1}
+                />
+              </Inline>
+            </div>
+          </Spacing>
+        </li>
+      ))}
+    </UnbulletedList>
+  </ul>
+)
+
+const AuthorsInput = ({ onChange }) => (
+  <FieldArray name="authors" render={renderLinks(onChange)} />
+)
+
+export default AuthorsInput
-- 
GitLab