@kadconsulting/dry
Version:
KAD Reusable Component Library
53 lines • 3.6 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
// CLI Version 1.0.1
// Component Version 1.0.0
// About Component
// https://kadconsulting257-my.sharepoint.com/:v:/g/personal/daniel_kadconsulting_it/EbD8akOhMpNGnnUDni-30cEBamO-X2P5qnyra2a_fmvrTg?e=dCFCnE&nav=eyJyZWZlcnJhbEluZm8iOnsicmVmZXJyYWxBcHAiOiJTdHJlYW1XZWJBcHAiLCJyZWZlcnJhbFZpZXciOiJTaGFyZURpYWxvZy1MaW5rIiwicmVmZXJyYWxBcHBQbGF0Zm9ybSI6IldlYiIsInJlZmVycmFsTW9kZSI6InZpZXcifX0%3D
import { useState, useCallback, useEffect } from 'react';
import classnames from 'classnames';
import { Accordion, TextInput, Textarea, Button } from '../index';
import './RepeatableForm.scss';
const RepeatableForm = ({ id, className, fields, initialState, onStateChange, passProps, 'data-testid': dataTestId, ...props }) => {
const [formEntries, setFormEntries] = useState(initialState);
const [openEntryIndex, setOpenEntryIndex] = useState(initialState.length - 1);
const handleInputChange = useCallback((entryIndex, fieldName, value) => {
setFormEntries((prevEntries) => {
const newEntries = [...prevEntries];
newEntries[entryIndex] = {
...newEntries[entryIndex],
[fieldName]: value,
};
return newEntries;
});
}, []);
const addNewEntry = useCallback(() => {
setFormEntries((prevEntries) => {
const newEntry = fields.reduce((acc, field) => ({ ...acc, [field.name]: '' }), {});
const updatedEntries = [...prevEntries, newEntry];
setOpenEntryIndex(updatedEntries.length - 1);
return updatedEntries;
});
}, [fields]);
const removeEntry = useCallback((index) => {
setFormEntries((prevEntries) => prevEntries.filter((_, i) => i !== index));
setOpenEntryIndex((prevIndex) => {
if (prevIndex >= index)
return Math.max(0, prevIndex - 1);
return prevIndex;
});
}, []);
const handleAccordionToggle = useCallback((index, isOpen) => {
if (isOpen) {
setOpenEntryIndex(index);
}
else if (openEntryIndex === index) {
setOpenEntryIndex(-1);
}
}, [openEntryIndex]);
useEffect(() => {
onStateChange(formEntries);
}, [formEntries, onStateChange]);
return (_jsxs("div", { id: id, className: classnames(className, 'dry-repeatableform'), "data-testid": dataTestId, ...passProps, ...props, children: [formEntries.map((entry, index) => (_jsx(Accordion, { parentContent: `Entry ${index + 1}`, initialOpenState: index === openEntryIndex, onOpenStateChange: (isOpen) => handleAccordionToggle(index, isOpen), children: _jsxs("div", { className: 'dry-repeatableform__entry', children: [_jsx("div", { className: 'dry-repeatableform__fields-grid', children: fields.map((field) => (_jsx("div", { className: 'dry-repeatableform__field', children: field.type === 'textarea' ? (_jsx(Textarea, { label: field.label, value: entry[field.name], onChange: (e) => handleInputChange(index, field.name, e.target.value), required: field.required })) : (_jsx(TextInput, { inputType: field.type, Label: field.label, value: entry[field.name], onChange: (e) => handleInputChange(index, field.name, e.target.value), required: field.required })) }, field.name))) }), _jsx(Button, { onClick: () => removeEntry(index), buttonType: 'secondary', children: "Remove Entry" })] }) }, index))), _jsx(Button, { onClick: addNewEntry, buttonType: 'primary', children: "Add New Entry" })] }));
};
export default RepeatableForm;
//# sourceMappingURL=RepeatableForm.js.map