import * as React from 'react'; import { css } from '@patternfly/react-styles'; import styles from '@patternfly/react-styles/css/components/Dropdown/dropdown'; import { DropdownToggleProps } from './DropdownToggle'; import CaretDownIcon from '@patternfly/react-icons/dist/esm/icons/caret-down-icon'; import { Toggle } from './Toggle'; import { Badge, BadgeProps } from '../../../components/Badge'; export interface BadgeToggleProps extends DropdownToggleProps { /** HTML ID of dropdown toggle */ id?: string; /** Anything which can be rendered as dropdown toggle */ children?: React.ReactNode; /** Badge specific properties */ badgeProps?: BadgeProps; /** Classess applied to root element of dropdown toggle */ className?: string; /** Flag to indicate if menu is opened */ isOpen?: boolean; /** Label Toggle button */ 'aria-label'?: string; /** Callback called when toggle is clicked */ onToggle?: ( event: MouseEvent | TouchEvent | KeyboardEvent | React.KeyboardEvent | React.MouseEvent, isOpen: boolean ) => void; /** Element which wraps toggle */ parentRef?: any; /** The menu element */ getMenuRef?: () => HTMLElement; /** Forces active state */ isActive?: boolean; /** Disables the dropdown toggle */ isDisabled?: boolean; /** Display the toggle with no border or background */ isPlain?: boolean; /** Type to put on the button */ type?: 'button' | 'submit' | 'reset'; /** Allows selecting toggle to select parent */ bubbleEvent?: boolean; } export const BadgeToggle: React.FunctionComponent = ({ id = '', children = null, badgeProps = { isRead: true }, className = '', isOpen = false, 'aria-label': ariaLabel = 'Actions', parentRef = null, getMenuRef = null, isActive = false, isPlain = null, isDisabled = false, bubbleEvent = false, onToggle = () => undefined as void, // eslint-disable-next-line @typescript-eslint/no-unused-vars ref, // Types of Ref are different for React.FunctionComponent vs React.Component ...props }: BadgeToggleProps) => ( {children} ); BadgeToggle.displayName = 'BadgeToggle';