From 1e3988b506f1900a029a5a0b1e5eb77ca60b8228 Mon Sep 17 00:00:00 2001
From: Jure Triglav <juretriglav@gmail.com>
Date: Thu, 11 Jun 2020 00:29:04 +0200
Subject: [PATCH] fix: quick fix for validations in form builder
---
.../src/components/ComponentProperties.jsx | 2 +-
.../src/components/FormBuilder.jsx | 105 ++++++++++--------
.../src/components/builderComponents/Menu.js | 65 ++++++-----
3 files changed, 91 insertions(+), 81 deletions(-)
diff --git a/app/components/component-xpub-formbuilder/src/components/ComponentProperties.jsx b/app/components/component-xpub-formbuilder/src/components/ComponentProperties.jsx
index 49e206ed73..88e837b92b 100644
--- a/app/components/component-xpub-formbuilder/src/components/ComponentProperties.jsx
+++ b/app/components/component-xpub-formbuilder/src/components/ComponentProperties.jsx
@@ -50,7 +50,7 @@ const ComponentProperties = ({
</Section>
{selectComponentValue &&
map(components[selectComponentValue], (value, key) => (
- <Section>
+ <Section key={key}>
<Legend space>{`Field ${key}`}</Legend>
<ValidatedFieldFormik
component={elements[value.component].default}
diff --git a/app/components/component-xpub-formbuilder/src/components/FormBuilder.jsx b/app/components/component-xpub-formbuilder/src/components/FormBuilder.jsx
index 25c39956dd..81eb4d088c 100644
--- a/app/components/component-xpub-formbuilder/src/components/FormBuilder.jsx
+++ b/app/components/component-xpub-formbuilder/src/components/FormBuilder.jsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useState } from 'react'
import {
compose,
withState,
@@ -30,9 +30,9 @@ const Status = styled.div`
display: inline-flex;
`
-const StatusIdle = styled(Status).attrs({
- children: () => <StatusIcon>plus_circle</StatusIcon>,
-})``
+const StatusIdle = styled(Status).attrs(props => ({
+ children: <StatusIcon>plus_circle</StatusIcon>,
+}))``
const Root = styled.div`
display: flex;
@@ -91,12 +91,12 @@ const BuilderElement = ({ elements, changeProperties, deleteElement, form }) =>
</Element>
))
-const AddButtonElement = ({ addElements }) => (
+const AddButtonElement = ({ addElement }) => (
<Root>
<Main>
<Action
onClick={() =>
- addElements({
+ addElement({
title: 'New Component',
id: `${Date.now()}`,
})
@@ -111,46 +111,57 @@ const AddButtonElement = ({ addElements }) => (
const FormBuilder = ({
form,
- elements,
- addElements,
+ // elements,
+ // addElements,
changeProperties,
deleteElement,
-}) => (
- <Page>
- <AddButtonElement addElements={addElements} form={form} id="add-element" />
- {elements && elements.length > 0 && (
- <BuilderElement
- changeProperties={changeProperties}
- deleteElement={deleteElement}
- elements={elements}
- form={form}
- id="builder-element"
- />
- )}
- </Page>
-)
-
-FormBuilder.displayName = 'FormBuilder'
-
-export default compose(
- withState('elements', 'onAddElements', ({ form }) => form.children || []),
- withHandlers({
- addElements: ({ onAddElements, form }) => addElement =>
- onAddElements(() => {
- const addEl = { children: form.children || [] }
- addEl.children = [...addEl.children, addElement]
- return addEl.children
- }),
- }),
- lifecycle({
- componentWillReceiveProps(nextProps) {
- if (this.props.form.children !== nextProps.form.children) {
- this.setState({ elements: nextProps.form.children })
- }
-
- if (this.props.elements !== nextProps.elements) {
- this.setState({ elements: nextProps.elements })
- }
- },
- }),
-)(FormBuilder)
+}) => {
+ const [elements, setElements] = useState(form.children || [])
+ const addElement = element => {
+ setElements([...elements, element])
+ }
+ // const addElements = useCallback(() => {
+
+ // })
+
+ return (
+ <Page>
+ <AddButtonElement addElement={addElement} form={form} id="add-element" />
+ {elements && elements.length > 0 && (
+ <BuilderElement
+ changeProperties={changeProperties}
+ deleteElement={deleteElement}
+ elements={elements}
+ form={form}
+ id="builder-element"
+ />
+ )}
+ </Page>
+ )
+}
+
+export default FormBuilder
+// FormBuilder.displayName = 'FormBuilder'
+
+// export default compose(
+// withState('elements', 'onAddElements', ({ form }) => form.children || []),
+// withHandlers({
+// addElements: ({ onAddElements, form }) => addElement =>
+// onAddElements(() => {
+// const addEl = { children: form.children || [] }
+// addEl.children = [...addEl.children, addElement]
+// return addEl.children
+// }),
+// }),
+// lifecycle({
+// componentWillReceiveProps(nextProps) {
+// if (this.props.form.children !== nextProps.form.children) {
+// this.setState({ elements: nextProps.form.children })
+// }
+
+// if (this.props.elements !== nextProps.elements) {
+// this.setState({ elements: nextProps.elements })
+// }
+// },
+// }),
+// )(FormBuilder)
diff --git a/app/components/component-xpub-formbuilder/src/components/builderComponents/Menu.js b/app/components/component-xpub-formbuilder/src/components/builderComponents/Menu.js
index 2bb0ae68a0..f1b66b0c53 100644
--- a/app/components/component-xpub-formbuilder/src/components/builderComponents/Menu.js
+++ b/app/components/component-xpub-formbuilder/src/components/builderComponents/Menu.js
@@ -1,40 +1,39 @@
import React, { useState } from 'react'
import { Select, TextField, ValidatedFieldFormik } from '@pubsweet/ui'
-import { compose, withState, withHandlers } from 'recompose'
+// import { compose, withState, withHandlers } from 'recompose'
import { Legend, Section } from '../styles'
-const ValidationMenu = input => {
- const [validations, setValidations] = useState()
+const ValidationMenu = input => (
+ // const validations = useState([])
- return (
- <div>
- <Select
- {...input}
- onChange={value => setValidations(value)}
- selectElement={value => {
- input.onSelectElement(value)
- }}
- />
- {
- // the actual value is an object with:
- // [{"value":"minSize","label":"minSize"},{"value":"minChars","label":"minimum Characters"},{"value":"maxChars","label":"maximum Characters"}]"
+ <>
+ <Select
+ {...input}
+ // onChange={select => input.onChange(select.map(s => s.value))}
+ // onChange={select => setValidations(select.map(s => s.value))}
+ />
+
+ {((Array.isArray(input.value) && input.value) || []).map(validation => {
+ if (validation.value !== 'required') {
+ return (
+ <Section key={validation.value}>
+ <Legend space>{validation.label} value</Legend>
+ <ValidatedFieldFormik
+ component={TextField}
+ name={`validateValue.${validation.value}`}
+ />
+ </Section>
+ )
}
- {validations && validations !== 'required' && (
- <Section>
- <Legend space>Field Min / Max</Legend>
- <ValidatedFieldFormik
- component={TextField}
- name={`validateValue.${input.selectelement}`}
- />
- </Section>
- )}
- </div>
- )
-}
+ return null
+ })}
+ </>
+)
-export default compose(
- withState('selectelement', 'changeSelect', undefined),
- withHandlers({
- onSelectElement: ({ changeSelect }) => value => changeSelect(() => value),
- }),
-)(ValidationMenu)
+export default ValidationMenu
+// export default compose(
+// withState('selectelement', 'changeSelect', undefined),
+// withHandlers({
+// onSelectElement: ({ changeSelect }) => value => changeSelect(() => value),
+// }),
+// )(ValidationMenu)
--
GitLab