147 lines
3.8 KiB
TypeScript
147 lines
3.8 KiB
TypeScript
import React, {
|
|
forwardRef,
|
|
useCallback,
|
|
useImperativeHandle,
|
|
useRef,
|
|
useState,
|
|
type ReactElement,
|
|
type Ref,
|
|
} from 'react'
|
|
import { IconX } from '@tabler/icons-react'
|
|
import type { FieldValues } from 'react-hook-form'
|
|
import { ActionIcon, Drawer } from '@mantine/core'
|
|
import type { SuperFormDrawerProps, SuperFormDrawerRef, SuperFormRef } from '../../types'
|
|
import SuperForm from '../../components/SuperForm'
|
|
import { openConfirmModal } from '../../utils/openConfirmModal'
|
|
|
|
const SuperFormDrawer = <T extends FieldValues>(
|
|
{ drawerProps, noCloseOnSubmit, ...formProps }: SuperFormDrawerProps<T>,
|
|
ref: Ref<SuperFormDrawerRef<T>>
|
|
) => {
|
|
// Component Refs
|
|
const formRef = useRef<SuperFormRef<T>>(null)
|
|
const drawerRef = useRef<HTMLDivElement>(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') {
|
|
drawerProps?.onClose()
|
|
}
|
|
|
|
if (!noCloseOnSubmit) {
|
|
if (closeForm) {
|
|
drawerProps?.onClose()
|
|
}
|
|
}
|
|
}
|
|
|
|
const onCancel = (request) => {
|
|
if (formRef?.current?.getFormState().isDirty) {
|
|
openConfirmModal(() => {
|
|
drawerProps?.onClose()
|
|
formProps?.onCancel?.(request)
|
|
})
|
|
} else {
|
|
drawerProps?.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<SuperFormDrawerRef<T>, SuperFormDrawerRef<T>>(
|
|
ref,
|
|
() => ({
|
|
...formRef.current,
|
|
drawer: drawerRef.current,
|
|
} as SuperFormDrawerRef<T>),
|
|
[layoutMounted]
|
|
)
|
|
|
|
return (
|
|
<Drawer
|
|
ref={drawerRef}
|
|
onClose={onCancel}
|
|
closeOnClickOutside={false}
|
|
onKeyDown={(e) => {
|
|
if (e.key === 'Escape' && drawerProps.closeOnEscape !== false) {
|
|
e.stopPropagation()
|
|
onCancel(formProps.request)
|
|
}
|
|
}}
|
|
overlayProps={{ backgroundOpacity: 0.5, blur: 0.5 }}
|
|
padding={6}
|
|
position='right'
|
|
transitionProps={{
|
|
transition: 'slide-left',
|
|
duration: 150,
|
|
timingFunction: 'linear',
|
|
}}
|
|
size={500}
|
|
styles={{
|
|
content: {
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
justifyContent: 'stretch',
|
|
},
|
|
body: {
|
|
minHeight: '100px',
|
|
flexGrow: 1,
|
|
},
|
|
}}
|
|
keepMounted={false}
|
|
{...drawerProps}
|
|
closeOnEscape={false}
|
|
withCloseButton={false}
|
|
title={null}
|
|
>
|
|
<SuperForm<T>
|
|
{...formProps}
|
|
onCancel={onCancel}
|
|
onSubmit={onSubmit}
|
|
onLayoutMounted={onLayoutMounted}
|
|
onLayoutUnMounted={onLayoutUnMounted}
|
|
ref={formRef}
|
|
layoutProps={{
|
|
...formProps?.layoutProps,
|
|
rightSection: (
|
|
<ActionIcon
|
|
size='xs'
|
|
onClick={() => {
|
|
onCancel(formProps?.request)
|
|
}}
|
|
>
|
|
<IconX size={18} />
|
|
</ActionIcon>
|
|
),
|
|
title:
|
|
(drawerProps.title as string) ??
|
|
formProps?.layoutProps?.title ??
|
|
(formProps?.request as string),
|
|
}}
|
|
/>
|
|
</Drawer>
|
|
)
|
|
}
|
|
|
|
const FRSuperFormDrawer = forwardRef(SuperFormDrawer) as <T extends FieldValues>(
|
|
props: SuperFormDrawerProps<T> & { ref?: Ref<SuperFormDrawerRef<T>> }
|
|
) => ReactElement
|
|
|
|
export default FRSuperFormDrawer
|