mirror of
https://github.com/nowcommunity/nowdatabase.git
synced 2026-10-12 19:13:52 +03:00
change EditingForm to allow fields with numbers only
This commit is contained in:
@@ -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 },
|
||||||
]
|
]
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user