false, searchInputAriaLabel = '', onFilterUpdate, onSearchInputChanged, onSearchInputClear, filterOption, id = getUniqueId('dual-list-selector-pane'), isDisabled = false, listMinHeight, ...props }: DualListSelectorPaneProps) => { const [input, setInput] = React.useState(''); const { isTree } = React.useContext(DualListSelectorContext); // only called when search input is dynamically built const onChange = (e: React.FormEvent, newValue: string) => { let filtered: React.ReactNode[]; if (isTree) { filtered = options .map((opt) => Object.assign({}, opt)) .filter((item) => filterInput(item as unknown as DualListSelectorTreeItemData, newValue)); } else { filtered = options.filter((option) => { if (displayOption(option)) { return option; } }); } onFilterUpdate(filtered, isChosen ? 'chosen' : 'available', newValue === ''); if (onSearchInputChanged) { onSearchInputChanged(e, newValue); } setInput(newValue); }; // only called when options are passed via options prop and isTree === true const filterInput = (item: DualListSelectorTreeItemData, input: string): boolean => { if (filterOption) { return filterOption(item as unknown as React.ReactNode, input); } else { if (item.text.toLowerCase().includes(input.toLowerCase()) || input === '') { return true; } } if (item.children) { return ( (item.children = item.children .map((opt) => Object.assign({}, opt)) .filter((child) => filterInput(child, input))).length > 0 ); } }; // only called when options are passed via options prop and isTree === false const displayOption = (option: React.ReactNode) => { if (filterOption) { return filterOption(option, input); } else { return option.toString().toLowerCase().includes(input.toLowerCase()); } }; return (
{title && (
{title}
)} {(actions || searchInput || isSearchable) && (
{(isSearchable || searchInput) && (
{searchInput ? ( searchInput ) : ( onChange(e as React.FormEvent, '') } isDisabled={isDisabled} aria-label={searchInputAriaLabel} /> )}
)} {actions &&
{actions}
}
)} {status && (
{status}
)} {!isTree && ( onOptionSelect(e, index, isChosen, id)} displayOption={displayOption} id={`${id}-list`} isDisabled={isDisabled} {...(listMinHeight && { style: { [cssMenuMinHeight.name]: listMinHeight } as React.CSSProperties })} > {children} )} {isTree && ( {options.length > 0 ? ( Object.assign({}, opt)) .filter((item) => filterInput(item as unknown as DualListSelectorTreeItemData, input) ) as unknown as DualListSelectorTreeItemData[]) : (options as unknown as DualListSelectorTreeItemData[]) } onOptionCheck={onOptionCheck} id={`${id}-tree`} isDisabled={isDisabled} /> ) : ( children )} )}
); }; DualListSelectorPane.displayName = 'DualListSelectorPane';