import * as React from 'react'; import styles from '@patternfly/react-styles/css/components/DualListSelector/dual-list-selector'; import { css } from '@patternfly/react-styles'; import { DualListSelectorTreeItemData } from './DualListSelectorTree'; import { Badge } from '../Badge'; import AngleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-right-icon'; import { flattenTree } from './treeUtils'; import { DualListSelectorListContext } from './DualListSelectorContext'; export interface DualListSelectorTreeItemProps extends React.HTMLProps { /** Content rendered inside the dual list selector. */ children?: React.ReactNode; /** Additional classes applied to the dual list selector. */ className?: string; /** Flag indicating this option is expanded by default. */ defaultExpanded?: boolean; /** Flag indicating this option has a badge. */ hasBadge?: boolean; /** Callback fired when an option is checked. */ onOptionCheck?: ( event: React.MouseEvent | React.ChangeEvent | React.KeyboardEvent, isChecked: boolean, itemData: DualListSelectorTreeItemData ) => void; /** ID of the option. */ id: string; /** Text of the option. */ text: string; /** Flag indicating if this open is checked. */ isChecked?: boolean; /** Additional properties to pass to the option checkbox. */ checkProps?: any; /** Additional properties to pass to the option badge. */ badgeProps?: any; /** Raw data of the option. */ itemData?: DualListSelectorTreeItemData; /** Flag indicating whether the component is disabled. */ isDisabled?: boolean; /** Flag indicating the DualListSelector tree should utilize memoization to help render large data sets. */ useMemo?: boolean; } const DualListSelectorTreeItemBase: React.FunctionComponent = ({ onOptionCheck, children, className, id, text, defaultExpanded, hasBadge, isChecked, checkProps, badgeProps, itemData, isDisabled = false, // eslint-disable-next-line @typescript-eslint/no-unused-vars useMemo, ...props }: DualListSelectorTreeItemProps) => { const ref = React.useRef(null); const [isExpanded, setIsExpanded] = React.useState(defaultExpanded || false); const { setFocusedOption } = React.useContext(DualListSelectorListContext); React.useEffect(() => { setIsExpanded(defaultExpanded); }, [defaultExpanded]); return (
- { onOptionCheck && onOptionCheck(evt, !isChecked, itemData); setFocusedOption(id); } } > {children && (
  { if (children) { setIsExpanded(!isExpanded); } e.stopPropagation(); }} onKeyDown={(e: React.KeyboardEvent) => { if (e.key === ' ' || e.key === 'Enter') { (document.activeElement as HTMLElement).click(); e.preventDefault(); } }} tabIndex={-1} >