import React from 'react' ; import Action from './Action' ; export interface ActionItem { name : string ; label : string ; faIcon : string ; shortcut ? : string ; destructive ? : boolean ; callback ( url ) : ( ) => void ; } interface Props { url : string ; actions : ActionItem [ ] ; children ? : React . ReactNode ; } export default function Actions ( props ) { function onActionClick ( e , callback ) { e . stopPropagation ( ) ; callback ( ) ; } return ( < div className = "actions" style = { css . actions } > { props . children } { props . actions . map ( ( action ) => ( < Action key = { action . name } callback = { ( e ) => onActionClick ( e , action . callback ( props . url ) ) } faIcon = { action . faIcon } label = { action . label } shortcut = { action . shortcut } destructive = { action . destructive } / > ) ) } < /div>); } const css = { actions : { width : '100%' , display : 'flex' , flexDirection : 'row' } } ;