Spaces:
Running
Running
File size: 2,056 Bytes
27fd333 |
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 |
'use client'
import type { FC } from 'react'
import React, { useEffect } from 'react'
import cn from 'classnames'
import { useBoolean } from 'ahooks'
import { ChevronRightIcon } from '@heroicons/react/24/outline'
export type IPanelProps = {
className?: string
headerIcon: React.ReactNode
title: React.ReactNode
headerRight?: React.ReactNode
bodyClassName?: string
children: React.ReactNode
keepUnFold?: boolean
foldDisabled?: boolean
onFoldChange?: (fold: boolean) => void
controlUnFold?: number
controlFold?: number
}
const Panel: FC<IPanelProps> = ({
className,
headerIcon,
title,
headerRight,
bodyClassName,
children,
keepUnFold,
foldDisabled = false,
onFoldChange,
controlUnFold,
controlFold,
}) => {
const [fold, { setTrue: setFold, setFalse: setUnFold, toggle: toggleFold }] = useBoolean(!keepUnFold)
useEffect(() => {
onFoldChange?.(fold)
}, [fold])
useEffect(() => {
if (controlUnFold)
setUnFold()
}, [controlUnFold])
useEffect(() => {
if (controlFold)
setFold()
}, [controlFold])
// overflow-hidden
return (
<div className={cn(className, 'w-full rounded-xl border border-gray-100 overflow-hidden select-none')}>
{/* Header */}
<div
onClick={() => (!foldDisabled && !keepUnFold) && toggleFold()}
className={cn(!fold && 'border-b border-gray-100', 'flex justify-between items-center h-12 bg-gray-50 pl-4 pr-2')}>
<div className='flex items-center gap-2'>
{headerIcon}
<div className='text-gray-900 text-sm'>{title}</div>
</div>
{(fold && headerRight) ? headerRight : ''}
{!headerRight && !keepUnFold && (
<ChevronRightIcon className={cn(!fold && 'rotate-90', 'mr-2 cursor-pointer')} width="16" height="16">
</ChevronRightIcon>
)}
</div>
{/* Main Content */}
{!fold && !foldDisabled && (
<div className={cn(bodyClassName)}>
{children}
</div>
)}
</div>
)
}
export default React.memo(Panel)
|