import { FC } from 'react'; import { FormControlLabel, Switch, Theme, Box } from '@mui/material'; import { useTranslation } from 'react-i18next'; import CustomToolTip from '@/components/customToolTip/CustomToolTip'; import { DataTypeEnum } from '@/consts'; import { FieldType } from '../../../databases/collections/Types'; import NameField from '../NameField'; import DescriptionField from '../DescriptionField'; import MaxLengthField from '../MaxLengthField'; import PrimaryKeyTypeSelector from '../PrimaryKeyTypeSelector'; import { rowStyles } from './styles'; interface PrimaryKeyFieldRowProps { field: FieldType; fields: FieldType[]; onFieldChange: ( id: string, changes: Partial, isValid?: boolean ) => void; } const PrimaryKeyFieldRow: FC = ({ field, fields, onFieldChange, }) => { const { t: collectionTrans } = useTranslation('collection'); const isVarChar = field.data_type === DataTypeEnum.VarChar; const toggleStyles = (theme: Theme) => ({ marginLeft: theme.spacing(0.5), marginRight: theme.spacing(0.5), }); return ( onFieldChange(id, { name }, isValid)} label={collectionTrans('idFieldName')} /> { const changes: Partial = { data_type: value }; if (value === DataTypeEnum.VarChar) { changes.autoID = false; } onFieldChange(field.id!, changes); }} /> {isVarChar && ( onFieldChange(id, { max_length }, isValid) } /> )} onFieldChange(id, { description }, true)} sx={{ width: '64px' }} /> { onFieldChange(field.id!, { autoID: !field.autoID }); }} /> } label={ <>{collectionTrans('autoId')} } sx={toggleStyles} /> ); }; export default PrimaryKeyFieldRow;