mirror of
https://gitlab.com/mbugroup/lti-web-client.git
synced 2026-05-20 21:41:57 +00:00
refactor(FE): Refactor handleBlurField to use useCallback
This commit is contained in:
+21
-12
@@ -1,4 +1,4 @@
|
||||
import { useEffect, useMemo, useState } from 'react';
|
||||
import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
|
||||
import {
|
||||
DeliveryOrderProductFormValues,
|
||||
DeliveryOrderProductSchema,
|
||||
@@ -271,15 +271,18 @@ const DeliveryOrderProductForm = ({
|
||||
// setSelectedProduct(null);
|
||||
};
|
||||
|
||||
const handleBlurField = (field: string) => {
|
||||
setCurrentInput(field);
|
||||
const handleBlurField = useCallback(
|
||||
(field: string) => {
|
||||
setCurrentInput(field);
|
||||
|
||||
handleMarketingCalculation(field, {
|
||||
values: formik.values,
|
||||
setFieldValue: formik.setFieldValue,
|
||||
hasSisaBerat,
|
||||
});
|
||||
};
|
||||
handleMarketingCalculation(field, {
|
||||
values: formik.values,
|
||||
setFieldValue: formik.setFieldValue,
|
||||
hasSisaBerat,
|
||||
});
|
||||
},
|
||||
[formik.values, formik.setFieldValue, hasSisaBerat]
|
||||
);
|
||||
|
||||
// Handler untuk onChange - auto calculation real-time untuk field yang mempengaruhi total_price (total_peti, weight_per_convertion, price_per_convertion, sisa_berat, price_sisa_berat, price_per_qty, qty)
|
||||
const handleFieldChange = (
|
||||
@@ -324,8 +327,12 @@ const DeliveryOrderProductForm = ({
|
||||
|
||||
const { setValues: setFormikValues } = formik;
|
||||
|
||||
const processedInitialValuesRef = useRef<number | null>(null);
|
||||
useEffect(() => {
|
||||
if (initialValues) {
|
||||
if (processedInitialValuesRef.current === initialValues.id) return;
|
||||
processedInitialValuesRef.current = initialValues.id as number;
|
||||
|
||||
if (!Boolean(initialValues.qty)) {
|
||||
handleResetForm();
|
||||
} else {
|
||||
@@ -338,7 +345,7 @@ const DeliveryOrderProductForm = ({
|
||||
}
|
||||
}
|
||||
}
|
||||
}, [initialValues]);
|
||||
}, [handleResetForm, initialValues, setFormikValues]);
|
||||
|
||||
// ===== Formik Error List =====
|
||||
const { formErrorList, close, handleFormSubmit } = useFormikErrorList(
|
||||
@@ -356,8 +363,10 @@ const DeliveryOrderProductForm = ({
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
handleBlurField('week');
|
||||
}, [formik.values.week]);
|
||||
if (formik.values.week) {
|
||||
handleBlurField('week');
|
||||
}
|
||||
}, [formik.values.week, handleBlurField]);
|
||||
|
||||
return (
|
||||
<>
|
||||
|
||||
+16
-11
@@ -5,7 +5,7 @@ import {
|
||||
SalesOrderProductFormValues,
|
||||
SalesOrderProductSchema,
|
||||
} from '@/components/pages/marketing/form/repeater/sales-order/SalesOrderProduct.schema';
|
||||
import { RefObject, useEffect, useMemo, useState } from 'react';
|
||||
import { RefObject, useCallback, useEffect, useMemo, useState } from 'react';
|
||||
import { OptionType, useSelect } from '@/components/input/SelectInput';
|
||||
import { Kandang } from '@/types/api/master-data/kandang';
|
||||
import { WarehouseApi } from '@/services/api/master-data';
|
||||
@@ -240,15 +240,18 @@ const SalesOrderProductForm = ({
|
||||
});
|
||||
};
|
||||
|
||||
const handleBlurField = (field: string) => {
|
||||
setCurrentInput(field);
|
||||
const handleBlurField = useCallback(
|
||||
(field: string) => {
|
||||
setCurrentInput(field);
|
||||
|
||||
handleMarketingCalculation(field, {
|
||||
values: formik.values,
|
||||
setFieldValue: formik.setFieldValue,
|
||||
hasSisaBerat,
|
||||
});
|
||||
};
|
||||
handleMarketingCalculation(field, {
|
||||
values: formik.values,
|
||||
setFieldValue: formik.setFieldValue,
|
||||
hasSisaBerat,
|
||||
});
|
||||
},
|
||||
[formik.values, formik.setFieldValue, hasSisaBerat]
|
||||
);
|
||||
|
||||
// Handler untuk onChange - auto calculation real-time untuk field yang mempengaruhi total_price (total_peti, weight_per_convertion, price_per_convertion, sisa_berat, price_sisa_berat, price_per_qty, qty)
|
||||
const handleFieldChange = (
|
||||
@@ -307,8 +310,10 @@ const SalesOrderProductForm = ({
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
handleBlurField('week');
|
||||
}, [formik.values.week]);
|
||||
if (formik.values.week) {
|
||||
handleBlurField('week');
|
||||
}
|
||||
}, [formik.values.week, handleBlurField]);
|
||||
|
||||
return (
|
||||
<>
|
||||
|
||||
Reference in New Issue
Block a user