118 lines
2.5 KiB
TypeScript
118 lines
2.5 KiB
TypeScript
import React, { type ReactNode } from 'react'
|
|
import { Stack, Group, Paper, Button, Title, Box } from '@mantine/core'
|
|
import { useFormLayoutStore } from '../store/FormLayout.store'
|
|
|
|
interface FormSectionProps {
|
|
type: 'header' | 'body' | 'footer' | 'error'
|
|
title?: string
|
|
rightSection?: ReactNode
|
|
children?: ReactNode
|
|
buttonTitles?: { submit?: string; cancel?: string }
|
|
className?: string
|
|
[key: string]: any
|
|
}
|
|
|
|
export const FormSection: React.FC<FormSectionProps> = ({
|
|
type,
|
|
title,
|
|
rightSection,
|
|
children,
|
|
buttonTitles,
|
|
className,
|
|
...others
|
|
}) => {
|
|
const { onCancel, onSubmit, request, loading } = useFormLayoutStore((state) => ({
|
|
onCancel: state.onCancel,
|
|
onSubmit: state.onSubmit,
|
|
request: state.request,
|
|
loading: state.loading,
|
|
}))
|
|
|
|
if (type === 'header') {
|
|
return (
|
|
<Group
|
|
justify="space-between"
|
|
p="md"
|
|
style={{
|
|
borderBottom: '1px solid var(--mantine-color-gray-3)',
|
|
}}
|
|
className={className}
|
|
{...others}
|
|
>
|
|
<Title order={4} size="h5">
|
|
{title}
|
|
</Title>
|
|
{rightSection && <Box>{rightSection}</Box>}
|
|
</Group>
|
|
)
|
|
}
|
|
|
|
if (type === 'body') {
|
|
return (
|
|
<Stack
|
|
gap="md"
|
|
p="md"
|
|
style={{ flex: 1, overflow: 'auto' }}
|
|
className={className}
|
|
{...others}
|
|
>
|
|
{children}
|
|
</Stack>
|
|
)
|
|
}
|
|
|
|
if (type === 'footer') {
|
|
return (
|
|
<Group
|
|
justify="flex-end"
|
|
gap="xs"
|
|
p="md"
|
|
style={{
|
|
borderTop: '1px solid var(--mantine-color-gray-3)',
|
|
}}
|
|
className={className}
|
|
{...others}
|
|
>
|
|
{children}
|
|
{request !== 'view' && (
|
|
<>
|
|
<Button
|
|
variant="default"
|
|
onClick={onCancel}
|
|
disabled={loading}
|
|
>
|
|
{buttonTitles?.cancel ?? 'Cancel'}
|
|
</Button>
|
|
<Button
|
|
type="submit"
|
|
onClick={onSubmit}
|
|
loading={loading}
|
|
>
|
|
{buttonTitles?.submit ?? (request === 'delete' ? 'Delete' : 'Save')}
|
|
</Button>
|
|
</>
|
|
)}
|
|
</Group>
|
|
)
|
|
}
|
|
|
|
if (type === 'error') {
|
|
return (
|
|
<Paper
|
|
p="sm"
|
|
m="md"
|
|
style={{
|
|
backgroundColor: 'var(--mantine-color-red-0)',
|
|
border: '1px solid var(--mantine-color-red-3)',
|
|
}}
|
|
className={className}
|
|
{...others}
|
|
>
|
|
{children}
|
|
</Paper>
|
|
)
|
|
}
|
|
|
|
return null
|
|
}
|