44 lines
1.2 KiB
TypeScript
44 lines
1.2 KiB
TypeScript
'use client';
|
|
|
|
import type { Props } from './types';
|
|
import { mapFieldTypeElement } from '@/config/elements';
|
|
import { useFormStore } from '@/store/ius/form';
|
|
import { useEffect } from 'react';
|
|
import { ElementContainer } from 'ui';
|
|
|
|
export function Elements({ data, metaData }: Props) {
|
|
const { init, setValue, values } = useFormStore();
|
|
|
|
useEffect(() => {
|
|
init(data);
|
|
}, [data, init]);
|
|
|
|
return (
|
|
<div className="mt-2 grid auto-rows-auto grid-cols-1 gap-2 gap-x-4 md:grid-cols-2 lg:grid-cols-3">
|
|
{Object.keys(metaData).map((name) => {
|
|
const { fieldType, label, max, min = 0, visible, ...props } = metaData[name];
|
|
|
|
if (!visible) return false;
|
|
|
|
const Element = mapFieldTypeElement[fieldType];
|
|
|
|
return (
|
|
<ElementContainer key={name} id={name} title={fieldType === 'CHECKBOX' ? '' : label}>
|
|
<Element
|
|
id={name}
|
|
value={values[name]}
|
|
title={label}
|
|
min={min}
|
|
max={max}
|
|
onChange={(e) => {
|
|
setValue({ name, value: e.target.value });
|
|
}}
|
|
{...props}
|
|
/>
|
|
</ElementContainer>
|
|
);
|
|
})}
|
|
</div>
|
|
);
|
|
}
|