69 lines
2.1 KiB
TypeScript
69 lines
2.1 KiB
TypeScript
import { forwardRef } from 'react'
|
|
import classNames from 'classnames'
|
|
import useThemeClass from '@/utils/hooks/useThemeClass'
|
|
import { FaCheckCircle } from 'react-icons/fa'
|
|
import type { CommonProps } from '@/proxy/common'
|
|
|
|
interface SegmentItemOptionProps extends CommonProps {
|
|
active: boolean
|
|
customCheck?: string | React.ReactNode
|
|
defaultGutter?: boolean
|
|
disabled?: boolean
|
|
hoverable?: boolean
|
|
onSegmentItemClick?: (
|
|
event: React.MouseEvent<HTMLDivElement, MouseEvent>
|
|
) => void
|
|
}
|
|
|
|
const SegmentItemOption = forwardRef<HTMLDivElement, SegmentItemOptionProps>(
|
|
(props, ref) => {
|
|
const {
|
|
active,
|
|
children,
|
|
className,
|
|
customCheck,
|
|
defaultGutter = true,
|
|
disabled,
|
|
hoverable,
|
|
onSegmentItemClick,
|
|
} = props
|
|
|
|
const { textTheme, borderTheme, ringTheme } = useThemeClass()
|
|
|
|
return (
|
|
<div
|
|
ref={ref}
|
|
className={classNames(
|
|
'flex',
|
|
!customCheck && 'justify-between',
|
|
'items-center',
|
|
'border',
|
|
'rounded-md ',
|
|
'border-gray-200 dark:border-gray-600',
|
|
defaultGutter && 'py-5 px-4',
|
|
'cursor-pointer',
|
|
'select-none',
|
|
'w-100',
|
|
active && `ring-1 ${ringTheme} ${borderTheme}`,
|
|
hoverable &&
|
|
`hover:ring-1 hover:${ringTheme} hover:${borderTheme}`,
|
|
disabled && 'opacity-50 cursor-not-allowed',
|
|
className
|
|
)}
|
|
onClick={onSegmentItemClick}
|
|
>
|
|
{children}
|
|
{active && !customCheck && (
|
|
<FaCheckCircle
|
|
className={classNames(textTheme, 'text-2xl')}
|
|
/>
|
|
)}
|
|
{active && customCheck}
|
|
</div>
|
|
)
|
|
}
|
|
)
|
|
|
|
SegmentItemOption.displayName = 'SegmentItemOption'
|
|
|
|
export default SegmentItemOption
|