import React from 'react' ; import { EuiFlexGroup } from '@elastic/eui' ; import { PresentablePickerItem , Item } from './presentable_picker_item' ; export type { Item } from './presentable_picker_item' ; export interface PresentablePickerProps { items : Item [ ] ; context : unknown ; onSelect : ( itemId : string ) => void ; } export const TEST_SUBJ_ACTION_FACTORY_ITEM = 'actionFactoryItem' ; const firefoxBugFix = { willChange : 'opacity' , } ; const sort = ( f1 , f2 ) : number => f2 . order - f1 . order ; export const PresentablePicker = ( { items , context , onSelect , } ) => { /**
     * Make sure items with incompatible license are at the end.
     */ const itemsSorted = React . useMemo ( ( ) => { const compatible = items . filter ( ( f ) => f . isLicenseCompatible ?? true ) ; const incompatible = items . filter ( ( f ) => ! ( f . isLicenseCompatible ?? true ) ) ; return [ ... compatible . sort ( sort ) , ... incompatible . sort ( sort ) ] ; } , [ items ] ) ; if ( items . length === 0 ) { return < div > No action factories to pick from . < /div>; } return ( < EuiFlexGroup gutterSize = "m" responsive = { false } wrap = { true } style = { firefoxBugFix } > { itemsSorted . map ( ( item ) => ( < PresentablePickerItem key = { item . id } item = { item } context = { context } onSelect = { onSelect } / > ) ) } < /EuiFlexGroup>); } ;