2023-09-18 18:40:36 +02:00
|
|
|
import { OnInputChange } from './types';
|
2023-08-21 17:01:20 +02:00
|
|
|
import { useEffect } from 'react';
|
|
|
|
|
2023-09-18 18:40:36 +02:00
|
|
|
const useItemEventHandlers = (rootElement: HTMLDivElement, itemElement: HTMLDivElement, onInputChange: OnInputChange) => {
|
2023-08-21 17:01:20 +02:00
|
|
|
useEffect(() => {
|
|
|
|
if (!itemElement) return () => {};
|
|
|
|
|
|
|
|
const inputs = itemElement.getElementsByTagName('input');
|
|
|
|
|
2023-09-18 18:40:36 +02:00
|
|
|
const checkboxes: HTMLInputElement[] = [];
|
|
|
|
const textInputs: HTMLInputElement[] = [];
|
2023-08-21 17:01:20 +02:00
|
|
|
|
|
|
|
for (const input of inputs) {
|
|
|
|
if (input.type === 'checkbox') {
|
2023-09-18 18:40:36 +02:00
|
|
|
input.addEventListener('change', onInputChange as any);
|
|
|
|
checkboxes.push(input);
|
|
|
|
}
|
|
|
|
|
|
|
|
if (input.type === 'text') {
|
|
|
|
input.addEventListener('change', onInputChange as any);
|
|
|
|
textInputs.push(input);
|
2023-08-21 17:01:20 +02:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
return () => {
|
2023-09-18 18:40:36 +02:00
|
|
|
for (const input of checkboxes) {
|
|
|
|
input.removeEventListener('change', onInputChange as any);
|
|
|
|
}
|
|
|
|
|
|
|
|
for (const input of textInputs) {
|
|
|
|
input.removeEventListener('change', onInputChange as any);
|
2023-08-21 17:01:20 +02:00
|
|
|
}
|
|
|
|
};
|
2023-09-18 18:40:36 +02:00
|
|
|
}, [itemElement, rootElement, onInputChange]);
|
2023-08-21 17:01:20 +02:00
|
|
|
};
|
|
|
|
|
|
|
|
export default useItemEventHandlers;
|