change EditingForm to allow fields with numbers only

This commit is contained in:
juhanikat
2025-08-03 13:42:29 +03:00
parent 12cfb54426
commit 41a6a4ba83
2 changed files with 11 additions and 5 deletions
@@ -4,7 +4,7 @@ import { useForm } from 'react-hook-form'
import { Editable, EditDataType } from '@/shared/types' import { Editable, EditDataType } from '@/shared/types'
import { useDetailContext } from '../Context/DetailContext' import { useDetailContext } from '../Context/DetailContext'
export type EditingFormField = { name: string; label: string; required?: boolean } export type EditingFormField = { name: string; label: string; required?: boolean; type?: 'number' | 'string' }
/* /*
Renders a button, that will open EditingModal, which can be used Renders a button, that will open EditingModal, which can be used
@@ -53,8 +53,14 @@ export const EditingForm = <T extends object, ParentType extends object>({
{formFields.map(field => ( {formFields.map(field => (
<TextField <TextField
key={field.name} key={field.name}
{...register(field.name, { required: field.required })} {...register(field.name, {
required: field.required ? 'This field is required' : false,
...(field.type === 'number' && {
pattern: { value: /^(0|[1-9]\d*)(\.\d+)?$/, message: 'Value must be a valid number' },
}),
})}
error={!!errors[field.name]} error={!!errors[field.name]}
helperText={errors[field.name]?.message}
{...{ label: field.label, required: field.required }} {...{ label: field.label, required: field.required }}
/> />
))} ))}
@@ -5,7 +5,7 @@ import { ArrayFrame, Grouped } from '@/components/DetailView/common/tabLayoutHel
import { useDetailContext } from '@/components/DetailView/Context/DetailContext' import { useDetailContext } from '@/components/DetailView/Context/DetailContext'
import { SequenceTable } from '@/components/Sequence/SequenceTable' import { SequenceTable } from '@/components/Sequence/SequenceTable'
import { Box } from '@mui/material' import { Box } from '@mui/material'
import { EditingForm } from '@/components/DetailView/common/EditingForm' import { EditingForm, EditingFormField } from '@/components/DetailView/common/EditingForm'
export const TimeUnitTab = () => { export const TimeUnitTab = () => {
const { textField, dropdown, data, editData, setEditData, fieldsWithErrors, mode } = const { textField, dropdown, data, editData, setEditData, fieldsWithErrors, mode } =
@@ -68,9 +68,9 @@ export const TimeUnitTab = () => {
['Comment', low_bcomment], ['Comment', low_bcomment],
] ]
const formFields: { name: string; label: string; required?: boolean }[] = [ const formFields: EditingFormField[] = [
{ name: 'b_name', label: 'Name', required: true }, { name: 'b_name', label: 'Name', required: true },
{ name: 'age', label: 'Age (Ma)', required: true }, { name: 'age', label: 'Age (Ma)', required: true, type: 'number' },
{ name: 'b_comment', label: 'Comment', required: false }, { name: 'b_comment', label: 'Comment', required: false },
] ]