import clsx from 'clsx'; import React, { ComponentPropsWithRef, JSXElementConstructor, ReactNode, } from 'react'; import {CheckIcon} from '../../icons/material/Check'; import {To} from 'react-router-dom'; export interface ListItemBaseProps extends ComponentPropsWithRef<'div'> { startIcon?: ReactNode; endIcon?: ReactNode; endSection?: ReactNode; description?: ReactNode; textLabel?: string; capitalizeFirst?: boolean; isSelected?: boolean; isDisabled?: boolean; isActive?: boolean; className?: string; showCheckmark?: boolean; elementType?: 'a' | JSXElementConstructor | 'div'; to?: To; href?: string; radius?: string; padding?: string; } export const ListItemBase = React.forwardRef( (props, ref) => { let { startIcon, capitalizeFirst, children, description, endIcon, endSection, isDisabled, isActive, isSelected, showCheckmark, elementType = 'div', radius, padding, ...domProps } = props; if (!startIcon && showCheckmark) { startIcon = ( ); } // if (!endIcon && !endSection && showCheckmark) { // endIcon = ( // // ); // } const iconClassName = clsx( 'icon-sm rounded overflow-hidden flex-shrink-0', !isDisabled && 'text-muted' ); const endSectionClassName = clsx(!isDisabled && 'text-muted'); const Element = elementType; return ( {startIcon &&
{startIcon}
}
{children} {description && (
{description}
)}
{(endIcon || endSection) && (
{endIcon || endSection}
)}
); } ); function itemClassName({ className, isSelected, isActive, isDisabled, showCheckmark, endIcon, endSection, radius, padding: userPadding, }: ListItemBaseProps): string { let state: string = ''; if (isDisabled) { state = 'text-disabled pointer-events-none'; } else if (isSelected) { if (isActive) { state = 'bg-primary/focus'; } else { state = 'bg-primary/selected hover:bg-primary/focus'; } } else if (isActive) { state = 'hover:bg-fg-base/15 bg-focus'; } else { state = 'hover:bg-hover'; } let padding; if (userPadding) { padding = userPadding; } else if (showCheckmark) { if (endIcon || endSection) { padding = 'pl-8 pr-8'; } else { padding = 'pl-8 pr-24'; } } else { padding = 'px-20'; } return clsx( 'w-full select-none outline-none cursor-pointer', 'py-8 text-sm truncate flex items-center gap-10', !isDisabled && 'text-main', padding, state, className, radius ); }