import { css } from '@patternfly/react-styles'; import styles from '@patternfly/react-styles/css/components/DualListSelector/dual-list-selector'; import { DualListSelectorListItem } from './DualListSelectorListItem'; import * as React from 'react'; import { DualListSelectorListContext } from './DualListSelectorContext'; /** Acts as the container for DualListSelectorListItem sub-components. */ export interface DualListSelectorListProps extends React.HTMLProps { /** Content rendered inside the dual list selector list. */ children?: React.ReactNode; /** @hide forwarded ref */ innerRef?: React.RefObject; } export const DualListSelectorListBase: React.FunctionComponent = ({ children, innerRef, ...props }: DualListSelectorListProps) => { const { isTree, ariaLabelledBy, focusedOption, displayOption, selectedOptions, id, options, isDisabled } = React.useContext(DualListSelectorListContext); const hasOptions = () => options.length !== 0 || (children !== undefined && (children as React.ReactNode[]).length !== 0); return (

{options.length === 0 ? children : options.map((option, index) => { if (displayOption(option)) { return ( {option} ); } return; })}

); }; DualListSelectorListBase.displayName = 'DualListSelectorListBase'; export const DualListSelectorList = React.forwardRef( (props: DualListSelectorListProps, ref: React.Ref) => ( } {...props} /> ) ); DualListSelectorList.displayName = 'DualListSelectorList';