import React from 'react' ; import { ActionFactory , BaseActionFactoryContext } from '../../dynamic_actions' ; import { PresentablePicker , Item } from '../presentable_picker' ; export interface ActionFactoryPickerProps { actionFactories : ActionFactory [ ] ; context : unknown ; onSelect : ( actionFactory : ActionFactory ) => void ; } export const ActionFactoryPicker = ( { actionFactories , context , onSelect , } ) => { const items = React . useMemo ( ( ) => { return actionFactories . map ( ( actionFactory ) => { const item = { id : actionFactory . id , order : actionFactory . order , getDisplayName : ( ctx ) => actionFactory . getDisplayName ( ctx as BaseActionFactoryContext ) , getIconType : ( ctx ) => actionFactory . getIconType ( ctx as BaseActionFactoryContext ) , getDisplayNameTooltip : ( ) => '' , isCompatible : ( ctx ) => actionFactory . isCompatible ( ctx as BaseActionFactoryContext ) , MenuItem : actionFactory . MenuItem , isBeta : actionFactory . isBeta , isLicenseCompatible : actionFactory . isCompatibleLicense ( ) , } ; return item ; } ) ; } , [ actionFactories ] ) ; const handleSelect = React . useCallback ( ( id ) => { if ( ! onSelect ) return ; const actionFactory = actionFactories . find ( ( af ) => af . id === id ) ; if ( ! actionFactory ) return ; onSelect ( actionFactory ) ; } , [ onSelect , actionFactories ] ) ; return < PresentablePicker items = { items } context = { context } onSelect = { handleSelect } / > ; } ;