gitea-admin/lti-web-client
1
0
Fork 0
mirror of https://gitlab.com/mbugroup/lti-web-client.git synced 2026-05-24 15:25:46 +00:00
Code Issues Packages Projects Releases Wiki Activity

refactor(FE): Refactor handleBlurField to use useCallback

Browse Source
This commit is contained in:
rstubryan
2026-03-06 13:35:10 +07:00
parent ff6955be54
commit aeceef4361
2 changed files with 37 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/pages/marketing/form/repeater/delivery-order/DeliverOrderProduct.tsx
+21 -12
View File
@@ -1,4 +1,4 @@
import { useEffect, useMemo, useState } from 'react'; import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
import { import {
DeliveryOrderProductFormValues, DeliveryOrderProductFormValues,
DeliveryOrderProductSchema, DeliveryOrderProductSchema,
@@ -271,15 +271,18 @@ const DeliveryOrderProductForm = ({
// setSelectedProduct(null); // setSelectedProduct(null);
}; };
const handleBlurField = (field: string) => { const handleBlurField = useCallback(
setCurrentInput(field); (field: string) => {
setCurrentInput(field);
handleMarketingCalculation(field, { handleMarketingCalculation(field, {
values: formik.values, values: formik.values,
setFieldValue: formik.setFieldValue, setFieldValue: formik.setFieldValue,
hasSisaBerat, 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) // 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 = ( const handleFieldChange = (
@@ -324,8 +327,12 @@ const DeliveryOrderProductForm = ({
const { setValues: setFormikValues } = formik; const { setValues: setFormikValues } = formik;
const processedInitialValuesRef = useRef<number | null>(null);
useEffect(() => { useEffect(() => {
if (initialValues) { if (initialValues) {
if (processedInitialValuesRef.current === initialValues.id) return;
processedInitialValuesRef.current = initialValues.id as number;
if (!Boolean(initialValues.qty)) { if (!Boolean(initialValues.qty)) {
handleResetForm(); handleResetForm();
} else { } else {
@@ -338,7 +345,7 @@ const DeliveryOrderProductForm = ({
} }
} }
} }
}, [initialValues]); }, [handleResetForm, initialValues, setFormikValues]);
// ===== Formik Error List ===== // ===== Formik Error List =====
const { formErrorList, close, handleFormSubmit } = useFormikErrorList( const { formErrorList, close, handleFormSubmit } = useFormikErrorList(
@@ -356,8 +363,10 @@ const DeliveryOrderProductForm = ({
); );
useEffect(() => { useEffect(() => {
handleBlurField('week'); if (formik.values.week) {
}, [formik.values.week]); handleBlurField('week');
}
}, [formik.values.week, handleBlurField]);
return ( return (
<> <>
src/components/pages/marketing/form/repeater/sales-order/SalesOrderProductForm.tsx
+16 -11
View File
@@ -5,7 +5,7 @@ import {
SalesOrderProductFormValues, SalesOrderProductFormValues,
SalesOrderProductSchema, SalesOrderProductSchema,
} from '@/components/pages/marketing/form/repeater/sales-order/SalesOrderProduct.schema'; } 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 { OptionType, useSelect } from '@/components/input/SelectInput';
import { Kandang } from '@/types/api/master-data/kandang'; import { Kandang } from '@/types/api/master-data/kandang';
import { WarehouseApi } from '@/services/api/master-data'; import { WarehouseApi } from '@/services/api/master-data';
@@ -240,15 +240,18 @@ const SalesOrderProductForm = ({
}); });
}; };
const handleBlurField = (field: string) => { const handleBlurField = useCallback(
setCurrentInput(field); (field: string) => {
setCurrentInput(field);
handleMarketingCalculation(field, { handleMarketingCalculation(field, {
values: formik.values, values: formik.values,
setFieldValue: formik.setFieldValue, setFieldValue: formik.setFieldValue,
hasSisaBerat, 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) // 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 = ( const handleFieldChange = (
@@ -307,8 +310,10 @@ const SalesOrderProductForm = ({
); );
useEffect(() => { useEffect(() => {
handleBlurField('week'); if (formik.values.week) {
}, [formik.values.week]); handleBlurField('week');
}
}, [formik.values.week, handleBlurField]);
return ( return (
<> <>