generated from fahricansecer/boilerplate-fe
50 lines
1.7 KiB
TypeScript
50 lines
1.7 KiB
TypeScript
import { CheckboxCard as ChakraCheckboxCard } from '@chakra-ui/react';
|
|
import * as React from 'react';
|
|
|
|
export interface CheckboxCardProps extends ChakraCheckboxCard.RootProps {
|
|
icon?: React.ReactElement;
|
|
label?: React.ReactNode;
|
|
description?: React.ReactNode;
|
|
addon?: React.ReactNode;
|
|
indicator?: React.ReactNode | null;
|
|
indicatorPlacement?: 'start' | 'end' | 'inside';
|
|
inputProps?: React.InputHTMLAttributes<HTMLInputElement>;
|
|
}
|
|
|
|
export const CheckboxCard = React.forwardRef<HTMLInputElement, CheckboxCardProps>(function CheckboxCard(props, ref) {
|
|
const {
|
|
inputProps,
|
|
label,
|
|
description,
|
|
icon,
|
|
addon,
|
|
indicator = <ChakraCheckboxCard.Indicator />,
|
|
indicatorPlacement = 'end',
|
|
...rest
|
|
} = props;
|
|
|
|
const hasContent = label || description || icon;
|
|
const ContentWrapper = indicator ? ChakraCheckboxCard.Content : React.Fragment;
|
|
|
|
return (
|
|
<ChakraCheckboxCard.Root {...rest}>
|
|
<ChakraCheckboxCard.HiddenInput ref={ref} {...inputProps} />
|
|
<ChakraCheckboxCard.Control>
|
|
{indicatorPlacement === 'start' && indicator}
|
|
{hasContent && (
|
|
<ContentWrapper>
|
|
{icon}
|
|
{label && <ChakraCheckboxCard.Label>{label}</ChakraCheckboxCard.Label>}
|
|
{description && <ChakraCheckboxCard.Description>{description}</ChakraCheckboxCard.Description>}
|
|
{indicatorPlacement === 'inside' && indicator}
|
|
</ContentWrapper>
|
|
)}
|
|
{indicatorPlacement === 'end' && indicator}
|
|
</ChakraCheckboxCard.Control>
|
|
{addon && <ChakraCheckboxCard.Addon>{addon}</ChakraCheckboxCard.Addon>}
|
|
</ChakraCheckboxCard.Root>
|
|
);
|
|
});
|
|
|
|
export const CheckboxCardIndicator = ChakraCheckboxCard.Indicator;
|