import * as React from 'react'; import styles from '@patternfly/react-styles/css/components/Check/check'; import { css } from '@patternfly/react-styles'; import { PickOptional } from '../../helpers/typeUtils'; import { getOUIAProps, OUIAProps, getDefaultOUIAId } from '../../helpers'; export interface MenuToggleCheckboxProps extends Omit, 'type' | 'onChange' | 'disabled' | 'checked'>, OUIAProps { /** Additional classes added to the MenuToggleCheckbox */ className?: string; /** Flag to show if the checkbox selection is valid or invalid */ isValid?: boolean; /** Flag to show if the checkbox is disabled */ isDisabled?: boolean; /** Flag to show if the checkbox is checked when it is controlled by React state. * To make the checkbox uncontrolled instead use the defaultChecked prop, but do not use both. */ isChecked?: boolean | null; /** Flag to set the default checked value of the checkbox when it is uncontrolled by React state. * To make the checkbox controlled instead use the isChecked prop, but do not use both. */ defaultChecked?: boolean | null; /** A callback for when the checkbox selection changes */ onChange?: (checked: boolean, event: React.FormEvent) => void; /** Element to be rendered inside the */ children?: React.ReactNode; /** Id of the checkbox */ id: string; /** Value to overwrite the randomly generated data-ouia-component-id.*/ ouiaId?: number | string; /** Set the value of data-ouia-safe. Only set to true when the component is in a static state, i.e. no animations are occurring. At all other times, this value must be false. */ ouiaSafe?: boolean; } class MenuToggleCheckbox extends React.Component { static displayName = 'MenuToggleCheckbox'; static defaultProps: PickOptional = { isValid: true, isDisabled: false, onChange: () => undefined as any }; constructor(props: MenuToggleCheckboxProps) { super(props); this.state = { ouiaStateId: getDefaultOUIAId(MenuToggleCheckbox.displayName) }; } handleChange = (event: React.FormEvent) => { this.props.onChange((event.target as HTMLInputElement).checked, event); }; calculateChecked = () => { const { isChecked, defaultChecked } = this.props; if (isChecked === null) { // return false here and the indeterminate state will be set to true through the ref return false; } else if (isChecked !== undefined) { return isChecked; } return defaultChecked; }; render() { const { className, isValid, isDisabled, isChecked, children, ouiaId, ouiaSafe, /* eslint-disable @typescript-eslint/no-unused-vars */ onChange, defaultChecked, id, ...props } = this.props; const text = children && ( {children} ); return ( elem && (elem.indeterminate = isChecked === null)} aria-invalid={!isValid} disabled={isDisabled} {...(defaultChecked !== undefined ? { defaultChecked } : { checked: isChecked })} {...getOUIAProps( MenuToggleCheckbox.displayName, ouiaId !== undefined ? ouiaId : this.state.ouiaStateId, ouiaSafe )} {...props} /> {text} ); } } export { MenuToggleCheckbox };