Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 | 1x 1x | import { FCWithClassName } from '@/shared/@types'
import { Tab } from '@headlessui/react'
import { Tab as CustomTab } from '@/shared/ui'
import { FormMode } from './lib'
import { Fragment, ReactElement, useState } from 'react'
import { useFieldArray, useFormContext } from 'react-hook-form'
import { removeLastDot } from '@/shared/helpers'
import AddIcon from '@/shared/assets/icons/common/plus.svg'
import get from 'lodash/get'
import cn from 'classnames'
import { Button } from '@tmk/ui-kit'
type RenderProps = {
index: number
}
export interface FormTabsProps {
name: string
tabName?: string | ((props: RenderProps) => string | ReactElement)
mode?: FormMode
children?: ReactElement | ((props: RenderProps) => ReactElement)
panelClassName?: string
getAppendBody: () => Record<string, unknown>
getCopyBody: (index: number) => Record<string, unknown>
}
export const FormTabs: FCWithClassName<FormTabsProps> = ({
children,
name,
tabName,
mode,
getAppendBody,
getCopyBody,
panelClassName,
}) => {
const [currentIndex, setIndex] = useState(0)
const { control, formState } = useFormContext()
const { fields, append, remove } = useFieldArray({
control,
name,
})
const onRemove = (index: number) => {
if (index === fields.length - 1) {
setIndex(index - 1)
}
if (index < currentIndex) {
setIndex(prev => prev - 1)
}
remove(index)
}
const isReadMode = mode === FormMode.Read
const copyTab = (currentIndex: number) => {
append(getCopyBody(currentIndex))
setIndex(fields.length)
}
return (
<Tab.Group selectedIndex={currentIndex} onChange={e => setIndex(e)}>
<Tab.List className='flex flex-wrap items-center gap-4 mb-5'>
{fields.map((field, index) => (
<Tab key={field.id} as={Fragment}>
{({ selected }) => (
<CustomTab
active={selected}
{...(!isReadMode && {
copyHandler: () => copyTab(index),
})}
{...(fields.length > 1 &&
!isReadMode && {
removeHandler: () => onRemove(index),
})}
className={cn({
'text-red': !!get(formState.errors, `${removeLastDot(name)}.${index}`),
})}
>
{typeof tabName === 'function' ? tabName({ index }) : tabName}
</CustomTab>
)}
</Tab>
))}
{isReadMode || (
<Button
data-testid='add-tab'
onClick={() => {
append(getAppendBody())
setIndex(fields.length)
}}
variant='border-icon'
color='secondary'
className='p-2'
>
<AddIcon className='stroke-currentColor' />
</Button>
)}
</Tab.List>
<Tab.Panels as={Fragment}>
{fields.map((field, index) => (
<Tab.Panel key={field.id} unmount={true} className={cn('will-change-transform', panelClassName)}>
{typeof children === 'function' ? children({ index }) : children}
</Tab.Panel>
))}
</Tab.Panels>
</Tab.Group>
)
}
|