106 lines
2.7 KiB
TypeScript
106 lines
2.7 KiB
TypeScript
import React, {
|
|
forwardRef,
|
|
useCallback,
|
|
useImperativeHandle,
|
|
useRef,
|
|
useState,
|
|
type ReactElement,
|
|
type Ref,
|
|
} from 'react'
|
|
import type { FieldValues } from 'react-hook-form'
|
|
import { Modal, ScrollArea } from '@mantine/core'
|
|
import type { SuperFormModalProps, SuperFormModalRef, SuperFormRef } from '../../types'
|
|
import SuperForm from '../../components/SuperForm'
|
|
import { openConfirmModal } from '../../utils/openConfirmModal'
|
|
|
|
const SuperFormModal = <T extends FieldValues>(
|
|
{ modalProps, noCloseOnSubmit, ...formProps }: SuperFormModalProps<T>,
|
|
ref: Ref<SuperFormModalRef<T>>
|
|
) => {
|
|
// Component Refs
|
|
const modalRef = useRef<HTMLDivElement>(null)
|
|
const formRef = useRef<SuperFormRef<T>>(null)
|
|
|
|
// Component store State
|
|
// Tell drawer that form layout mounted to fix refs
|
|
const [layoutMounted, setLayoutMounted] = useState(false)
|
|
|
|
// Component Callback Functions
|
|
const onSubmit = (data: T, request, formData, form, closeForm: boolean = true) => {
|
|
formProps?.onSubmit?.(data, request, formData, form, closeForm)
|
|
|
|
if (request === 'delete') {
|
|
modalProps?.onClose()
|
|
}
|
|
|
|
if (!noCloseOnSubmit) {
|
|
if (closeForm) {
|
|
modalProps?.onClose()
|
|
}
|
|
}
|
|
}
|
|
|
|
const onCancel = (request) => {
|
|
if (formRef?.current?.getFormState().isDirty) {
|
|
openConfirmModal(() => {
|
|
modalProps?.onClose()
|
|
formProps?.onCancel?.(request)
|
|
})
|
|
} else {
|
|
modalProps?.onClose()
|
|
formProps?.onCancel?.(request)
|
|
}
|
|
}
|
|
|
|
const onLayoutMounted = useCallback(() => {
|
|
setLayoutMounted(true)
|
|
formProps?.onLayoutMounted?.()
|
|
}, [formProps?.onLayoutMounted])
|
|
|
|
const onLayoutUnMounted = useCallback(() => {
|
|
setLayoutMounted(false)
|
|
formProps?.onLayoutUnMounted?.()
|
|
}, [formProps?.onLayoutUnMounted])
|
|
|
|
// Component use Effects
|
|
useImperativeHandle<SuperFormModalRef<T>, SuperFormModalRef<T>>(
|
|
ref,
|
|
() => ({
|
|
...formRef.current,
|
|
modal: modalRef.current,
|
|
} as SuperFormModalRef<T>),
|
|
[layoutMounted]
|
|
)
|
|
|
|
return (
|
|
<Modal
|
|
ref={modalRef}
|
|
closeOnClickOutside={false}
|
|
overlayProps={{
|
|
backgroundOpacity: 0.5,
|
|
blur: 4,
|
|
}}
|
|
padding='sm'
|
|
scrollAreaComponent={ScrollArea.Autosize}
|
|
size={500}
|
|
keepMounted={false}
|
|
{...modalProps}
|
|
>
|
|
<SuperForm<T>
|
|
{...formProps}
|
|
onCancel={onCancel}
|
|
onSubmit={onSubmit}
|
|
onLayoutMounted={onLayoutMounted}
|
|
onLayoutUnMounted={onLayoutUnMounted}
|
|
ref={formRef}
|
|
/>
|
|
</Modal>
|
|
)
|
|
}
|
|
|
|
const FRSuperFormModal = forwardRef(SuperFormModal) as <T extends FieldValues>(
|
|
props: SuperFormModalProps<T> & { ref?: Ref<SuperFormModalRef<T>> }
|
|
) => ReactElement
|
|
|
|
export default FRSuperFormModal
|