81 lines
2.1 KiB
JavaScript
81 lines
2.1 KiB
JavaScript
import { makeStyles } from '@material-ui/core/styles'
|
|
import { Form, Formik, Field } from 'formik'
|
|
import { React } from 'react'
|
|
import * as Yup from 'yup'
|
|
|
|
import ErrorMessage from 'src/components/ErrorMessage'
|
|
import Modal from 'src/components/Modal'
|
|
import { Button } from 'src/components/buttons'
|
|
import { TextInput } from 'src/components/inputs/formik'
|
|
|
|
import styles from './NewNoteModal.styles'
|
|
|
|
const useStyles = makeStyles(styles)
|
|
|
|
const initialValues = {
|
|
title: '',
|
|
content: ''
|
|
}
|
|
|
|
const validationSchema = Yup.object().shape({
|
|
title: Yup.string()
|
|
.required()
|
|
.trim()
|
|
.max(25),
|
|
content: Yup.string().required()
|
|
})
|
|
|
|
const NewNoteModal = ({ showModal, onClose, onSubmit, errorMsg }) => {
|
|
const classes = useStyles()
|
|
|
|
return (
|
|
<>
|
|
<Modal
|
|
title="New note"
|
|
closeOnBackdropClick={true}
|
|
width={416}
|
|
height={472}
|
|
handleClose={onClose}
|
|
open={showModal}>
|
|
<Formik
|
|
validateOnBlur={false}
|
|
validateOnChange={false}
|
|
initialValues={initialValues}
|
|
validationSchema={validationSchema}
|
|
onSubmit={({ title, content }) => {
|
|
onSubmit({ title, content })
|
|
}}>
|
|
<Form id="note-form" className={classes.form}>
|
|
<Field
|
|
name="title"
|
|
autofocus
|
|
size="md"
|
|
autoComplete="off"
|
|
width={350}
|
|
component={TextInput}
|
|
label="Note title"
|
|
/>
|
|
<Field
|
|
name="content"
|
|
size="sm"
|
|
autoComplete="off"
|
|
width={350}
|
|
component={TextInput}
|
|
multiline={true}
|
|
rows={11}
|
|
label="Note content"
|
|
/>
|
|
<div className={classes.footer}>
|
|
{errorMsg && <ErrorMessage>{errorMsg}</ErrorMessage>}
|
|
<Button type="submit" form="note-form" className={classes.submit}>
|
|
Add note
|
|
</Button>
|
|
</div>
|
|
</Form>
|
|
</Formik>
|
|
</Modal>
|
|
</>
|
|
)
|
|
}
|
|
|
|
export default NewNoteModal
|