From 6df410165d232d34e85e65c252175f363e2c51c9 Mon Sep 17 00:00:00 2001
From: malexsan <alexandru.munt@gmail.com>
Date: Thu, 20 Dec 2018 14:28:57 +0200
Subject: [PATCH] feat(adminUserForm): add validate array to each field and fix
wasteful rerenders
---
.../src/ValidatedFormField.js | 25 +++++++++++++++----
.../app/components/AdminUserForm.js | 12 ++++-----
2 files changed, 26 insertions(+), 11 deletions(-)
diff --git a/packages/component-faraday-ui/src/ValidatedFormField.js b/packages/component-faraday-ui/src/ValidatedFormField.js
index f34967f63..833223f50 100644
--- a/packages/component-faraday-ui/src/ValidatedFormField.js
+++ b/packages/component-faraday-ui/src/ValidatedFormField.js
@@ -4,7 +4,13 @@ import { Field } from 'formik'
import PropTypes from 'prop-types'
import styled from 'styled-components'
import { th } from '@pubsweet/ui-toolkit'
-import { compose, withHandlers, withProps } from 'recompose'
+import {
+ compose,
+ withProps,
+ withHandlers,
+ shouldUpdate,
+ setDisplayName,
+} from 'recompose'
const WrappedComponent = compose(
withHandlers({
@@ -23,6 +29,11 @@ const WrappedComponent = compose(
error: hasError && get(errors, name),
validationStatus: hasError ? 'error' : 'default',
})),
+ shouldUpdate(
+ (prev, next) =>
+ get(prev, 'field.value') !== get(next, 'field.value') ||
+ get(prev, 'error') !== get(next, 'error'),
+ ),
)(
({
error,
@@ -70,10 +81,14 @@ ValidatedFormField.propTypes = {
]).isRequired,
}
-export default withProps(({ validate }) => ({
- validateFn: value =>
- validate.filter(fn => fn(value)).reduce((acc, fn) => fn(value), ''),
-}))(ValidatedFormField)
+export default compose(
+ setDisplayName('ValidatedFormikField'),
+ withProps(({ validate = [] }) => ({
+ validateFn: (value = '') =>
+ validate.reduce((acc, fn) => acc || fn(value), ''),
+ })),
+ shouldUpdate(() => false),
+)(ValidatedFormField)
// #region styles
const MessageWrapper = styled.div`
diff --git a/packages/component-user/app/components/AdminUserForm.js b/packages/component-user/app/components/AdminUserForm.js
index 6faff2f37..7bf96d6ed 100644
--- a/packages/component-user/app/components/AdminUserForm.js
+++ b/packages/component-user/app/components/AdminUserForm.js
@@ -11,13 +11,14 @@ import {
Text,
Label,
IconButton,
+ MenuCountry,
RowOverrideAlert,
ItemOverrideAlert,
ValidatedFormField,
withRoles,
withFetching,
withCountries,
- MenuCountry,
+ validators,
} from 'pubsweet-component-faraday-ui'
// #region helpers
@@ -87,7 +88,7 @@ const FormModal = ({
component={TextField}
inline
name="email"
- validate={[min3, max6]}
+ validate={[validators.emailValidator]}
/>
</ItemOverrideAlert>
@@ -195,10 +196,9 @@ export default compose(
})),
withHandlers({
onSubmit: ({ onSubmit, ...props }) => (values, formProps) => {
- console.log('the values', values)
- // if (typeof onSubmit === 'function') {
- // onSubmit(values, { ...formProps, ...props })
- // }
+ if (typeof onSubmit === 'function') {
+ onSubmit(values, { ...formProps, ...props })
+ }
},
onClose: ({ onCancel, ...props }) => () => {
if (typeof onCancel === 'function') {
--
GitLab