wix-style-react
Version:
wix-style-react
54 lines • 2.58 kB
TypeScript
import * as React from 'react';
import { TooltipCommonProps } from '../common';
import { ValuesOf } from '../utils/typeUtils';
import { LABEL_TEXT_SIZE, SELECTION_AREA, V_ALIGN, SELECTION_AREA_SKIN } from './constants';
export interface CheckboxProps {
/** Applies a data-hook HTML attribute that can be used in tests */
dataHook?: string;
/** Specifies whether a checkbox is selected */
checked?: boolean;
/** Specifies whether a checkbox is disabled */
disabled?: boolean;
/** Specifies whether a checkbox has an error */
hasError?: boolean;
/** Assigns a unique identifier for the checkbox */
id?: string;
/** Specifies whether a checkbox is in an indeterminate state */
indeterminate?: boolean;
/**
* The error message when there's an error
* @deprecated use tooltipContent instead
* */
errorMessage?: string;
/** Controls the selection area highlight visibility */
selectionArea?: CheckboxSelectionArea;
/** Controls checkbox alignment to the label on the Y axis */
vAlign?: CheckboxVAlign;
/** Controls the size of the checkbox label */
size?: CheckboxLabelSize;
/** Defines a callback function which is called every time the checkbox state is changed */
onChange?: React.ChangeEventHandler<HTMLInputElement>;
/** Specifies a CSS class name to be appended to the component’s root element */
className?: string;
/** Allows you to pass all common tooltip props.
* @linkTypeTo components-overlays--tooltip
*/
tooltipProps?: TooltipCommonProps;
/** Defines a message to be displayed in a tooltip. Tooltip is displayed on a checkbox hover. */
tooltipContent?: React.ReactNode;
/** Sets the design of the selection area */
selectionAreaSkin?: CheckboxSelectionAreaSkin;
/** Sets the amount of white space around the checkbox label in pixels */
selectionAreaPadding?: React.CSSProperties['padding'];
/** Defines a checkbox label */
children?: React.ReactNode;
/** Truncates text that is longer than its parent container and displays ellipsis at the end of the last line. */
ellipsis?: boolean;
/** Truncates label text at a specific number of lines when using ellipsis */
maxLines?: number;
}
export type CheckboxLabelSize = ValuesOf<typeof LABEL_TEXT_SIZE>;
export type CheckboxSelectionArea = ValuesOf<typeof SELECTION_AREA>;
export type CheckboxVAlign = ValuesOf<typeof V_ALIGN>;
export type CheckboxSelectionAreaSkin = ValuesOf<typeof SELECTION_AREA_SKIN>;
//# sourceMappingURL=Checkbox.types.d.ts.map