54 lines
1.5 KiB
TypeScript
54 lines
1.5 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, validation, 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
|
|
intent={validation[name] ? 'danger' : 'default'}
|
|
message={validation[name]?.message}
|
|
key={name}
|
|
id={name}
|
|
title={label}
|
|
>
|
|
<Element
|
|
loading={!Object.keys(values).length}
|
|
checked={fieldType === 'CHECKBOX' ? Boolean(values[name]) || false : false}
|
|
id={name}
|
|
value={values[name] || ''}
|
|
min={min}
|
|
max={max}
|
|
onChange={(e) => {
|
|
setValue({
|
|
name,
|
|
value: fieldType === 'CHECKBOX' ? e.target.checked : e.target.value,
|
|
});
|
|
}}
|
|
{...props}
|
|
/>
|
|
</ElementContainer>
|
|
);
|
|
})}
|
|
</div>
|
|
);
|
|
}
|