fix: fixed unnecessary re-rendering of inputs

atls · Aug 25, 2023 · 9183859 · 9183859
1 parent 1a80bf2
commit 9183859
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 14 deletions.
diff --git a/packages/payment-widget/src/hooks/use-fields-render.hook.tsx b/packages/payment-widget/src/hooks/use-fields-render.hook.tsx
@@ -5,10 +5,10 @@ import React                 from 'react'
 import { useIntl }           from 'react-intl'
 
 import { Field }             from '../interfaces'
+import { HandleBlurField }   from '../interfaces'
 import { FieldState }        from '../interfaces'
 import { HandleChangeField } from '../interfaces'
 import { FieldsErrors }      from '../interfaces'
-import { ValidateField }     from '../interfaces'
 import { MemoizedInput }     from '../ui'
 import { translate }         from '../utils/translate.util'
 
@@ -17,7 +17,7 @@ export const useFieldsRenderer = (
   errors: FieldsErrors,
   fieldsState: FieldState,
   handleChange: HandleChangeField,
-  handleBlur: ValidateField,
+  handleBlur: HandleBlurField,
   inputGaps: number
 ) => {
   const intl = useIntl()
@@ -36,8 +36,8 @@ export const useFieldsRenderer = (
           required={field.required ?? false}
           value={fieldsState[field.name]}
           errorText={translateError}
-          onChange={(value) => handleChange(field.name, value)}
-          onBlur={() => handleBlur(field.name, fieldsState[field.name], field.required)}
+          onChangeNative={handleChange}
+          onBlur={handleBlur}
         />
         <Condition match={isNotLastField}>
           <Layout flexBasis={inputGaps} flexShrink={0} />

diff --git a/packages/payment-widget/src/hooks/use-fields-state.hook.ts b/packages/payment-widget/src/hooks/use-fields-state.hook.ts
@@ -1,7 +1,9 @@
+import { FormEvent }         from 'react'
 import { useCallback }       from 'react'
 import { useState }          from 'react'
 
 import { Field }             from '../interfaces'
+import { HandleBlurField }   from '../interfaces'
 import { FieldState }        from '../interfaces'
 import { HandleChangeField } from '../interfaces'
 import { FieldsNames }       from '../interfaces'
@@ -12,14 +14,18 @@ export const useFieldsState = (fields: Field[], validateField: ValidateField) =>
   const [fieldsState, setFieldsState] = useState<FieldState>(initialState as FieldState)
 
   const handleChange: HandleChangeField = useCallback(
-    (fieldName, value) =>
-      setFieldsState((prevFieldsState) => ({ ...prevFieldsState, [fieldName]: value })),
+    (e: FormEvent<HTMLInputElement>) => {
+      const name = e.currentTarget.name as FieldsNames
+      const { value } = e.currentTarget
+      setFieldsState((prevFields) => ({ ...prevFields, [name]: value }))
+    },
     [setFieldsState]
   )
 
-  const handleBlur = useCallback(
-    (fieldName: FieldsNames, value: string, required = false) => {
-      validateField(fieldName, value, required)
+  const handleBlur: HandleBlurField = useCallback(
+    (e: FormEvent<HTMLInputElement>) => {
+      const inputElement = e.target as HTMLInputElement
+      validateField(inputElement.name as FieldsNames, inputElement.value, inputElement.required)
     },
     [validateField]
   )

diff --git a/packages/payment-widget/src/interfaces/fields.interfaces.ts b/packages/payment-widget/src/interfaces/fields.interfaces.ts
@@ -1,3 +1,4 @@
+import { FormEvent }              from 'react'
 import { HTMLInputTypeAttribute } from 'react'
 
 import { AdditionalFieldsType }   from '../enums'
@@ -6,7 +7,9 @@ import { DirectionFields }        from './styles.interfaces'
 
 export type FieldsNames = RequiredFieldsType | AdditionalFieldsType
 export type FieldState = Record<FieldsNames, string>
-export type HandleChangeField = (fieldName: FieldsNames, value: string) => void
+export type ValidateField = (name: FieldsNames, value: string, required?: boolean) => void
+export type HandleChangeField = (e: FormEvent<HTMLInputElement>) => void
+export type HandleBlurField = (e: FormEvent<HTMLInputElement>) => void
 
 export interface Field {
   name: FieldsNames
@@ -27,8 +30,6 @@ export type FieldsErrors = {
   [key in FieldsNames]: string
 }
 
-export type ValidateField = (name: FieldsNames, value: string, required?: boolean) => void
-
 export interface FieldsProps {
   errors: FieldsErrors
   validateField: ValidateField

diff --git a/packages/payment-widget/src/ui/settings.component.tsx b/packages/payment-widget/src/ui/settings.component.tsx
@@ -2,11 +2,12 @@ import { Condition }     from '@atls-ui-parts/condition'
 import { HiddenInput }   from '@atls-ui-parts/hidden-input'
 
 import React             from 'react'
+import { memo }          from 'react'
 
 import { LanguagesType } from '../enums'
 import { SettingsProps } from '../interfaces'
 
-export const Settings = ({
+export const Settings = memo(({
   storeId,
   language = LanguagesType.RUSSIAN,
   isNewWindow = false,
@@ -20,4 +21,4 @@ export const Settings = ({
       <HiddenInput name='receipt' defaultValue='' disabled readOnly />
     </Condition>
   </>
-)
+))