1
0
mirror of https://github.com/ansible/awx.git synced 2024-10-27 00:55:06 +03:00

Wrap onChange functions passed to lookups in useCallback since these functions are eventually passed to a hook and used in a dependency array.

This commit is contained in:
mabashian 2020-09-24 17:07:58 -04:00
parent ce65ed0ac6
commit 24a4236232
2 changed files with 22 additions and 10 deletions

View File

@ -1,6 +1,6 @@
import React from 'react';
import React, { useCallback } from 'react';
import { func, shape } from 'prop-types';
import { Formik, useField } from 'formik';
import { Formik, useField, useFormikContext } from 'formik';
import { withI18n } from '@lingui/react';
import { t } from '@lingui/macro';
import { Form, FormGroup } from '@patternfly/react-core';
@ -22,11 +22,19 @@ import CredentialLookup from '../../../components/Lookup/CredentialLookup';
import { VariablesField } from '../../../components/CodeMirrorInput';
function ContainerGroupFormFields({ i18n }) {
const { setFieldValue } = useFormikContext();
const [credentialField, credentialMeta, credentialHelpers] = useField(
'credential'
);
const [overrideField] = useField('override');
const onCredentialChange = useCallback(
value => {
setFieldValue('credential', value);
},
[setFieldValue]
);
return (
<>
<FormField
@ -43,9 +51,7 @@ function ContainerGroupFormFields({ i18n }) {
helperTextInvalid={credentialMeta.error}
isValid={!credentialMeta.touched || !credentialMeta.error}
onBlur={() => credentialHelpers.setTouched()}
onChange={value => {
credentialHelpers.setValue(value);
}}
onChange={onCredentialChange}
value={credentialField.value}
required
tooltip={i18n._(

View File

@ -1,6 +1,6 @@
import React from 'react';
import React, { useCallback } from 'react';
import { shape, func } from 'prop-types';
import { Formik, useField } from 'formik';
import { Formik, useField, useFormikContext } from 'formik';
import { withI18n } from '@lingui/react';
import { t } from '@lingui/macro';
import { Form, FormGroup } from '@patternfly/react-core';
@ -17,12 +17,20 @@ import hasCustomMessages from './hasCustomMessages';
import typeFieldNames, { initialConfigValues } from './typeFieldNames';
function NotificationTemplateFormFields({ i18n, defaultMessages }) {
const { setFieldValue } = useFormikContext();
const [orgField, orgMeta, orgHelpers] = useField('organization');
const [typeField, typeMeta] = useField({
name: 'notification_type',
validate: required(i18n._(t`Select a value for this field`), i18n),
});
const onOrganizationChange = useCallback(
value => {
setFieldValue('organization', value);
},
[setFieldValue]
);
return (
<>
<FormField
@ -43,9 +51,7 @@ function NotificationTemplateFormFields({ i18n, defaultMessages }) {
helperTextInvalid={orgMeta.error}
isValid={!orgMeta.touched || !orgMeta.error}
onBlur={() => orgHelpers.setTouched()}
onChange={value => {
orgHelpers.setValue(value);
}}
onChange={onOrganizationChange}
value={orgField.value}
touched={orgMeta.touched}
error={orgMeta.error}