37 lines
1.1 KiB
TypeScript
37 lines
1.1 KiB
TypeScript
import { CurrentUserMark } from '../../types/mark.ts'
|
|
import styles from './style.module.scss'
|
|
import { Box, Button, TextField } from '@mui/material'
|
|
|
|
import { MARK_TYPE_TRANSLATION } from '../../utils/const.ts'
|
|
|
|
interface MarkFormFieldProps {
|
|
handleSubmit: (event: any) => void
|
|
handleChange: (event: any) => void
|
|
selectedMark: CurrentUserMark
|
|
selectedMarkValue: string
|
|
}
|
|
|
|
/**
|
|
* Responsible for rendering a form field connected to a mark and keeping track of its value.
|
|
*/
|
|
const MarkFormField = (props: MarkFormFieldProps) => {
|
|
const { handleSubmit, handleChange, selectedMark, selectedMarkValue } = props;
|
|
const getSubmitButton = () => selectedMark.isLast ? 'Complete' : 'Next';
|
|
return (
|
|
<div className={styles.fixedBottomForm}>
|
|
<Box component="form" onSubmit={handleSubmit}>
|
|
<TextField
|
|
id="mark-value"
|
|
label={MARK_TYPE_TRANSLATION[selectedMark.mark.type.valueOf()]}
|
|
value={selectedMarkValue}
|
|
onChange={handleChange}
|
|
/>
|
|
<Button type="submit" variant="contained">
|
|
{getSubmitButton()}
|
|
</Button>
|
|
</Box>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default MarkFormField; |