61 lines
1.8 KiB
TypeScript
61 lines
1.8 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;
|